UX/UI case for sports app

Sports App - a fun and engaging app that motivates users to stay active. Join teams, compete in challenges, and explore virtual routes inspired by real-world locations. Walk together, no matter the distance! steptribe.io

Industry: sports and tourism

Responsibilities: UI/UX designer

Implementation time: 30 weeks

Tools: Adobe XD, Figma, Adobe Illustrator, Adobe Photoshop

Sports app UX case

The product overview

Sports and a healthy lifestyle are part of people's lives; however, not everyone enjoys exercising in gyms on exercise programs. Many people appreciate an active lifestyle, are engaged in tourism and love tracking and hiking. But, during the lockdown, it has become much harder for them to fulfill these needs.

The application developed allows such people to go through distances in groups and teams, organize competitions, and have fun by setting analogs of exciting routes. Thanks to the app, users can reproduce temporarily unavailable impressions even being in their own city. They can walk even in circles with persons who are physically far away: the application helps people have fun by comparing the distance with known routes.

Investigations

The project is based on the Lean Design methodology. In this case, the principles of this approach ideally combined all the initial information, user insights, and client requirements.

The product owners already knew who the users and their needs were: it was a distinctive feature of the project. After user investigations, the core points have been identified:

  • People involved: families, friends, or colleagues.
  • Geographic location: various (users can train in different places).
  • Ability to create a team to facilitate team spirit by completing a challenge together.
  • Aim to improve users' health and well-being.
  • Ability to support charities through fundraising is essential.

Competitor analysis showed that in no application on the market, there is a symbiosis of our application's suggested features. It served as a green light for further work on the app and the Proof of Concept stage.

Sports app investigations example 1

An essential part of the study was the testing of hypotheses. We've identified the main directions of the future POC stage and formed hypotheses that need to be tested to create a future flow application. It was crucial for us to evaluate the app's main features since we laid the foundation for the future MVP stage at the hypothesis testing stage. Our initial questions were broad:

  • What happens when people can't travel?
  • Do you have groups of people in different parts of the world?
  • Do you want to create your unique event?
  • How can you show your supporters how you and your team are progressing on your challenge?

The formulation of hypotheses allowed us to concentrate on the essentials, where questions turned into specific tasks for solving user problems.

Sports app investigations example 2

Proof of concept (POC)

Hypothesis testing, the possibility of technical implementation, and the finalization of the concept took place with the help of the POC stage. It allows us to confirm or disprove the hypothesis, as well as to evaluate its effectiveness. Along with the development team and project stakeholders, a workflow was arranged, and several screens were chosen to show the product's viability.

The functionality was limited to key features that allowed us to implement the concept in a short time, achieving saving time, budget, and production capacity on less critical functionality for the product.

Sports app POC example 1 Sports app POC example 2

Minimum Valuable Product (MVP)

The MVP stage was the central part of a project and included MVP wireframes and UI design. After checking the POC version and ensuring that our hypotheses were viable, we started working on a more advanced version of the application, including the broader functionality. The extended user flow is the foundation for system design and frameworks for this product version.

Sports app MVP example 1 Sports app MVP example 2

UI Design and graphics

The UI design stage began with a survey of a group of users and stakeholders. The main question at this stage is HOW do you see the future application? The answers were fascinating and varied, but all respondents agreed that the design should be bright, memorable, and entertaining.

In turn, the stakeholders expressed their clear desire to see the application in blue and yellow colors. After providing several design concepts, we were convinced that the combination of blue and yellow was the most suitable option for the app.

Sports app UI Design and graphics example

UI Design variants

Sports app UI Design variants example

UI Design final variant

Sports app UI Design final variant example 1 Sports app UI Design final variant example 2

Corporate identity

Sports app Corporate identity example 1 Sports app Corporate identity example 2 Sports app Corporate identity example 3

Summing up

This project was implemented in the MVP version using the Lean Design approach. Starting the project from scratch, as a Designer, I led the project through the main stages of the methodology, which allowed me and the whole team to be flexible to the requirements of clients, while not infringing on the requirements and desires of users. The main goals of users are realized through a fast and understandable flow of the application. A bright and memorable design also covers the needs of users that we identified before the start of the UI stage.

My role on this project included a full design cycle, from concept development and hypotheses to the application logo, which allowed me to fully immerse myself in the project and realize all the possibilities. Close collaboration with the development department allowed me to keep my finger on the pulse and create a design that satisfies the needs of all parties of the project.