Project: Take Steps
A Mobile Application
Overview
This app’s UX/UI design prioritizes clarity, simplicity, and inclusivity with a sleek black-and-white theme for readability. Simple icons and descriptive labels enhance usability, while the minimalist design reduces cognitive load. Hover information on the sharing page offers guidance without clutter. Key features include realistic goal setting with real-time feedback, social sharing and challenges, and rewards from top sports brands. The app inspires users to adopt healthier walking habits.
The Team & My Role
This project involved a collaborative effort from three team members, each conducting individual user studies and creating user flows and mock-ups. After reviewing each other’s research, personas, user flows, and designs, the team combined their efforts into the final product.
My individual contributions included:
- User Research
- Information Architecture
- Wireframing
- Creating Clickable Mockups
Additionally, I led the consolidation of the team’s work, ensuring a cohesive and unified final design.
Sample Persona
During our user research, we identified three personas and, based on feedback received during our proposal presentation, decided to focus on one. We refined and strengthened this persona to better address the user needs. Here is the result of our user research.
Information Architecture
Following a card sorting exercise, we finalized a navigation schema consisting of three top-level items, each with three sub-levels. This structure ensures that users can easily access the most important features without feeling overwhelmed. Additionally, we conducted usability testing to validate the effectiveness of our navigation design.
Low Fidelity Wireframes
Creating low fidelity wireframes was a crucial step in our design process, guided by Apple’s Human Interface Guidelines (HIG) to ensure a user-friendly experience. We started by outlining the fundamental structure of our application, focusing on simplicity and clarity. Our goal was to create a seamless and intuitive user journey, emphasizing key functionalities without distractions. By adhering to Apple’s HIG, we ensured that our wireframes reflected a consistent and familiar interface, enhancing usability. This process allowed us to lay a solid foundation for a design that is not only aesthetically pleasing but also highly functional and user-centric.
Screen Flow
Following the creation of low fidelity wireframes, we advanced to high fidelity wireframes and developed comprehensive screen flows to illustrate the application’s navigation and functionality. These screenflows served as a detailed map of the user experience, showcasing the interaction between different screens and the logical progression through various tasks. High fidelity wireframes provided a realistic preview of the final product, incorporating visual design elements and interactive features. This phase allowed us to identify and address potential usability issues, ensuring a smooth and cohesive user journey from start to finish.
Usability Test Results
In the final phase of our design process, we developed a clickable mockup to facilitate usability testing. This interactive prototype allowed users to experience the application’s flow and functionality in a realistic manner. We conducted usability tests, gathering feedback on the overall user experience, interface design, and navigation. By observing users interact with the mockup, we identified areas for improvement and gained insights into their preferences and pain points. We then synthesized these results, prioritizing enhancements that would significantly boost usability and satisfaction.
Clickable Prototype
Explore the interactive prototype by clicking the button below. Get a firsthand look at the design and features, and experience how the app navigates and functions in real time!
Let’s get in touch!
I can help you design your website, web app, or mobile app. If you’re interested, feel free to reach out to me on social media or email. I’m always happy to talk!