HotPatch is a quickly growing startup that allows users to both rent and list spaces for short-term professional use. Their clients come from all sorts of professional backgrounds: beauticians, fitness professionals, photographers, office workers, and more. As HotPatch was experiencing a high bounce rate and also many enquiries concerning pricing or other details that were seemingly clear on their site, they enlisted a team of five UX designers, including myself, Ben Lee, Diego Raspati, Jered Sweeney-Demezas, and Lucinda Neagle.
After a primary discussion with the team to understand the main areas of user feedback and the company’s own growth priorities, we started on the research process to better understand the users’ hopes and pain points. Following the double diamond process, we aimed to gather a large dataset that we could then narrow down to the most pressing priorities.
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:
“On the landing page I wasn’t sure where to best go to search for the patch… Should I click ‘find’? ‘Category’? ‘Search by location?’”
‘”Immediately I feel like I’m doing this the wrong way. There are so many options I feel like ‘is this the quickest way, am I doing this right’.”
“Do I have to Facebook or Whatsapp the person? I don’t understand why these social media icons are here”
“I’m not sure what happens when I press “request to book” — will it make me fill in my info? Will it send a request automatically?”
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 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.
Persona
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.
How Might We…
…make it easy for Heather to identify suitable nearby patches?
…show Heather the most pertinent options for her chosen criteria?
…allow Heather to scan the listings easily to make sure the spaces have all of the amenities she needs?
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.
Accessibility
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.
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.
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.
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.
Read the full article here
