Context & Wireframes
Embedded Files
Product Context
After exploring multiple product concepts, we decided to move forward with the Balance App because it aligns most closely with our research insights and user needs. The app offers more comprehensive features and constant accessibility compared to the other options.
While tools like Google Calendar and task management apps offer basic scheduling, they fall short in providing strong motivation and adaptability to individual preferences. By focusing on user motivation, flexibility, and ease of use, the Balance App delivers a unique and effective solution for users looking to achieve balance in their daily lives.
Wireframes
Using our information architecture as a foundation, we developed wireframes to visualize the app’s layout and structure. These wireframes provided an extra low-fidelity representation of key screens, ensuring that navigation and core functionalities aligned with our persona Sophia’s needs. Building on our previous work, they helped us refine the placement of features like goal setting, progress tracking, and rewards. This step allowed us to test and iterate on the app’s usability before moving into high-fidelity prototyping, ensuring a smooth transition into the next phase of the design process.
Wireframe #1
The wireframe below illustrates the onboarding process, designed to help users navigate the app's interface and features seamlessly. It guides users in selecting their priorities and goal categories while providing the option to sync their calendars for a more integrated experience.
Wireframe #2
The wireframe below showcases key visuals after the onboarding process, highlighting the app's core functionality. Users can seamlessly add, edit, delete, and view their goals. The app features a unique snake schedule, which dynamically updates throughout the day, highlighting upcoming goals while greying out completed ones for a clear, intuitive experience.
These wireframes were built upon our information architecture diagram, providing a strong foundation for the low-fidelity prototype and overall app design. They helped shape the user experience by ensuring a clear structure and seamless functionality.
State Transition Diagram
This state transition diagram represents the process of adding or editing a goal on the app.
Page updated
Report abuse