Crafting the new Auth0 Homepage Design
Take a look at the process of redesigning the Auth0’s new homepage.
As a part of our brand evolution launch at the beginning of 2021, we wanted to extend this new language to our web environment and reveal the new tagline and brand positioning. Thus, after extensive visual exploration and content composition, we launched the new Auth0 homepage. 🚀
Some of our main objectives for this redesign included clearly explaining Auth0’s value and differentiators in a simple way. At the same time, we also wanted to update the look and feel and be modern and knowledgeable to build trust with our audience.
Crafting the narrative
The process started in close collaboration with our stakeholders on the Marketing team to better understand which problems we were facing and what we wanted to achieve. Being present early in this process was key to get better solutions.
We started with a rapid wireframing stage to ensure we prioritized and focused on communicating vs. how. This phase enabled us to explore many diverse solutions to ensure the content and story throughout the page were accurate before getting too deep into design details.
In this process, great ideas appeared from different places, and we wanted to make sure that each section offered relevant content and connected with the larger story.
For the hero, we wanted to display our new tagline dynamically and memorably. Thus, we chose to animate the text to play with different combinations and draw the user in.
One of the most complex sections was figuring out how to showcase how Auth0 works across different environments. After brainstorming with other designers and engineers, we figured out how to represent a user flow and various touchpoints through an animated graphic.
As a developer-focused company, we also wanted to create something specifically for them. There is an interactive terminal for devs to play with, and also includes some easter eggs 👀
A visual revamp
For the new homepage’s visual interface, we wanted to reflect on the values of our brand evolution and play with the notions of velocity, flexibility, and modularity.
A consideration at this stage was also using this page to establish a consistent and scalable design system while again breaking boundaries to create a unique end design for the homepage.
Throughout this process, we identified areas to add delight through animations and interactions. Some of the novelties are new light look. The white background improves readability and appeals to a business audience. Rounded corners on the elements make things feel friendly, and large typefaces make our content clearer and direct.
Before fully launching the new design, we wanted to make sure we wouldn’t negatively impact any metrics. We worked with the growth team to first run this as an AB test to ensure we didn’t harm form fills or tenant creations. After about a month, we didn’t see any statistically significant changes and could fully launch our new homepage!
We learned in order to get the best results from such a large project such as a homepage redesign, it’s important to work as closely as possible with stakeholders to craft a cohesive narrative and receive consolidated feedback. Here are some of key learnings we derived from this process.
- Detect pain points and define goals — Group exercises and workshops were helpful for us to think through the whats and whys, instead of focusing too early on the hows.
- Create a cohesive narrative — A collaborative work between copywriters, stakeholders, and designers to build strong storytelling.
- Rapid wireframing to validate ideas — Move fast and break things! Try many rough ideas and check them quickly.
- Hands-on the craft — Close collaboration between designers and developers from the very beginning, will help spark ideas and bring it to life.
- Define scope and iterations — Stay aligned with deadlines. Join forces to get them and schedule iterations.
- Launch! — Before the public launch, make sure that the new solution does not negatively impact your metrics. A / B test helps!