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.
- 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
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
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.
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.
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:
- More testing for different user behavior
- Interactive prototype
- Details improvement in visual design
- Thinking about responsive layout