top of page
Mobile_Situ.jpeg

FITTED

MY ROLE: UI Designer

TIMELINE: April - May 2023

CLIENT: Career Foundry

(Student Project)

CONTEXT: UI Case Study: Fitted is a responsive web app designed with a mobile-first approach

TOOLS: Figma, Marvel, Invision

What is
Fitted?

Fitted is: A responsive web application offering users tailored exercise solutions that fit their daily routines, with progress tracking and interactive features to keep motivated.

Fitted was born from a desire for an app that helped users find their way back into regular fitness, with routines that suit their level, schedules and interests. 

This responsive web app aims to help users by providing routines, guides, interactive examples, and information.  The unique challenge is designing and providing easy, quick (as little as 5 minute) routines that encourage the users to adopt physical exercise into their daily routines, no matter how busy their schedule, thus encouraging real, sustainable, physical progress.

Understanding who Fitted is for 

According to the brief and objective, Fitted is for users who are new or returning to fitness, and who are looking for activities they enjoy, with the aim of getting into a good routine. It is to be used whenever and wherever users feel comfortable and motivated. Exercise should be fun and suited to each user, increasing their health and allowing users to enjoy the associated benefits of a healthy lifestyle. With this in mind, Rebecca is our user persona for Fitted: 

Rebecca_Persona_01.jpeg

Taking the brief to the drawing board

Using the brief, persona and user stories to inform key user motivations, I began by sketching out potential user flows. The basic user flows informed a sitemap, which I used to then begin sketching out ideas for each screen users would need to complete each flow. 

1. Landing page.jpeg
3. Welcome and Introduction.jpeg
7. Dashabord.jpeg

From these sketches, I used Figma to begin putting together low-fi wireframes. These wireframes contained the basic ideas, keeping in mind the user objectives, needs and desires, of what Fitted would become. 

FITTED_Low-fiwireframes_Portfolio.jpeg
Fitted Full User Flow.jpeg

Crafting the visual mood

With the low-fidelity wireframes in place, I turned my focus to the visual aspects of the design. I created two mood boards, informed by the project brief, to help distinguish the tone and visual identity of the brand.  

FITTED_ Energise Mood Board.png

The 'Energiser' Mood Board: inspired by the key words Routine, Easy & Fun. This board exudes bright, engaging, energetic imagery that motivates and inspires users to join. 

The 'Empower' Mood Board: inspired by the key words Motivate, Schedule & Progress. This board promotes longevity, choosing progress over immediate results, making this fitness journey more accessible, grounded and 'doable'.

FITTED_ Empower Mood Board.png

The empowerment mood board represents empowered physical change but in a slower, more meaningful way. The energise mood board conversely advocates for jumping into fun routines with immediate results. As the brief outlines that it aims for an "easy, informative and fun" style and mood, I chose the Energised mood board as I believed it better represented the brief requirements.

Bringing brand to the wireframes

Angle_Mobile_Device_Mockups_V2.jpeg
Mobile_screens_V2.jpeg

Introducing Interaction

Interactive elements in responsive sites can improve user engagement and enjoyment. In order to maintain usability and familiarity, I have designed intuitive, recognisable, screen interactions. Users can scroll vertically to see more information or further features of the site. A horizontal scroll is used to reveal further routines. Both scrollable features are indicated either with ellipses or ongoing information. Most navigation is achieved by tapping, or clicking, with confirmation modals stopping any accidental actions. Whilst these methods are familiar and simple to use, there are elements where I have included animation to increase engagement, for example, the landing page loading screen.  

I also took time to consider how Fitted might benefit from audio and haptic feedback. It is common now for users to need added feedback, either through sound or a physical response. This includes user accessibility and environmental challenges. With this in mind, I determined a few occasions where added feedback would be beneficial for Fitted users:

Audio Feedback 

Audio feedback ideas: Notification alerts, confirmation or warning sounds, and gamification sounds, e.g, when users interact with a routine, either starting or marking it as completed. These opportunities would be helpful in alerting users to potential mistakes, giving the feedback that an action has been completed, notifying them with helpful reminders and boosting motivation through success sounds/vibrations. I believe these would help to keep users engaged and improve the users experience by making actions helpful and keeping usability smooth. 

Haptic Feedback 

Haptic feedback ideas: notification vibrations, vibrations to alert users of an error or potential mistake, vibrations to enhance the experience of sending Applauds to a friend and vibrations when routines are starting/stopping. I believe this type of physical feedback in these occasions would help users to identify errors, and be alerted to potential mistakes, e.g. deleting information. These days it is not always possible to have sounds on, so utilising vibrations as physical feedback will enhance the users experience, ensuring they do not miss anything if they cannot hear or have audio turned off. 

Style Guide:
Creating brand consistency

One of the easiest ways to maintain a user base is to create brand familiarity and trust. There are many ways to do this, but in terms of style, having a consistent, intuitive and enjoyable interface allows users to feel comfortable, safe and engaged with the brand. By creating a style guide, with clear principles, examples and guidelines the brand can continue to grow with its user's experience at the forefront of considerations. This guide makes it easy for designers, clients, team members and more to understand the rationale behind each design decision, as well as to keep the brand consistent when designing new features and following new ideas. 

Typography

TYPOGRAPHY.jpeg

Chosen to be accessible, bold and motivating, this typeface is simple, clean and effective. 

"Important for ensuring unity amongst every aspect of the brand, the typography has been chosen to visually engage, subtly lead users through the site and meet accessibility requirements."

Colour Palette

Taking care to ensure accessibility, this colour palette uses bright, bold, warm and welcoming colours to guide users through their fitness journey. 

 

"Colour plays an integral role in Fitted’s brand. The palette has been chosen to evoke a playful energy in our users, to encourage with soft, warm oranges and delight with our brands gradient of orange (#FA9702) and pink (#FF004C).


Our primary blue is bright, uplifting, engaging and offers a fresh, revitalised feeling when used in conjunction with the warm background #FFCDB1 and feature background #FFF6E9. It provides contrast from our dark and bright oranges, #B24304 and #FD6008 and nicely draws a users focus by standing out."
 

Colour_Palette.jpeg

Icon Sets

ICONS.jpeg

The icons for fitted have been created with familiarity in mind.

 

"We want users to be able to intuitively navigate the app, whilst finding delight in the emoji-like icons relating to the workouts and their fitness progression, shown in the brand gradient."

Explore the full style guide here

Putting it all together

With the visual style determined, I curated each screen to match the visual style and brand I intended for Fitted. I then used Figma to create a clickable prototype to assess the usability and functionality of the responsive design, as well as to see how the interface worked to enhance the user experience. 

Let's talk responsive

This project has been designed with a mobile-first approach, with the idea of utilising progressive advancement to increase the interactions, functions and even features for larger screens/devices once the basic structures have been designed (and optimised) for mobile device. I believe designing in this way ensures that users can access everything they need to, without distraction or problems, on the smallest screen. These days mobile screen time takes up a high percentage of a persons device usage and so optimising mobile screens first allows designers to prioritise features and create a lean product. 

Using a responsive grid, I began with mobile, then used progressive advancement to scale my lean designs up for tablet and desktop use:

Mobile

Grid_Specs_ Mobile.jpeg

Tablet

Grid_Specs_ Tablet.jpeg

Desktop

Grid_Specs_ Desktop.jpeg

Fitted Dashboard Example

Dashboard_Devices_full_with_grid_visualisation.jpeg
Dashboard_Devices_full.jpeg

Final Mockups

Tablet+Mobile_V2.jpeg

Learnings & Take Aways

As a UI project, this brief included findings from the research phase, allowing me to focus on the interface design. This area is not a natural strength and I have much to learn and improve, however, this case study has given me invaluable experience and I have thoroughly enjoyed working on the visual design alongside the UX considerations of functionality and usability. 

With the designs I have created for Fitted I am pleased to have picked up and honed new skills relating to interface design, and I am keen to continue this journey by refining the case studies I have worked on so far. 

In particular I am keen to spend time refining the breakpoint designs for Fitted to ensure that usability is not compromised, continue expanding on the gamification of the app, and keep adding to functionality. 

My next steps for this responsive site will be to engage in usability testing, refine and iterate based on user feedback and expand on the responsive designs for tablet and desktop. 

Thanks for reading, please do get in touch below with any questions, ideas, recommendations, or if you simply want to connect! 

Let’s Work Together

Thanks for submitting!

bottom of page