HotPatch
UX Client Project | 3 Week Sprint | Team of 3 | Oct — Nov 2023
Overview
Context
HotPatch is an online service that enables users to book any manner of commercial space — whether that would be a hair salon, communal office or photoshoot location. Think of it as like AirBnB but for commercial property.
They plan on building a subscription service which will enable users to discover independent artists and attend smaller live shows tailored to their likes and location.
The Brief
HotPatch’s existing site has a high bounce rate that sees approximately 60% of visitors leave the site before completing a booking. My team’s task was to try and address this high bounce rate by focusing on 3 priority areas during the 3-week sprint.
- Better search and filter
- Improve ease of navigation across industry sectors
- Make the system more user friendly.
On their homepage, HotPatch asks users to select the category of space that is relevant to them, e.g. hair & beauty space, office space, photography space etc. We asked them who they consider their target user to be considering the wide range of industries they serve, and HotPatch stated that they were focused on a target user within the Hair & Beauty Industry as they had seen some success in this area. They hoped to build a functional user journey for individuals in this industry and then apply learnings from this to other industry sectors.
The Team
Will McCann, Jo Smith and Ollie Coppins (me!)
My Role
This was a collaborative project with 2 other UX/UI designers. We worked hard to play an equal part in each phase of the sprint, but I took the lead on user research, facilitated client meetings and moderated team discussions before carrying out user testing and producing a high-fidelity final product.
The Deliverables
Competitive and comparative research, Personas, high-fidelity user flows, reassessment of information architecture, Sketches, grayscale wireframes, iterations on design, interactive high-fidelity prototype for a desktop website
The Outcome
Using the double diamond design process, our solution provided users with a new search bar that immediately brought them more relevant results than searching by industry categories and it fixed numerous issues to improve the user friendliness of their filtering system. Beyond that we began to work on the UX writing of the homepage to better communicate what HotPatch provides to their users, and we refined the listings page to make the booking process more straightforward.
Discover
Research Plan
In order to create a design that could help to solve HotPatch’s bounce rate, my team needed first to understand its causes. We drafted a research plan thats key goals were to pinpoint:
- Where on the site users were bouncing
- What were the biggest user frustrations
We set out to understand these problems through a variety of methods:
- Data Analytics
- User Interviews
- User Testing
- Competitor/Comparative Analysis
- Heuristic Analysis
Site Audit/Heuristic Analysis
We started the project by carrying out an audit of the existing HotPatch site to see if we could identify any glaring reasons for the high bounce rate. We mapped out a user journey from the perspective of a customer trying to book a space.
We realised that this journey took our user through 3 distinct pages:
- Homepage — where the user is asked to select a category of space they wish to search for.
- Filtering Page — where the user is asked to apply filters to narrow the search results, which are displayed in a tile view and on a map.
- Listing Page — where the user is able to view detailed information about specific listings and request to make a booking.
Data Analytics
HotPatch provided us with access to their Google Analytics, MouseJar and HotFlow accounts in order to help us identify where the majority of users were exiting the site.
Unfortunately our review of this data suggested that users were bouncing at a similar rate on each of the 3 key pages on the site:
- the home page
- the filtering page
- the listing page
User Research
HotPatch had agreed to provide us with a selection of users to carry out research with, however there were several issues with the users they were able to enlist.
- The majority of users provided were hosts on the site, but the key problem we were trying to solve concerned a high bounce rate of bookers.
- Half of the users provided were either unavailable during the 3-week sprint, or simply didn’t respond to our messages.
- All of the users provided were existing customers of HotPatch, and as such would not have contributed to the site’s high bounce rate.
Screener Survey
We attempted to address this problem by recruiting new participants for user interviews, so we created a brief screener survey and distributed it through various social media channels including Reddit, Take My Survey.com and on a Slack channel for General Assembly Alumni. Unfortunately we had very little engagement through these channels, and the responses we did get were largely not relevant.
User Interviews & Testing
As we were unable to recruit a large number of users from the target audience, we decided to carry out some user tests so that we could record people’s first impressions of the site. We combined the tests with our interview plan, and spoke to 15 different people.
We split those we interviewed in to hosts and bookers, and were able to synthesise the results in to the insights:
We also asked our participants to complete a System Usability Survey, the results of which put the existing HotPatch site at an F grade or “Poor”.
Competitive Analysis
We conducted competitive analysis on a range of competitors including: Tutti, Peer Space, Storefront, Giggster and Treat Well. Our intention was to see if HotPatch’s competitors were designed in ways that alleviate some of the issues contributing to HotPatch’s high bounce rate.
We conducted competitive analysis on a range of competitors including: Tutti, Peer Space, Storefront, Giggster and Treat Well.
Our intention was to see if HotPatch’s competitors were designed in ways that alleviate some of the issues contributing to HotPatch’s high bounce rate.
A task analysis revealed that HotPatch required an above average number of clicks to book a photography studio.
A pluses and delta examination revealed that all of the competitors had very similar designs on the filtering and listing page, but had more variance on the home page.
Comparative Analysis
We also carried out some comparative analysis on sites such as AirBnb and Booking.com, to see how they help their customers navigate their large inventories of property.
We discovered that they also use What/Where/When search tools which remain active in a global navigation bar.
Define
Persona
All of our findings allowed us to refine our initial assumptions and create both a persona and user journey to help visualise our user’s challenges and enable us to better empathise with their problems.
We brainstormed to create Stef’s persona. This was a really useful process to explore ideas and talk about her needs and frustrations. It definitely helped us empathise with her during our design process.
We created an outline of a host’s persona based on the user research we had conducted with hosts, but we realised that the issues that hosts expressed concerned generating more revenue through their property, and that we could hopefully address these concerns by fixing the problems experience by bookers.
User Journey
We also collaborated to produce the following user journey, which used the Stef persona to visually represent a typical first time user’s experience navigating through the HotPatch site.
The journey allowed us to clearly lay out and connect user frustrations identified from our research to the 3 key bounce points identified in the data analytics.
From this we were able to create a series of problem statements.
Problem Statement
Once we had a clear understanding of our users’ needs and the challenges they face, we defined the overall goal for this project in a problem statement.
Stef needs a straightforward browsing/filtering experience so that she finds relevant listings quicker.
Develop
With our problem statement defined, we began to devise possible solutions for our problem.
How Might We
We used a series of How Might We questions to frame different aspects of the problem space.
How might we… provide a straightforward browsing/filtering process
Design Studio
We kicked off our idea generation with a design studio that included the client and was centred around the How Might We statements. We asked everyone to sketch possible solutions and then present their ideas to the group.
Some of the ideas generated included:
- Scales for certains filters such as price.
- A functioning freetext search bar, rather than searchin through categories of patch.
- A modal (pop-up) when selecting more filters.
Low to Mid-Fidelity
With these ideas we started developing wireframes that focused on a single solution to design, test and iterate.
Home Page:
- A new ‘What/Where/When’ search bar is implemented.
- Added a brief and prominent explanation of what HotPatch is.
- Added user testimonies to boost user confidence in the service.
Filtering Page:
- Made the filtering bar more prominent and sticky on scroll.
- Added a ‘Clear All Filters’ button.
- Redesigned the product cards to make key information more visible.
Patch Page:
- Condensed and organised the display pictures.
- Made the booking widget on scroll with a coloured background for visibility.
- Added a drop down ‘Amenities’ feature listing the patch’s amenities.
User Testing
Testing at this stage was useful because it reinforced that our design could solve a lot of the existing user problems. We carried out 8 moderated user interviews and 6 unmoderated user tests.
The new design had a 100% task completion rate across all tests carried out, and the participants’ answers to a new System Usability Survey put the prototype at an A grade or “Excellent”.
Insights from our qualitative feedback included:
Iterations
Following user testing we were able to make some quick iterations on the existing design as we took it into High Fidelity.
Home Page:
- Search tool adapted and in a more prominent location.
- User Testimonies moved to the bottom of the page.
- Extended explanation of what HotPatch is and how it function
Filtering Page:
- Search tool now returns to a less prominent location.
- Modal for Amenities has been developed.
- Added toggles to both hide and maximise/minimise the map.
Patch Page:
- Added “Contact Host” button.
- Increased padding around text.
- Amenities dropdown reworked.
Deliver
High Fidelity
Either watch the YouTube video for a demonstration of our final prototype, or click here to access the prototype yourself.
Presentation
Two employees from HotPatch attended our presentation at the end of the sprint, after which they fed back the following positive responses:
“This has solved a problem that we have been wrestling with for years.”
“I am blown away! It’s great to see the business reimagined like this.”
How we met the brief
In the hopes that it would lower their high bounce rate, HotPatch wanted a new method of navigating and filtration to help users find relevant spaces to rent.
Our solution provided users with a new search bar that immediately brought them more relevant results than searching by industry categories and it fixed numerous issues to improve the user friendliness of their filtering system. Beyond that we began to work on the UX writing of the homepage to better communicate what HotPatch provides to their users, and we refined the listings page to make the booking process more straightforward.
Conclusion
Next Steps
We spoke with HotPatch in depth after the presentation and gave an indication of what next steps we would take as it still felt there was so much to explore to create more social connection.
- Further user testing and iterations
- Development of the host side
- UI research to implement a new style guide
- Development of mobile version and app
- Research into UX writing
- Further research into presenting multi-purpose spaces
Key Learnings
Organisation of the research phase — I experience how difficult it can be to recruit relevant participants for user research. I felt that some of the difficulties could have been avoided with better organisation, and perhaps the offer of an incentive to participants.
Team structure — Our team worked well together in the sense that we all got on well, but we were very preoccupied in making sure the workload was split evenly. I think that this came at the expense of some productivity. We tried to reach every decision by committee which sometimes took a long time, and also took a long time to put our high-fidelity prototype together because each of us were working on different parts and at different speeds.
Facilitating — I enjoyed chairing the client meetings and found that I was comfortable talking in a professional manner with them.