Selected Works
Selected Works
Submerge | Interactive Ocean Ecology
Submerge | Interactive Ocean Ecology
Submerge | Interactive
Ocean Ecology
Skills
Interaction Design, Game UX, Data Visualization, Information Architecture, Prototyping, User Flows, Spatial UX, Micro-interactions, Visual Systems
Skills
Interaction Design, Game UX, Data Visualization, Information Architecture, Prototyping, User Flows, Spatial UX, Micro-interactions, Visual Systems
Skills
Interaction Design, Game UX, Data Visualization, Information Architecture, Prototyping, User Flows, Spatial UX, Micro-interactions, Visual Systems
Role
UX/UI Designer
Role
UX/UI Designer
Role
UX/UI Designer
Duration
3 weeks | Individual Project
3 weeks | Individual Project
Duration
3 weeks | Individual Project
Tools
Figma, Aesprite, Figjam
Tools
Figma, Aesprite, Figjam
Tools
Figma, Aesprite, Figjam
The Problem
Students struggle to understand complex ocean ecosystems when static diagrams present multiple variables and relationships at once, causing cognitive overload and low engagement. Teachers also lack interactive tools to progressively reveal scientific complexity during instruction.
The Problem
Static ocean diagrams present too many relationships at once, overwhelming students, while teachers lack tools to progressively reveal ecosystem complexity.
The Solution
Designed a gamified, spatial interface that enables exploration of ocean zones while progressively revealing organisms, environmental data, and food web relationships.
The Solution
Designed a gameified, spatial learning interface that allows users to explore ocean zones, interact with organisms, and gradually uncover environmental data and food web relationships. Progressive disclosure, atmospheric feedback, and modular UI controls support intuitive understanding and adaptable teaching.
Designed a gameified, spatial learning interface that allows users to explore ocean zones, interact with organisms, and gradually uncover environmental data and food web relationships. Progressive disclosure, atmospheric feedback, and modular UI controls support intuitive understanding and
adaptable teaching.
Final Design
Game Concept
Submerge
An interactive deep-sea exploration game where users pilot a submarine to descend through ocean depth zones, discover marine organisms, and progressively unlock ecological relationships and environmental data. Through spatial navigation, atmospheric changes, and interactive inspection mechanics, players build an intuitive understanding of how pressure, temperature, biodiversity, and food webs shift across the ocean’s
vertical ecosystem.
Final Design
Submerge
An interactive deep-sea exploration game where users pilot a submarine to descend through ocean depth zones, discover marine organisms, and progressively unlock ecological relationships and environmental data. Through spatial navigation, atmospheric changes, and interactive inspection mechanics, players build an intuitive understanding of how pressure, temperature, biodiversity, and food webs shift across the ocean’s vertical ecosystem.
Game Concept
Game Concept
Submerge
An interactive deep-sea exploration game where users pilot a submarine to descend through ocean depth zones, discover marine organisms, and progressively unlock ecological relationships and environmental data. Through spatial navigation, atmospheric changes, and interactive inspection mechanics, players build an intuitive understanding of how pressure, temperature, biodiversity, and food webs shift across the ocean’s vertical ecosystem.
Early Mapping of the Experience
Collaborated to analyze existing oceanography diagrams and identify patterns in hierarchy, density, and relationship clarity. Mapped key learning and gameplay flows, including zone navigation, organism discovery, environmental data awareness, and progressive complexity control.
Process
Interaction Moments
OBservation
Establish spatial orientation and ecosystem context through depth cues, atmospheric visuals, and environmental overview.
Change
Adjust variables such as depth and filters to explore how conditions and ecological
relationships shift.
inspection
Select organisms or interactions to reveal layered educational details without disrupting
overall context.
Task Flow & Low-Fidelity Wireframes
Individually explored wireframe directions, then collaborated to synthesize the strongest concepts into a unified task flow. This process clarified the teaching sequence, interaction hierarchy, and progression of complexity before moving into visual design. Below is the final composite wireframe flow developed as a team.
Visual System
From this stage onward, I independently created the visual and interaction execution, designing the complete visual system and creating all environmental, creature, and interface assets that shaped the final experience.
Custom Pixel Visual System
All assets were designed pixel-by-pixel in Aseprite and built into modular, animated Figma components
Prototyping
Developed a high-fidelity interactive prototype in Figma to simulate full gameplay flow, including zone transitions, creature encounters, journal interactions, and dynamic interface states. Reusable component systems and connected screen sequences enabled rapid iteration while testing navigation clarity, interaction pacing, and progressive information reveal.
Process
Early Mapping of the Experience
Collaborated to analyze existing oceanography diagrams and identify patterns in hierarchy, density, and relationship clarity. Mapped key learning and gameplay flows, including zone navigation, organism discovery, environmental data awareness, and progressive complexity control.
Interaction Moments
OBservation
Establish spatial orientation and ecosystem context through depth cues, atmospheric visuals, and
environmental overview.
Change
Adjust variables such as depth and filters to explore how conditions and ecological relationships shift.
inspection
Select organisms or interactions to reveal layered educational details without disrupting overall context.
Task Flow & Low-Fidelity Wireframes
Individually explored wireframe directions, then collaborated to synthesize the strongest concepts into a unified task flow. This process clarified the teaching sequence, interaction hierarchy, and progression of complexity before moving into visual design. Below is the final composite wireframe flow developed as a team.
Choose Your Learning Path
Players begin by selecting a game mode that matches their preferred learning style, then choose an ocean zone to start their exploratory descent.
Encounter & Decide
As players enter a selected ocean zone, they encounter marine life and choose whether to investigate ecological relationships or continue exploring deeper environments.
Understand Your Position
Players reference the depth map to view their current location within the ocean’s vertical zones, reinforcing spatial awareness and ecological scale.
Uncover System Complexity
Filter controls allow users to progressively reveal food web structures and ecological interactions, supporting advanced learning and conceptual depth.
Zone Transition & Scale Awareness
Users select a new depth zone and receive a visual confirmation that communicates the magnitude of the descent and reinforces spatial understanding.
Unlock New Discoveries
Encountering marine life reveals key ecological insights and adds the species to a cumulative journal, allowing players to track learning progress and deepen understanding of each ocean zone.
Designing Learning
Through Interaction
Designing Submerge strengthened my ability to translate complex scientific systems into intuitive, interactive experiences. This project reinforced the value of progressive disclosure, spatial storytelling, and visual consistency in reducing cognitive overload while sustaining engagement. Creating the full visual system and interaction prototype independently also deepened my confidence in building scalable design solutions from concept through execution.
Reflections
High-Fidelity
Experience Walkthrough
Visual System
From this stage onward, I independently created the visual and interaction execution, designing the complete visual system and creating all environmental, creature, and interface assets that shaped the final experience.
Custom Pixel Visual System
All assets were designed pixel-by-pixel in Aseprite and built into modular, animated Figma components
Prototyping
Developed a high-fidelity interactive prototype in Figma to simulate full gameplay flow, including zone transitions, creature encounters, journal interactions, and dynamic interface states. Reusable component systems and connected screen sequences enabled rapid iteration while testing navigation clarity, interaction pacing, and progressive information reveal.
Process
Early Mapping of the Experience
Collaborated to analyze existing oceanography diagrams and identify patterns in hierarchy, density, and relationship clarity. Mapped key learning and gameplay flows, including zone navigation, organism discovery, environmental data awareness, and progressive complexity control.
Task Flow & Low-Fidelity Wireframes
Individually explored wireframe directions, then collaborated to synthesize the strongest concepts into a unified task flow. This process clarified the teaching sequence, interaction hierarchy, and progression of complexity before moving into visual design. Below is the final composite wireframe flow developed as a team.
Visual System
From this stage onward, I independently created the visual and interaction execution, designing the complete visual system and creating all environmental, creature, and interface assets that shaped the final experience.
Custom Pixel Visual System
All assets were designed pixel-by-pixel in Aseprite and built into modular, animated Figma components
Prototyping
Developed a high-fidelity interactive prototype in Figma to simulate full gameplay flow, including zone transitions, creature encounters, journal interactions, and dynamic interface states. Reusable component systems and connected screen sequences enabled rapid iteration while testing navigation clarity, interaction pacing, and progressive
information reveal.
Game Concept
Submerge
An interactive deep-sea exploration game where users pilot a submarine to descend through ocean depth zones, discover marine organisms, and progressively unlock ecological relationships and environmental data. Through spatial navigation, atmospheric changes, and interactive inspection mechanics, players build an intuitive understanding of how pressure, temperature, biodiversity, and food webs shift across the ocean’s vertical ecosystem.
Interaction Moments
OBservation
Establish spatial orientation and ecosystem context through depth cues, atmospheric visuals, and environmental overview.
Change
Adjust variables such as depth and filters to explore how conditions and ecological relationships shift.
inspection
Select organisms or interactions to reveal layered educational details without disrupting overall context.
Designing Learning Through Interaction
Designing Submerge strengthened my ability to translate complex scientific systems into intuitive, interactive experiences. This project reinforced the value of progressive disclosure, spatial storytelling, and visual consistency in reducing cognitive overload while sustaining engagement. Creating the full visual system and interaction prototype independently also deepened my confidence in building scalable design solutions from concept
through execution.
Reflections
High-Fidelity
Experience Walkthrough
Choose Your Learning Path
Players begin by selecting a game mode that matches their preferred learning style, then choose an ocean zone to start their exploratory descent.
Encounter & Decide
As players enter a selected ocean zone, they encounter marine life and choose whether to investigate ecological relationships or continue exploring deeper environments.
Understand Your Position
Players reference the depth map to view their current location within the ocean’s vertical zones, reinforcing spatial awareness and ecological scale.
Unlock New Discoveries
Encountering marine life reveals key ecological insights and adds the species to a cumulative journal, allowing players to track learning progress and deepen understanding of each ocean zone.
Uncover System Complexity
Filter controls allow users to progressively reveal food web structures and ecological interactions, supporting advanced learning and conceptual depth.
Zone Transition & Scale Awareness
Users select a new depth zone and receive a visual confirmation that communicates the magnitude of the descent and reinforces spatial understanding.
Designing Learning Through Interaction
Designing Submerge strengthened my ability to translate complex scientific systems into intuitive, interactive experiences. This project reinforced the value of progressive disclosure, spatial storytelling, and visual consistency in reducing cognitive overload while sustaining engagement. Creating the full visual system and interaction prototype independently also deepened my confidence in building scalable design solutions from concept through execution.
Reflections
High-Fidelity
Experience Walkthrough
Choose Your Learning Path
Players begin by selecting a game mode that matches their preferred learning style, then choose an ocean zone to start their exploratory descent.
Encounter & Decide
As players enter a selected ocean zone, they encounter marine life and choose whether to investigate ecological relationships or continue exploring deeper environments.
Understand Your Position
Players reference the depth map to view their current location within the ocean’s vertical zones, reinforcing spatial awareness and ecological scale.
Unlock New Discoveries
Encountering marine life reveals key ecological insights and adds the species to a cumulative journal, allowing players to track learning progress and deepen understanding of each ocean zone.
Uncover System Complexity
Filter controls allow users to progressively reveal food web structures and ecological interactions, supporting advanced learning and conceptual depth.
Zone Transition & Scale Awareness
Users select a new depth zone and receive a visual confirmation that communicates the magnitude of the descent and reinforces spatial understanding.
Reflections
Designing Learning Through Interaction
Designing Submerge strengthened my ability to translate complex scientific systems into intuitive, interactive experiences. This project reinforced the value of progressive disclosure, spatial storytelling, and visual consistency in reducing cognitive overload while sustaining engagement. Creating the full visual system and interaction prototype independently also deepened my confidence in building scalable design solutions from concept through execution.
Early Mapping of the Experience
Collaborated to analyze existing oceanography diagrams and identify patterns in hierarchy, density, and relationship clarity. Mapped key learning and gameplay flows, including zone navigation, organism discovery, environmental data awareness, and progressive complexity control.
Process
Interaction Moments
OBservation
Establish spatial orientation and ecosystem context through depth cues, atmospheric visuals, and environmental overview.
Change
Adjust variables such as depth and filters to explore how conditions and ecological relationships shift.
inspection
Select organisms or interactions to reveal layered educational details without disrupting overall context.
Task Flow & Low-Fidelity Wireframes
Individually explored wireframe directions, then collaborated to synthesize the strongest concepts into a unified task flow. This process clarified the teaching sequence, interaction hierarchy, and progression of complexity before moving into visual design. Below is the final composite wireframe flow developed as a team.
Visual System
From this stage onward, I independently created the visual and interaction execution, designing the complete visual system and creating all environmental, creature, and interface assets that shaped the final experience.
Custom Pixel Visual System
All assets were designed pixel-by-pixel in Aseprite and built into modular, animated Figma components
Prototyping
Developed a high-fidelity interactive prototype in Figma to simulate full gameplay flow, including zone transitions, creature encounters, journal interactions, and dynamic interface states. Reusable component systems and connected screen sequences enabled rapid iteration while testing navigation clarity, interaction pacing, and progressive information reveal.
High-Fidelity
Experience Walkthrough
Choose Your Learning Path
Players begin by selecting a game mode that matches their preferred learning style, then choose an ocean zone to start their exploratory descent.
Encounter & Decide
As players enter a selected ocean zone, they encounter marine life and choose whether to investigate ecological relationships or continue exploring deeper environments.
Understand Your Position
Players reference the depth map to view their current location within the ocean’s vertical zones, reinforcing spatial awareness and ecological scale.
Unlock New Discoveries
Encountering marine life reveals key ecological insights and adds the species to a cumulative journal, allowing players to track learning progress and deepen understanding of each ocean zone.
Uncover System Complexity
Filter controls allow users to progressively reveal food web structures and ecological interactions, supporting advanced learning and conceptual depth.
Zone Transition & Scale Awareness
Users select a new depth zone and receive a visual confirmation that communicates the magnitude of the descent and reinforces spatial understanding.
Ryan.markley@live.com
Romarkle@ncsu.edu
(919) 818- 4747
ryan.markley@live.com
(919) 818- 4747
Continue Exploring
Continue Exploring
Guerlain
A collaborative game UI design project that explore immersive, interactive storytelling.
View Project
Ryan.markley@live.com
Romarkle@ncsu.edu
(919) 818- 4747
Ryan.markley@live.com
Romarkle@ncsu.edu
(919) 818- 4747