screenshot and product

Challenge

When it comes to sports, people often struggle to find time, a place and equipment, which results in them seeing it as complicated enough to give up on. Users need a way to perceive exercise as easy, fun and achievable in order to engage in sports activities.

A responsive app, simple and intuitive to use, which provides a variety of short video workouts, exercise instructions, different difficulty levels, recommendations and an efficient workout planner to create fitness routines.

School project for CareerFoundry

UX Groundwork

Guided by the provided brief and user persona, I singled out the user stories to focus on in this project.

User Persona

user persona

User Stories

Wireframes

After getting a better understanding of user goals and behaviors, I listed key features of the app and prepared the user flows. I initially sketched low-fidelity wireframes with pen & paper which I then digitalized in Sketch using a 12-column grid. I aimed to apply UI design patterns familiar to the user and to maintain visual hierarchy.

Process of Getting Started

wireframes

Searching for a Workout

wireframes

Mood Board

I began collecting inspiration, while keeping in mind that the app needs to be encouraging and stimulating but at the same time bringing a joyful mood so that a user won’t associate fitness with something difficult. Two distinctive mood boards were created: one is minimalist and clean, the other is vintage, youthful and colorful.

moodboard

The choice fell on this above option - it is more likely to reach a wider audience and it offers real life images instead of illustrations, which provides users with more inspiration for a workout.

Color, Type and Other Design Decisions

Here is an example of design decisions made along the way. A constant process of receiving feedback and iteration has been essential for progress.

mobile screen with annotations
sport elements on the floor

Introducing Easy Sport

2 mockups

Variety

Choose a workout that fits you from a selection of over 100+ videos, with classic search and comprehensive filtering criteria. Adapted for exercising at home with limited space.

2 mockups

Scheduler

Liked the workout? Add it to your fitness routine. Plan easily with the app’s Scheduler.

2 mockups

Progress

Track your progress to stay motivated. Clear, straight to the point stats and weight logging.

2 mockups

Challenge

A new challenge every day. Fun and sweaty, no equipment needed. Launch directly from your Dashboard.

2 mockups

Instructions

Liked the workout? Add it to your fitness routine. Plan easily with the app’s Scheduler.

Style Guide (Excerpt)

styleguide

Responsive Design

EasySport is designed with a mobile-first approach. I then adapted the design to two screen sizes for different breakpoints - tablets and desktops.

Intro & Workout Screens

3 breakpoints

Learnings

UI is far from being purely aesthetic. Similar to UX, it should be user-centered and solve design problems. I had to keep that in mind while asking myself questions as: Does this design have good scannability, readability? It is easy for a user to navigate with this visual hierarchy? You can achieve a lot and convey different moods and ideas using UI ingredients.

Asking for even the smallest feedback is highly important. You tend to stick to your design even if there are some significant flaws in it. A fresh eye might spot these flaws, which is very valuable. Being able to iterate is equally important both in UX and in UI.

Creating a mood board is challenging and time-consuming, since it is a huge step to set direction for the entire project. Once it is in place, however, it is a very useful tool to refer to during the design process - to get help with design decisions, but also not to get carried away with something that is not in line with the chosen mood.

I would like to continue testing and therefore improving the product. Simple preference tests can help, for example, further refine introduction screen, color use, and wording. I would even run proper usability tests to observe how smoothly a user can perform key tasks such as finding a workout they need or scheduling it.