![](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/284c8371-f8b1-42f2-8fbd-fb011671bb7a/Group+874.png)
We ran four weeks of discovery which included three stages: empathize with users, understand business needs an iterate design to align with business and user needs. We eventually designed and built a fully functional customer service experience that supports customers single sign-on needs while maintaining the level based subscription business model.
Primary Design Question
How can we deliver a best-in-class Customer Service experience to unpaid users while also delivering high-value to customers with top-shelf subscriptions?
Solution Preview
What is Auth0?
“Auth0 is an easy to implement, adaptable authentication and authorization platform”
My Role
I conducted 10 discovery sessions which enabled me to:
1. Identify key user personas
2. Iterate from low to high Fidelity wireframes to align user and business needs
3. Design mock ups to reach final design sign off before build
I then teamed up with a Salesforce Solution Architect to create the website in the Salesforce Experience Cloud web builder
Introduction
Oftentimes in human-centred design, while offering a full suite of functionality is best for customer experience, an organizations financial stability depends on a tier-based subscription structure. This was certainly the case for Auth0, whose business model requires that users be limited to certain functionalities based on their subscription level.
In order to distribute information on these subscription levels, Auth0 utilizes a single Support Domain, of which its content was the focus for this project. This domain also serves as the the single access point for users to contact Auth0 Customer Support and access support content regarding their platform, making it a high traffic page.
Site Map Creation
When designing a site that offers a large amount of functionality, initial conversations with the client can become too focused on specific functionality. Hence I created a site map to:
Guide initial conversations around information architecture and page navigation
Define which pages will be in scope during the project lifecycle
Phase 1: Discovery
In order to make informed design decision for the first iteration wireframes, I conducted a series of conversations with the client to gather insight on business needs, which was ultimately used to create a site map and personas to guide design on Auth0’s Support Site.
Personas
In order to fully understand archetypal users and their primary activities, a series of user personas were created during working sessions with Auth0.
These personas enabled us to:
Optimize the most-used functionality on the site through understanding pain points
Map out key differences in the experience for various user types including:
Varying levels of customer support priority and access
Functionality available within subscription management
First Iteration Wireframes
With the above insight gathered during the first weeks of discovery, I had the insight necessary to begin the first iteration wireframes.
The wireframes served to illustrate the interaction users have with the content at a high level without involvement of branding or aesthetics.
Upon completion, I conducted a walkthrough with the client to explain the design approach and to gather feedback that would then be implemented in to the next iteration of mockups.
Update support content to align with latest brand guidelines
Optimize navigation across the content
Personalized experience based on login status
Streamlined case creation process
Integration of case deflection- even during case creation
Increased the user’s ability to navigate cases efficiently
Gathering Auth0’s Business Needs
![Group 286.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/7a0ae1e4-0f8d-4c21-ab8f-40ac02fe9958/Group+286.png)
![w2.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/be6bea2a-df37-42f0-ac9e-ef72b233fe24/w2.png)
First Iteration Feedback
During the review session, the client approved the designs and provided feedback that would be implemented into the next iteration mockups.
With sign-off on the wireframes, the high level design approach and on page content was approved. The next phase of mockups then served to integrate the aesthetic and branding aspects of the UI within the bounds of Auth0’s latest Brand Guidelines.
![Group 875.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/12c40a2e-2ef2-4c0a-8650-fa455cc719e7/Group+875.png)
![Group 874.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/e16525ae-0005-4b69-a47c-bdcc03ab3212/Group+874.png)
Mockups Feedback
After conducting two sessions walking Auth0 through the latest mockups, there was enough feedback to implement into the Final iteration of mockups which would guide the build and development sprints.
Conclusion
![Group 873.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/ec8c3356-d89e-4ba0-8d8d-0871464f691e/Group+873.png)
![Group 872.png](https://images.squarespace-cdn.com/content/v1/628fb70fe35ea12c16a72fae/5dceb64d-d42e-46a3-976b-8fdafac20bac/Group+872.png)
Results
The final design solution addressed Auth0’s business needs and the primary design question by strategically offering specific functionality based on the user’s subscription level.
Auth0’s business needs required that only paid customers access customer support. This limitation could quickly push non-paid users to have a negative experience when they have issues on the platform because no agents are directly available to help them.
When a non-paid user attempts to get support, instead of offering a contact form, the user is offered an advanced search of a variety of content that enables them to self-serve. Further, in the case where a user would like to contact support, they are given the option to talk to a sales rep or to ask the Auth0 Community Forum.
This approach offered Auth0’s user an impactful support experience while also addressing Auth0’s business needs and limitations.
Click here to see the live site!
〰️
Click here to see the live site! 〰️
Final Solution