Badminton Court Online Booking

A personal project I designed for badminton enthusiasts.

About the Project

This is a design challenge I took when I was applying for a UX designer position in 2017. (I got the job!) It's a website designed for badminton court booking.

Working time: about 30 hours in total.

Design process:

User research and current product research (4 hours)
User flow (3.5 hours)
Paper prototype testing (7 hours)
Low-fi wireframe (7.5 hours)
Hi-fi mockups (6 hours)

Tools: Paper & Pen, Lucidchart, Sketch app, Adobe Photoshop

Product Goals

Design a website for badminton court booking. It is a platform works with local business with badminton courts or multi-functional fields (clubs, fitness center, recreation center…)

With this website, users could:

1. easily find information about local badminton courts

2. make a reservation within simple steps

Target users: people who love playing badminton

Interview notes

User Research

I interviewed two of my friends who love sports and have experience in booking any course online.

Insights from the interview:

Usually not too much choice on badminton courts (less than 10 clubs/fitness centers)
Reservation process should be as simple as possible
Location and price are important information for getting to know a new place
Once the user is ready to make a reservation, the available time is the most important thing.

After the interview, I created an information flow. It also shows the whole user journey map.

Prototype and Revision

Based on the flow above, I made a paper prototype. I also asked my interviewee to help me test it out. After the initial testing, I found what needs to be improved:

Need to consider the different price for peak time and non-peak time
Contact information and payment information could be put on one page
Need a confirmation page and confirmation email/message after pay
In detail page, it should be easy to find out the available time in the whole week

This feedbacks are extremely valuable for the next steps. I updated the flow and tested with a low-fidelity wireframe for another round.

UI Design

After several times of revisions on the wireframe, I started the UI design on Sketch App. Since there's very limited time on the project, I can only finish two of the main pages.

I kept the elements very simple, with a bright and refreshing color scheme. The pages are mainly designed for a desktop screen size. If there's more time, I would like to try more on a responsive layout.

Future Updates

This is just a personal design challenge project. If in the future I could have an opportunity to continue work on this, I would like to consider the following steps: