Streamlining the SimplePractice navigation system
Visiting a website without a clear navigation system is like visiting a new city with no map. I designed a global navigation system that improved the information hierarchy and overall user experience for prospective customers of a healthcare B2B SaaS product.
My Role
Leading design and research processes
Analyzing results and communicating project progress to stakeholders
Coordinating with engineers to ensure seamless handoff
Scope
1 Designer, 1 Product Manager, 1 Engineer
The Results
84% increase in monthly click rates for key pages that demonstrate product fit to our customers
15% overall growth in monthly trial sign-ups
Tools
Figma, UserTesting, MixPanel, Zoom
Skills
UX/UI Design, Research and Validation, Usability Testing
The Challenge
The current navigation system has unclear information organization and is missing key information about what our product offers.
SimplePractice is an EHR for private practice health and wellness practitioners. Previously, we focused on solo behavioral health audiences, but as we expand into new market verticals, we need to make it clear to prospective customers that our product works for a variety of specialties and practice sizes.
The website’s navigation is an essential way to help customers find answers, but the current system lacks a clear information hierarchy and is missing key details about what our product offers. Improving the navigation system will help users who could benefit from our product find the information they need, and in turn, help the business reach revenue goals.
💡 How can we guide practitioners to the information they need to decide if SimplePractice is the right product for them?
50% increase in traffic to key landing pages
25% increase in trial sign-ups
15% increase in conversion rate
KPIs
Constraints
Limited engineering bandwidth
Low research budget
Solution Preview
Leaning on natural attention cues.
Color and illustrative elements are used to highlight key information.
Understanding the most important features for running a private practice.
Validated through research data, I organized the Features section based on which features our customers tend to value the most.
Matching mental models.
Through detailed research and customer feedback analysis, I ensured that each navigation menu was intuitively structured and aligned with how health and wellness practitioners commonly interface with technology.
The Process
Through an end-to-end design process and continuous teamwork, I successfully designed, validated, and shipped the feature. See an overview of the process below:
🔬 Background Research
Goals
We set off to answer these key questions:
How is SimplePractice currently perceived?
What are missed opportunities in the current website?
User Interviews
Through 1:1 interviews, I took a closer look at customer goals and frustrations, as well as what kind of tools they need for their practice.
Question Preview
Have you heard of SimplePractice?
When you look at our website, do you think our product would be a good fit for you?
What are the biggest challenges in your current role?
Study Setup
4 1:1 qualitative interviews with health and wellness practitioners ages 30-50
We have an opportunity to ease practitioner worries and better demonstrate how we can support them on their business journey.
Here are a few key insights that we found, as well as ways that the navigation could strategically address challenges:
Insights and Opportunities
01
Many users don’t realize SimplePractice supports more than solo providers.
The navigation is an opportunity to expand brand perception and showcase solutions for groups and growing practices.
02
Clinicians seek guidance, not just software.
A navigation that highlights tools, resources, and education builds trust and reduces the fear of going solo.
03
Investing in the right tool matters.
The navigation must guide users to the right information upfront to help them feel confident in choosing SimplePractice.
Customer Personas
To translate our research into action, we needed to distill our findings into clarity on who we were designing for, what concerns shaped their decisions, and how they approached evaluating a platform like SimplePractice. Thus, I developed targeted personas that each represented a distinct mindset and pain point observed in our customer base.
We kept these personas at the heart of our strategy, framing the navigation as a strategic tool to not only organize content, but shift perception.
Navigation Audit
In order to further understand how the navigation system can be improved, I conducted an audit of the current pages and how they are categorized.
This deep dive allowed me to uncover the following pain points:
01
It is unclear what the main product is.
The Products menu lists all products equally, making it unclear that the website is dedicated to just the main EHR product.
02
We do not address all audiences.
SimplePractice has expanded services to group practices and therapy seekers, but the navigation does not provide information for these new audiences.
03
Information is in unexpected places.
Category titles do not describe all the items under the menu, which can hinder users from finding what they’re looking for.
🪄 Ideation
Design Explorations
What do users look for, and how do they expect to find it?
To translate insights into a navigable experience, I mapped out potential categories and groupings based on what clinicians look for when evaluating platforms. This allowed me to explore different mental models and surfaced early hypotheses for how the IA could support trust and clarity.
METHOD 01
By Product Offering
Groups content based on the distinct services or solutions SimplePractice provides, helping users understand the breadth of our platform.
METHOD 02
By Feature
Highlights individual tools and capabilities, making it easier for users to compare functionality and assess fit for their workflow.
METHOD 03
By Audience
Tailors navigation to different types of users (e.g., solo practitioners vs. group practices), offering a more personalized and relevant experience.
Putting it Together
I presented my ideas and gathered internal feedback from marketing and customer success teams to understand common questions and pain points. By thinking back to our personas, I identified which navigation categories might resonate most with different user types, then synthesized 2 key options for user testing to validate clarity and relevance.
🌈 Design
Low Fidelity Designs
How can we best visualize these categories?
I created initial wireframes of the designs and presented them to my team. We evaluated my designs based on these key questions:
Is each navigation item in its expected place?
Can users easily find answers?
Option 1: more solutions categories to fit different audiences, redacted Other Products menu, and illustration visual to add delight
Option 2: moved Features section under main product category of Product section, added iconography to break up text, and added resource category for therapy clients
Building towards final options to validate through user testing
For the next round, I revised my designs to meet the following goals:
Making it Better
01
Establish consistent layout patterns.
For the first option, I implemented an illustration highlight box across menus to create a consistent focal point. At first, I considered implementing it across all menus but found that some menus required equal information hierarchy. Thus, I opted to keep the highlight box only where it added value.
For the second option, I explored removing the illustration highlight box to make the designs more consistent and straightforward.
02
Make it a no-brainer.
I revised the content to be as precise as possible so that customers would not be left guessing what something meant. For example, if a customer is looking for help with using the product, they can go directly to “Product Help" rather than trying to decipher between general terms like “Community” or “Learning.”
In the second option, I explored condensing the “Products” and “Features” menus to test if having less options to choose from makes it less overwhelming to find information.
With these goals in mind, I developed the following two options for A/B testing:
Option A: Illustration highlight box to emphasize key information
Option B: Simplified text-only menus, condensing "Products" and "Features" menus to reduce information overload
How will participants interface with the designs, and will they find information in expected places?
Working with my product manager, I developed a set of 10 questions to evaluate whether participants were able to complete key tasks. We decided to use unmoderated usability testing to observe how practitioners naturally interacted with the product without external influence.
Usability Testing
Study Type
Random unmoderated usability test, using Figma prototypes on UserTesting platform
8 health and wellness practitioners ages 30-50, split evenly between A/B groups
Participants
Key Findings
01
Some of the terminology used was unclear.
While “Solutions” is a common term used on tech company websites, participants on the older side were confused about what to expect on this menu.
02
Reducing the information load doesn’t necessarily improve functionality.
Participants found that it was more difficult to find information on Option B because too much information was in one menu.
03
Visual cues heavily influence attention.
Participants were immediately drawn to information in the illustration highlight boxes. They were also less likely to notice information placed further down the page.
By validating assumptions, I confidently made final adjustments to the designs.
Seeing how users reacted to the designs allowed me to identify the gaps in my understanding and fill them. With that, I made the following revisions:
Improvements
Putting the product demo in the highlight box.
Previously, I put the demo at the bottom of every menu to encourage views, but the testing results showed that users ended up missing the information entirely. Utilizing proven visual cues is a better way to emphasize this information.
Using clearer category names.
I renamed “Solutions” to “Who It’s For” to more directly indicate what to find in this menu. This also draws a better connection to section titles.
Shifting menu item locations to more intuitive places.
The majority of participants expressed that customer stories and reviews belong under Resources, so I updated accordingly to better match expectations.
The Results
After a thorough QA process and developing responsive tablet and mobile designs for secondary use cases, I successfully handed off the final designs for implementation.
Final Solution
Introducing the new and improved way to explore what SimplePractice has to offer.
From figuring out if SimplePractice offers telehealth to reading a blog post about top therapy memes, the navigation is a handy map to all potential destinations.
Responsive Design
Ensuring that the designs have perfect form and function, no matter on what device.
I adapted the designs to tablet and mobile, being mindful of viewport sizes and minimum touch targets.
📈 Performance Metrics
We observed navigation interactions over a 3-month period and found some exciting results.
We ran an experiment on MixPanel, an analytics platform, and monitored the results over time. Here are some of the highlights:
Visits to the Group Practices page increased by a whopping 84%, indicating that we are reaching more potential group practice customers.
The Learning Library became one of the most frequented pages, indicating that we are directing more customers to helpful resources.
The trial-to-paid conversion rate increased by 30% for the year. While we can’t assume a causal relationship, the navigation played a role in helping the business reach annual revenue goals.
You can’t be what you can’t see.
Oftentimes, designers are so close to the product that we forget to truly think from the perspective of the customer. This project further demonstrated that there is truly no “typical” user. Through user research, I observed how differently each user navigated the design and interpreted information. Overall, embracing user feedback throughout the design process allowed me to refine my designs and align them with the specific needs of our audience.
Another key takeaway was the importance of building harmony between design and code. Through seamless communication with engineers, we ensured that my design could come to life in not only a visually elegant, but technically sound and feasible manner. During the development process, we discovered the need to more clearly how the design should change to accommodate for responsive design. This process helped me better understand how to think from the perspective of an engineer.
Project Takeaways
If I Had More Time
1. Conduct usability testing on tablet and mobile devices
Because user testing platforms are typically optimized for desktop devices, it is difficult to recruit testers on other screen sizes. In the future, I would create tablet and mobile devices earlier in the design process to keep screen size optimization top of mind.
2. Establish more direct success metrics
Measuring the performance of the navigation can be ambiguous—for example, increased click rates might not indicate success, but that it took users longer to find what they needed. I would take more time to collect data and draw more definite conclusions.