Employing User Experience Design to Clarify a Company’s Ethos and Reduce Website Friction

Explanation of how HotPatch works for professionals
Screen shot from HotPatch’s home page

Moderated Usability Testing

Alongside our five user interviews, we found five participants for the usability testing of HotPatch’s current website. We wanted to identify areas of friction on the website, understand if users could identify information that HotPatch was getting repeat inquiries about, and gain insights on the current booking and listing processes. This ended up being some of the most valuable data we obtained, allowing us to confirm where users were struggling and to learn more about the difficulties they encounter when they try to execute the tasks that HotPatch wants its users to carry out. The tasks were related to booking and listing spaces, with criteria that would necessitate the use of filters and the identification of crucial information. We also asked about the participant’s understanding of the business and what they assumed they would be able to do on the website, which was invaluable. A few interesting things that came up:

Zoom of affinity maps with insights outlining the difficulty of navigating the current website.
Excerpt of the Affinity Map Used for Usability Test Results

Affinity Maps

Armed with our notes, we created affinity maps for both data sets, which later became the basis for our User Journey Maps. It was clear that users were often confused during similar points of the process, such as searching for a space and applying filters, and that areas that were identified as important during the interviews were not intuitive during the actual experience on the website. We identified main areas for growth in both the listing and booking processes, allowing us to refine our understanding of the areas that needed more urgent attention.

Main Insights

  • People want to be able to search for spaces primarily based on price, location, and accessibility.
  • Users who didn’t already know the company had a vague idea of their mission, but they missed the breadth of the company’s mission
  • The amount of search options and the process of filtering properties was not intuitive to users, and often frustrating.
  • We confirmed that the colours were not only not failing accessibility standards, but led to most users missing information on the website.

Competitive/Comparative Analysis

We looked at both direct competitors, such as Tag Venue, Scouty, and Flow Space, and successful companies who had a similar goal, such as Airbnb and Fat Llama. Through a feature inventory, pluses and deltas, and a task analysis, we identified areas of growth for HotPatch, and saw where they were unique in the market, allowing for a larger variety of spaces and customisations. We then referred to the successful strategies that we identified during the ideation and design processes, using them as inspiration for HotPatch.

User journey map showing mostly frustration in the process of booking
User Journey Map of Current Booking Process (Lots of Frustration!)

User Journey Maps

Using the quotes and insights from our Affinity Map, I mapped out the user’s current emotional experience when listing or booking spaces via HotPatch. The majority of the process was spent in the frustration zone, and even when the users were not frustrated they often were not completely sure about what they were doing. These became the main areas of improvement we wanted to focus on.


Based on the above data, we compiled the persona of Heather, a freelance photographer who is often looking for new spaces but has a lot of changing criteria she has to consider. This allowed us to have a concrete example in mind when moving on to our ideation.

Heather: a persona who looks for spaces in her budget with an emphasis on attractive spaces and available equipment.

How Might We…

…make it easy for Heather to identify suitable nearby patches?

Design Studio

With Heather’s needs and goals in mind, we set off to ideate with five members of the HotPatch team during a two-hour sketching extravaganza. Facilitated by Jered, we had an icebreaker activity before entering into a round of quick sketching, followed by a longer sketching session of 2 minutes where we could combine all the ideas we liked from the first round into ideal solutions. This included more information about the floor plan and square footage, a clear search bar, simplified filters, and a more concise home page, amongst others. This allowed us to really understand where the company’s priorities were, as well as hearing the great ideas they had! We then discussed the learnings with the team, and started our own internal sketching session to concretise our ideas and align the solutions we wanted to explore further.

Text changed from light pink with image in the background to hot pink with a plain white background
Before and after of the top left of the Homepage


As the current brand colours did not pass accessibility standards, we deepened the shade of the pink to stand out, and added a soft pink for background colours. This should also help users find the information they are looking for with more ease, as they will not have to strain to overcome a weak colour contrast.

Clarification of What HotPatch Does for its Users

Inspired by Fat Llama and Flow Space, we created an animation to delight users while educating them about the diversity of spaces available on HotPatch, and how multi-purpose listings can be. As we found during our research that users found the chatbot intrusive and distracting, we instead created a “How it Works” tab in the primary navigation, allowing users to easily view FAQs and contact HotPatch with any questions they may have once going through the site. We imagine this will also cut down on the amount of inquiries received by the team, as users will be encouraged to first browse the site before immediately using the chat function.

Image showing simplification of home page and search bar
Before and after of homepage hero

Simplification of the Search Function

As users were often unsure of where they should be clicking, having been given options to separately search by location, category, or browse, we consolidated the main booking criteria into one search function. This allows users to immediately find spaces that align with their budget, dates, and function.

Combining Filters

Users were overwhelmed by the number of filter options, and frustrated that location was not one of them. They also weren’t sure which filters had been applied, and so we added current search criteria and condensed the lesser-used filters into one single pop-up.

Booking search results page before and after — now users know what they searched for and can find all filters in one place
Before and after of search results page with adapted filters

Re-Organisation and Additional Information for the Venue Page

As users were often frustrated that the image was cut off on the main venue page and they could not view the images and the information at the same time, we introduced an image carousel, with the main information of the space directly below. We added the option of a downloadable floor plan, and noted down the square meters of the space as well as the closest public transit station. As for the actual booking card, we suggested that it scroll down the page with the user, and we added additional micro copy so our users could be sure of what happens when they request to book — a question that came up many times during our research and in HotPatch’s customer logs.

Before (left) and after of the venue page

Usability Testing

Carrying out two rounds of unmoderated usability testing with Maze, both with around 25 participants, we found that certain filters we had added to the ‘purpose’ part of the search bar weren’t clear, and that users preferred the term ‘category’ as was already on the site. They also found that exiting the dropdown was not intuitive, but generally found the search function easy to use. Overall, users commented that information was clearly presented, and that the product was intuitive to use, reminding them of the steps they are already familiar with on other booking websites. We implemented the changes and upgraded our designs into high fidelity, before running another round of usability testing which would inform our ‘next steps’.

Next Steps

Using Maze for the first time, I saw where moderated usability tests are useful, and I would like to carry out a few of these on the high fidelity prototype. As we weren’t able to redesign the listing flow due to time constraints, we would also like to apply our insights to this flow. We would also like to carry out more research about including ‘time’ in the search bar.

Key Learnings

While Maze is an amazing tool, it should be combined with moderated usability tests in order to have the best data set possible. We also found that the user interviews we did with HotPatch clients gave us great insights, and we would source more for early-stage interviews should we carry on to the listing flow.

Video of the final prototype

Read the full article here

Leave a Reply

Your email address will not be published.

Voice Summit 2022 Interviews – Voicebot Podcast Ep 278

Voice Summit 2022 Interviews – Voicebot Podcast Ep 278

Bret is founder, CEO, and research director of Voicebot

Font Psychology Tricks To Enhance Your UX

Font Psychology Tricks To Enhance Your UX

By Mary Moore, copywriter at Shakuro Illustration by Shakuro A well-thought-out

You May Also Like