Graphic & UX/UI Designer
Case Study: Leap Help Center
Summary
Platform
Responsive Website
Timeline
2 months
My Role
UX/UI Designer
Leap is a SAAS web application used by dental professionals to communicate with patients, schedule appointments and send reminders, create and manage digital forms, and ask for reviews. With the advent of this new product, the business decided to create an entirely new Help Center using a new authoring tool so that it could sunset the Classic product and its Help Center when the time came.
What I Did
I was tasked with creating a design for the Help Center that utilized the base structure of the newly acquired authoring software (Paligo) while maintaining brand consistency and usability for the company’s busy clientele. In collaboration with the design team for the product and with feedback from client support teams and users, I was able to implement a design that mirrored the product while still feeling like a separate entity.
The Problems
Need for Self Help
A major business goal was to create both a product and a Help Center that encouraged self-help. The existing product required a good deal of training for all members of a dental team, which was difficult to schedule for large, busy practices. With this new, easier to use product, the company wanted to issue in a new era of self-assistance where users were empowered to learn and troubleshoot the software on their own.
Too Much Distraction
Because dental practices tend to be fast-paced environments where team members are often pulled away for other tasks, it was important to create a simple design that allowed users to find answers quickly without frills or distractions. It was also important for them to be able to intake small amounts of information, walk away, and easily find their place again.
Placement
One of the Product & Development team’s goals was to add a link to the new Help Center within the product itself. However, there was concern that linking to a site that looked too much like the product would cause confusion among users, so it was important that while the site maintained brand consistency, it was clear that it didn’t mirror the product entirely.
Goals
Multiple Paths
Design a help center where users could access information via multiple paths like homepage search, homepage links, in-page search, and top or sidebar navigation.
Simple, Clean Design
Create a streamlined look without distracting frills and excess information. Major features needed to be front and center, content presented in small snippets that were easy to scan text, and clear indicators of the current page.
Sisters, Not Twins
Create brand consistency by utilizing the brand color palette, font, weight, and similar button design. It needed to be obvious that the web application and its corresponding help center website were related but not the same page.
Impact
Once the Leap Help Center went live, Client Support teams noted a significant drop in calls over a 6-month period about how to use basic features of the product. Client Success Managers and Onboarding Trainers also noted that they were able to cut down their time on calls since they were able to send supporting information to clients via a link rather than explain features over the phone. This allowed Client Experience teams to serve more clients per day and gave user time back to serve their patients and complete important tasks at their practice.
Over time, Client Experience teams regularly provided feedback from their own teams and from users that the Help Center was easy to use and navigate and that they were able to find most information they needed there.
Early Ideation
To start, I met with our Technical Content Manager (my team lead) to create a list of requirements for the help center that included:
-
A homepage with a front-and-center search option and a way for users to easily access information about major product features.
-
An article page (to be used for all other content on the site) that included a navigation pane and in-page search capability
-
A footer containing the contact information for Client Support, access to create a view support tickets, and the company logo.
-
Clear, easy-to-scan hierarchy
-
Brand color palette and font
-
Mirror the existing homepage for the Classic product so the site navigation is somewhat familiar for users
Because there wasn’t much time to get the help center off the ground and several brand identity guidelines were already established, I started with high-fidelity mockups in Figma to share with our Technical Content Manager. While designing the article pages was straightforward, we discussed options for the homepage in depth and decided to keep the homepage as stripped down as possible so that users could get straight to what they needed.
I then met with the Product Design team to gather feedback about how they felt the site would fold in with the existing web application and they offered several minor suggestions for improvements that were implemented in the final design.
Testing
Our team of two tested with both internal team members (#) and clients (#) over the course of two weeks. For both groups, we tested individually in Google Meet, recording each session and gathering answers in a spreadsheet after the fact to be able to focus on participant behavior. We created a basic, live version of the site using Paligo authoring software and some help from our Full Stack developers to be able to use during testing.
For each session, users were given ten pieces of information to find on the Help Center to observe 1) how long it took them to find the information (and whether they could find it) and 2) what search methods were most popular. This list of tasks was designed to have users look for a variety of topics including overviews of a feature, instructions for how to use individual features, and small pieces of information that were more obscure in the product and harder to find without help.
Both internal teams and client users were able to find all information within one minute except for one: about half had difficulty finding a piece of smaller information (how many broken appointments a patient had) that wasn’t clearly listed in a heading or searchable via text. Two participants failed to find it at all. This, however, was determined to be an issue with content rather than design; the Technical Content Manager made changes to the copy so that “broken appointments” was clearly listed on the page and was searchable.
Final Designs
One of our goals was to create multiple paths to information since the Client Experience team noted that some users search and some browse. In addition to a main search bar that appeared front and center on the homepage (the more popular path of the two), I created tiles that would link to each feature page and styled them similarly to how modals appear in the Leap web app.
I also used the same background image as is used in Leap (though in the app, it's set to 40% opacity), used branded colors and font, and utilized icons that were already used in the app for recognizability. In some circumstances - for example, the Getting Started, Reminders, and Fill Appointments tiles - I had to create new icons in the branded style since those features don't have their own page in the app and hadn't been assigned an icon.
For article pages, I designed the navigation to be simple and always in view so users could easily find related topics they might be searching for, with the option to search at the top for each page. This created an additional paths to information while keeping choices limited and easy to manage.
I also gave each article page a consistent typography and hierarchy so users could feel comfortable and confident using the Help Center over time and discovering new features as they were added.
While the color palate stayed mostly within oranges, creams, greys, and blacks to match teh app, I needed to employ additional colors like green for admonitions and alerts within the text to make these items stand out. These colors were then approved by the Product Design team.
Development
Once testing was complete, I implemented changes within Paligo and in the CSS and Javascript for the site via Visual Studio Code in coordination with the Technical Content Manager and the Development team. A link to the site was then added to the web application by our Development team, making the site accessible to all users. The Client Experience team was then given the direct link to the site to promote with clients, both on phone support calls and via email.
Final Steps
Upon site launch, Client Support teams directed users to the help center whenever possible, using it to share procedures clients needed assistance with. Client Success Managers and Onboarding Trainers also share the main site as part of their onboarding efforts and we continued to gather feedback from those teams informing whether the design of the site needed to be adjusted.
Within a year, we discovered that users were having trouble determining which page they were on using the side navigation pane, especially since the items in the pane’s table of content had almost doubled due support for new features in the product. I added a higher contrast color highlight and bolded the text to make it stand out. I also added accessibility features including form labels and external link icons where pages opened in a separate tab.
We continue to gather feedback about the site through the Product and Client Experience teams and hope to later implement a Replay feature via Paligo, which records user sessions and will provide more specific understanding of exactly how users navigate the site and what I can improve within the design.