← Back

project Case study

Fitness App Design Research

This case study is a research project for designing a fitness app for young working professionals. I did the Research using various UX methods to generate data that would be helpful to ideate for different screens.

My Role

User Research
Ideation
Wireframing
Prototyping

Timeline

April - June 2021

Tools

Figma
Miro

Challenge

Research target user to find out their needs and reqiurments. Based on research data generate idea and create prototype for those ideas.

Process

Goals

  • Initialize the project using design thinking methodology.
  • Define the problem and create POV statement.
  • Use different UX methods to empathize and define the problem.
  • Create initial wireframes/prototype for testing.

Research

Decision Tree

I outlined a path to take to achieve the goals of the project. The decision tree shows what methods were chosen initially for gathering data. Although this decision tree was started at the beginning it was altered during each phase to align with the research data and needs. The decision tree helps to visualize research and remain focused.

Interviews

I interviewed 5 users to gather initial data. I asked specific questions related to their motivations to stay fit and what stops them from exercising. Then I organized data from interviews using affinity mapping. This helped to pick pain points that need to be tackled through the app design.

User Persona

A single user persona is created for the target group that will use the fitness app. The needs and goals of our users are defined in the persona that will help us to empathize with the users while the design for them.

How Might We Questions

These questions are generated from the results of affinity mapping. Posing questions to the problem helps to broaden the spectrum and find out the right solutions for the identified problems.

POV Statement

POV statement is generated to define the problems that we have to solve with our design process. It identifies where the user is right now and where they want to be by using the product (fitness app). POV will be a guide to address the issues throughout the design thinking process.

Ideation

Ideas were generated for the first few screens based on the data gathered from the empathy and defined stages of the design thinking process. Ideation is an iterating process based on the testing data new idea could be generated.

Lo Fi Wireframes

Hi-Fi Prototype

Outcomes

  • I used the Design Thinking process used to create designs for a fitness app. This approach allows keeping the user at the centre stage for making all design decisions. Starting the process with understanding and empathizing with the users set the foundation to reach the design goal i.e. designing a product that is according to user wants and needs.
  • I went through the empathize, define, and ideation phases of the design thinking process using different UX methods such as user interviews, affinity mapping, persona, etc. The wireframes produced will then be converted to prototypes and tested with users to find problems users face and reiterate.
  • I learned in this project that in a design thinking mindset, real design problems is the key to producing great solution. The iterative process helps to perform action when an insight comes from testing.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Decision Tree

I outlined a path to take to achieve the goals of the project. The decision tree shows what methods were chosen initially for gathering data. Although this decision tree was started at the beginning it was altered during each phase to align with the research data and needs. The decision tree helps to visualize research and remain focused.

Interviews

I interviewed 5 users to gather initial data. I asked specific questions related to their motivations to stay fit and what stops them from exercising. Then I organized data from interviews using affinity mapping. This helped to pick pain points that need to be tackled through the app design.

User Persona

A single user persona is created for the target group that will use the fitness app. The needs and goals of our users are defined in the persona that will help us to empathize with the users while the design for them.

How Might We Questions

These questions are generated from the results of affinity mapping. Posing questions to the problem helps to broaden the spectrum and find out the right solutions for the identified problems.

POV Statement

POV statement is generated to define the problems that we have to solve with our design process. It identifies where the user is right now and where they want to be by using the product (fitness app). POV will be a guide to address the issues throughout the design thinking process.

Ideation

Ideas were generated for the first few screens based on the data gathered from the empathy and defined stages of the design thinking process. Ideation is an iterating process based on the testing data new idea could be generated.

Hi Fi Prototype

Other Projects

X-PAK Website Redesign

website redesign
figma
UI design

X-PAK Website Redesign

Otto.de Website Redesign

website redesign
adobe xd
concept

Otto.de Website Redesign