![Gradient Strip](https://static.wixstatic.com/media/11062b_cee9c80d8a1b47eebd9f11cfbd2bf7e7~mv2.png/v1/fill/w_49,h_11,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/11062b_cee9c80d8a1b47eebd9f11cfbd2bf7e7~mv2.png)
Revamped
Navigation Experience 🧭
When studying the success rate of consumers finding services via navigating Toby’s app in the past 3 months, only 18.15% of consumers (~7200 people) converted from the Home page to Service Page. Upon our user research, we found that there was room for improvement to boost the overall conversion rate.
Toby's services are categorised into 3 levels: Grandparent (1st), Parent (2nd) & Child (3rd).
![](https://static.wixstatic.com/media/b18de8_80416c2dfc7d4cd49099663eb2ba464e~mv2.jpg/v1/fill/w_276,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/b18de8_80416c2dfc7d4cd49099663eb2ba464e~mv2.jpg)
Home page shows existing grandparents the platform has. (e.g. 日常家務)
![](https://static.wixstatic.com/media/b18de8_f1fa72d24cc34df7afd64710a406e0f8~mv2.jpg/v1/fill/w_276,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/b18de8_f1fa72d24cc34df7afd64710a406e0f8~mv2.jpg)
Under each grandparent page, navigation tabs show parent groups. (e.g. 深層清潔)
![ac clean.jpeg](https://static.wixstatic.com/media/b18de8_b724cc6bfb1a4d8491f09b04b0b4b457~mv2.jpeg/v1/fill/w_276,h_600,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/ac%20clean.jpeg)
Under each parent group, there are multiple child services. (e.g. 冷氣清洗)
Background
As a leading service marketplace in Hong Kong, Toby runs 4 business models.
1. Direct Booking: Match cleaners with consumers, primarily for home services.
2. Store: Offer a wide variety of stores for consumers to book services, primarily for beauty services.
3. Assistant Matching: Match individual needs with different vendors, primarily for home renovation services.
4. Quotation: Share a list of qualified suppliers based on consumers’ inputs on question forms.
![Reading with Magnifying Glass](https://static.wixstatic.com/media/11062b_bec6d2c9376b411594b87386f26d3609~mv2.jpg/v1/fill/w_82,h_60,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/11062b_bec6d2c9376b411594b87386f26d3609~mv2.jpg)
Problem
Among all users who found services on Toby, our user survey showed that a majority of them (13/17 users) clicked icons on the Home page to browse services. During user interviews, some reflected that they struggled to find which grandparent or parent grouping their desired services fell into so they bounced off. We hypothesized that these are the potential blockers:
-
The naming of some grandparents isn’t directly relevant to its child services. For example, 物理治療 service sits under 保姆/陪護 grandparent. We see 物理治療 has a 0.12% lower conversion than 私家看護. It might be unclear for users that they can find 物理治療 service under 保姆/陪護 grandparent.
-
Showing similar service types under different business models separately is confusing. For example, we have grandparents called “裝修/設計” and “維修” respectively. Both services are related to home renovation. The former runs the Assistant Matching model and the latter runs the Quotation model. People may not know which one to click to find home renovation services at first glimpse.
-
The model photo at the top occupied many spaces, which deters consumers from viewing more services on a screen.
![Image by Towfiqu barbhuiya](https://static.wixstatic.com/media/nsplsh_990241a95418468a805bc0d6daf3d174~mv2.jpg/v1/fill/w_112,h_74,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/nsplsh_990241a95418468a805bc0d6daf3d174~mv2.jpg)
Solution
-
Readjusted the grouping definition and displayed sequence to ensure relevant services are displayed as per user interest.
-
We regrouped similar service type into 1 grandparent (e.g. 家居&清潔>日常家務; 裝修/設計&維修>家居裝修)
-
We redefined the parent level more granularly
-
We arranged the order of grandparents by no. of total page views in the past 3 months
-
-
Showed service with different models under 1 grandparent. (e.g. Consumers can click different tabs to book beauty services from stores or get quotations from suppliers.)
-
Removed model photos so consumers see more services on the go.
We ran an A/B test for 3 months to ensure the result genuinely reflected the effects of the revamped navigation on the conversion rate. Group A saw the old grouping and Group B saw the new grouping.
The Changes
![Before_Home.jpg](https://static.wixstatic.com/media/b18de8_b94dd8aa6193436ba4f820dfc2680c5a~mv2.jpg/v1/fill/w_58,h_126,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/Before_Home.jpg)
Before
![home page demo.gif](https://static.wixstatic.com/media/b18de8_9473ddafd4d24188bb2341463fbfc8d2~mv2.gif)
After
Home Page
• Adjusted the grouping, display sequence and naming of sub-verticals
• Removed model photo
• Changed the position of the search bar
Grandparent Page with Quotation Model
• Removed model photo
• Added “顯示全部服務” menu for users to navigate between sub-verticals
• Adjusted the grouping, display sequence and naming of parent & child group
![](https://static.wixstatic.com/media/b18de8_1c187c94a51b4ceb902f1520eea51502~mv2.jpg/v1/fill/w_56,h_121,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/b18de8_1c187c94a51b4ceb902f1520eea51502~mv2.jpg)
Before
![Home demo.gif](https://static.wixstatic.com/media/b18de8_e166560ec53c45698c9c64c966b67908~mv2.gif)
After
![](https://static.wixstatic.com/media/b18de8_fdeaa3a3c590495881c70f742dd4181e~mv2.jpg/v1/fill/w_62,h_133,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/b18de8_fdeaa3a3c590495881c70f742dd4181e~mv2.jpg)
Before
![store x ppl demo.gif](https://static.wixstatic.com/media/b18de8_bd35f6b9c8fc456c871b15865eebfe4c~mv2.gif)
After
Grandparent Page with Store & Quotation Model
• Grouped Store & Quotation services to the same grandparent page
• Resized store cards
• Removed model photo
Grandparent Page with Assisted Matching & Quotation Model
• Grouped 2 types of services on the same page
• Showed icons from 5 to 4
• Resized the banners
• Showed related case type for relevant grandparent (e.g. home case for 家居裝修, office case for 商業裝修)
![](https://static.wixstatic.com/media/b18de8_5194d28ebe9948ab99e083c8b0cda9dc~mv2.jpg/v1/fill/w_64,h_138,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/b18de8_5194d28ebe9948ab99e083c8b0cda9dc~mv2.jpg)
![HRIDxppl demo.gif](https://static.wixstatic.com/media/b18de8_3210a81f06864ee39cdcdc3426ec752a~mv2.gif)
Before
After
Result
3 months after the revamp, we concluded that the new navigation performed better than the old one. We found that
-
The total page conversion from Home page> Grandparent page> Child page is 11% more in the new template over the old template. (+1190 traffic).
-
The conversion of total page views from grandparent to child page in Group B (48%) is 6% more than Group A (42%)
-
The overall conversion of queries or booking of top performing grandparents (Home, Beauty & Home Renovation) in Group B (5.79%) is 2.22% more than in Group A (3.57%).
It revealed that the revamped navigation not only allows consumers to find the right services more successfully but also triggers their intention to learn more. It is a win-win situation for businesses and consumers.
Challenges & Mitigation
-
A large discrepancy between frontend and backend grouping consumed a huge maintenance effort. While it is not a must to align both, it provoked us to think about how to manage categories more sustainably. Our plan was to define the fundamental grouping and rules for the backend in this revamp. It allows the front-end to adopt and iterate accordingly. As a result, we can centralise the management of categories and integrate the backend with front-end grouping to save unnecessary effort for configuration given that grouping of services is more static.
-
There’s a risk for consumers in Group B to see materials in the old grouping. As the links of the grandparent page on communication channels (e.g. email, SMS & push notification) and search results were fetched from the old grandparent ids, having a separate grouping definition may lead consumers in Group B to see materials in the old grouping. We tackled the concern by keeping the old unique id for Group A & B, as well as creating new ones based on the additional grandparents.
![Capture.PNG](https://static.wixstatic.com/media/b18de8_899ff3442cae4d28b6f343e80714e4bc~mv2.png/v1/fill/w_60,h_72,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Capture_PNG.png)
![White and Pink Balloon](https://static.wixstatic.com/media/11062b_8273892061c64ecab68911a4ccbedceb~mv2.jpg/v1/fill/w_82,h_55,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/11062b_8273892061c64ecab68911a4ccbedceb~mv2.jpg)