Golf Reservation Interface
Develop a user-friendly desktop interface and a mobile interface for staff and customers to manage and make bookings at golf clubs.
UX Design, UI Design, Product Design and Creative Problem Solving.
About this Project:
Overview and Brief:
1. Design a reservations system for golf clubs to manage the full booking
process, the customer would like this to be a desktop application.
This system is going to be like a one-stop-shop for staff – they can effortlessly book players onto the golf course, manage online reservations, check-in players, and take care of extras like renting golf carts or clubs. Plus, it's designed to show all the important info upfront without making things look too crowded.
Goals & Requirements:
On the desk top interface users must be able to:
-
Add, edit, copy, cut and delete booking.
-
Check in player or group.
-
Must be efficient
-
User must be able to track which tee times are available and which are not.
-
Hot keys must be integrated into the system.
-
Users must be able to see what the current time is and what tee times have passed.
-
As much information as possible must be visible in each block.
Research & Ideation:
The task is simple, yet super intricate and super easy to mess up.
Research for this task was conducted by the company, based on feedback they had received from the clubs using the current software, I then analysed the research and made sure throughout the design process the users wants and needs were considered as well as making sure the process was as user friendly as possible.
I had countless in-context interviews with the product managers to ensure my understanding of the system integration was correct, because this system has more than one aspect, the reservations needs to link back to all the other parts of the system, the process and style needs to fit in with the current system.
Before diving into the research I took a look at the system with a virgin eye. This is a good way to find pain points that someone who works on the system day to day would not see. It allows you to find challenges with an unbiased opinion.
From this I gathered the following information:
-
Some "buttons" do not look like they are buttons and they are, some things look like buttons and they are not - Streamline the design system and make sure buttons look like buttons - call to action colour that makes the buttons stand out.
-
The overview screen is very confusing - clicks are allowed where there shouldn’t be clicks, it seems like it can definitely be improved so that the user can view the day more efficiently.
-
Adding a select button could assist users in selecting which cells they would like to perform a action on. Currently, you can only select blocks within the same flight, which can be frustrating for the user.
-
Moving the toast from the top right hand corner to above the block, makes the process more smooth and easier to navigate.
Ideation
Wire framing is one of my favourite stages of design, coming up with ideas, sketching testing out the thinking of my basic ideas and sketching some basic wire frames to see if my designs are any good or if it is time to scratch the idea and start again.
Visual Design:
Menu is disabled until
Flight is selected.
Toggles to choose if you want to view the reservations in daily or weekly mode and to choose which course you would like to view, if the club has multiple courses.
The calendar on the side of the screen allows you to choose any day and at a glance you can see which flights are booked, semi booked or open.
Why?
Why did the reservations need to be redesigned?
-
There was one overview screen - which did not show much information and was quite confusing as well as an additional step that did not provide the user with any benefit.
-
The overview screen was meant to be an easy way for the user to see where there was space so they could book people in easily.
Due to this; there was the request to have a weekly view where the user can see certain information with regards to the booking, and a details view which has all the bookings for the day selected.
-
The current reservation system, was needing to be generally updated. The options menu that we placed on the left size of the screen, only popped up on the top right hand corner, when a cell was selected. - To improve this we placed it in a position that was more accessible when selecting cells.
Problems and Pain points
A pain point discovered was on the weekly view the amount of information can we overwhelming.
I tried to solve this by only showing the name and booking number on each booking block, which did help, however I came up with another idea of having no information in the cells, and when the user hovers on the cell, a drop down with all the information will appear.
This however gave the screen an unfinished look..
I then did a needs analysis with regards to the weekly screen.
What do the users need to see?
-
Times
-
Which time slots are booked, checked in, empty and selected.
If they require more detail, the day view will be where to find the
information, or by clicking on the block in question which will
allow them to view all of that customers information.
The main things you can see:
Another challenge was fitting as much information as possible into each block.
Previously, there was only 4 lines available and the club had to choose which information they needed the most and which was most important.
This is challenging because:
-
Too much information is overwhelming.
-
you want the user to have all the information they need easily.
-
Having to choose only 4 out of 8 options can leave the users with many cases where they dont have the information they need costing them precious time.
How I solved this:
I solved this problem by choosing the 4 most important identification elements based on discussions with the product owner who works directly with the golf courses:
1. Name and Surname
2. Club
3. Member Type
4. Booking Number
Then all the other information fell into the fifth line which consisted of icons, when hovering on the icon a drop down will appear with all the information relating to that icon, making the information digestible and organised.
-
The date, which day of the week has been selected.
-
Which Course you are on.
-
Time slots for the day
-
Which tees are open, booked and checked-in.
The App
This is just a basic idea of what the app would look like, please explore the clickable prototype using the interactive link below.