Adventure Awaits
App Prototype - Created using Figma
Project Overview
In my interaction design class, I studied heuristics and the dimensions and laws of interaction design. The class also covered how to wireframe (lo-fi, high-fi, paper), create interactive prototypes, utilize XD tools and artboards, UI kits, and responsive design. I also learned how to create a case study, and share/test prototypes.
For this class, the final project was creating a fully functioning, elegant, and reactive application to solve a problem that we witness in everyday life. I created the application Adventure Awaits.
Adventure Awaits will help users keep track of and accomplish goals in a simple and engaging way. Different from traditional pen and paper lists, spreadsheets, and digital notepads, the application's beautiful user interface and easy to create and modify goal lists will inspire users to aspire to achieve their full potential, all the while keeping organized and connected to others.
Technologies Used
Key Features
- Goal tracking and management
- Beautiful and intuitive UI
- Easy goal creation and modification
- Social connectivity features
- Engaging user experience
Design Process
My process began with brainstorming and thinking about user goals and needs. I then proceeded to create a simple paper wireframe to outline my ideas. After that, I used Figma to create a low-fidelity wireframe, and once I was satisfied with the basic design, added color and graphics to create a high-fidelity wireframe. Next, I added animations between the frames. Finally, I had two users test the application and updated the application based on their feedback.
Process Steps
1. Brainstorming
Identified user goals and needs
2. Paper Wireframe
Created initial concept sketches
3. Digital Wireframes
Low-fi to high-fi progression
4. User Testing
Tested with users and iterated
Wireframe Evolution
Below is the transformation of a primary screen from a paper wireframe to a low-fi wireframe to a high-fi wireframe.
Paper Wireframe
Initial concept sketched by hand to quickly explore ideas and layout
Low-Fi Wireframe
Digital wireframe focusing on structure and functionality without visual design
High-Fi Wireframe
Final design with colors, typography, and visual elements for realistic user experience
Key Learnings
Design Principles
- • Heuristics and interaction design laws
- • User-centered design approach
- • Responsive design considerations
- • Accessibility best practices
Technical Skills
- • Advanced Figma prototyping
- • Interactive animation design
- • Component-based design systems
- • User testing methodologies
Explore the Prototype
Experience the full interactive prototype on Figma to see the complete user journey and interactions.