whitehero-bg.jpg
skatecoach.jpg
whitehero-bg.jpg

This case is about a User Interface design prototype for an application called "The SK8-Coach". The app lets users, who struggle with skateboarding, book lectures and coach sessions by experienced and competent skate coaches.

A smaller user research investigation (consisting of six people testing the app without any input or directives from the developer's side) was completed both during and after the app construction - to make the app user-friendly as possible.

The app consists of a landing page, followed by the four steps you need to go through to book a coach session. Lastly, you confirm the booking and pay for the lecture in advance directly through the application. This prototype was made in Figma.

Scroll down to the bottom of this page to see a video walkthrough of the app.

The SK8-Coach

Landing Page

The landing page consists of the logotype, a descriptive text about the application, and a button encouraging you to get started with the app to book a lesson. This page also features a background including a gallery that displays and fades between three skate photos.

landingPage.png
step1-mockup.png

Step 1

The first step of the app allows the users to decide when they would like to skate. Once the user has selected a date, the options of all available time slots shows up.

In the upper part of the app, there is a progress bar where the user can track how far they've come in the booking process. There is also an "Go Back-button" that lets the user go back if they want to make changes to their booking in the previous steps.

Step 2

In step 2, the users have the options to choose which skate-style they would like to practice during the coach session. The three options are displayed as blocks and places in a single column.

step2-mockup.png
skatecoach.jpg
step3-mockup.png

Step 3

In step 3, the users are given the option to either rent a skateboard, or to bring their own.

Step 4

The last step the users have to go through is to choose a preferred skate coach. This page displays all available coaches in a single column.

step4-mockup.png
Skärmbild 2021-11-26 160944.png
selections-mockup.png

Checkout

On this page, all the user's selections are displayed so the user can control check their decisions. The total sum is also shown beneath.

Payment

This page is where the users pay and where they by that complete the booking. Several different payment options are displayed. The users are also required to fill in their names and contact information in order for the booking to go through.

payment-mockup.png
confirmation-mockup.png

Confirmation

If everything has worked out, the users will eventually end up on this page. Here they are informed that their booking was successful and that an confirmation will be sent to their previously stated e-mail.

They are then given the choice to either book more lessons or to leave the application.

whitehero-bg.jpg