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:
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.
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.
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.
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'.
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
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
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."
Icon Sets
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
Tablet
Desktop
Fitted Dashboard Example
Final Mockups
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!