Umoov, UX & UI Design

UX & UI design project

Umoov

Umoov makes exercise easy, whatever your schedule or fitness level. Discover manageable home workouts and take on daily challenges to stay motivated during the working week.

Exercise is something anyone can pick up, find something they love, and fit it into their daily schedule. Our aim is to get people healthy and happy at home.

This project was completed as part of my UX and UI course study with CareerFoundry.

Project Brief

Design a web app that encourages people to do more exercise

My Role

UX & UI Design, User Research, Information Architecture, Prototyping

Tools

Adobe XD, Illustrator, Indesign

Duration

Completed outside of work hours over 7 weeks. October - December 2020

The process

Create user flows to define the key paths a user must take to complete tasks. Explore the core functionalities that will solve user problems. Develop the tone of the project using moodboards.
Create low, mid and high fidelity wireframes to create the layout. Utilise low-fidelity wireframes to make quick iterations and explore ideas before refining the design in mid and high fidelity. Develop a brand identity that aligns with the user.
Refine the direction of the UI by creating a high-fidelity prototype and then communicate all design elements in a style guide.

The problem

People with busy work schedules struggle to find the time and motivation to workout regularly. Finding exercise routines for the right level can be difficult, especially when wanting to try something new.

The solution

Create a web-app that motivates people into an exercise routine that suits their level, schedule, and interests. Users want to learn how exercises are done and track progress with achievable goals.

Information architecture

I started by studying the brief along with the user stories and problems. I also mapped out a user flow for the project. I focused on the two key functionalities, finding the simplest way a user can complete their task.

How do these features solve the users problems?

Core takeaways from the user stories:

Users want to be motivated to workout every day
Users want to be rewarded for their efforts so they stay engaged
Users would like to learn how to do exercises correctly

I decided gamification was a smart direction to take the project in. The core functionalities, therefore, allow users to discover workout videos, join workout challenges and gain daily achievements for hitting their goals.

Mood board

I explored colour, shape, images and typography in a mood board to establish the tone of the project.

My aim was to show dynamic movement. It was important not to overwhelm users with busy or intimidating colours or imagery so I used negative space around each element to give the design room to breathe. I then chose a vibrant pink to inject energy into the design.

The reoccurring curved rectangle shape contributes to a feeling of movement as the sweeping angle moves round to the sharp corner.

Development

Following a mobile-first approach, I mapped out my ideas in low-fidelity wireframes. This process allowed me to explore creative ideas quickly while making on-the-go iterations. I created a low-fidelity prototype to test the basic layout and flow.

After mapping out the low-fidelity wireframes into the user flow I upgraded each screen to mid-fidelity. From here, I could build in typography, colour, images and iconography.

Challenges screen progression from low to high fidelity

Workouts screen progression from low to high fidelity

Creating the brand

Umoov needed an identity that aligned with the content - simple but dynamic. The brand logo mark is a combination of the letter U and two out stretched arms.

Achievement Badges:

The achievement badges were designed to develop the gamification of the project. They’re also effective in keeping the app fun and light-hearted as users take on exercise challenges.