Screenshot

FITLEY

ROLE : UX/UI Designer
CLIENT : DESIGNATION Labs
TOOLS : Sketch / Axure / Illustrator / POP / Invision / Photoshop
Team : Rick Franklin, Maria Kreighbaum, Andrea Algiers 

My team of three was given six weeks to create a digital solution that would help people adopt healthier lifestyles. I created an app concept that paired behavior change principles, habit formation, and mentorship to encourage fitness. My team chose to execute on the concept, from task flows to hi-fidelity prototypes. We user-tested and iterated until we presented our offering to a panel of industry judges, who all agreed that we had created a viable concept ready for development.

Process

To accomplish our solution we broke the UX and UI process into 6 one week sprints:

  • Research
  • Synthesis
  • Ideation/Concept testing
  • User Interface Design
  • Prototyping/Usability Testing
  • Refinement

Deliverables

Research plan

Competitive analysis

Problem statement

Design principles

Persona

Journey map

App map

Paper prototypes

Wireframes

Style tiles

Hi-fidelity screens

Usability test plan

Usability test report

image

RESEARCH & SYNTHESIS

We began with a research plan that included interviews, domain research and competitive analysis to explore how wearable devices and the pursuit of fitness are experienced. 

Screenshot

Interviews

We recruited and interviewed 12 participants in two days. Interviewees came from a broad range of ages and exercise habits, as well as subject matter experts who gave us insight into the fitness domain.

A  well-rounded picture of behavioral trends emerged, including:

  • People with successful fitness habits:
    • Break their fitness down into small, manageable steps
    • Use motivation and enjoyment during workouts to increase sustainability
    • View fitness habits as essential to a normal lifestyle
    • Have a feedback loop with their body and mind responding negatively if they don't exercise
  • Social engagement is essential to successful fitness primarily through accountability, discovery of new exercise ideas through recommendations, and enjoyment through socialization
  • Users generally didn’t find wearables' data useful or contextualized.

While gathering insights from the interviews we were conducting domain research to learn more.

Domain Research

Knowing that fitness habits are hard to achieve, I became interested in designing for behavior change. I explored Fogg’s Behavior Model, which says that if a user (1) has enough motivation and (2) the proper ability to take an action, (3) a trigger will activate them to take the action.

Normally this is applied to encouraging a user to follow a call to action on a website, but experts like Michael Wu, who specialize in behavioral design, have applied it to fitness apps. They recommend keeping fitness changes small and increasing them over time. Keeping it easy means users are more likely to keep their new habits up even when they aren't looking forward to the next workout.

We paired these insights with the behavioral insights from the interviews to start our synthesis

Screenshot

Synthesis

We began synthesizing our insights with affinity mapping. There was a clear pattern of fitness habit formation connected with social interaction that emerged. People described three stages of their fitness journey:

Pre-Habit 

People led an inactive lifestyle, and their body gave negative feedback for exercise. Their primary motivators were met by non-active means. For example, if enjoyment of life was important to a user, they would find it through eating or watching TV instead of playing a sport.

Habit Acquisition

An event or person precipitated physical activity, which promoted it to place of priority in the person's life. People began their habit acquisition through small, consistent actions with the influence of others.

Habit Formation

Fitness habits were achieved when physical activity was embraced as a non-negotiable. The person's body gave positive feedback from exercising. Social interaction was a key part of habit maintenance.

Persona & Journey Map

We created two personas who could contextualize our insights and help us empathize with user goals and needs. We focused on the primary persona, Erica, an overweight 28 year old who is outgoing and likes a challenge, but doesn't have experience with exercise.

Erica begins her fitness journey by going to a Zumba class at the invitation of a friend. She enjoys it, and begins to form a habit, but her friend moves and Erica stops going. She joins Classpass, which allows her to try other activities, but isn't allowed to do any activity long enough to form a friendship with participants, so she eventually discontinues her membership. Erica decides to try something on her own, so she buys FitGirls Guide, and joins the website. She finishes the 28 day at-home program, but is exhausted by the effort required and doesn't keep it up once the program is done. Erica's final attempt is to get a fitness tracker, which ends being unmotivating as she isn't interested in walking to make the suggested daily "steps". Erica finally decides that exercise must not really be for her.

Screenshot
image

Problem Statement & Design Principles

Our research, filtered through Erica’s journey, led us to our problem statement:

“People need a structure for social engagement that keeps them committed to a fitness routine”.



We assembled a set of 5 design principles that would guide our design decisions moving forward:

Verifiable

User data needs to be verifiable to show the user their actual progress and minimize their data input

supportive

The digital solution needs to feel and act supportive as the user takes their fitness journey

sustainable

The solution needs to encourage sustainable fitness goals

flexible

The solution needs to be flexible to adjust to Erica’s life changes and curiosity

approachable

The app needs to feel and act approachable to keep Erica feeling capable and equipped to grow new habits

image

Ideation &
Concept testing

image

Ideation

Each person on the team developed an idea. I focused on users like Erica who need help creating a sustainable pattern of activity. I likened my concept to the structure of a car with:

  • a frame of habit formation achieved through behavior change
  • an engine of mentorship which serves as the motivating social connection
  • a body of fitness propelled by the habit formation and mentorship

The app begins by giving the user an easy fitness habit to acquire based on the kind of activities the user inputs in preferences. This habit would be achieved through weekly goals that increase over time.

Users would be connected with a mentor for encouragement, help, and accountability. I chose mentorship instead of a coaching because of the supportive, relational, and long-term character of mentorship, which is well-suited to the perseverance needed to succeed in long-term behavior change.

Finally, the app sends positive reminders to help the user with follow through until their habits are formed. With this basic structure I began to examine how our persona would use the app.

Flows

I created a user story, scenario and use case for Erica. These informed an app map that gave initial shape to the app around:

  1. Profile setup that intelligently pairs the user with a mentor and an achievable exercise regimen.
  2. A dashboard that tracks the number of times a week the user has exercised to encourage habit formation. It also shows a journey map of the user's progress over time.
  3. Connection with mentors through messaging and optional phone calls for advice and support.
  4. Additional exercises the user can use to maintain interest in their fitness routine.
  5. Inspirational stories of other users' fitness success for additional mentorship.

Screenshot
image

Concept Testing

My team tested each of our concepts with five users who followed a task flow while doing concurrent thinking-aloud. They were asked follow up questions to further explore their experience.

From the tests we found that users found the flow simple and easy to navigate and they liked the idea of a mentor who could give advice, but they didn’t fully understand the specifics of what a mentor was or what their qualifications were. They also did not like the app intelligently giving you an activity, or pairing you with a mentor - they wanted to choose for themselves.

Based on this feedback, I revised the concept so that the app would give suggestions for activities to do and ideas for mentors to reach out to, but users would be able choose their activity and connect with any mentor they choose.

Pic Pic Pic Pic

Wireframes

I then created a set of wireframes for the concept and presented them to a panel of UX experts. They were very well received, and my group decided to move forward with my concept as our project. The team got feedback that our user would want more social connections than one-on-one the mentor, so we added a team of three other users who are led by the same mentor who can provide more interaction, encouragement, challenge, and learning.

image

User Interface
Design

Screenshot

Style Exploration

Each team member created mood boards, style tiles, and mid-fidelity screens. I chose to a design around keywords that our persona wanted to feel as a result of using the app - Confident, Transparent, Successful, and Accepting. The colors reflected a bright, positive tone with a broad appeal. The fonts were chosen to project clean confidence.

image

Initial Screens

After consulting with a UI design expert, we focused on a team members' design that features a clean and engaging homepage.

It includes:

  • A single, bold metric for the user to quickly understand their status in achieving a weekly goal. The number is reinforced by a colorful background that fills in as the user accrues minutes toward their goal.
  • A display of daily goals met in the previous week for encouragement
  • A group of four exercisers led by a mentor for social connection

Prototyping & Usability Testing

We worked together to build out the new UI design, and created three complete task flows ,which we uploaded to InVision for testing.

See Invision Prototype

The results revealed a few key trends:

  • Parts of the flow were difficult to navigate, including critical errors navigating to screens from the homepage
  • Users still weren’t clear on what a mentor was and didn’t want to be paired with a team without choosing
  • Users didn’t understand what “active minutes” were - the key activity measurement that is featured on the home screen.
image

Refinement

We made key UX and UI revisions to the app based on the usability testing. Our final app concept included groups with open-membership based on experience, location and activity led by a mentor who:

  • Organizes regular activities
  • Commits to showing up for the activities
  • Helps members with questions and advice online and in real life
  • Users choosing to join a group after experiencing it for themselves
  • Further explanation of active minutes given during on boarding
image

Finalization

Our final concept represented a viable solution to the problem of social engagement that encourages fitness habit acquisition in an attractive and sustainable way. It gives users choice in activity and social connection, followed by an engaging social structure that provides enjoyment, advice and accountability.  It also supports with activity tracking, additional individual activity ideas, and inspirational stories of success from other users.

We finalized our HiFi screens and made a final presentation to a panel of UX and UI experts, who confirmed that our prototype was well thought out and could be moved into development if we chose.


Final Invision Prototype

Final Thoughts

This was my first time working through the entire UX and UI process in a group setting. I learned about conducting useful research, synthesizing, working in quick sprints as a team, and the value of holding your ideas loosely.

I also discovered I can’t get enough of research, synthesis and ideation. Conducting interviews was actually fun, and gleaning rich and often surprising insights was incredibly rewarding. In addition I will take from this project a curiosity to learn more about persuasive design, and how it can change human behavior for the better.