top of page
BELOW THE SURFACE APP ui Design
The Goal
My goal for this project was to master InVision Studio while creating an interactive education app based on the brand National Geographic. I made the decision to select a brand so that I could practice aligning with a specific brand identity and using branded assets. I challenged myself throughout this project to include several interactive elements while also remaining true to the brand identity. Using Adobe CC and InVision Studio, I designed, animated, and prototyped the app.
Key Skills: UI Design | Prototyping | Animation
Learn the InVision Studio interface, including how to animate and prototype
Create a fun and interactive interface for user engagement
Provide users with information about the different layers of the ocean
Create a visual design that matches the National Geographic brand identity
The PROCESS
Tools used
After deciding on National Geographic as the brand I wanted to focus on, I began researching and gathering the information relevant to the topic. Next, I moved on to designing the app itself by playing around with design elements. I settled on a design style that is visually bold while also making sure that the information is clearly identified and accessible. I then moved on to learning how to prototype with InVision Studio. After this stage and a few final design adjustments, I feel confident with my project result and the InVision Studio skills that I was able to learn along the way.
InVision Studio
Adobe Illustrator
Adobe Photoshop
Wireframing Goals
Easy to understand
Fun and simple to use
Keeps users engaged
Bold sans
serif typeface
Color gradient correlating to ocean depth
Interactive swiping design
Bright and engaging graphics
The Design
NExt steps
My next step would be to user test this prototype. In order to accomplish my stated goals, it is essential to gain feedback from users about information accessibility, ease of use, and overall appearance for example. Some sample questions that I would ask about information accessibility and ease of use may include:
"Talk me through the actions you would take to find information on the Bathypelagic ocean zone."
"Where would you go to find out the temperature of the Mesopelagic ocean zone?"
bottom of page