Simple navigation
Challenge
Reduce the need for explanation with a simpler and easier to understand navigation.
Outcome
Redesigned main side navigation and calendar controls resulted in an overall 20% relative increase in desktop trial conversion rates and 55% relative increase in mobile browser conversion rates.
Company
Jobber
Role
Determine overall design direction
Contribute to change management strategy
Timeline
8 weeks (4 sprints)
A little context
Jobber is a SaaS-based product that helps Service Providers (SPs) such as plumbers, landscapers, and cleaners run their operations so that they can better manage their business and provide a professional experience for their customers, also known as Service Consumers (SCs).
​
New customers to Jobber are most successful when they are able to talk to one of the sales staff who help explain the product to them. However, a large percentage of new users never talk to a Jobber representative and are left to understand the product on their own, which typically results in lower conversion rates overall.
The challenge
Our team was challenged to reduce the need for explanation when a new user first experiences Jobber by making the main navigation simpler and easier to understand.
Need more context?
You can check out Jobber here!
The team
The Scrum team for this project was comprised of four Software Developers, a Product Manager, a Scrum Master, and a Product Designer — played by me.
Initial analysis
The original navigation had 20 menu items that a new user would need to contend with. This was way too many items and far more than our main competitors offered so I took a look at the navigation and tried to identify which items could be combined, reprioritized, or removed all together. I also mapped out how these changes would affect the underlying pages of the product.
Ripple effect
In order to make these changes, I would also need to make the following adjustments:
-
Add controls to switch between calendar views right from within the calendar
-
Give access to property search from 'Clients' page
Move calendar controls out of menu and into views
Merge 'People' and 'Properties' into 'Clients'
Merge 'Get started' into 'Home'
Remove 'Work'
Remove 'Work overview'
Highlight key workflow objects
Original main navigation
The implications of change
To understand how these changes could affect our users and our internal teams, I collected usage data of the menu items and began to reach out to customer success reps, managers, sales reps, and product training reps in order to hear their concerns.
​
The following insights came from my discussions:
-
Sales and product training reps often refer to the 'Work overview' page when explaining how Jobber works but the page has low overall usage
-
Only specific users need to use the 'Properties' page and they typically use it for the search functionality
-
The main navigation hasn't changed in years and as such, users have become very accustomed to their preferred workflows — adjusting the navigation will require a structured change management plan
Methods
Quantitative research / Contextual interviews
Calendar controls
There were a few issues that needed to be addressed on the calendar:
-
Users need to easily change between calendar views
-
Users need to easily change days on the calendar
-
Users need to easily understand how to clear filters
-
Users need to easily understand when filters are turned on
​
I explored several options for control layouts and filter button styles. To validate my ideas, I performed first click tests on UsabilityHub with individuals who had never heard of Jobber as well as with internal Jobber staff who don't interact with our product often.
Methods
Ideation / Prototyping / First-click usability test
Large space creates disconnection between day controls
Users expected this to open a calendar picker but it brings you to “Today”
“Today” label looks like a disabled button
Confusing “Clear filters” button
Button style/colour doesn’t match with the design system
Original calendar controls
Participants were asked how they would check the schedule two months down the road and their 'first-clicks' were recorded
Here is the original image participants were shown for their test
Participants were asked how they would check the schedule two months down the road and their 'first-clicks' were recorded
Client and property merger
'Clients' and 'Properties' were two different pages in Jobber doing very similar things. By speaking to internal staff and looking at quantitative tracking data for the pages, we learned that most users were coming to these pages to search for a client or property.
​
Initially, we thought it would be best to keep both pages around and provide in-view controls to navigate between them. However, the further I dove into the experience, the more I realized that we could provide all of the value of both pages by improving the search function on just the 'clients' page.
​
I ran the idea past our team of engineers and with our internal stakeholders and the decision was made to improve the 'Clients' page search and remove the 'Properties' page entirely, thus further simplifying the Jobber experience.
Methods
Quantitative research / Stakeholder engagement
Final navigation + quick create
To add a final element of delight to the navigation changes and to further promote the main Jobber workflow to new users, I explored adding a 'Quick create' function to the main navigation. This would give users the ability to create the core work objects from any screen in Jobber.
​
Below are my explorations and final designs of the quick create and main navigation changes.
Quick create ideation
Change management and A/B test
In order to implement these changes, we constructed a plan to introduce existing users to the changes and highlight the benefits that came with it. Our team collaborated with customer success and sales to make sure that their internal teams were able to adapt their own workflows and we collaborated with product marketing to create a series of messages to show to users in product when the change was made.
​
In addition to the change management campaign, we also ran an A/B test to determine whether or not the simplified navigation improved overall conversion rates.
Methods
A/B testing
Impact
After our A/B test concluded, we were 90% confident that we raised overall Jobber desktop trail conversions by ~20% relative and overall Jobber mobile browser trail conversions by ~55% relative.
​
These seemingly small UX improvements made our product easier to understand for new users which had a significant, positive impact on their conversion rates.
20%
relative lift in desktop trial conversions
55%
relative lift in mobile browser trial conversions
Learnings
This project taught me the importance of collaborating and leveraging in-house expertise in the planning and execution of projects that require thoughtful change management strategies. It was absolutely vital to the success of this project to engage with multiple departments across the company right from the beginning.
​
I also learned the importance of measuring success, especially when it comes to projects that are so UX/UI specific. We didn't introduce any new technology, we simply reworked what we had in meaningful ways. In order to grow the design maturity in our organization, it was important to highlight the very real benefits that design has to offer which can have direct impacts on a company's bottom line. Testing our design intervention and proving it's value created a lot more momentum to tackle similar design-heavy projects in the future.
Thank you
I wanted to acknowledge David Ferris and Jenna Schneider for their incredible efforts in helping to launch this large of a change so smoothly and with very little issues. This was truly a team effort across the company and I am so thankful for everything they taught and shared with me along the way.