HubSpot CRM Web App
Minified Search Experience
0-1 Feature Design
The Company
HubSpot is a leading CRM platform that helps businesses grow by providing marketing, sales, customer service, and operations tools. It is used by 200,000+ companies worldwide to manage customer relationships and drive business success.
Challenges
With over 1.3 million weekly active users, search needs to be fast, efficient, and non-disruptive. However, the full-page search experience was slowing users down, leading to inefficiencies.
Solution
I led the design, defined the vision, and drove the roadmap for Minified Search, a faster, more seamless search experience, which
- Surfaces the most relevant results instantly
- Allows users to search without leaving their workflow
- Supports keyboard shortcuts for faster navigation
Role
Design Lead
UX Methodology
Stakeholder Interview, Design Workshop, Usability Testing, User Interviews, Competitive Analysis
Time
4 months (Concept → Public Beta)
Team
1 PM, 3 FE engineers and 2 BE engineers
Before
.gif)
After
.gif)
BUSINESS IMPACT OF THIS PROJECT:
Search-to-click time improved by 22.7%, and the feature was highly praised by customers and HubSpot leadership.
Before the launch, the Search-to-click time was 5.38s. Minified search drove this metric to 4.16s, making the search faster for 1.3 million+ users.
Note to add customer quotes here.
OVERVIEW
Order Status Updates Improvement
The main goal of this project is to reduce the number of support tickets coming from users inquiring about their order status. In addition, our team also wants to provide a more delightful experience to the user. Through performing different UX methods to dig deeper into the issue, I uncovered 3 main user problems regarding order status updates.
Order Status Updates Improvement
The main goal of this project is to reduce the number of support tickets coming from users inquiring about their order status. In addition, our team also wants to provide a more delightful experience to the user. Through performing different UX methods to dig deeper into the issue, I uncovered 3 main user problems regarding order status updates.
User Problem 1
Users do not know there are special cases why an order takes more time to deliver
1. Stakeholder Interviews
By talking with the customer support team, I learned that at Chowbus, there are ASAP and non-ASAP orders: non-ASAP orders mean order will be delivered at a later time instead of immediately. One of the most common issues is lots of users do not know how non-ASAP orders work. Therefore, they reached out to the team regarding this issue.
2. Usability Testing / Heuristic Evaluation
Users do not know there are special cases why an order takes more time to deliver
1. Stakeholder Interviews
By talking with the customer support team, I learned that at Chowbus, there are ASAP and non-ASAP orders: non-ASAP orders mean order will be delivered at a later time instead of immediately. One of the most common issues is lots of users do not know how non-ASAP orders work. Therefore, they reached out to the team regarding this issue.
2. Usability Testing / Heuristic Evaluation
"..., when I order, most of the time I just want to check out quickly because I'm hungry and want my food faster. I'm not going to read everything on the screen." - Tester
One of the issues I found during usability test is that users placed a non-ASAP orders without knowing it. Among 5 users that participated in usability studies, 3 out of 5 neglected the existing information regarding delivery time, even though there are multiple reminders in the current Chowbus app.
After user checked out, there is nothing reminding user that this is a special case and the order won’t be processed until a later time
SOLUTION TO USER PROBLEM 1
Part A: Create a banner to remind user when they placed a non-ASAP order
To capture user's attention when they land on the order status screen, I created a banner which is prominent but non-intrusive to the users.
Squint Test
To make sure the design solution draws enough attention to the user while they land on this screen, I ran squint test with users. I showed the design to users for 5s and asked them they see first and what they remember.
Result
The result was, the animation is drawing too much attention and competing with the banner.
Recommendation
To solve this issue, I recommended that the animation won't start moving 3s after users land on this screen. I ran squint test with users to make sure this solution fix the issue found.
To make sure the design solution draws enough attention to the user while they land on this screen, I ran squint test with users. I showed the design to users for 5s and asked them they see first and what they remember.
Result
The result was, the animation is drawing too much attention and competing with the banner.
Recommendation
To solve this issue, I recommended that the animation won't start moving 3s after users land on this screen. I ran squint test with users to make sure this solution fix the issue found.
SOLUTION TO USER PROBLEM 1
Part B: Provide educational experience to the users & options to cancel order or get more guidance
The pop-up educates users why their orders might take longer to be processed. I also offer users option to cancel their order if they indeed placed the order by mistake. In addition, users can also learn more about how to track their order status in app.
.gif)
USER PROBLEM 2
User’s expectation about delivery time is not the same as the actual delivery time
1. Stakeholder Interviews
I learned from the Customer Support team that a large portion of inquiries are relevant to the ETA displayed on the order status screen. To learn more about how the ETA is calculated in the app, I reached out to the product manager and engineer in charge. I learned that the ETA will update based on factors like how busy the restaurant is, traffic conditions, and how many restaurants the user order from, etc. It is not a set time range.
2. User Interviews
By talking with users, I learned most of our users perceived that the ETA range presented to them in the app will not change and is a guarantee from Chowbus.
Gap exists between user's expectation about eTA and reality
Another issue I discovered during stakeholder interviews is that in current app, after a driver starts delivering a user’s order, the backend updates the ETA from a range to a more precise ETA time.
Users, especially new users, are confused when they see the time changed from a range to a precise time; this is one of the common reasons why users want to re-confirm the ETA with our support team.
Users, especially new users, are confused when they see the time changed from a range to a precise time; this is one of the common reasons why users want to re-confirm the ETA with our support team.
Users get confused when they see the time range updated to a specific time
SOLUTION TO USER PROBLEM 2
Part A: Provide additional explanation about how the ETA is calculated and set expectation that the time range will be updated
User can tap on the icon to open up a modal providing transparency into how the ETA is calculated at Chowbus. The copy also informs users that the ETA is not a guarantee, and
sets expectation that the time range will change into a more precise time later.
.gif)
Consider user’s holistic experience and change the copy in text message
In user interviews, I learned that users prefer multi-channel communication. Therefore, to set expectation in users so that they know there will be an update in the ETA, I updated the copy in text message being sent to our users.
USER PROBLEM 3
Users do not have clear information about the status of their order
Problem 3.1: Unintuitive Progress Bar
Heuristic Evaluation / Usability Testing
Form usability tests, one of the issues users ran into is that the current progress bar seems unintuitive to users. It doesn’t show users how much percentage it progresses as it moves to a new stage. Moreover, the whole process wasn't clearly divided into different phases, and users couldn’t gauge how much longer they need to wait for their order based on this design.
The Progress Bar is not intuitive to the users
SOLUTION TO PROBLEM 3.1: UNINTUITIVE PROGRESS BAR
Introduce a progress bar that clearly divides order status into 5 important stages
Through different iterations, I decided to propose a 5-stage progress bar, which can clearly communicate to the users how many steps are in the whole process and where their order status is at.
the new progress Bar clearly provides clear visual hint to users As order progresses into next stage
.gif)
Problem 3.2: Unclear Order Status Copy
Heuristic Evaluation / Usability Testing
During usability tests, users are confused about some copy regarding their order status. More specifically, users think the copy is too general and didn't deliver a clear meaning.
User Interview
By talking with the users, I learned users want more granular detailed information regarding their order status, especially when it's a bundling order (an order from multiple restaurants)
SOLUTION TO PROBLEM 3.2: UNCLEAR COPY
Part A: Make the copy easy to understand and offer more granular information to users
New design provides specific information and clarity to user's order status
User can Tap on the chevron icon to see restaurant-level information
.gif)
SOLUTION TO PROBLEM 3.2: UNCLEAR COPY
Part B: Use animation to complement information shown in copy
Secondary Research
Research shows that animation can better capture user’s attention - users retain 95% of information in video/animation vs 10% in text.
Stakeholder Interview
By talking with the support team, I learned that map was confusing users and leading users to contact the support team. There are times Chowbus stack different user's orders and assign to one driver. When the driver goes to a different restaurant the user did not order from, it increases the chance of the user contacting the support team. Therefore, there is additional benefit to using animation versus map.
New design replaces map with animation to supplement order status copy except for phase 4 in which The user wants to track their order on The map
.gif)
.gif)
KEY TAKEAWAYS
While being open to feedback, do not be afraid to defend your design decision
In the early stage of the project, when I first presented to replace the map view with animation, the idea got a lot of pushback from the PM. However, because I was able to conduct additional research and collect more data, and engage my stakeholders in the process, I was able to push this idea through. The final result was, the animation elevated the design - it is not only solving the user problem but also bringing a delightful experience to the users.
Always keep users and their feedback in mind
I learned that the key to the success of a product. is collecting user's feedback through talking and testing with them, and then incorporating their feedback into the design decision process.
Understand different stakeholder's work style can facilitate work flow
Different stakeholders have very different preferred work styles - being able to understand the differences and work with them accordingly could greatly increase efficiency.
APPENDIX:
DESIGN DOCUMENTATION
Engineer Handoff
I
Device Mockup
:
.png)