Olive is a mobile app designed to help users access personalized fitness content, connect with trainers, and track their progress. Focused on intuitive navigation and clean, engaging visuals.

Project Type: Mobile

🎯 Goal / Problem Statement

People struggle to find one place for diverse workout content, professional guidance, and real-time progress tracking. Olive aims to offer a simple, all-in-one fitness solution.

👥 User Research

Conducted interviews with 5 fitness app users
Identified key pain points: scattered content, lack of motivation, no progress tracking
Created 2 personas: beginner and active user

🧭 Wireframes & User Flows

Wireframes (low-fidelity)

🎨 UI Design

Final design mockups or prototypes.

Natural color palette (greens, creams, soft golds) to evoke calm and energy.
Real-world images are used to humanize workouts and trainers.
Clear section headings and minimal text for easy scanability.
Used rounded card designs, icon-based tabs, and high-contrast buttons for better mobile interaction.

🅰️ Typography

Element

Headings (Page titles, section headers)
Subheadings
Body Text
Button Text

Font Style

Inter

Inter
Inter
Cormorant

Font Size (Approx.)

20-24 px

14-20 px
14-18 px
16 px

Weight

Bold

Bold
Regular
Medium

🌈 Color Palette

Color Use

Primary Green

Dark Olive Text
Light Cream Background

White

Hex Code

#BCC6AB

#3A3A3A
#F5F5F0

#FFFFFF

Notes

Calm, organic tone for main theme (backgrounds, headers)

For body and navigation text
Used in sections/cards for contrast
Used for cards, buttons, and text areas

🔘 UI Components

Buttons: Rounded corners, gradient or solid fill (green/gold), white text, bold font.
Navigation Bar: Bottom sticky nav with 4–5 icons (Home, Workouts, Trainers, Calendar, etc.), soft highlight on active state.
Cards: Rounded corners, subtle drop shadow, image on top with caption/text below
Icons: Simple, minimal-style icons that align with the health/fitness theme.

📱 Visual Style

Mood: Calm, motivating, and friendly.
Imagery: Real-life workout and yoga scenes, empowering visuals.
Layout: Vertical flow with clear hierarchy and visual breathing space.

🧠 Key Learnings

Through Olive, I developed a deeper understanding of how to align user needs with wellness goals in a mobile app. I also improved at designing structured navigation and ensuring visual consistency in UI systems.

🔗 Tools Used

Figma
Canva

📽️ Prototype Link

Olive