SPOTR

UI/UX | iOS app

Simplifying sports facility booking

Simplifying sports facility booking

Spotr mobile app interface showing sports facility search and booking
Spotr mobile app interface showing sports facility search and booking
Spotr mobile app interface showing sports facility search and booking

SPOTR is designed to help users quickly locate and reserve sports facilities. The project aims to simplify the search experience and automate the booking process.

My role

My roles

My role

Research

Research

Research

UX design

UX design

UX design

UI design

UI design

UI design

Prototyping

Prototyping

Prototyping

Tools

Tools

Tools

Figma

Platform

Platform

Platform

Mobile iOS

Mobile iOS

Mobile iOS

Context

Living in Bali, I was excited to explore yoga and find a nearby gym, but my online searches felt a bit overwhelming - there were so many options and the details about classes, prices and bookings were unclear.

That frustration inspired me to create this app to make things easier for others.

Woman practicing yoga in a studio, representing the context of searching for fitness activities
Woman practicing yoga in a studio, representing the context of searching for fitness activities
Woman practicing yoga in a studio, representing the context of searching for fitness activities

Research

I started the product design process with research: exploring competitors, conducting user interviews and studying the sports facilities market.

These steps helped me understand how people currently search for and book sports activities, and where they experience friction.

Based on my findings, I created a User Persona and a Customer Journey Map to visualize user behavior, motivations and pain points throughout their experience.

User Persona

User Persona

User persona representing a fitness app user
User persona representing a fitness app user

Customer Journey Map

Customer Journey Map

Customer journey map of the sports activity booking experience
Customer journey map of the sports activity booking experience
Customer journey map of the sports activity booking experience

Problems

The research phase revealed several recurring frustrations. After analyzing and synthesizing the insights, I identified three core problems that became the foundation for the next stages of design.

01 Long Search

Users spend too much time looking for sports facilities because there is no single, easy-to-use platform that lists available options with clear details.

01 Long Search

Users spend too much time looking for sports facilities because there is no single, easy-to-use platform that lists available options with clear details.

01 Long Search

Users spend too much time looking for sports facilities because there is no single, easy-to-use platform that lists available options with clear details.

02 Lack of Details

Users lack sufficient details such as amenities, pricing and reviews, making it difficult for them to make informed decisions about facility to choose.

2.

02 Lack of Details

Users lack sufficient details such as amenities, pricing and reviews, making it difficult for them to make informed decisions about facility to choose.

02 Lack of Details

Users lack sufficient details such as amenities, pricing and reviews, making it difficult for them to make informed decisions about facility to choose.

03 Complex Booking

The booking process is complex because different facilities use diverse booking methods, causing confusion and frustration for users.

3.

03 Complex Booking

The booking process is complex because different facilities use diverse booking methods, causing confusion and frustration for users.

03 Complex Booking

The booking process is complex because different facilities use diverse booking methods, causing confusion and frustration for users.

Goals

Our core problems were transformed into goals to focus on the desired outcomes for our users. This approach shifts the perspective from the problems themselves to the experiences we aim to create, guiding our design decisions and ensuring that our solutions truly address user needs.

Quick Discovery

Long Search

Help users quickly find nearby sports facilities that fit their schedule and preferences.

Quick Discovery

Long Search

Help users quickly find nearby sports facilities that fit their schedule and preferences.

Quick Discovery

Long Search

Help users quickly find nearby sports facilities that fit their schedule and preferences.

Clarity

Lack of Details

Provide complete and trustworthy details so users can make confident decisions.

Clarity

Lack of Details

Provide complete and trustworthy details so users can make confident decisions.

Clarity

Lack of Details

Provide complete and trustworthy details so users can make confident decisions.

Smooth Booking

Complex

Allow users to book a spot in just a few intuitive steps, with instant confirmation.

Smooth Booking

Complex

Allow users to book a spot in just a few intuitive steps, with instant confirmation.

Smooth Booking

Complex

Allow users to book a spot in just a few intuitive steps, with instant confirmation.

Main question

How might we make sports facility
searching and booking quick, smooth
and clear?

How might we make sports facility searching and booking quick, smooth and clear?

How might we make sports facility searching and booking quick, smooth and clear?

Ideation & Wireframes

Guided by the question above, I explored different ways to bring our goals to life through sketches and low-fidelity wireframes. The focus was on clear structure, effortless navigation, and minimal steps from discovery to booking.

These early concepts shaped the foundation of the final design - turning user insights into a simple, intuitive product flow.

Low-fidelity wireframes mapping the core user flow for sports facility booking
Low-fidelity wireframes mapping the core user flow for sports facility booking
Low-fidelity wireframes mapping the core user flow for sports facility booking
High-fidelity wireframes of the sports facility booking experience
High-fidelity wireframes of the sports facility booking experience
High-fidelity wireframes of the sports facility booking experience

Prototype

With the structure validated, I moved on to high-fidelity design. I built a clean, consistent UI-kit to ensure visual harmony across screens and to speed up iteration.

Using it, I developed an interactive prototype that brought the product to life, focusing on smooth transitions, clear hierarchy and effortless booking flow.

UI-kit
UI-kit
UI-kit

Searching&Booking flow

A quick demo showing how users can search for sports facilities, view available options and complete a booking seamlessly.

A quick demo showing how users can search for sports facilities, view available options and complete a booking seamlessly.

A quick demo showing how users can search for sports facilities, view available options and complete a booking seamlessly.

Getting started

Getting started

Getting started

10 screens

Account personalization

Account personalization

Account personalization

13 screens

Home

Home

Home

2 screens

Searching

Searching

Searching

3 screens

Discover/Map view

Discover/Map view

Discover/Map view

4 screens

Filtering facilities

Filtering facilities

Filtering facilities

2 screens

About in Facility Detail

About in Facility Detail

About in Facility Detail

5 screens

Classes in Facility Detail

Classes in Facility Detail

Classes in Facility Detail

1 screen

Schedule in Facility Detail

Schedule in Facility Detail

Schedule in Facility Detail

4 screens

Schedule in Facility Detail

Schedule in Facility Detail

Schedule in Facility Detail

1 screen

Class Reservation

Class Reservation

Class Reservation

5 screens

Card Adding in Reservation

Card Adding in Reservation

Card Adding in Reservation

10 screens