Case Study: FitPlan

Guillermo Martínez
Jul 11 · 4 min read

UX and UI design of healthy plans’ marketplace

Summer is coming. Everybody wants to be healthy and fit. But in order to achieve it you need to spend time and be committed with this purpose. And that is why we decided to start this project with one goal: to help our users to have a healthier lifestyle.

Our first step was to research about the problems of our users regarding having healthy habits in order to create a digital product that help them in their daily activity.

Research

We started to research through surveys and interviews in order to understand our users’ problems for having a healthier lifestyle. According to our surveys, time (81%) is the main circumstance that prevent our users to do sports. With regard to alimentation, eating outside was the main problem for the 51% of our users.

One of our survey’s results

The most productive source of information were the interviews (7) because of the amount of insights we got from the respondents. We know from them that in their ordinary day to day they have a healthy lifestyle, but during their leisure time they ended up doing the same plans that generally entail alcohol and junk food because of the lack of healthier alternatives.

Definition

We organized with an affinity diagram all the insights from our research in order to define the problems of our users:

  • Lack of time.
  • Bad eating habits when eating outside.
  • Lack of healthy leisure alternatives.

And this is how we defined Fran, our main user persona.

Fran, nuestro user persona

We defined Fran as our main user persona because he is a type of user that is not having a healthy lifestyle, he has the problems identified during the research and his environment is not conducive to start doing healthy plans. This tool allows us to better understand his problems and define his user journey in order to find design opportunities for our solution.

Current and future user journey of Fran

Let’s ideate

We already know Fran and his problems. Let’s ideate solutions.

After having understood Fran’s painpoints and problems, we did a brainstorming based on “How Might We?” questions. And that is how we ideated our solution: a marketplace of healthy leisure plans with personalized suggestions and gamification through an achievement system that motivates the user to do these plans. This solution allows the users to save time and have healthy leisure alternative plans.

In order to define the features of our product we reviewed all the insights from the research in an affinity diagram. After that, we used the MOSCOW tool to prioritize the features that would be included in our MVP.

Affinity Diagram

Information Architecture

Once we have defined the features of our product, it’s time to organize the information and content of our digital product.

We started with a sitemap tested through a card sorting test with five users in order to understand if the different categories of our product make sense to our users. Afterwards, we created a user flow, in which our users go step by step through the different screens of our app in order to achieve his goal (in our case, to purchase a plan through the app).

User flow

Quick prototyping

Time for sketching! First we sketched with pencil and paper our low fidelity prototype of the product that we test with users in order to understand if our product fulfills it purpose and discover the problems our users have. Iteration is vital in every design process, and that means to learn from these tests and improve our product before digitalizing it through Sketch.

Low and Mid-Fidelity Prototype

Defining the visual

After having tested our mid-fidelity prototype with users, we started the UI stage of the process with a moodboard that help us to define the brand and its attributes. In this case, we get inspired by healthy and vibrant images with a lot of energy.

FitPlan’s moodboard

Once we have created the moodboard, we defined the brand of this product as FitPlan, a healthy, funny, dynamic and adventurous brand. Afterwards we defined the colors and typography of the product inspired by the moodboard.

Style Tiles

High fidelity prototype

Finally, after having created the brandbook of Fitplan, we applied the defined visual to all the screens of our product.

FitPlan’s high fidelity prototype

This article was originally published in Spanish here.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade