For my UI/UX class this semester, we had to take a website that we frequently use and redesign it to make it more user-friendly. I chose to redesign Brown’s online squash and tennis court reservation site, which can be found here: https://pizzitolasquash.tennisbookings.com/loginx.aspx
I chose to redesign the court reservation site because it’s aesthetically displeasing and difficult to use. Despite being a regular user of the site, I can never remember how to book a court. The site fails to safeguard against user errors, so users are inevitably bombarded with messages telling them they have performed invalid actions. This is evident in the following video of a first time user trying to book a squash court:
If you track the user’s mouse throughout the video, you can tell how confused she is. It takes her 30 seconds just to figure out how to change the date of the reservation. When she finally gets to the right day, she does not understand the calendar’s interface and tries to drag to select a court time (this is when she accidentally highlights the calendar in blue). Next she tries to reserve a court for more than an hour, but a pop-up error message appears notifying her that this is invalid. Once she has selected a valid time slot, you can see her mouse wander around the screen as she searches for the reserve button. Unfortunately, this was all done in vain because, once she clicks on the reserve button, an error message appears telling her she cannot book a court as a guest!
In addition to failing to prevent user errors, the site’s layout intuitively makes no sense. The following video shows how the main page uses a combination of file tabs and pop-up windows to display important information:
In the video you can see that the top of the main page has a menu bar with links, which appear to redirect a user to new pages. Right below the menu bar there are also folder tabs, which also look like they link to new pages. Neither the menu links nor the folder tabs, however, actually redirect a user to a new page. Instead, they open pop-up windows, which contain excessive amounts of text and are poorly formatted. Furthermore, the “Bulletin” and “Policies” windows contain the exact same information.
After assessing the site’s lack of usability and its pour navigational flow, I started the redesign process by making a series of wireframes.
- The Home Page
This is the first page a user sees, so I wanted to be straight forward and intuitive. The home page on the original site had three options (login, sign up, and log in as a guest). I removed the guest option because it served no practical purpose (you could not reserve a court as a guest) and only confused users. I also made the sign up option more visible. On the original site, you had to look at the fine print under the log in button to create a new account, which is why many users who did not have accounts chose to log in as guests.
2. Main Page
The main page provides that most important functionality from the user’s perspective because it allows a them to reserve a court. To prevent the common user errors I noticed on the original site, I redesigned the calendar to limit a user’s interactions based on Brown’s reservation policies. For example, a user now is only allowed to click on a one hour time slot for their reservation. The different kinds of reservations (private reservations, varsity practice, and private lessons) are also color coded to make the calendar more aesthetically pleasing and easier to skim.
To the right of the main page, is the pop-up window which will appear when a user clicks on an available time slot in the calendar. Because the window automatically appears, users will no longer have to search for the “book” button after they’ve selected a court.
The redesigned main page also simplifies the navigation of the site. Instead of having folder tabs and a menu bar, which both open pop-up windows, the site only has a menu bar with links that redirect the user to new pages.
3. Profile Page
The original Brown reservation website has a profile link in the menu bar of the main page that opens a pop-up window. This pop-up simply contains information about a user’s account, such as password, email, and billing information. During my redesign, I decided to take the information from this pop-up window and make it a separate page because the pop-up window devalued the importance of the information and made it incredibly hard to read. On the new profile page, a user can see their current and past reservations, update their account settings, and customize their profile picture and biography.
On the original site, Policies was one of the links in the menu bar that opened up a pop-up window. It listed Brown’s rules and regulations for the squash courts and reservation, but it displayed them as one long list. In my redesign, I gave Policies its own page so that the rules could be broken down into categories and better organized. The three categories (Court Use, Equipment, and Cancellation Policy) make the information easier to process for the user. If the user is looking for a rule about a something specific, they can jump to that category instead of reading every bullet point in the list.
5. Bulletin Board
On the original site, the Bulletin Board is awkwardly located below the menu bar in a file tab. It repeats the exact same information about rules and regulations that the policies page provides. In my redesign, I eliminated this redundancy, but instead of deleting the bulletin board altogether I repurposed it as a community space. Users can use the board to post meet each other, post about matches, or report lost items. The new bulletin board more likely fits the user’s conceptual model of bulletin board than the original one. In addition, I deleted the file tab structure and added a link in the menu bar for the new bulletin.
Overall, I think my redesigned reservation website is a considerable improvement upon the original. The new site is not only more user-friendly, efficient, and navigable, but it also aesthetically more pleasing.
I welcome any feedback or criticism. Thank you.