You may have noticed that there’s something different about the SuperTokens website lately.
\nYour eyes don’t deceive you, and the rumors are true ;)
\nWe’ve revamped our website and onboarding experience - our goal is to empower developers with open source, powerful authentication and the new interface is a step forward to reaching that goal.
\nWe knew we wanted a more breathable, developer-friendly aesthetic that matched our brand and product.
\nWe also needed to optimize our webpage to better accommodate our user journey and gel better with our new CLI strategy.
\nDuring discussions on how we wanted to improve in the new site, we realized that we didn’t really care about signups - the number of signups was a vanity metric. It didn’t matter how many signups we had if users didn’t fully understand how to implement SuperTokens post-signup.
\nWe wanted our visitors to easily understand SuperTokens and for interested users to get started quickly and easily - whether it was with a self-hosted implementation or our managed auth solution.
\nThis question became our north star: “How do we make the journey to active user as frictionless as possible?”
\nWe wanted to:
\nWith our CLI as the no-brainer way to get started with SuperTokens in less than a minute, our CTAs now guided users towards our documentation and our Discord community for questions and support.
\nThe user journey before:
\n\n\nSign up → docs → implement frontend → implement backend → implement core
\n
And after:
\n\n\nConsult docs + join Discord → implement frontend → implement backend → sign up → implement core
\n
Before starting anything, we wanted to make sure we based our design and layout decisions on empirical data and research.
\nSuccess leaves clues - Jim Rohn
\nTo get an understanding of the evolution of design in the dev tool space, we used the Wayback Machine to look at how designs have changed over time. In looking at competitors and other companies in the dev tool space, we wanted to observe what content/messaging was added or subtracted from their sites to truly grasp what worked and what didn’t.
\nWe created a detailed FigJam diagram of all their information architecture and website structures (not shown here) to get an accurate lay of the land.
\nThis research process allowed us to be incredibly thorough and precise with our own design.
\nRudderstack
\nStripe (duh, how could we not)\n
Apple Developers pages
\nDuffel
\nAirplane.dev
\nSupabase
\nWe learned from our Twitter and Reddit research that developer tools seemed to find success with gradients, dark themes, and minimalist design - all seem to be corroborated by the examples as well.
\nBetween our Discord and five to ten calls a week with prospective and active users, we were able to gather a lot of qualitative feedback on our existing site.
\nPlus, with consistent feedback from users along with data from Hotjar and Amplitude, we could identify specific areas of friction or confusion for our users.
\nTwo spots in particular on our old site come to mind:
\n1) The “We Are” section
\nWe took inspiration from Amazon’s three ‘pillars’ of customer wants: faster deliveries, more inventory, and cheaper prices.
\nFor SuperTokens, we aim to provide our customers a better developer experience, with an open-source solution, and complete sovereignty over their auth implementation.
\nWe wanted to detail each of these pillars here, with details about what we do specifically for each.
\nBut, our Hotjar recordings showed that people did not stick around to read it - it was just too much text.
\n2) The “How It Works” section:
\nSuperTokens’ architecture is unique to all other auth providers. Apart from being a valuable selling point, we originally thought that providing context early would make understanding everything else about SuperTokens much simpler.
\nBut similar to the other section, there’s a lot going on. The ‘Back’ and ‘Next’ buttons at the top walk the user through how SuperTokens works.
\nHowever, it didn’t have the intended effect. Instead of simplifying, it introduced extra cognitive load and made it seem like SuperTokens was difficult to use. Few people clicked on the buttons at all, and only 0.5% percent of our visitors actually clicked all the way to the end.
\nSince it wasn’t doing what we wanted it to, we decided to remove this section entirely.
\nEventually, we found better ways to communicate the architecture in a more complete way through the docs.
\nBased on our paper layouts, we created basic wireframes to start assembling everything digitally. This intermediate step allowed us to start playing with our ideas from the paper stage, without focusing too much on final polish too early.
\nAfter playing around with our basic wireframes, it was to design and assemble the flow of the webpage. We added in brand color and created polished versions of the wireframe components.
\nThen, when we were confident we had a couple of good design iterations, we kept dummy content the same while switching between different designs to see which ones worked better.
\nBy using both content variation or design variation, we were able to isolate which design and content would work best independently, and then in conjunction with one another as well.
\nSome screenshots of interviews with our users:
\nOnce the design was done, it was time to implement everything in Webflow. While a lot of the custom JS took some time to get right, it was much easier to get everything designed and onto the page with Webflow instead of needing to flesh out individual components in React - which we knew more than likely we’d have to tweak and change over time anyway.
\nIterating through the website design with user interviews gave us a lot of surprises.
\nThere were two ideas that we wanted to communicate:
\nAfter crunching some numbers, we estimate that implementing this new homepage would have taken us 3-4x longer to implement with React.
\nThere was no need to create custom components for one-offs that will inevitably change over time. That, and we could keep our engineering team focused on building good auth instead of dialing UI in by hand with React.
\nWe had a lot of fun redesigning the homepage and we learned a lot about how to create a page that’s truly engaging to users.
\nStarting with research and keeping ourselves oriented with empirical data made sure the process was smooth and thorough.
\nWe were touched to see our efforts get noticed:
\nMost importantly, our site was performing way better:
\n