2024

UX/UI Design Case Study

Shepherd

Fitness & Nutrition Web Application

The Shepherd App is a comprehensive wellness platform that provides personalized fitness and nutrition guidance customized to each user's goals, whether they are beginners or competitive athletes. The app connects users with certified coaches who offer bespoke one-on-one coaching to ensure accountability and motivation for optimal health.

your guide to optimal health.
A UI mockup of several mobile screens.

Introducing Shepherd

Shepherd's unique all-in-one solution addresses the challenges faced by health-conscious individuals in achieving their fitness and nutrition goals.

The platform offers personalized coaching from certified experts, comprehensive progress tracking, and robust accountability through regular check-ins.

Supported by a vibrant community, users receive bespoke guidance tailored to their needs, fostering engagement and satisfaction.

By integrating personalized coaching, real-time progress monitoring, and community support, Shepherd effectively empowers users to accomplish their health goals, with success measured by user retention and sustained engagement.

"How can we design an app that seamlessly combines personalized coaching, progress tracking, accountability, and community support to help individuals achieve their fitness and nutrition goals?"

project roles
UX Researcher
Product Manager
UX/UI Designer
Scope
12 weeks, as part of a UX Design Certification at CareerFoundry
process
Research, Interviews, Surveys, competitive analysis, ideation, prototyping, user testing, evaluation
tools used
Figma
Adobe Creative Suite Illustrator
google forms
optimal workshop

My user-centric design process

a journey from concept to completion
a diagram of the double diamond design process
A Guided Tour of Fitness and Nutrition Excellence.

In this video, I will walk you through Shepherd's main features: booking a coaching session, completing a new client questionnaire, beginning a workout, and the simple onboarding journey.

discovery phase

the problem

Identifying the Challenge

There is a market gap for a digital platform that consolidates personalized coaching, comprehensive progress tracking, accountability mechanisms, and community support, offering health-conscious individuals a holistic approach to achieving their fitness and nutrition goals.

An integrated approach to fitness and nutrition is crucial in today's dynamic health and wellness landscape. Many people, like Alex, struggle with managing multiple apps for workouts and meals, highlighting the need for a single, comprehensive solution in the market.

The Shepherd app addresses this need by offering an all-in-one platform with personalized coaching, progress tracking, and community support. Shepherd guides users toward better health, living up to its name by leading them to improved outcomes. It provides direction, support, and a community to motivate and connect users.

By addressing market gaps and empowering users through an integrated and personalized approach, Shepherd transforms personal wellness and helps individuals achieve their best selves.

Research

Competitive & SWOT Analyses

competitor profiles

Let's conduct a detailed analysis of the insights we've gathered from our in-depth research on each of our competitors.Trivida Company Profile

Trivida is a leading healthcare provider in functional medicine, specializing in personalized care across five core areas: nutrition, hormones, stress, detoxification, and mobility/exercise.

They offer comprehensive treatment plans targeting root health issues through thorough testing and a collaborative approach.

By blending traditional Western medicine with innovative functional techniques, Trivida develops effective solutions and empowers patients with educational resources and practical tools for long-term health.

Their holistic patient care approach and commitment to setting new standards distinguish them as leaders in the functional medicine field.

SonderMind simplifies therapy by connecting clients with suitable mental health professionals through a personalized matching system that considers individual needs and insurance coverage.

Their user-friendly platform streamlines the therapist-finding process, enhancing accessibility. SonderMind extends its reach by partnering with employers, healthcare providers, and insurance companies, promoting well-being and reducing therapy stigma.

This comprehensive approach improves mental health care access and establishes SonderMind as an industry leader in fostering openness around mental health.

sWOT Analysis

Unveiling Strengths and Opportunities
A chart of a SWOT analysis.
SWOT analysis of a competitor

shepherd's Opportunities

  • All-in-One Health Solution: Shepherd can provide a comprehensive platform for diverse healthcare needs, connecting users with various healthcare professionals and services.
  • Community Building: Emphasizing community features to foster a sense of belonging, increase engagement, and support users in their health journeys.
  • Personalized Health Recommendations: Utilize user data to offer tailored health recommendations and interventions, improving outcomes and satisfaction.
  • Strategic Partnerships: Collaborate with health and wellness brands, insurance companies, and healthcare providers to enhance capabilities and introduce new revenue streams.
  • Preventive Healthcare Focus: Capitalize on the growing trend towards preventive healthcare by offering solutions that promote overall wellness and proactive health management.
  • Enhance UX design: Focus on building a useful application by addressing your target audience's functional and emotional requirements during research.
Applying these steps will help distinguish Shepherd and establish a strong presence in the market.

UX competitive analysis

trivida functional medicine

I conducted a UX Competitive Analysis on Trivida Functional Medicine to learn from their healthcare services, which align closely with my app's offerings. Although they have an app, it doesn't fully represent their service quality and brand image. I aim to improve progress tracking, habit formation, and resource sharing for better app operation and success.

Usability
A mockup image of two phone screens used in a UX usability competitive analysis.
layout
A mockup image of two phone screens used in a UX layout competitive analysis.
Navigational Structure
A mockup image of two phone screens used in a UX competitive analysis for navigation structure.
a photo of written differentiation results for the UX competitive analysis.

user surveys & interviews

Turning Responses into Actionable Strategies

After completing competitive analyses, I validated the findings through surveys, interviews, affinity mapping, and card sorting. I used Optimal Workshop, Google Forms, and my personal social media accounts to carry out these tasks.

In addition to using Google Forms to conduct surveys, I reached out to four people in my local network and asked if they would be willing to participate in remote or in-person interviews. We met both in person and virtually, and I gained deeper insights into my app design by brainstorming ideas with them and receiving valuable feedback.

User Surveys

To understand health-conscious individuals, I conducted a Google Forms survey focusing on essential features, privacy concerns, and daily routines.

Key findings revealed a strong interest in a holistic health app, emphasizing educational content, workout routines, personalized coaching, and a supportive community.

Participants prioritized health and fitness, recognizing the importance of proactive well-being management. However, they expressed privacy concerns, seeking assurance that their personal information would remain secure.

Survey Results
a photo mockup of differenty survey results and graphs.
survey key findings
A mockup of survey key findings.

user interviews

Understanding Users: Unlocking Valuable Insights Through Data Analysis

After thoroughly analyzing the extensive data, I have identified recurring patterns and extracted crucial insights. These findings will inform design decisions and enhance the overall user experience.

I conducted user interviews both in person and remotely. The participants ranged from their late 20s to late 30s, all living throughout the United States and having various professional backgrounds.

let's take a closer look!

interview Participants
A photo of user personas.
affinity mapping
A table of affinity mapping results.
exploring similarities
Information cards that list the similarities among interview participants.
interview key findings
key takeaways and data numbers from user interviews.

meet the user

Personas, Task Flows, and Journey Maps

Before I create wireframes, I empathize with users to understand their needs and behaviors.

I use user stories, scenarios, and task flows to map their journeys and identify challenges. Engaging in online social media and forums gives me genuine insights into user emotions and expectations. This enriches my research and helps me create detailed personas crucial for user flows and journey maps.

My user-centered approach ensures that the design solutions I come up with are innovative and aligned with real user needs, creating a solid foundation for successful application development.

a photo of a girl smiling.

user personas

exploring and understanding our users

This section will explore how users engage with the product to pinpoint pain points and areas for enhancing the application.

The insights I gathered during my research helped me create these detailed personas.

Sara

The tech-savvy, health-conscious professional seeking a seamless all-in-one app to efficiently manage fitness and health while prioritizing privacy and work-life balance.

Alex

A privacy-conscious fitness enthusiast seeking a comprehensive app to seamlessly integrate exercise, nutrition, and mental health tracking, while fostering accountability and progress.

User Personas
A mockup of two user personas stacked on top of one another.
User Story
Sara
Beginner HIIT Workout

As a busy novice fitness enthusiast, I want a beginner HIIT workout program that fits into my schedule so that I can achieve my fitness goals on the go.

User Story
Alex
Scheduling

As a competitive athlete who frequently travels, I want an easy way to schedule coaching sessions with an online trainer so that I stay motivated and consistently track my progress.

mental models
a mockup of two mental models for the user personas
user journey maps
photo of a user journey map
User flows
a photo of two UX design user flows.
Problem Statement

Health-conscious individuals need a secure, user-friendly way to monitor their health journey, get tailored advice from professionals, and make data-driven decisions because they often struggle with tracking progress, staying motivated, and finding personalized guidance.

We will know this to be true by tracking performance as we aim to maintain a high retention rate for sustained engagement and satisfaction among existing users and achieve a strong adoption rate to attract and onboard new users effectively.

Define Phase

exploration & ideation

information Architecture, Sitemaps, and Wireframes

When designing my application, I prioritized user-friendly interactions to enhance the experience.

Key features include a seamless interface for scheduling and joining coach meetings, an intuitive workout search and execution feature, and a user-friendly onboarding questionnaire to pair users with coaches.

Wireframes were designed to align with user needs, ensuring a cohesive, modern user experience.

designing User-Centered Solutions

Crafting with Empathy and Insight

Based on the research conducted, I will outline how to turn user needs and feedback into practical solutions. This involves implementing solutions, from design to testing, to ensure that each feature meets the user's needs and maintains a user-centered approach.

ideate

relevant Feature Hypothesis

01
Personalized Coaching:
Tailored fitness and nutrition guidance from certified coaches.
02
Custom Fitness & Nutrition Plans:
Adapted to your level and goals for optimal results.
03
Progress Tracking & Health Analytics:
Monitor achievements and gain insights for improvement.
04
Interactive Reminders & Wearable Integration:
Stay on track and sync your health data seamlessly.
05
Community Support & Educational Resources:
Access forums, articles, and tutorials for motivation and knowledge.
06
Comprehensive Libraries:
Extensive collections of workouts and healthy recipes.
07
Meal Planning Tools:
Simplify meal prep with easy planning and grocery lists.
08
Motivational Challenges:
Engage in challenges with rewards to boost your progress.
An information architecture mockup

Sitemap before card sorting exercise

First Sitemap
A sitemap for the Shepherd Application

Enhancing Information Architecture

Card Sorting with Optimal Workshop
An icon of an arrow
Design Process Appreciation:
Understanding divergent and convergent thinking in design helps explore multiple solutions before selecting the best one, balancing creativity with practicality.
An icon of an arrow
Card and Category Setup:
Utilized 34 cards and eight predetermined categories for participants to sort.
An icon of an arrow
Participant Flexibility:
Allowed participants to create additional categories if they felt any cards did not fit into the predefined ones.
An icon of an arrow
Structured Flexibility:
Provided a predefined structure for the sorting process while ensuring participants had the flexibility to make their own choices.
An icon of an arrow
Uncovering Overlooked Categories:
Aimed to identify any categories that may have been overlooked or not considered during the initial setup.
A logo of Optimal Workshop

optimizing insights

Card Sorting Results
Cards
a screen shot of card sorting results for UX research
Categories
A screen shot of UX research card sorting results
Category Sort Results
A screen shot of UX research card sorting results
Frequency & Completion Rate
A screen shot of UX research card sorting results.
User Feedback
A screen shot of UX research card sorting results.

card Sorting

key findings
An icon of an arrow
Successful Sorting:
15 participants sorted all 34 cards into predefined and self-created categories.
An icon of an arrow
Category Refinement Needed:
Some categories lacked clarity or value and require future refinement.
An icon of an arrow
Multiple Categories Issue:
Cards like "Pricing" fell into various categories, indicating a need for more evident labels and diversified sitemap placement.
An icon of an arrow
Challenging Categories:
Participants struggled with sorting "Programs," "Nutrition," "Coaching," and "Fitness," suggesting the need for new categories to reduce confusion.
An icon of an arrow
Exercise Adjustment:
Based on a 60% completion rate, consider shortening the exercise with fewer cards and categories.
An icon of an arrow
Focused Exercises:
Propose multiple smaller exercises focusing on specific application parts for improved completion rates and better analytics.
A vertical image of the word "Shepherd"

Sitemap After card sorting exercise

iterated Sitemaps
first iteration
A photo of a sitemap
final iteration
a photo of a sitemap

Development Phase

Thinking like a user

During the initial stages of creating my application, I developed simple wireframes to establish how users would interact with the main features. 

My main goal was to make it easy for users to schedule and join video sessions with coaches. I used familiar design elements to help users navigate the app with confidence. I also created a user-friendly interface for the workout feature, allowing users to find and complete workouts easily. The onboarding questionnaire was designed to efficiently gather personal information to match users with the right coach. These simple wireframes acted as a foundation, ensuring that the design remained user-focused as it progressed.

Journey through the creative process, from brainstorming and refining concepts to validating and redesigning them. Explore sample features and discover the design choices that shaped them.
A mockup of two mobile screens. One is hifi and the other is lofi.

Begin Workout Flow

Low Fidelity Screens
Lofi mobile screens
Mid fidelity Screens
UI design mobile screens
High Fidelity Screens
Mifi mobile screens
UI Design Screens
Hifi mobile screens
Iterating for Intuitive Design

As I transitioned to mid-fidelity wireframes, the design became more refined, enabling more detailed usability tests.

These tests were essential in collecting feedback and gaining insights into user preferences and behaviors. By analyzing this feedback, I was able to fine-tune the app's design, enhancing its personalized feel and ensuring it met users' unique needs.

The mid-fidelity wireframes captured a more polished version of the app, reflecting the iterative process of incorporating user feedback to create a cohesive and engaging experience.

This stage was crucial in aligning the application's features with the expectations and desires of its users, paving the way for a successful and user-friendly final product.

Revisions based on peer feedback

Dashboard sections
A photo mockup of updated revisions for different dashboard components.
scheduling & scroll bars
A photo mockup of updated revisions for different scheduling and scroll bar components.
buttons & tabs
A photo mockup of updated revisions for different button and tab components.

Explore my step-by-step process

loFi wireframes
A mockup of the user flow for the "start a workout" feature.
A mockup of the user flow for the "start a video coaching session" feature.
A mockup of the user flow for the "find a coach questionnaire" feature.

Usability Testing: Insights and Findings

Integrating User Feedback

The objective is to collect user feedback to evaluate the prototype's functionality and design choices. The goal is to understand user navigation, identify usability issues, and gather insights to enhance app efficiency and user experience.

Moderated Usability Test

An icon image of a hand holding data in the shape of a bar graph for UX design.
  • Number of Participants: 6
  • Prototype Version: Mobile
  • Test Format: Moderated remote usability test
  • Test Duration: 15-30 minutes per session
  • Software Leveraged: Figma, Zoom, and Google Meet
  • Metrics: Errors will be measured using the Jakob Nielsen’s scale

Scenarios & Tasks

Task 1
Complete Onboarding Questionnaire
Scenario & Task Steps

Imagine embarking on a life-changing fitness journey with a dedicated, certified coach committed to helping you achieve your goals. If you are new to digital fitness apps, you might feel uncertain about choosing the right coach, but you can recognize the potential value they can bring.

To improve your experience, a simple onboarding process involves a detailed questionnaire about your information, goals, and preferences. Using your answers, the app matches you with the most suitable coach for a customized fitness and nutrition plan.

  1. Log in and proceed to the onboarding questionnaire.
  2. Respond honestly for the most accurate results.
  3. Submit your completed questionnaire for analysis to be paired with a qualified coach.
  4. Answer each question, paying close attention to multi-select options.
Task 2
Begin a virtual coaching session
Scenario & Task Steps

Imagine settling into a comfortable space for your weekly virtual coaching session with your dedicated coach.

As the session begins, you're warmly greeted, setting a positive tone. Your coach reviews your past week's progress, celebrating achievements and providing constructive feedback. You discuss short-term and long-term goals, address concerns, and receive personalized advice. You brainstorm and refine objectives, creating a detailed task list for the upcoming week that includes workout schedules and nutrition plans.

  1. Locate and select the coaching tab from the dashboard in the bottom navigation.
  2. Find and navigate to the appointment for your upcoming coaching session.
  3. Prepare for your scheduled session by gathering any necessary materials or notes.
  4. Enter the virtual waiting room and wait for your coach to initiate the session.
Task 3
Begin the workout of the day
Scenario & Task Steps

Imagine starting your day by choosing the perfect workout. You open your fitness app and explore various on-demand options customized for different fitness levels and goals.

After considering your mood and energy level, you opt for the featured "Workout of the Day," which offers a well-rounded combination of cardio, strength, and flexibility exercises. The "Workout of the Day" is prominently displayed in the workouts tab and accessed via the bottom navigation bar.

  1. Select the workouts/fitness tab from the dashboard at the bottom of the navigation.
  2. Locate and enter the workout of the day.
  3. Read through the detailed requirements for completing the workout.
  4. Review the exercise list and begin the workout.

Optimizing Insights

Prioritizing and Analyzing Test Results

After conducting usability testing and synthesizing the data, I organized the results using an affinity map. I then employed a rainbow spreadsheet to categorize and prioritize user experience issues by documenting observations, identifying patterns, and rating their severity. Errors were rated based on Jakob Nielsen’s severity scale, allowing me to prioritize the most critical usability issues effectively.

Rainbow Spreadsheet

A photo of a UX research rainbow sheet

Affinity Mapping

A photo of different digital affinity mapping categories.

summary of key findings

Video and Exercise Interface
  • Workout videos should remain fixed at the top of the screen to allow users to progress through exercise lists without scrolling and potentially losing their place.
  • Exercise lists need clarity on whether they should be completed in order or if users can skip around. Provide instructions or an intuitive indication of list progression.
Onboarding Experience
  • Allow multi-select options for specific questions in the onboarding questionnaire.
  • Include input fields for long, personalized answers to gather more detailed user feedback.
  • Move the onboarding questionnaire to immediately after user sign-in to avoid having users search for it in the menu.
Usability Enhancements
  • Ensure buttons are correctly sized and placed where users can easily find them.
  • Consider adding tooltips to indicate how specific components are meant to be used.
  • Add a calendar feature for scheduling, allowing users to view available time slots for coaching sessions.
An icon image of a light bulb representing ideation.

Preference Test

Unveiling User Insights

Post-usability testing, I used affinity maps to organize feedback and rated errors with Nielsen's Severity Scale, logging them in a Google Sheet for prioritization.

A preference test with 11 participants on Usabilityhub.com assessed user understanding and visual appeal. These insights drove a complete reimagining of Shepherd's UI, enhancing its intuitiveness and attractiveness.

Introduction

The preference test aimed to evaluate how well users understand and perceive the designs and how visually appealing they find them. The test involved 11 participants.

Test Subject: Sign-In Screen

The objective of the test was to determine which of the two designs was preferred by the participants. One of the designs emphasized a more detailed layout with individual buttons and icons that directed the user to continue their sign-in process using various social media accounts.

On the other hand, the other design provided fewer instructions. It relied more on intuitive reasoning from the user to know that the provided icons offered the option to continue with their sign-in process without giving any context.

A mockup comparing two mobile screens for a UX preference test.
Test Result: Option A (27%), Option B (73%)

The participants agreed that option B was the superior layout due to its simplicity, directness, and accessibility of the sign-in icons.

A screen shot of results from a UX preference test.

Delivery Phase

Shepherd’s Design Intermission

Clarifying and Improving Usability
Let’s transform Shepherd from an impractical design into a sleek app prioritizing gravity and accessibility in complex modalities.

Shepherd began its journey as "Sentinel," a name reflecting its role as a guiding guardian in wellness. However, user feedback revealed that "Sentinel" felt too formal, prompting a shift to "Shepherd," symbolizing trust and support.

The app's vibrant design initially clashed with its tranquil mission, leading to a refined, blue-centered palette. Blue was chosen to embody trust, calmness, and reliability, aligning with Shepherd's core values of trustworthiness, professionalism, and strength.

Evolving from basic tracking to a holistic wellness platform, Shepherd empowers users with personalized fitness and nutrition solutions supported by certified coaches. This approach fosters accountability, motivation, and sustainable results, helping users achieve their health goals in a supportive environment.

A mockup of two high fidelity mobile screens of the Shepherd app.

crafting shepherd's user interface

The Shepherd community embodies trustworthiness, professionalism, friendliness, personal excellence, and strength.

At Shepherd, our goal is to empower individuals to achieve optimal health through personalized fitness and nutrition solutions. With certified coaches providing expert guidance and tailored programs, we foster accountability, motivation, and sustainable results. Our supportive environment helps users thrive and reach their unique health goals.

These core values and objectives guided the visual design decisions for the application.

UI Design Inspiration
Shepherd white icon logo.
MyFitnessPal
Offers a clean and intuitive interface, making tracking fitness and nutrition goals easy. The organized and modern layout provides a seamless experience for users.
1st Phorm
Showcases a sleek and modern user interface design that is both user-friendly and intuitive. Its visually appealing, responsive layout ensures an engaging experience for users.
Nike Fitness Club
Presents a sleek, user-friendly interface that guarantees a seamless and enjoyable workout experience through its organized and visually appealing layout.
iphone mockup

shepherd App: UI Design Snapshot

A mockup of several UI design screens from the final application presentation.

Conclusion

Final Reflections & Key Takeaways

Design thrives by trusting the process and valuing user feedback. Iterative testing reveals insights that enhance designs, aligning them closely with user needs.

An icon of an arrow
Design Process Appreciation:
Understanding divergent and convergent thinking in design helps explore multiple solutions before selecting the best one, balancing creativity with practicality.
An icon of an arrow
Industry Research Impact:
Studying other industry applications provided insights into design heuristics and UI standards, influencing Shepherd's development with best practices.
An icon of an arrow
User Research Importance:
Engaging in surveys, feedback, and competitive analysis ensured Shepherd met real user needs and aligned with their expectations.
An icon of an arrow
UI Design Challenges:
Extensive preparation and continuous iterations were demanding, highlighting the need for functional solutions over perfection.
An icon of an arrow
Iterative Testing:
Clear, concise messaging and regular summaries helped track progress and document insights.
An icon of an arrow
Effective Communication:
Working alone was challenging for idea generation, whereas teamwork would have led to more robust solutions and quicker progress.
An icon of an arrow
Balancing Feedback and Constraints:
Managing iterations and balancing feedback with constraints required thoughtful compromise to meet user needs and business goals.
An information architecture mockup