Summary

Summary

Summary

The Problem

Health-conscious millennials need non-traditional and non-numerical methods of tracking their health so that they can be motivated by how practicing healthy habits makes them feel rather than the superficial results.

The Solution

Dueling Dragons is a gamified fitness app that encourages users to work toward fitness goals alongside their friends in order to power up their dragon and duel other teams' dragons.

The Process

1. Research

Domain Research, Competitive Analysis, Survey, User Interviews

2. Define

Persona, Empathy Map, Problem Statement, Design Principles

3. Ideation

6-8-5 Sketching, Low-fidelity Prototype, Concept Testing

4. Prototype + Test

User Flow, App Map, Mid-fidelity Prototype

5. UI Design

Annotated Wireframes, High-fidelity Wireframes

Back To Top
UX/UI

Dueling Dragons

Mock Client

Our mock client believes millennials are seeking alternative ways to stay healthy and active, while also satisfying their appetite for adventure and specialized fitness experiences. They want to take advantage of need to carve out a new product market.

Project Brief

Research the needs, goals, motivations, and frustrations of millennials around health and fitness and design a digital experience based on the research.

Target Audience

Younger, digitally savvy millennials who already have some type of fitness routine, eats healthy, and is knowledgeable about health brands.

Team

4 UX Designers

Gotta Run?

Get a SummaryJump to Solution

Millennials and Fitness

Millennials and Fitness

Millennials and Fitness

Millennials and
Fitness

Using the client brief and exploratory research as a starting point, we first established what we knew about millennials and fitness.

Physically active

The 2019 Physical Activity Report found that over 60% of millennials participated in some form of high calorie activity, more than any other generation.

Community

Experts in the fitness space find that millennials are turning to fitness activities as a means to meet people and find a community.

Dietary struggles

Though there is an increased interest in fitness among millennials, most fail to meet federal guidelines for fruit and vegetable intake.

Research goals

After our preliminary research, we devised a research plan aiming to learn the following:

  • Millennials' health and fitness habits and what motivates them to continue with those habits

  • How important health and fitness is to millennials, and why

  • What obstacles or frustrations millennials may have with working out and staying healthy

  • How millennials incorporate technology in their fitness routines

Empathizing with our Users

To empathize with and understand our users, we conducted interviews with 9 users and 4 subject matter experts and conducted a survey with 47 responses.

Survey

47

Respondents

User Interviews

9

Participants

SME Interviews

4

SME's

By analyzing our survey results, we were able to learn more about millennials' health and fitness habits, as well as what technology they use in their routines.

  • Millennials participate in a variety of fitness activities, some traditional, some adventurous

    While 78.7% of respondents do go to the gym as part of their physical activity, only 12.8% of respondents said going to the gym was their only form of physical activity.

  • MyFitnessPal is a stand-out competitor among fitness apps

    53.2% of respondents use apps for health and fitness, and out of those who do, MyFitnessPal was the most popular.

  • Millennials often participate in fitness activities with their friends

    59.6% of respondents partake in physical activity with their friends while 36.2% participate in physical activity alone.

After organizing our notes from the user and SME interviews in an Affinity Diagram, we found the following key insights:

  • Users want a personalized experience

    Users noted frustration about not being able to customize their fitness experiences.

  • Users want flexibility in their dietary plan

    While participants understood diet is important for their health, they still did not want to limit their options or give up their favorite foods.

  • Users were concerned about their future health condition

    As millennials get older, they are becoming more concerned for their future health condition and cite this as a motivation to embrace fitness.

  • Users want their fitness activities to help them feel good about their minds and bodies

    Users valued good feelings and enjoying their fitness activities, citing this as a deciding factor for what kind of fitness activity they participate in.

Synthesizing our Findings

From our user research we encompassed our findings into two personas and used empathy maps to establish their goals, motivations, and frustrations.

Marta, 25

Marta, 25

Occupation
Grad-student, part-time barista

Physical Activity
Running, Yoga

Diet and Nutrition
Mostly healthy

Motivations

  • Wants to be in good mental and physical shape to do well in school

  • Spending time with friends while exercising

Frustrations

  • Fitness classes don't always fit into her schedule

  • Gyms and classes are expensive

Tim, 31

Tim, 31

Occupation
Financial Analyst

Physical Activity
Gym, Boxing, Rock-climbing

Diet and Nutrition
‍Somewhat unhealthy

Motivations

  • Finding fun things to do on the weekend to destress

  • Growing concern for his health as he gets older

Frustrations

  • Struggles with eating healthy at work and work events

  • Gets bored of just going to the gym

Current Popular Fitness Apps

After synthesizing our user research we analyzed what popular fitness apps offered.

Physical-Focus Apps

Track health through calories, active time, and steps-taken

Mental-focus Apps

Track health through progress over time and improvements in different categories

Competitors

Physical or Mental Focus

Physical

Physical

Mental

Mental

Health Tracking Features

  • Calorie-focused diet tracking

  • Food diary

  • Community for advice/tips

  • Heart rate tracker

  • Calorie-focused diet and activity tracking

  • Fitness challenges and adventures

  • Audio guided meditations

  • Audio sessions for stress, mindfulness, and sleep

  • Courses catered to specific topics

  • Minigames to work out your brain

  • Tracks your progress through a "Lumosity Performance Index"

  • Adapts to your weaknesses and strengths

Overall, the physical fitness trackers mostly tracked fitness through traditional, numerical methods. While mental health apps tracked health through more qualitative terms.

Define

Define

Define

Define

After synthesizing our research we noticed there was a gap between what motivated millennials to stay fit and what popular physical fitness apps offered.

Motivations

How their minds and bodies feel in order to achieve long-term health

Current offerings

Calorie counters, activity trackers

Based on these findings, we created a problem statement to focus our project on:

Health conscious millennials need a way to track their fitness, nutrition, and wellness in non-traditional and non-numerical terms so that they can stay motivated about their fitness, because they are more concerned with the satisfying feeling of physical and mental progress rather than quantifying results.

To give us additional direction while brainstorming, we selected design principles based on our research findings:

Good Vibes

Users should have fun and feel good after using our product without feeling bad if they make a mistake or do not succeed. Users should feel welcomed, not intimidated, by the product.

Promote self-awareness

Our product should encourage the user’s connection between mind and body, allowing them to be more in-tune with their overall health and wellness.

Personalized

Users are unique and their experience should be inclusive to their individual needs.

Sustained Engagement

Our product should be able to consistently engage the user so that they can maintain long-term good health.

Ideation

Ideation

Ideation

With a clear goal and guiding design principles, we started to brainstorm possible solutions.

Brainstorming Divergently

Our team used 6-8-5 sketching to brainstorm various solutions for our problem statement. After giving feedback and discussing the various ideas, we each took different concepts to develop further on our own.

6-8-5 Sketches

To compare and contrast each divergent concept, we conducted concept testing with users. We specifically looked for how each concept conveyed our design principles.

1. Fitness Competition Concept

Compete with friends in a fitness competition against other teams. Winners are determined by how many fitness tasks are completed within the time limit.

Strengths

  • Good Vibes

    Users thought the concept was fun, especially being able to participate with friends

  • Sustained Engagement

    Users felt the competition aspect would encourage them to continue using the app

2. Avatar Tracker Concept

Raise a fictional avatar, similar to Tamagotchis, by tracking their own health goals. Lets users visualize their health progress.

Strengths

  • Good Vibes

    Users liked the avatar and thought the concept was cute

  • Promote Self-Awareness

    Users liked being able to see and track their progress visually in a less traditional way

3. Activity Recommendation Concept

Get personalized and customizable recommendations to help work toward specific health and fitness goals. Provides tips and information about each activity.

Strengths

  • Promote Self-Awareness

    Users liked that this concept taught them about each activity and how it helps their health

  • Personalized

    Users appreciated being able to customize their activities toward their fitness goals

4. Nutrition Tracking Concept

Log and track meals to get specific dietary recommendations based on the nutritional value.

Strengths

  • Personalized

    Users liked getting recommendations specific to their current lifestyle

Converging our Concepts

We used our concept testing feedback to determine how to converge our concepts into one cohesive idea. We determined that the fitness competition concept would serve best as our base because of its success in sustained engagement, which other concepts struggled with, as well as its potential in the other design principles. We combined this with ideas from other concepts in order to improve the concept where it was lacking.

Base: Fitness Competition

Compete against other teams with friends by completing fitness tasks

+
More Good Vibes

Teams have an avatar that reflects the collective progress of the team (from the avatar tracker concept)

+
More Personalized

Tasks work toward specific fitness goals so users can choose activities fit for them (from the activity recommendation concept)

The Final Concept

The Final Concept

The Final Concept

Dueling Dragons is a fitness competition app where users team up to power up their dragon by completing fitness "quests." At the end of the "duel" the team with the strongest dragon wins.

Mid-Fi Prototype

User flow

Onboarding

New users can sign up with email, Google, or Facebook. Once they are signed up they can either create a new duel or join a duel using an invitation code.

Power Up your Dragon

Players go to their "Quests" screen to see what fitness tasks are available. They can filter these tasks if they're looking for something specific. Once they have done a task, they can submit the Quest for completion with photo proof. And their dragon will level up!

Check you and your friends' progress

Players go to their "Quests" screen to see what fitness tasks are available. They can filter these tasks if they're looking for something specific. Once they have done a task, they can submit the Quest for completion with photo proof. And their dragon will level up!

UI Design

Because our idea was so fantastical, I knew the concept would depend heavily on the branding and visual design of the app. I focused the branding on our concept of dragons and gamification.

Color Palette

To complement the dragon avatars, I wanted the color palette to invoke a fantastical, medieval feeling.

#59284A

Magical, Fantastical, Royal

#FFBC3E

Bright, Exciting, Triumphant

Typography

The theme of the app is fun and entertaining, but the goal of the app is universal and at the end of the day, functional. Because of this I wanted the typography to be expressive, but still easily readable and clear.

Headings - Rowdies

  • The boxiness of the ends of the letters give an older feel without the full blackletter type styling.

  • Especially in the dot of the "i," it is reminiscent of gems and crystals that are often referenced in medieval fantasy genres.

  • The thickness of the letters make them stand out as headers.

Body - Rubik

  • The body font is simpler, meant to be easily read and used in more functional parts of the app (e.g. when submitting a task)

Buttons

The design of the buttons were meant to have a 3 dimensional look, almost embossed, to give the feeling of medieval times. The slight-raised look is also reminiscent of older video games and mimics the raised buttons of video game controllers.

Button design

High-fidelity Wireframes

Reflection

Reflection

Reflection

Because this was a school project, the length of the assignment did not allow time for further testing of the converged concept. But if we were able to, I would have wanted to test the mid-fidelity prototype, then make changes before getting into the UI design. I would also do more user research and testing for the UI design specifically to make sure the design complements the theme without being too distracting.

Next Steps

1. User testing for concept validation and usability

2. Make changes based on testing

3. Gather user feedback for high-fidelity screens

Personal Reflection

This was the first UX project I worked on with a team of other designers from research to prototyping. Overall it was a great learning experience going through the full process ourselves. I learned a lot about working as a team and communicating well in a remote setting (not everyone lived in the same city).

Although there were many successful things about this project, there were also many challenges and things that I would have done differently. One of the biggest challenges was in converging our ideas into one cohesive concept. We had actually gone through many iterations of each divergent concept before converging, taking time away from developing the converged concept. This resulted in a very rushed process where we jumped to conclusions without time to reason or evaluate. In the future I would converge earlier and iterate on the converged design. But through this particular experience, I was able to learn how to make tough decisions in the face of tight deadlines.