Online Booking Platform Case Study
--
Design Toolkit
Problem Identification
Being tasked with redesigning the X Manager dashboard, I began with the first stage of my design process; the problem identification. It was my responsibility to redesign the current dashboard system to improve it’s usability and overall User Experience — so I set aside a week completely dedicated to familiarising myself with the system; this enabled me to put myself in the shoes of the user and learn the system (and therefore it’s features and frustrations) so well that the solution became clear and obvious to me.
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
After identifying the problem, I started conducting some competitor analysis (or benchmarking), this was to give me an idea of what already existed in the current market of online booking platforms and what I felt worked well (and not so well) with these. The first example of a great online booking platform that jumped to mind, was of course, Air BNB. What I like to do in these stages of my design process (for research purposes) is to make accounts across all these sites or apps for benchmarking. This gives me a chance to put myself in the position of the user — who is always who we should be designing for.
Customer Journey Mapping
Now that I had a strong understanding of the problem and had done a bit of market research, I thought it would be a great idea to take an hour out of the day with everyone to complete a group customer journey map. This covered the task, questions users may have, touchpoints, emotions and weaknesses.
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
After conducting a bit of market research and completing a customer journey map with the rest of the team, I started to think about the user flow and how users would move through the system. After I sketched out quite a basic site-map, I started thinking about the functionalities between each page and how things should flow for interfaces as well as the ones outside of the main sections of the site.
User Research
With a longer project timeframe, I would have liked to conduct more extensive user research, however, with tight deadlines to meet, I had to collaborate a lot more with the customer support team as opposed to carrying out my own research. Doing this proved extremely useful (as I thought it might) and hearing customer gripes directly instead of through channels, really helped me empathise with the existing problems and frustrations.
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
Now that I had created my user persona(s) to refer back to and completed a suffice amount of user research, it was time to put pen to paper. I began with a period of idea generation, which involved me creating mindmaps of features I felt could be useful throughout and sketching very rough ideas. I think it is always important to ensure that during this particular phase to not be too precious with my ideas, this is so that I do not spend to much time on concepts that might not actually be feasible (resulting in a waste of time). To convey my ideas with just enough detail to get my point across; but also so they are easily disposable.
Sketches & Wireframes
Once I had collaborated with the rest of the team and we had decided which design ideas had legs, I moved onto beginning drawing out more detailed wireframes and sketching out how I envisioned interactions to work.
Interactions
Digital Screens
Featured Learning Curve
Responsive Web Design
Even though in this project, my main task was to design how final screens would look through using the Adobe suite, I would say the area I improved the most in over the course of this project, was responsive design - which is class. Nowadays so many of us are so used to using our smartphones or tablets to browse the web, (as well as desktop) so now more than ever we as designers must accomodate for this in our designs.
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
With some time to spare at the end of my contract, one thing I hadn’t really had much of a chance to do was illustration (apart from a few icons for the dashboard). Prior to the project, the front end of the site used a hero image which was a football pitch with various players. I thought that since this was a booking platform that catered for a range of sports, that it would be a good idea to do a few different sports 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
Designs can constantly be refined and improved -so I find it prudent to reflect on my pieces of work after I have finalised the designs to see where I could have improved. For this particular project, something I felt I lacked a bit, was usability testing. I feel this was partly down to the fact that I did not have enough time to conduct this, but also because I wasn’t really sure how to approach it with the nature of the project; which is something I’d like to improve on in the future.
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.
