PRODUCT: A responsive Web App // MY ROLE: UI Designer, Branding // DURATION: 5 Month as a side project // TOOLS: Pen & Paper, Sketch, Adobe XD, Photoshop, After Effects // DATE: 2020
Overview
antelope is a responsive web app. Its main objective is to encourage users who are new to fitness to build up an activity routine independently from a location and help them to stay motivated.
I created this personal project through my UI Specialization Course for UX Designers with CareerFoundry. The project focused primarily on composition, visual design principles and UI.
Challenge
Finding routines which fit into a busy schedule is not easy. Going to a gym and waiting for available fitness equipment takes too much time and is annoying.
Especially people new to fitness struggle to find the right exercises for their fitness level and feel overwhelmed to stick to workout plans. Exercising is not only a perfect activity to stay healthy physically. It should be fun and enjoyable to support users mentally as well. Once started, many people find it hard to stay motivated and try to skip their workouts because of these obstacles.
Potential Solution
Developing a responsive web app for various bodyweight exercises at any level and which can be done wherever and whenever users like: at home, in the park, in the lunch break.
Quick daily challenges are a good way to integrate sports in a busy working or family life. Taking up the challenges with friends is fun and helps to stay motivated.
Adding sessions to a personal calendar can help to keep schedule.
Responsibilities
The entire design process from user journey mapping, creating wireframes from low to high fidelity, making prototypes, creating a style guide and wrapping up the final design with handoff for development.
Since this project is more focused on the User Interface, Careerfoundry provided students with data of the research phase: key objectives, persona, style criteria and feature requirements served as base points.
Understand
The Project Brief
Primary Persona, User Stories and Feature Requirements
Competitors & Finding Inspiration
To better understand key functionalities and the structure of other popular fitness apps, I did some market research. Almost every product I found was only downloadable as a native app: e.g. freeletics, 7 Minutes, 30 days, burn. Regarding web apps, I could only find sworkit and keep. After trying out some of these, I got the impression that they are clumsy and not well structured.
With this in mind, the given research facts, my own analysis and my users' needs, I started to frame my own product.
User Flows
I created user flows to show the flow attached with each task.
User Flows
Wireframes & Prototype
Low-Fidelity Wireframes
I started to sketch out some ideas on paper. This is a good method to see what works, what is necessary to be displayed and how the flow between the screens will work as user friendly as possible. The advantage of pen and paper is that you can iterate quickly. Through each fidelity step in the design process, I increased the level of detail and corrected occurring failures.
Low-Fidelity
In my first drafts, I decided for a bottom hamburger menu. After a few testings "on the go" with friends, I changed it to a tab bar at the bottom. It addressed my users' need for better reachability and scannability in a fitness app.
Digital Wireframes
Keeping in mind that the design was to be a mobile first web app I worked with a 12 column grid. This would help me to adjust screens for different breakpoints later on in the process.
By applying visual design principles, like appropriate hierarchy of UI elements and UI patterns, I created mid-fidelity screens. Here you can see a selection of the different flows:
Mid-Fidelity
Advanced UI
Moodboard
From the beginning of this project, I was eager to design for dark mode. As you can see in my wireframes, I was curious about it and just wanted to try it out. I was sure that it would perfectly fit with the topic of fitness.
The orange color evokes energy, strength, and balance. These design treatments reflect the goal of encouraging and welcoming those who are just new or returning to fitness and a healthy lifestyle. It fits perfectly with the grey colour palette.
Following this, I designed two variations of a moodboard: one bright version and one for dark mode:
Moodboard
Presenting moadboard styles to my users made clear, that they prefer the bright version. So I applied this style to my screens and at the same time I decided for the appropriate typography, imagery and iconography.
The project brief came already with a brand name "Fitted". I changed it to "antelope" during the iteration process. An antelope is known for its speed and elegant movements – a nice target to reach, don't you think?
The project brief came already with a brand name "Fitted". I changed it to "antelope" during the iteration process. An antelope is known for its speed and elegant movements – a nice target to reach, don't you think?
High-Fidelity Mockups
High-Fidelity Mockups
High-Fidelity Mockups
Style Guide
I created a style guide for a cohesive consistency and to assure the brands' design and the correct usage of UI elements.
Different Breakpoints
Responsive Design
I primarily designed this project with the mobile-first approach of being used flexibly and independently from a gym. User will probably use the different devices for different needs: mobile for working out outdoors, for instance. And they are more likely to use the larger formats for purposes like adjusting their settings or exploring further functionalities.
Reflections
What went well?
I'm always curious about learning new design tools. By choosing the UI specialisation course, I wanted to dig deeper into digital product design. This time I created my designs in Sketch and think that I had a quick learning curve. Encountering several problems while the design process, e.g. importing screens in prototyping tools like Principle gave me a good knowledge about handling symbols in Sketch ;-).
When I started designing I wasn't exactly applying the style which I had in mind. At first, I was sad to change my initial idea, but after all, I think it came along nicely in the end.
What can be improved?
I want to be more secure in designing responsive applications. It's not about making elements bigger! For my next responsive design, I will sketch out for different breakpoints from the beginning, rather than thinking about how to fill the space afterwards.
The actual prototype is the result of many iterations, but I would feel more comfortable having tested it with more users and analyzed if I met my users' needs. That said that's a step of the iteration phase which I need to do in future.
Feel free to explore the prototype here!
Thank you for reading!
