1. header.png

Fitted

Responsive web app
UI Design

Timeline: May-July 2021​

Role: UI Designer

Software used: Balsamiq, Sketch, InVision, Illustrator, Photoshop

balsamiq-logo-screen.png
sketch.png
invision.png
adobe-illustrator.png
adobe-photoshop.png

INTRODUCTION

Fitted’s main objective is to motivate people into an exercise routine that suits their level, schedule, and interests.

It is aimed in particular at users who are new or returning to fitness and might need some guidance in regards to the type of routines that would help them achieve their personal goals.
In addition to this, Fitted wants to make it easy for users to include physical exercise into their schedule by providing a wide range of workouts by duration and type. 

THE PROCESS

From Concept to Mockups

A bit of UX Design

My role as UI Designer overlapped with UX Design as I was provided with the main Persona, User stories, and a Feature Requirements list.

From the delivery of these materials, I was tasked to elaborate user flow diagrams. These not only helped clarify the primary product features and their placement in the user journey, but also to define the core functionalities of Fitted that were then developed as part of this UI project. 

The key product features that were defined in this phase were:

  • Log In / Sign Up

  • Profile Set-Up

  • Daily Challenge search

  • Workout search 

  • Workout flow

  • Rewards system

  • Adding a workout to your schedule

Fitted User Flow Diagram

User Flow Diagram (tap to zoom)

Wireframing

Using the user flow diagram as a starting point and adopting a mobile-first approach, I sketched ideas for low-fidelity mobile wireframes with pen and paper. These were then digitalised and tidied up with Balsamiq.

low fidelity wireframes.jpg

Overview of the low fidelity wireframes.

The low-fidelity wireframes functioned as the starting point for the development of the product's user interface.

The next step involved setting up a responsive grid, which would help in the adaptation of the design for different breakpoints later on - and the implementation of visual design principles - such as spacing, visual hierarchy, and the inclusion of visual design patterns. 

Mid-fidelity wireframes.jpg

Developing the Style

The mid-fidelity wireframes defined the information architecture of each screen, but it was necessary to give a visual identity to Fitted’s brand before moving on to the next wireframing stage.

Fitted is an inclusive, welcoming product. It is targeted to people who don’t yet have a workout routine, who are just getting into exercising or are coming back to it.

 

Fitted’s users were kept at the centre of the brand development, as it was essential to create a product with a friendly, trustworthy, but also exciting character. 

moodboard1.jpg
moodboard2.jpg

This process started with the development of two moodboards, with the intention of identifying the style that would fit best with Fitted’s users and its own personality.

The two palettes presented two different images of exercise and workout. Option 1 presented a more dynamic nature, with higher contrast images, a black and white palette with slight colour accents. Option 2, on the other hand, showed a more relaxed, friendly, and natural approach to fitness and workout. 

Keeping Fitted's users and goals at the centre of the discussion, option 2 was an easy winner. Not only it helps Fitted stand out ourselves from its competitors, but it also delivers a feeling of trust and friendliness which attracts fitness newbies who might be intimidated or worried about starting a new fitness routine. 

Once the final moodboard was chosen, I had a visual guideline in the definition of Fitted's style and character. This functioned as the basis for other visual style decisions, such as color palette and typography.
 

quicksand font.png
Fitted colour palette.jpeg

The Fitted colour palette was designed with colour psychology in mind. The blue and green tones inspire tranquillity and trust, while the bright and saturated hues help convey excitement and action. The orange colour was chosen to signal errors and important messages as it draws immediately the user's attention.

For the typography, I considered several options of sans-serif fonts with rounded shapes and smooth edges. The goal was to convey friendliness and empathy also through typography. The final choice fell on the font Raleway, which presents all the mentioned characteristics, while also being widely available as a web font.

The Fitted colour palette and typography were implemented in the mid-fidelity wireframes.
Including the brand colours, typography, and imagery in the wireframes allowed me to define the looks of UI elements such as buttons, navigation items, dashboard, and icons.

 

After some tweaks determined by technical requirements and implementation of visual design principles, I obtained a set of high-fidelity wireframes - then turned into a prototype through InVision.

All visual elements looks, descriptions, and use cases were compiled in a style guide which can be downloaded below.

High fidelity wireframes.jpg

RESPONSIVE DESIGN

Adapting the design to different devices.

Once defined the mobile designs, it was time to put the responsive grid to use and develop the tablet and desktop versions of the app.

This was done by defining the tablet and desktop breakpoints and adapting the 12-column responsive grid for each device. Then, it was necessary to adapt the layout of the elements on-screen to guarantee visibility, usability, spacing, but also to fill the extra space given by larger screens with relevant content. 

Home_tablet.png
Home_mobile.png

The bottom buttons in the mobile Homepage were expanded into content sections in the Tablet and Desktop version.

Workout_Desktop.png
Workout_Home.png

The Workout page consists of video-based content, and through its breakpoints it follows the structure of known video platforms (e.g. YouTube) to encourage usability due to familiarity.

LOOKING BACK & AHEAD

What I learned and Fitted's next steps.

Learnings

I enjoyed working on Fitted, and the project was a great occasion to learn more about UI design.

Previously, my approach to UI design lacked some technical considerations and relied mostly - if not only - on creative decisions. With Fitted, I was able to apply the analytical approach typical of UX Design to the design of the user interface, by considering the product users at all times and building the product identity around it.  

I am looking forward to solidifying my UI Design approach and process with the next project!

Next Steps

The current status of the project provides a good starting point for the development of Fitted from concept to product. However, as in the nature of iterative design, there is potential for improvement and further development. 

While I would like to develop additional features - such as calendar function, and user progression monitoring and stats - I think that the next immediate steps should focus on refining the current features. In particular:

- Polishing the icon design, and creating a full, branded icon set

- Expanding on the current scheduling function 

- Developing a more sophisticated UI for the calendar, including an option for synchronisation with Google Calendar/ iCal