Objective

Starting a fitness routine can be hard for those who are new or returning to exercise. It’s important to have a plan and easy access to a workout in order to ensure success.

Challenge

Developing a responsive web app for various exercises to provide encouragement that is available for anyone at any level. While it may be hard to find time to work out, the ability to search with filters and customize and schedule workouts will help to ensure any user can achieve a healthier lifestyle.


Solution

Fitted is a fitness app which allow the user to choose from hundreds of exercises and customize full workouts. With features such as scheduling, reminders, and awards – from beginners to advanced – will boost performance.

Tools

Figma
Photoshop
Illustrator


My Role

UX Design, UI Design, User Research

For whom?
  • People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.

What?
  • A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.

When and where?
  • Whenever and wherever are users want, the web app aim to get users into a routine that suits them and they will use the web app while hey are searching for, scheduling, and following routines.

Why?
  • To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)

“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”

Goals
  • Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.

  • To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.

  • As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.

  • Rebecca wants help finding routines she can enjoy.

Tasks
  • Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.

  • In addition, she wants to find short exercises that she can do multiple times per day in between other activities.

  • She wants the tool to keep her motivated as well, as her schedule can often be distracting.

Environment
  • Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.

  • Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.

  • Technological: Rebecca is very tech savvy, as she works on computers every day.

Disclaimer:
All the information presented in the empathize and define stages were based in the provided project brief

User flow

With the information given on the project brief, it was time to start to create a user flow according to the needs of our user persona, also in order to understand the steps and amount of screen need it our user to successfully achieve their goals.

User Story
  • “As a new user, I want to be shown how the exercises are done, so that I know Iʼm doing them correctly”.

  • “As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.”

  • “As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.”

  • “As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.”

Wireframes

I started sketching low-fidelity wireframes to reflect the steps in the user flow. After the initial sketches, I designed mid-fidelity wireframes adding in more screens, always focusing in keeping a nice, intuitive and minimalistic design easy to scaled in other screen such as tablets and desktop computers.

Moodboard

After having a define low-fidelity wireframe it was time to set up the look and feel of the web responsive App, therefore the first step was developing a Moodboard that reflect the concepts and values that our product is build on.

Encouraging / Positive / Energetic


High fidelity wireframe

With a clear view of the look and feel and the concepts behind the project it was time to redefine the design.

 


Style guide

Icons

Monochromatic: Icons are solid color in accordance to the color palette and contrast.

Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.

Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.

Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.

Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.


Fonts

Buttons

Notification

Timming Bar

Form field

Time Scroll
Imagery

Appropriate Images

The pictures should show a friendly and save environment, following the same principles as the color palette, the direction we are establishing is to give our targeted users is a friendly web app, where they can feel related and not scare or intimidated, also diversity in ethnicity is also important showing that no one should be be set aside. Basic training, having fun and enjoying the time during the exercises, the pictures should show encourage, positive and energetic.

Responsive design breakpoints

To begin making my designs responsive, I selected my tablet and desktop breakpoints and scaled my existing grid.
Finally, I applied the visual design as dictated by the Fitted style guide to my wireframes.

Feel free to interact with the prototype

It was an interesting challenge, thinking in a responsive web app, going from Mobil first and escalate the design in the different breakpoints and keeping a consisting look through the different stages.

During this project I added to my process the concept of a Moodboard, which in the end become an essential part of the process to give the look and feel of the web app and start to build the face of the design.

The journey trough this project added more value and new elements or tool to my workflow, not only in a technical level, by working with different software, but also in a conceptual level by adding new knowledge in terms of UI Patterns, Style guide lines, layouts for responsive design and pixel perfection – all these things showed me that UI design requires taste and a holistic vision

Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Youtube
Consent to display content from Youtube
Vimeo
Consent to display content from Vimeo
Google Maps
Consent to display content from Google