Olive is a wellness app that offers an integrated experience by combining fitness tracking, mental health insights, and personalized dietary recommendations. It addresses the need for a centralized platform for health-conscious individuals.
Role
Lead UX Designer
Duration
6 Months
Tools
Figma
Preface
Since Olive was my first major UX/UI project, I recently revisited it to refine the wireframes and UI. The updates reflect how my design skills have evolved — from my early work to the stronger design decisions I make today. This case study includes both the original process and my improved final designs, showing how my approach has matured.
Problem Statement
Health-conscious individuals need a centralized and easy-to-use platform to track fitness, nutrition, and mental wellness. Many existing solutions focus on one aspect of health but fail to provide a holistic approach
Competitive Analysis
Business Opportunity & Goals
By offering an integrated wellness experience, Olive fills a gap in the market for users who want a comprehensive approach to health tracking. This enhances user engagement and retention.
Primary Goals:
​
-
Provide a seamless and intuitive user experience.
-
Integrate fitness, mental wellness, and dietary recommendations into one platform.
-
Use AI-driven insights to enhance user engagement and personalization.
Research Goals:
​​
-
Understand user pain points and needs through user interviews.
-
Identify gaps in the market through competitive analysis.
-
Refine UI choices using A/B and preference testing.
Affinity Maps
Needs/Desires
Frustrations
Goals
Key Insights
Holistic Integration Desired:
Users want an app that combines fitness, nutrition, and mindfulness in one place. Switching between multiple apps is inconvenient, and a unified platform would help them track their overall health journey more effectively.
Customization Is Critical:
Users need personalized workouts, meal plans, and mindfulness practices that fit their specific goals, preferences, and time constraints. Customization keeps them engaged and helps them reach their health objectives.
Simplicity vs. Functionality:
Users prefer apps that are simple to use but still offer essential features. Overly complex designs frustrate them, so the app should be intuitive and easy to navigate without sacrificing functionality.
User Personas
User Journeys
User Research Insights & Addressing Challenges
During the user research phase, I conducted usability testing sessions with participants who fit our target audience. Through these sessions, I identified key challenges users faced while interacting with the Olive app:
​
Key Challenges Identified
1. Scheduling Frustration – Users struggled to locate the appointment scheduling feature, leading to confusion and delays in booking.
2. Onboarding Readability Issues – The small font size on onboarding screens made it difficult for users to read instructions and engage with the process.
3. Appointment Management Difficulties – Participants found it challenging to cancel appointments due to the lack of a visible cancellation option within the calendar view.
Design Solutions Implemented
To address these challenges and enhance usability, I made the following improvements:
-
Streamlined Scheduling: I redesigned the navigation and added a prominent “Schedule Appointment” button on the homepage to make booking more intuitive and accessible.
-
Improved Readability: The font size on onboarding screens was increased to meet accessibility standards, ensuring that users could easily read and follow the onboarding steps.
-
Simplified Appointment Management: A visible “Cancel” button was introduced within the calendar interface, allowing users to manage appointments efficiently and reduce frustration.
Wireframes & Prototypes
Throughout the design process, the app’s UI evolved significantly as I gained a deeper understanding of user needs and best design practices. This progression reflects my growth in UX/UI design.
I followed a structured design process, moving from low-fidelity wireframes to a fully interactive prototype.
​
​Low-Fidelity Wireframes: Focused on layout and functionality.
Mid-Fidelity Wireframes: Enhanced visual hierarchy and navigation.
High-Fidelity UI: Applied branding, colors, and final UI components.
Low-Fidelity Wireframes
Homepage
Booking Appointments
Creating a Workout
Mid-Fidelity Wireframes
Homepage
Booking Appointments
Creating a Workout
HI-Fidelity Wireframes
Homepage
In the transition from mid-fidelity to high-fidelity, I refined the layout and visual hierarchy to enhance usability and engagement. The UI now incorporates a more structured card-based layout with clear distinctions between different sections, such as goals, progress tracking, and appointments. I introduced vibrant colors, icons, and images to make the interface more visually appealing and intuitive. Additionally, the navigation bar was redesigned to ensure consistency and easy access to core features. These changes improve readability, create a more engaging experience, and align the design with modern UI principles.
Booking Appointments
For the high-fidelity version, I focused on improving clarity and accessibility. The appointment scheduling interface now features a more intuitive doctor search function with profile images, specialties, and availability clearly displayed. I replaced the simple list format with interactive cards to enhance usability and allow for quick decision-making. The updated design also integrates a more structured layout for upcoming appointments, improving visibility and user flow. These refinements provide a smoother, more user-friendly experience for booking and managing appointments.
Creating a Workout
The high-fidelity design enhances the workout creation process by incorporating a more structured layout with visual cues that guide users. I replaced the basic list format with interactive, button-based options for selecting training mode and workout duration, making the interface more engaging. The intensity level section now features a progress bar to provide better feedback, ensuring users understand their selection. Additionally, the design now integrates imagery and improved typography for better readability. These refinements make the workout creation process more intuitive and visually appealing.
Style Guide
I chose this color palette to create a sense of balance between nature, wellness, and modernity. The primary green shades symbolize growth, vitality, and harmony—key elements of a health-focused app. Green is often associated with renewal and tranquility, making it an ideal choice for promoting a calming user experience. The secondary colors provide depth and contrast, adding a grounded feel while maintaining visual cohesion. This palette ensures that the interface feels inviting and refreshing, aligning with the app’s mission of supporting users on their wellness journey.
Redesign & Iteration
After completing Olive, I revisited the project to refine its wireframes and improve the visual hierarchy. The goal was to make the interface cleaner, the flow more intuitive, and the overall design more aligned with modern mobile app standards.
​
These updated screens represent the evolved design language, improved navigation patterns, and a more intentional user flow.
Conclusion
Results & Impact:
The redesigned Olive app has empowered users to take a more active role in their wellness journey by simplifying habit tracking, improving content accessibility, and fostering a sense of motivation. Enhancements such as personalized goal-setting, intuitive progress tracking, and an engaging visual design have made it easier for users to stay consistent. User testing revealed that the refined navigation and structured daily insights significantly improved engagement, helping individuals build sustainable wellness routines. The updated UI and optimized spacing have contributed to a more seamless and enjoyable user experience.
​
Reflections:
Working on Olive reinforced the importance of designing for real-world habits and motivations. Wellness is personal, and this project highlighted the need for flexibility, encouragement, and a frictionless experience. Prioritizing user feedback played a key role in shaping the final design, ensuring it met both functional and emotional needs. This experience deepened my understanding of balancing usability with engagement—an essential skill in crafting impactful digital products.