FitTracker logo with bold text and three horizontal lines to the left.

Designed intuitive, responsive UI/UX for mobile and wearable apps, blending aesthetics, functionality, and adaptability to seamlessly meet user expectations.

A woman running outdoors in athletic wear on a sunny day, with a chain-link fence in the background, overlaid with motivational text and sign-up options for a fitness app.
Smartphone screen displaying the FitTracker app with a gradient background in purple, pink, and red shades.
Smartwatch displaying a fitness app with user profile Erica Smith, showing activity percentages, and workout options.

SUMMARY

I designed the UI/UX for a mobile fitness app and wearable, driven by user insights to ensure a seamless and engaging experience. The design process involved competitive research to identify areas of need that I could address to provide an enhance experience for our users while also leveraging user insights to understand user needs and preferences, resulting in an intuitive interface that simplifies fitness tracking and goal setting. By incorporating responsive elements and adaptive layouts, the app and wearable provide consistent usability across different devices. The final design seamlessly blends functionality and aesthetics, encouraging users to stay motivated and achieve their fitness goals.

ROLES

Research

User Experience

UI Design

TOOLS

Figma

HeyCollab

RESPONSIBILITIES

Competitive Research

Moodboards

Responsive Mobile | Wearable

High Fidelity Wireframes

User Interface

Prototype

A person performing yoga by the water at sunset or sunrise, silhouetted against the sky.

CHALLENGE

The challenge for FitTracker was designing an app that offered more than just fitness tools and nutrition guides. The distinction that was missing, lied in a lack of personalization for the users, lack of relevance and therefore, lack of engagement.

SOLUTION

To address this challenge, I designed a user experience that will leverage AI algorithms to tailor workout and nutrition plans to individual user preferences and goals, ensuring a high degree of personalization. Additionally, incorporating adaptive design principles and robust APIs can create a cohesive, user-friendly interface that smoothly integrates with various wearable devices, enhancing the overall user experience and engagement.

THE PROCESS

1

COMPETITIVE RESEARCH

The initial step is to comprehensively analyze the competitive market landscape. This involves examining the offerings, strengths, and weaknesses of existing home decor luxury providers.

Comparison of the Runkeeper app on mobile devices and desktop, showing app screens with workout plans, guided runs, maps, and community features.
Screenshot of a presentation on Goals Fitness app, showing app interface on mobile and desktop, with descriptions of features and ratings.
Display of the Run Tracker mobile app with multiple screenshots showing the app's interface and features, including start run button, progress charts, personal best records, training guides, and goal setting screens.

2

MOODBOARD

Creating a mood board for a fitness app involves curating a visual collection of colors, images, typography, and design elements that reflect the app's energetic and motivational brand identity, guiding the overall aesthetic and user experience.

A fitness coach website homepage with purple and pink gradient background, featuring a woman in workout attire demonstrating a fitness pose, and sections for weight lifting and stretching, with color codes at the bottom.
A digital illustration of a mobile app displaying different workout training levels and a menu slide-out, with colorful exercise icons and a yellow side menu on an off-white background.
Mobile app screens showing a fitness training plan and stretching exercise with a man demonstrating a stretch.
Mobile fitness app screens displaying a workout program called 'The Power Start' with a person doing stretches and exercises, featuring progress, calorie count, and program details.
Two smartphone screens displaying a workout app interface with categories like cardio, full body, and yoga, and workout details including warm-up and strength training exercises.
Screenshot of a fitness tracking mobile app displaying progress at 76%, workout options including yoga, stretching, and Pilates, and a detailed progress summary showing water intake, food consumed, and training completed.
A woman wearing a white sports bra, blue leggings, and orange and white running shoes is jogging up stadium stairs outdoors, with a smartwatch on her left wrist.
Pink yoga mat with a pair of pink dumbbells, a pink foam block, a pink resistance band, and a pink towel on a wooden floor.
A breakfast spread featuring a bowl of yogurt with fresh berries and nuts, a cup of coffee with cinnamon, avocado halves, and a plate of colorful fruit and vegetables, all on a wooden tray and white surface with pink tulips and fruits nearby.

3

USER EXPERIENCE

Designing UX wireframes involves conceptualizing the layout and focusing on the placement of elements, navigation flow, and functionality to ensure optimal user experience with a responsive design across multiple platforms.

Mobile app screens for FitTracker with login and sign-up forms, featuring motivational words and a person running in the background.
Screenshots of a fitness app interface showing options for community, recommended groups, friends, and groups, along with a workout selection screen to choose workout type and path, with a map and start button.
Screenshots of a fitness app interface showing options for starting training, selecting training plans for different race distances, and exploring activities like weight loss, strength, and running.
A fitness app profile screen for Erica Smith, showing her stats, workouts, upcoming activities, achievements, and goals. The central screen displays her name and profile picture, with stats for daily, weekly, and monthly goals.

4

USER INTERFACE

To design an exciting, easy-to-use fitness app for mobile and wearable devices, I focused on a vibrant and energetic aesthetic that motivates users at a glance. It employs a clean, intuitive layout with large, touch-friendly buttons and interactive elements that simplify navigation.

Real-time progress tracking, customizable dashboards, and seamless integration with wearable tech ensure users stay engaged and informed. Bright, dynamic colors and motivational graphics create an inspiring environment, while personalized notifications and feedback keep users on track with their fitness goals. Overall, the design prioritizes a seamless and enjoyable user experience that makes fitness feel accessible and fun.

The image shows a smartphone and a smartwatch displaying a FitTracker app with a gradient purple to pink background and white text.
Mobile app screens for a fitness tracking service, showing a woman running outdoors on the left and a sign-up form on the right.
Screenshots of a fitness app profile for Erica Smith on a smartphone and smartwatch, showing workout stats, upcoming activities, achievements, and goals.
Screenshots of a fitness app interface displaying workout plans, training options, and race categories on a smartphone, smartwatch, and tablet.
Screens showing fitness app interfaces on mobile and smartwatch screens, with options to choose workout types, paths, and community groups for running and cycling.