Olive
is a mobile application designed to serve the health and wellness community by providing tools and resources that encourage a healthy lifestyle.
Olive is a project, where I took on the role of the UX/UI designer and researcher. As the sole designer, I aimed to create an intuitive app that simplifies health management for users.
To achieve this, I adhered to best practices in product design:
Research: Conducted SWOT and competitive analyses
Design: Created low and high-fidelity wireframes and prototypes.
Testing: Validated designs through user testing and integrated feedback to refine the app.
Problem
Most health and wellness apps lack user engagement due to a slow and complicated onboarding process, confusing navigation, lack of features for user personalization and privacy concerns. Unclear buttons, labels, and icons lead to frustration resulting in suboptimal user experience and dissatisfaction. These are some of the issues that impede the effectiveness of the app to promote positive behavior change for the user.
Solution
To address this issue, Olive was designed with a focus on simplicity and user-friendliness with encryption protocols to protect user data from unauthorized access. The app’s interface is clean and intuitive, ensuring that users can easily navigate through the app without feeling overwhelmed.
Interviews
In the initial phase of designing Olive, I recruited three individuals representing our app's diverse target audience to participate in detailed remote interviews. Using a script and a 12-question open-ended questionnaire, I explored their daily routines, health goals, and motivations for using wellness apps. These conversations were invaluable, providing deep insights into user needs and expectations. The information gathered directly informed the creation of a well-rounded persona, capturing the essence of our potential users and guiding the subsequent design decisions.
User Research Analysis
Through comprehensive user research, including in-depth interviews with our target audience, the insights gained have been pivotal in shaping the design and functionality of the Olive app. Here's how these insights are informing our design process:
Enhancing Accessibility and Inclusivity: Design a user interface that prioritizes accessibility and makes the login process simple and straightforward. This approach not only creates a positive first impression, but it also accommodates users with different levels of technical proficiency.
Health Tracking Challenges: One significant challenge identified was the complexity involved in testing the effectiveness and accuracy of health tracking features. To address this issue, I plan to integrate features that sync data from multiple wearable devices, making it easier for our users to track and log their activities.
Ad-Free Experience: Feedback indicated that users prefer minimal advertising. Keeping this in mind, I'll optimize the user experience by limiting ads, thereby enhancing user engagement and satisfaction.
Free Access to Full Features: Our research underscored the importance of accessibility to the app’s full functionality without cost. Offering a comprehensive set of features for free is expected to significantly increase user sign-ups and retention.
Meaningful User Outcomes: It is paramount that the app delivers substantial benefits. We are designing Olive not just as a tool for health management but as a platform that encourages a sense of accomplishment and meaningful outcomes for all users.
Personas
I created two distinct personas from the data collected. These personas represent the key characteristics and needs of our target users, and serve as a guide for the design and development process of Olive. The use of personas helps ensure that every design decision is aligned with the real needs and expectations of our audience, leading to a more user-centered and effective app.
User Journey
In the user journey section of my portfolio, I outlined the experiences of two possible scenarios that the individuals will encounter in the Olive app. Our target audience's primary needs and goals were reflected in the carefully crafted scenarios, which were derived from the insights gathered during the interview phase. By analyzing these journeys, I was able to identify key touchpoints, potential pain points, and opportunities for enhancing user satisfaction.
By basing the design of Olive on these user journeys, I ensured that the app addresses the diverse needs of its users, providing a seamless and engaging experience tailored to their unique lifestyles.
User Flows
I demonstrated how each step is meticulously crafted to align with the personas' objectives based on their daily routines. I have created a seamless experience that guides my target users through the app with ease and efficiency by comprehending their specific needs, habits, and challenges.
Integrating Health Metrics from Device Wearables
Input of Important Health Information
Personalizing Wellness Content and Recommendations
Through this detailed mapping of user activities, I demonstrate my ability to create a cohesive and user-centered experience that not only meets but enhances the personas' daily objectives. This approach makes the app an integral part of their routine, driving engagement through meaningful and satisfying interactions.
Information Architecture, Sitemap and Card Sorting
In the Information Architecture section of my portfolio, I highlight the inclusion of a sitemap and the use of card sorting to refine it, even though the primary focus of the project was on the mobile app. My proactive approach demonstrates my dedication to comprehensive planning and future-proofing the design.
Sitemap and Card Sorting: By creating a detailed sitemap, I ensured a clear and logical structure for the web version of the app. Card sorting exercises were conducted to gather insights from potential users, which helped to organize and prioritize content that aligned with their mental models. The process not only enhanced the user experience for the current project but also established a strong foundation for future web development.
This thorough planning demonstrates my skill in anticipating future needs and ensuring a seamless, scalable experience across multiple platforms.
Sketches and Wireframes
The fun part and where it all began to come to life, I started sketching low-fidelity wireframes to visualize the layout of the app. By using these wireframes as a brainstorming tool, I was able to choose the placement and arrangement of key elements based on the user flows derived from my personas.
The wireframes played a significant role in making sure that the app's design reflected the users' needs and preferences. My focus on creating an easy, clean, and straightforward interface allowed me to align the layout with what users wanted in an app.
These initial sketches provided a solid foundation for further development. They provided me with the opportunity to quickly iterate and refine the design before proceeding to higher fidelity versions. Additionally, further user testing will be implemented to polish the wireframes, ensuring the app becomes more user-centric and meets the users' needs effectively. The sketches were crucial in moving the project forward, as they helped transform insights from user research into practical design solutions.
Using Figma, I created high-fidelity wireframes to bring a more polished visual representation of the app to life. During this phase, I started conducting in-person user testing sessions where participants were required to complete specific tasks. These sessions allowed me to observe user interactions and identify areas that need improvement.
Throughout this process, I conducted several iterations based on user feedback to continually refine the design. Effectively meeting user needs and expectations was achieved through this iterative approach. The wireframes were transformed into a high-fidelity prototype after several refinements, which is now ready for further testing and eventual development.
Curious about my test plan and test script? Check them out here!
Usability Testing
I conducted a usability test with a clickable mid-fidelity prototype using Figma, recruiting six participants to perform specific tasks. This approach allowed me to gather critical insights into the app's design before proceeding to create high-fidelity wireframes.
The results from these tests were invaluable, providing essential feedback on what needed to be changed. Key insights included necessary adjustments to the layout, element placement, label changes, and icon replacements. This comprehensive feedback guided me in iterating the app design effectively.
To organize and prioritize these insights, I created an affinity map and a rainbow spreadsheet. These tools helped me easily reference and address the most critical changes, ensuring that the app design met user needs and expectations efficiently. This process was instrumental in refining the app and preparing it for the next stages of development.
Usability Test Result
The usability testing provided critical insights that guided significant improvements to the app's design. Here are some of the high-priority issues that were addressed:
Changing of icon label from health to wellness.
Grouping all related elements in one card.
Putting the labels inside the tile instead of outside.
UI
Design
I moved on to designing the final screens in Figma after resolving the initial usability issues identified during the first round of testing. My goal was to create a simple, clean, and bright visual style, aligning with popular guidelines such as Material Design.
In this phase, I meticulously incorporated all the insights gathered from user interviews and usability testing. I made sure that the design was not only visually appealing but also intuitive and user-friendly.
After designing the final screens, I gathered feedback from the design community by running another round of testing. This step was crucial to refine the design further and ensure it met the highest standards of usability and visual appeal. My goal was to gain constructive recommendations on what to edit and what to keep by engaging with other users in the design community.
Through this iterative process, my final design displays a comprehensive approach that incorporates user feedback, Material Design best practices, and a dedication to simplicity and clarity. Each element in the design was thoughtfully placed to enhance the user experience, making the app not only functional but also delightful to use.
Next Steps and What I Have Learned
The process of creating Olive taught me the value of user-centered design, iterative testing, and community feedback. After addressing initial usability issues, I designed the final screens in Figma, focusing on a simple, clean, and bright style following Material Design guidelines. Further user testing, particularly with the design community, provided valuable feedback for refinement.
The next steps involve conducting beta testing to uncover any remaining issues and gather comprehensive feedback. By analyzing this feedback, changes can be prioritized and implemented to ensure the app is intuitive and user-friendly. Revisiting key design elements like accessibility, navigation, and consistency will enhance the user experience. These learnings and processes have shaped Olive into a functional and delightful health and wellness app.
Thank you for reading my case study!
If you want to collaborate, please feel free to contact me! Social media? - Add me too!
Credits
Images and Icons provided by iStock, Freepik, Figma Icon Plugins
Headshot by Love Lens Photography