OLIVE
Designing an Inclusive & Responsive Web App Using Mobile-First Principles
Overview
The goal of this project was to create an inclusive responsive web application that would allow users to keep track of their medical information, as well as access general physical and mental wellbeing features.
When was this?
Jul-Sep 2021
My role
User Interviews, Competitive Analysis, Information Architecture, Interaction Design, Usability Testing, Visual design, Prototyping, Design language Document.
The Challenge
Taking care of our health is extremely important. However, doing so is not as easy as it should be. The right to health is a fundamental part of our human rights, but still not everyone has access to health care resources. Although there are many health and wellness apps and websites, a lot of them are not designed to accommodate a diverse group of users, as they do not properly adapt to different screen resolutions and are not accessible for users with visual, auditory, cognitive and other types of impairments.
56% Of internet users worldwide utilize mobile devices more than desktops or tablets (StatCounter, 2021).
15% of the world’s population has some form of disability (WHO, 2011).
User Centered Design Process
1- Inspiration
I needed to further understand the problem I was trying to solve. I did this by conducting a thorough competitive analysis. I later recruited participants to conduct user interviews in order to learn more about the experiences users have had with health & wellness apps in the past.
2 - Conceptualization
Using feedback I gathered from the participants, I was able to identify my users’ goals and create personas to help me better understand user demographics, needs, goals, emotions, behaviors, fears, and limitations. Additionally, I created task flows and mapped out user flows as well as site maps to outline the experiences that my users would have as they interact with the app I was designing. Moreover, I used other information architecture methods such as card sorts to further understand the different mental models of users.
3- Iteration
The next step was to visually brainstorm solutions for each of the task flows by creating low, high, and medium fidelity wireframes. I later turned my wireframes into prototypes and tested them with a new group of participants. From the usability tests, I collected a lot of great insight that allowed me to finalize the design of my app.
Inspiration
User Research
I found three participants who matched my users’ characteristics and schedule interviews with those individuals. I interviewed them with 3 goals in mind:
To better understand the behavior of users around health & wellness
To understand user pain points with existing health apps
To determine features users would like to see in future health apps
User research analysis
Insight 1: Users need an app that offers a lot more features than the current health apps available to them.
Insight 2: In previous apps they used, users often had trouble retrieving their saved information
Insight 3: Trust and security were very important components that made the participants use the apps that they were using.
Conceptualization
User Personas
Using the insights I gathered during the user interviews, I was able to create user personas that highlighted the needs of my user group based on the research I conducted. Samantha and Roberto allowed me to keep my users in mind as I began the ideation phase.
User Journey Maps
I created user journey maps to visualize the processes my personas would go through in order to accomplish their goals
User Flows
Once I understood what my personas were trying to accomplish, I was able to map out user flows to outline the journeys they would take to complete a task on the app I was designing.
Iteration
Low-fidelity Prototypes
I began the iteration phase by sketching low-fidelity paper prototypes for the 3 most important features of my app.
Mid-Fidelity Prototypes
Using Balsamiq, I translated my low-fidelity prototypes into mid-fidelity prototypes.
Moderated remote Usability Testing
6 usability tests of Olive’s initial high fidelity mobile prototypes were performed via Zoom to keep everyone involved safe. All of the 6 participants were between 26 to 40+ years old. They completed all tasks as instructed and communicated their feedback.
Scenario Tasks
Analyzing the data
Testing my app with real users played a critical part in creating a well designed inclusive user experience. This phase required me to think analytically to properly analyze the data I collected from the participants. Take a look at some of the deliverables from my usability tests below.
Designing For Accessibility
Finally, To achieve my goal of designing an accessible app, I walked through each function of my app one by one, and created a list of each issues I found that violated the principles mentioned in the Web Content Accessibility Guidelines or WCAG, as well as general improvements to accessibility. Once I identified all areas for improvement, I formulated a strategy for reaching A, AA, or AAA compliance and refined my designed accordingly.
Accessibility issues I had to fix:
Forms with disappearing labels
Articles without Text-to-Speech
Lack of a voice search option
Small text and icons
High-Fidelity Prototypes
The final iterations of my prototypes were made to address Olive’s accessibility issues and usability errors I discovered through usability testing and the rainbow spreadsheet. I made updates to my prototypes based on the problems I had identified as being most critical.
App Video Walk-through
Interactive Prototype
Click on image to view prototype in Adobe XD :)
Reflection
The final phase involved developing a desktop version of Olive, transforming it into a fully responsive web application. By adopting a mobile-first design approach, I ensured optimal navigation for smaller screens, enhancing user experience. This strategy also provides a significant business advantage, as Google's indexing and ranking primarily focus on mobile versions of websites. The most valuable lesson from this project was the critical importance of accessibility in design, ensuring that everyone has equal access to online resources. Ultimately, accessible designs benefit all users by making digital interactions simpler and more effective.
