Orchard, a comprehensive health and wellbeing portal that focusses on all major aspects of health and wellbeing, including fitness, nutrition, and mental wellbeing. An an end-to-end design from concept to prototype, I performed competitive analyses and conducted user research and usability tests, iterating and refining the design from wireframes to high-fidelity prototypes.
Design a responsive health and wellbeing portal that allows health-conscious users to log in, record their health and medical information, and access general physical and mental wellbeing features.
For this project I created a prototype for a comprehensive health and wellbeing platform. An all-inclusive, one-stop portal for digital health and wellbeing needs, Orchard would be a more convenient alternative to having to switch between different apps with different information architecture, incongruent designs, and incompatible data exchange infrastructure.
This was a highly involved solo project that included understanding the problem and business requirements, competitive analysis, creating user stories, user personas, user journey maps, and illustrating user flows. I created a sitemap and prototyped the product, iterating from low- to mid- to high-fidelity prototypes. I conducted usability tests, analyzed results, and made improvements and future recommendations. I applied visual design principles, addressed user accessibility issues, prepared design documentation, and peer reviewed the app to further improve the design.
A high-fidelity, mobile-first design prototype for a responsive health and wellbeing portal that simplifies meeting health and wellbeing goals and needs. Orchard also takes into consideration inclusivity and accessibility with inclusive design, safeguards health and medical information with a sign-up and log-in requirement that is privacy appropriate. The app also offers additional support and education to users through articles and guides to help them on their journey to healthier and more balanced living and includes a gamified component to promote healthy behaviors.
Solo project, with peer review
Competitive analysis & product requirements
User research & analysis
Information architecture
Interaction design
Visual design
Prototyping
Usability testing
Accessibility auditing
January 2022 - August 2022
Health and fitness is an increasingly important part of our lives. Experts think that in the near the future, the majority of our income will be spent on healthcare and insurance. Consumers need more effective ways of tracking and meeting all aspects of health and wellness needs. These include:
1. An overview of individual health and wellness information and goal tracking
2. Programs and activities to address individual concerns and achieve health goals
3. Up-to-date and relevant health information and research
This platform should be inclusively designed for users of different backgrounds and needs.
We will know this problem has been address when user engagement with the portal is high (i.e. 80% of those who sign up use the portal for wellness purposes or to check health and wellness goals at least once a week), and user satisfaction reports and health and wellness metrics such as ratings and improved health outcomes.
I identified major competitors in the market of comprehensive health and wellness platforms, most of which were corporate employee health platforms. This led me to believe there was a market for a consumer version of the product.
Now that I had a better idea of the problem and competitive landscape, I was able to set the business requirements with a Business Requirements Document (BRD).
I created user stories to break down product requirements into executable pieces.
"As a new user, I would like to be guided through initial use of the app so that I can easily get started using the app right away."
"As someone who finds initial text information difficult to process, I would like an onboarding process that involves me in using app features so that I learn and remember from simple input activities."
"As a frequent user, I would like to sign up and log in in order to access my stored information."
"As a busy user, I would like a streamlined log in process so that I can access the app quickly and easily."
"As someone invested in their health and wellness, I want a dashboard to easily access all the tools and information I am interested in and see my overall status."
"As a user I would like a menu in order to navigate the application, change settings, and access features."
"As a user who likes to have more information and options, I would like a menu that gives me access to extra features beyond base app features."
"As someone who is trying to improve their fitness, I would like a way of tracking my activity so that I can understand and improve my habits and hold myself accountable."
"As someone with physician-prescribed physical activity needs who finds it difficult to track and remember requested information, I need a fitness activity tracker so that I can share my activity and progress with my physician."
"As a wearable device user, I would like to be able to integrate my device with the app so that I can automatically track activity levels."
"As a user of another popular app that tracks health and fitness, I would like to be able to sync the information from that app so that I do not have to duplicate information logging."
"As someone who want to improve my overall health and well-being, I want engaging activities that help me improve my habits and/or lead to better health and well-being outcomes."
"As a user who has been tracking their health and well-being metrics, I would like personalized activities and programs that are relevant to my concerns and needs."
"As a sophisticated consumer of health and wellness information, I would like reliable, up-to-date education and training resources and tools to continuously improve my understanding of and ability to achieve better outcomes."
"As someone with basic health and well-being knowledge, I want accessible, easy to understand and easy-to-action information and advice."
"As a user I would like gamification features so that the app is fun and engaging to use."
Having completed the preparatory phase of researching the product and determining its functional requirements, I proceeded with research of the most relevant people to this project -- the potential users.
.png)
.png)
.png)
.png)
.png)
Based on my the user interviews, I created personas to define the target users of the app:
...and presented their potential motivations and behaviors with user journey maps:
Creating user flows helped me determine the screens that the app would eventually need, and made the app more user centered:
The next step was to define the sitemap. This was further refined through an open card sorting exercise with participants:
.png)
Once the user flows and app architecture were ready, I could then get started on designing the screens, first with wireframes.
Using the skeleton design of the wireframes, I added more complex interaction design in mid- to high-fidelity prototypes.
This was one of the most time-intensive parts of the project. It involved prep work, coordinating tests and participants, conducting the tests and revising plans and execution along the way, organizing and analyzing the results, and implementing the insights from those results.
Overall, it was a critical process that gave me great insights as a novice designer and helped me quite a lot in refining the app.
.jpg)
.png)
Six participants were tested. For a list of participants and basic demographic information, as well as Rainbow Spreadsheet analysis of results, click here.
For a detailed look at the Test Script, including a list of all the tasks tested, check out this doc:
Another usability testing technique I used and that is worth mentioning is preference testing. This was conducted on UsabilityHub and helped confirm one of the insights from the previous usability testing sessions to further improve the desktop prototype.
Now I focused on the visual design of the app, starting with the application of Gestalt principles:
Now that I had a more solidified visual design, I set about creating a style guide and pattern library. This not only help me define visual guidelines for the app, but the process helped further identify any problem areas and inconsistent visual elements. This style guide and pattern library continued evolving until the final prototype.
This was an important part of the process. I peer-reviewed the app with fellow students and received really useful feedback and implemented suggestions. For suggestions that I did not implement, I could see where they were coming from and provided reasons why it would not be appropriate for Orchard.
Throughout the process of refining the design, I had accessibility issues in mind and tried to fix them where I saw them. Now I focused on accessibility, identified remaining accessibility issues, determined strategies to fix them, and implemented these fixes.
Finally, I created a high-level plan for future iteration and improvement.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.