Olives Mobile App
Case Study
THE APP EVOLUTION
THE PROBLEM
INSPIRATION: As a UX designer, my curiosity was piqued when I stumbled upon the personal struggles of my friends, Nupur and Rico. Over a casual conversation, Nupur recounted the chaos of managing her during and post-pregnancy healthcare appointments while Rico lamented the challenges of caring for his ailing parents from afar. Their stories inspired me deeply, sparking a desire to delve deeper into their and others' experiences to uncover the underlying pain points, needs, and motivations while interacting with healthcare systems.
ISSUES WITH AVAILABLE APPS:
-
Lack of Integration with Healthcare Providers
-
Lack of Personalization
-
Complex User Interface
PROBLEM STATEMENT
Health and Wellness enthusiasts require an easy-to-use app to manage family members' health data and facilitate seamless communication with healthcare providers because it will help them keep themselves and their families healthy with convenience.
We will know this to be true when we see each app user is assigned to a healthcare professional within the app and there are 3 or more monthly conversations between them.
TARGET AUDIENCE:
The target audience for an Olive app can be quite diverse. The primary audience at this point would include:
Families, Parents, Caregivers, Health-Conscious Individuals, Seniors, Health Care Providers.
MY ROLE
As the UX and UI designer for the Olives mobile app project, I conducted user interviews and created user personas to guide design decisions. With the support of seniors in the team, I iteratively refined the app's interface based on user feedback, ensuring it exceeded expectations through discussions at different stages of development.
Design Thinking Process I Followed -
1. EMPATHIZE
Understanding the User
Through initial interviews and surveys, we gathered crucial insights into user behaviors, preferences, and pain points regarding healthcare management. These interactions allowed us to construct comprehensive user personas, enabling us to empathize with our target audience and tailor Olives' features to meet their specific needs effectively.
Overall, the interviews were a success. Instead of actively taking notes during the interview, I decided to record them and revisit the recording to interpret insights. Recording the interviews allowed me to feel more present with the interviewee, and it made everything feel much more relaxed and conversational.
Data Collection and Analysis Using Miro Board
I utilized Miro boards to efficiently collect and analyze data from interviews, organizing key insights, user quotes, and observations in a collaborative digital space. This enabled me to visually map out patterns and trends, informing my design decisions effectively for the Olives app.
Affinity Mapping and Insights
A SURPRISE!
5 out of 6 users had never even entertained the thought of delving into health data management apps!
This underscored the importance of robust marketing strategies to cultivate user trust and empathy, suggesting that Olives would need to prioritize education and awareness campaigns to encourage adoption and engagement within its target audience.
2. DEFINE
User Personas
To create user personas for Olives, I synthesized insights gathered from interviews, identifying common demographics, behaviors, and motivations. Carl, a Financial Consultant, emerged as a tech-savvy family man seeking efficiency in managing his parents' health remotely. Deborah, a Lead UX Designer, and devoted mother, represented the need for seamless integration of healthcare management into her busy lifestyle, prioritizing accessibility and user experience.
3. IDEATE
User Journeys
Developing user journeys for Carl and Deborah involved mapping out their interactions with the Olives app at various touchpoints, from initial discovery to ongoing usage. By tracing their paths through the app, I gained a deeper understanding of the user experience and identified opportunities to enhance usability and satisfaction for both personas.
For Carl, as a busy financial consultant and family man, the journey focused on seamless integration into his hectic schedule, ensuring efficient and convenient health management.
Conversely, for Deborah, as a lead UX designer and mother, the journey emphasized intuitive navigation and comprehensive features to support her multifaceted roles and responsibilities.
User Flows
Designing user flows involved crafting step-by-step visual representations of how personas would navigate through the Olives app to accomplish specific tasks. By outlining the sequence of actions and decision points, user flows helped ensure that interactions were intuitive, efficient, and aligned with the persona's needs and expectations, ultimately enhancing usability and engagement.
Task 1: Booking a virtual (video) call appointment
User Story: As a busy working person, I want an option to book a virtual (video/audio) appointment with our doctor using an app, so that I don’t have to remember to call the clinic and I can save traveling time for an appointment.
Task Analysis:
Entry Point - Login into the app
Success Criteria - Carl successfully books a video call appointment for his father using an app
-
Opens the app
-
Login to the app
-
Home - Clicks the “Book an Appointment” button
-
Selects his father’s name as a patient
-
Add the reason for this appointment and select “urgent” and “Video call”
6. Views doctor’s availability
7. Book a suitable time slot
8. Gets appointment confirmation on screen
9. The appointment is added to his calendar
Information Architecture
I employed an open card sort involving five participants to enhance and streamline the Information Architecture (IA) for the Olive app. The objective was to present participants with 20 cards and task them with grouping and categorizing the items based on how they believed the items should be organized. All participants comprehended the approach to the task, resulting in similar yet diverse outcomes.
The Similarity Matrix provided valuable insights and helped me check my bias with my original IA. Each participant had similar outcomes based on categorization, but there were minor discrepancies between cards and what their parent category should be.
I decided to employ the Best Merge method as it often performs better than the actual agreement method when a study has fewer participants (less than 30). It makes assumptions about larger clusters based on individual pair relationships. Based on these results, I could clearly see 3 main categories - Appointments, My Account, and Medication Management.
However, there was no clear category trend seen for some links - Add Delivery Address, Download/Print/Share Medical Documents, and Member Medical Profiles.
Decisions Made Based on Data:
-
Changed the main menu name from “Medical History" to "Appointment History”
-
Moved “Upcoming Appointments” and “Upcoming Vaccination Appointments” under “Appointment History”
-
Moved “My Delivery Addresses” under “My Account”
-
Included “Add Medication Reminder” under “Prescriptions”
Final Outcome
4. PROTOTYPE
Wireframes
Creating low-fidelity prototypes for the app enabled rapid exploration of design concepts, emphasizing fundamental layout and interactions. This iterative approach allowed for quick feedback, ensuring efficient refinement of core functionalities before delving into detailed design elements.
Over the course of 1 week, I designed medium and high-fidelity wireframes. Medium-fidelity wireframes involved adding more details to the low-fidelity structure of the interface, including placeholders for images, text, and interactive elements, while still maintaining a relatively simplified design. This level of wireframing allowed better visualization of the final product and a more accurate representation of user interactions without getting bogged down in unnecessary details.
High-fidelity wireframes took the design further by incorporating more realistic elements such as colors, typography, and actual content. This level of wireframing closely resembled the final product, providing a clear and comprehensive representation of the user interface.
High-fidelity wireframes were then used to conduct user testing and present the design to stakeholders for feedback before moving into the development phase.
5. TESTING
Usability Testing
This testing was aimed at observing how easy it is for new users to interact with the Olives app on a mobile phone. I wanted to learn and measure whether users understood the application, its value, and how to perform basic initial functions such as creating an account, logging into the app, and going through the process of booking a virtual appointment with a healthcare provider.
Methodology
A remote moderated usability testing was conducted. It included a short briefing, an interview, and a task performance with the Olives mobile prototype.
Test Script
The test script included an introduction, Demographic Questions, Background Questions, Scenarios and Tasks, Debriefing, and Interviewer Checklist. Access the complete test script here: Olives Test Script PDF
Overall, the initial user testing experience was positive. Four out of the six participants had an easy time with the tasks, while the other two had more questions or felt limited by the prototype. Users found the account creation, onboarding, and appointment booking to be intuitive. However, there were suggestions to refine certain field names and formats, such as location and date of birth (DOB). The convenience of logging into the app using Face ID was particularly appreciated.
Top 5 issues identified from the test result analysis
Issue #1: Calendar options to add reminders
5/6 users were confused about "Add Reminder"; unclear where it belongs.
Suggestion: On the appointment summary, give the user calendar options (Google, iOS, Outlook) to add reminders to. The separate choice for each 18+ family member, remember the selection. Also, add opt-out.
Issue #2: Show regular/family doctors at the top of the list
Users want to book appointments with doctors they've visited and liked instead of trying new ones each time.
Suggestion: Allow bookmarking up to 3 doctors of the user’s choice. Bookmarked doctors appear at the top of the list when booking appointments.
Issue #3: Ratings for each doctor
Users struggled to choose a doctor without enough info. Wanted to see the ratings and experience of each doctor
Suggestion: Show doctor ratings next to name and availability.
Issue #4: Sort functionality to browse doctors
Users want to sort doctors by ratings, experience, etc. when booking appointments.
Suggestion: Add functionality to sort doctor lists by ratings (high to low or low to high)
Issue #5: Refining the “Add a Family Member” functionality
Users were unsure what the "Add family member" link does.
Suggestions: Rename the link to "Add new member" for clarity; Add a tooltip explaining functionality when a user reaches the page; Add an info icon next to the link to provide more details.
A/B Preference Test
As onboarding screens are the first touch point for all new users, I decided to run a preference test on them to make them as interesting and clear as possible. I created variations between the two by having different graphic styles for the features carousel: One had a simple black-and-white line icon and other had a colorful graphical icon.
Test Results: We found a clear winner!
13 out of 15 participants who opted for Option 2 shared that it is eye catchy and feels relatable. Some also think the option#2 explains the feature very well and they didn’t have to read the text underneath.
UI DESIGN
Design Principles
Throughout the UI design iterations of the Olives app, you'll observe a significant incorporation of Gestalt psychology principles, including the Laws of Grouping, and Plutchik's Theory of Emotions. For instance, the consistent style of bottom navigation icons in various states is guided by the law of good continuation. Additionally, employing the law of balance - asymmetrical/informal - ensures a sense of equilibrium despite varying elements on either side of a composition or layout, effectively drawing users' attention to essential elements like section headings.
Olives' Design Iteration Preview
Design Language System
In crafting the Olives app's visual narrative, I found inspiration from Material Design 3 (M3) best practices, which shaped Olives' Style Guide and Design Language System. By integrating diverse M3 components, I cultivated a cohesive and user-friendly design, ensuring seamless navigation for all users. The imagery selection was purposeful, and aimed at creating a refreshing and soothing atmosphere that resonates with diverse families' healthcare needs while staying true to the app's core values. Olives' meticulously tailored copy guidelines, speak directly to families, instilling confidence in their utilization of virtual healthcare services.
View the complete Design Language System document: Olives Design Language System
Feedback
Loop
I established a robust feedback loop to refine and enhance the final iteration before sending it out to the three peers. They were invited to provide feedback on the design, ensuring diverse perspectives were considered.
While some feedback was implemented, reflecting valuable insights and enhancing the user experience, a few suggestions were respectfully rejected with a strong justification rooted in user research or design principles, ensuring that decisions remained aligned with Olives' overarching goals and user needs. This iterative feedback loop played a pivotal role in refining Olives' UI, ultimately leading to a more polished and user-centric interface for the app.
Accessibility
Accessibility in Olives focuses on creating interfaces that are inclusive and usable by all individuals, regardless of their abilities or disabilities. This involved implementing features such as high-contrast text and readable typography to accommodate users with visual impairments, and keyboard navigation options that allow users with motor disabilities or screen readers to access content effectively.
-
Input Fields: In addition to field labels I added placeholder text to provide an example of what you should enter
-
Error Alert: Added a warning icon to support error identification in two ways - red field border and warning icon
-
Font Size: Increased the font size for tooltip text, form stepper labels, and time slots
-
Contrast: Increased the contrast of appointment time slots by adjusting the colors for the text and the container
-
Universal icons: Changed the calendar and clock icons to more universally recognized symbol
-
Labeling: Added text labels addition to different calendar icons for easy recognition
View the final high-fidelity prototype: Olives High-Fidelity Prototype Figma
NEXT STEPS
Improvements
Improving a virtual healthcare service provider app like Olives involves addressing various critical areas to enhance user experience, data security, and overall functionality. Here are some key areas of improvement:
Data Security and Privacy:
-
Strengthening data encryption protocols to ensure the confidentiality of users' health records
-
Implementing robust authentication measures such as multi-factor authentication to prevent unauthorized access
-
Complying with relevant regulations such as HIPAA (Health Insurance Portability and Accountability Act) to safeguard sensitive health information
Interoperability:
-
Enhancing interoperability with other healthcare systems and devices to facilitate seamless data exchange
-
Integrating with electronic health record (EHR) systems used by healthcare providers to ensure continuity of care
-
Expanding remote monitoring capabilities to enable users to track vital signs, symptoms, and medication adherence remotely
Feedback & Support:
-
Implementing mechanisms for users to provide feedback and suggestions for improvement
-
Offering responsive customer support to address users' inquiries, concerns, and technical issues promptly
Personalization & Customization:
-
Offering personalized health recommendations and insights based on users' health data and preferences
-
Allowing users to customize their health profiles and set preferences for notifications and alerts
User Testing Strategy
User testing holds immense significance in the Olives’ development process. Our approach involves striking a thoughtful balance between two distinct user groups: families (patients) and healthcare providers. Customizing testing strategies for these user groups is crucial for gathering valuable insights and enhancing the app's usability and effectiveness.
For Families (Patients):
-
Scenario-Based Testing: Develop scenarios mimicking the most important real-life tasks such as appointment scheduling and medication tracking
-
Moderated Sessions with Feedback: Conduct moderated sessions where users navigate tasks while providing feedback on clarity, ease of use, and overall satisfaction
-
Qualitative and Quantitative Data Collection: Gather qualitative feedback through verbalized thoughts and emotions, complemented by quantitative data on task completion rates and time on task
-
Iterative Improvement: Use feedback to iteratively improve the app's features and interface, ensuring it aligns with families' healthcare management needs
For Healthcare Providers::
-
Workflow Simulation: Design test scenarios mirroring healthcare workflows like patient record review and virtual consultations
-
Efficiency and Compliance Evaluation: Assess app efficiency, ease of use, and adherence to healthcare standards during moderated sessions
-
Specialized Feedback Collection: Solicit feedback from healthcare providers on specific features such as secure messaging and data management
-
Continuous Iteration: Incorporate feedback into iterative improvements, focusing on streamlining workflows and enhancing patient care delivery for healthcare providers
Olives' Final App Designs
THESE WERE SOME MAJOR LEARNINGS AND POINTS I WANT TO CALL OUT
User-Centric Approach
Prioritizing the user experience at every stage ensures that the design resonates effectively with the target audience's diverse needs and preferences.
Inclusive Design
Incorporating accessibility features throughout the interface since beginning guarantees a seamless experience for all users, fostering inclusivity and accommodating diverse abilities.
Iterative Refinement
Embracing an iterative design process allows for continuous improvement, enabling the interface to evolve based on user feedback and changing requirements.
Alignment with Design Principles
Adhering to established design principles ensures a cohesive and engaging interface that effectively communicates with users and encourages deeper interaction.
Collaboration and Communication
Effective teamwork and communication facilitate the exchange of ideas, feedback, and knowledge, driving the project forward and ensuring its success.
