Project Type
UI Case Study
Client
CareerFoundry
Timeline
Sep 2020 - Feb 2021
My Responsibilities
UI Design & a bit of UX Design
.png)
Fitted is a responsive web app for people who are new or returning to fitness. It encourages people into an exercise routine by offering activities that suit their level, schedule, and interests.
The app has been designed as part of the CareerFoundry UI for UX Designers course. Under the valuable mentoring of Felipe Tofani, I’ve worked on this study project for 5 months.
The UX part of the project has already been prepared and I’ve been provided with a project brief that included project description, design criteria, branding guidelines as well a user persona - Rebecca.
A big question for me at this point was: “Why another fitness app?”. The market is seemingly flooded with such apps and so I had to tag identifying characteristics that would make Fitted stand out.
%20with%20text%20opt.png)
To get the empathy kick in, I first found a photograph that depicted Rebecca just the way I imagined her. I then scrutinised the given user research data, trying to identify Rebecca's pain points and to understand how her goals and needs are connected with her stories.
For each of the user stories, I created a corresponding flow. This gave me the number of screens the app had to have, connections between them, and a rough idea of how I could structure the information.
%20opt.png)
The next important step was to define a structure for imaginary drawers and boxes where all sorts of information would go. The goal here was to get this structure as close to users’ mental models as possible because that would define the degree of intuitiveness of the app navigation.
The obvious challenge was, of course, that every user has his/her idea and making everyone happy is practically impossible. For this reason, I ran a card sorting test and came up with the architecture below, which is simple enough to be intuitive, yet complex enough to support the app’s features.
Having the groundwork in place, it was time to get inspired and work on the visual direction of the application. The project had two requirements regarding the styling:
On top of these two requirements, I had to consider Rebecca’s needs:
%20opt.png)
Throughout the project, I was focusing on developing my craft and expanding my toolset. I experimented with different tools just to see what do they offer and if I can integrate them well into my workflow. One lucky experiment was using Invision Freehand for wireframing. This tool turned out to be incredibly easy to learn and use, fast, and versatile so it is definitely staying in my toolbox.
%20opt.png)
One big issue I had with one of my previous projects was inconsistency: just before finishing the project, I had to go through screens and clean up all those text styles and some 728 shades of grey. I’m smarter now, and this time, I started building up a design system as soon as I moved from low to mid-fidelity. The system ended up having four levels, each of which is based on top of the previous one with changes made on lower levels automatically propagating upwards. This means I can now change the way the app looks just by swapping the global colours on Level 1 or adjusting the shared text styles on Level 2.
%20opt.png)
Putting everything together, I got a light, fun, and functional app, hopefully just the way Rebecca would love to have.
.. and wire the frames into one interactive experience!