Online Booking Platform Case Study

Design Toolkit

Problem Identification

During this time, as I touched on before I discovered frustrations with the current system; it wasn’t an engaging or pleasant User Experience. I gathered exactly what it was X needed to improve their current system, then noted down improvements I felt could be made in line with the system requirements; as well as a few of my own.

Competitor Analysis

Customer Journey Mapping

In doing this exercise, we gained a stronger understanding of user’s complete journey from before they begin to use the product, until even after they may have spent money and what actually happens in the after-sales phase. This also helped us begin to shape our different user personas we were designing for — which is really useful for me personally so that I have something to refer back to and never lose track of the end users’ needs.

User Flow Diagram

User Research

As seen from the conversations with customers above, it was quite common for our users to be aggravated and confused regarding bookings; which is exactly the opposite of the effect we want the system to be having on them. One thing that stood out to me a lot from these gripes, was the problems regarding accessibility. In this day in age, with smartphones and tablets being almost as (if not more) common as desktops & laptops, we need to design with responsiveness and accessibility in mind.

When I took a further look into this aspect of the designs, I discovered from research that basically half of the all time total users were interacting with the website on a mobile device. With the company’s target audience, this surprised me. I had pinned the booking platform for having more desktop bookers than mobile; however it brought us to the realisation of how important responsive designs are and we began to put a stronger focus on responsiveness.

Idea Generation

Sketches & Wireframes

Interactions

Digital Screens

Featured Learning Curve

Responsive Web Design

With a lot of the designs having to be made with mobile responsiveness in mind, it taught me to be a lot more disciplined with my designs and to always spare consideration for how desktop screens would look on mobile — a real challenge for me in this project was the mobile calendar, but I ended up so happy with how it turned out so I was really pleased. Prior to this project, this would have definitely been an area I would have said was not my strongest, and although it’s still not, I feel a lot more confident going forward now, which is so important because of the reasons I touched on above.

Another point I feel is worth noting, was although I was not actually carrying out any development in my role, working alongside a team of experienced developers was so beneficial for me. As well as making me think twice about how my desktop designs would look on mobile, they taught me a lot of technical skills too, such as being able to actually code responsive web pages.

Illustrations

Using the perimeter of the pitch linings, I was able to illustrate a basketball court, 3 versions of different surface tennis courts, a rugby pitch, a gaelic pitch and an astroturf football pitch. This provided company X with a range of hero images to rotate between — we also thought it would be a nice touch to change the hero image to the sports field that’s currently relevant, so tennis courts for when Wimbledon is on etc.

Reflection

Usability testing enables us to tailor the product or designs for our target audience at each stage of the design process , this, in a a funny, indirect sort of way lets us work almost alongside users at each step — which means that when the product is finally launched into the marketplace, we already know that it is going to be a success, because we’ve been working with our users the whole time. Essentially this de-risks the product and therefore increases the chances of it being successful; which is of course what both partys want.

--

--

UX Designer based in Belfast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store