Wellbee: Strength, Empowerment for Women
Project Overview
As a UI Designer, I spent a few hours each week over two months working on Wellbee, a responsive web app that helps users fit exercise into their daily lives, no matter their fitness level or schedule. I led the UI design, focusing on making the app easy to use and enjoyable for everyone.
The primary objective was to motivate users, especially those new or returning to fitness, by providing them with tailored routines, step-by-step guides, and interactive elements. Wellbee encourages users to build healthy habits by offering short, easy-to-fit workouts, as brief as five minutes, and personalized scheduling tools.
Process

Research and Ideation
Starting with foundational research, I explored existing fitness apps to identify gaps in the market. My persona and user stories were built around the needs of busy women who require a motivational yet straightforward fitness solution.
Sitemap and Navigation Concept
I designed the Wellbee sitemap to ensure users could easily explore all areas of the app, whether they’re beginners or more experienced with fitness apps.
Login/Sign-Up followed by a helpful onboarding tour to welcome new users. Home acts as the main dashboard, offering quick access to workouts and progress tracking. Discover Exercises provides a space for users to search for exercises that match their fitness goals and preferences. Progress tracks achievements and encourages users to stay motivated. Schedule and Reminders help users stay consistent by fitting workouts into their daily routine. User Account & Settings offers easy personalization and management of preferences.
This clear and logical structure was designed to streamline the user journey, ensuring that no matter the user’s fitness level, they can seamlessly navigate the app.

Wellbee Sitemap

User Persona
Wellbee is designed with a key target group in mind: busy women aged 25-40 who are balancing demanding schedules while looking for convenient fitness and wellness solutions. These users value simplicity, motivation, and the ability to customize their fitness experiences.

User Persona: Sarah Thompson

Wireframes
I began with low-fidelity wireframes, focusing on user flow and ease of navigation. Through iterative design, these wireframes evolved into high-fidelity versions, ensuring that the user journey was intuitive. Each wireframe ensured users could move from workout selection to progress tracking with minimal friction.

Early Conceptual Designs for Wellbee's User Flow

Detailed UI Designs for Key Screens in the Wellbee App

Visual Learnings & Approach
Throughout the project, I consistently prioritized a balance between aesthetic appeal and usability. Initially, I explored more complex layouts, but after user testing and gathering feedback, I quickly realized that a clean and straightforward design was key to enhancing the user experience.

Early Iterations of the Wellbee UI Design

The app’s purpose—making fitness approachable for everyone—guided my design decisions. Every element, from button placement to typography, was crafted with the goal of keeping users motivated while ensuring they could easily navigate through the app.

Polished and User-Centered Wellbee UI Design

One of the main takeaways was that simplicity is powerful when it comes to design, especially for users who may be intimidated by starting their fitness journey. This iterative approach, based on constant feedback, allowed me to refine the design until it achieved a perfect balance of clarity, engagement, and accessibility.
UI Elements and Visual Choices
In line with the Wellbee style guide, my focus was on ensuring that every visual element reinforced the brand’s message of energy, warmth, and accessibility. Some key elements include:
Buttons and Typography: I chose Energetic Orange (#FA8917) for primary buttons to create a vibrant, action-oriented experience. The font Roboto Bold was used to enhance readability and give the UI a modern feel, while ensuring that users could quickly understand the next steps.
Icons: Every icon was designed to fit within a 48x48 pixel frame, maintaining visual consistency across devices. The use of Rich Earth Brown (#924C00) in iconography gave the app a welcoming and grounded feel, reinforcing Wellbee’s friendly approach to fitness​
Here is a glimpse into the style guide:

Visual Style Guide

1. Purpose of this Guide

Welcome to the WellBee style guide! This guide is your go-to resource for everything related to the visual design of the WellBee app. Whether you’re a designer, developer, or marketer, this guide will help you keep our brand looking consistent and polished across all touchpoints.

Who is this Guide for?

This guide is for everyone working on WellBee. It’s designed to make sure that no matter who’s involved, the end result always feels like Wellbee—welcoming, energetic, and focused on fitness.

Primary Logo

Description:

The Wellbee logo represents the energetic and positive spirit of the brand, specifically designed for women balancing fitness with their busy lives. The logo features an orange bee in motion, symbolizing vitality, activity, and empowerment. The honeycomb pattern highlights a sense of community and connection, while the integrated heartbeat line reflects Wellbee's commitment to wellness, perfectly merging the concepts of fitness and health in a visually cohesive design.

Usage:

To uphold brand consistency and recognition, the Wellbee logo should be prominently displayed in essential areas of the app, website, and all promotional materials. It’s critical to place the logo in visible, high-traffic locations, ensuring it reinforces the brand's identity of empowering women to stay active and healthy.

Clear Space:

Maintain the logo’s clarity by providing ample clear space around it, equivalent to the height of the "W" in Wellbee. This ensures the logo remains visually distinct and easily recognizable across different platforms.

Minimum Size:

The logo should never appear smaller than 40px wide to guarantee clarity and readability, especially in digital environments. This minimum size ensures the logo retains its visual impact, even at smaller scales, reinforcing Wellbee’s identity in all contexts.
Moodboard
The visual direction of Wellbee was inspired by the vibrant colors of the brand, incorporating Energetic Orange (#FA8917) for action buttons and key elements, paired with Vibrant Green (#67AA87) to highlight success and progress. My mood board focused on high-energy images of women working out, complemented by natural lighting and a warm, welcoming atmosphere.

Moodboard 1: Bright and Energizing

The first mood board represents energy and motivation, aimed at users who engage in active, physical wellness routines. The elements chosen for this mood board include:
Color Palette: Vibrant, warm colors such as yellows, oranges, and reds, which are associated with energy, activity, and positivity.
Imagery: Features images of active individuals, workouts, group fitness activities, and dynamic movement, conveying a sense of motivation and strength.
Icons: Bold, sharp icons that reflect action and functionality, supporting an energetic and driven user experience.
This visual direction is tailored for users who are focused on achieving their physical wellness goals, creating an atmosphere that inspires motivation and active engagement with the app.

Moodboard 2: Calm and Centered
The second mood board centers around a soothing and balanced aesthetic, focusing on calmness and mindfulness. The design features:
Color Palette: Soft blues, greens, and neutral tones to create a peaceful and calming environment.
Typography: Elegant and refined sans-serif fonts that convey clarity and tranquility, supporting the app's focus on mindfulness and centeredness.
Imagery: Serene landscapes, meditation poses, and tranquil natural scenes that encourage relaxation and self-reflection.
UI Elements: Minimalistic and clean icons and buttons, emphasizing clarity and ease of use while contributing to the calm, centered atmosphere of the app. This visual direction seeks to create a sense of calm and focus, guiding users towards mindfulness and well-being during their experience with WellBee.
UI Elements  and Iconograph
Following the Wellbee style guide, I focused on delivering consistent and visually cohesive UI elements. Primary action buttons feature an 8px radius and are highlighted in Energetic Orange (#FA8917) to capture user attention. The icons, designed in a darker gray, maintain a neutral and modern appearance, enhancing readability while supporting the minimalist design. Each custom icon is framed within a 48x48px grid to ensure uniformity across the interface. This precise approach ensures that all elements fit seamlessly within the app’s clean and user-friendly aesthetic.
Responsive Design

Wellbee was designed with a mobile-first approach, ensuring an optimized user experience on smaller screens. The interface was carefully adapted to a 4-column grid on mobile, providing a seamless and intuitive layout. To maintain consistency across all devices, responsive mockups were created for tablet and desktop breakpoints, ensuring that the design retained its clarity and functionality regardless of the screen size.
Key design features include vibrant imagery, user-friendly workout selections, and clear call-to-action buttons, all of which scale appropriately across devices to maintain a polished look and feel.

Screen Sizes and Column Settings:
Mobile Breakpoint (390 x 844px):
- Columns: 4 columns
- Gutter: 16px
- Margin: 16px

Tablet Breakpoint (768 x 1214px or 691 x 1024px):
- Columns: 8 columns
- Gutter: 32px
- Margin: 30px or 32px

Desktop Breakpoint (912 x 1080px or 992 x 1286px):
- Columns: 12 columns
- Gutter: 32px
- Margin: 24px or 32px
Prototype and Animation
I created an interactive prototype to demonstrate Wellbee’s core functionality and smooth user interactions. Key elements, such as hover and pressed states, were animated to provide users with responsive feedback, enhancing the overall usability. The menu features a fluid transition animation, adding polish to the navigation experience. I also implemented a success snackbar to give instant feedback when users successfully add a workout, reinforcing a sense of achievement. These animations were carefully crafted to align with Wellbee's vibrant and motivating tone, ensuring a seamless and engaging experience without overwhelming the user.