AuthKit
AuthKit helps developers understand, visualize, and test out Stytch's product customizations.
My main focus for this project was visual design.
Role
Visual designer
Contributions
UI design
Brand & visual design
Collaborators
Product manager
UX designer
Engineer
Duration
8 weeks
Background
Stytch provides Software Development Kits (SDK) of various authentication methods (e.g. passwords, login via social credentials) to developers, enabling them to build more quickly and easily compared to using direct APIs.
Developers can customize the authentication (auth) methods and the UI, and integrate them with their application or website.
Problem
Users who are new to Stytch’s SDK struggle to visualize the available auth methods and UI customizations to integrate with their project.
Solution
To test this solution quickly and with minimal impact to the current architecture, our team decided to build an interactive SDK integration builder on a microsite.
This microsite link would be placed throughout Stytch's developer documentation (Docs), and used in various developer-focused communications.
RESEARCH
Competitive analysis
Are there common patterns used to show product customizations?
Progressive companies illustrate and market their SDK as if it's a template users can easily configure– similar to how someone would use and modify a pre-built template on Squarespace.
What branding considerations for the developer persona did we need to account for?
To bring focus on functionality and hands-on testing, we want to avoid the marketing and business language that is usually a better fit on a marketing page.
DESIGN
Wireframing
Leveraging insights from the audit, I explored a few layouts of the microsite, narrowing down page structure and essential elements.
DESIGN
Brand
Should I create a new brand or use an existing brand?
Stytch has a few existing sub-brands that are distinct from the core company brand.
Mapping out the current brand styles helped formulate what the brand strategy could be with AuthKit.
How does AuthKit fit into the larger company brand strategy?
Diving deep into the existing brand systems, I learned that this microsite would be a great opportunity to establish a formal Stytch sub-brand, uniquely for the developer community; AuthKit would potentially grow into a home base for all Stytch-built developer tools.
To start the first steps in establishing this new developer community focused sub-brand, I decided to expand on a previously built sub-brand, Hashing tool, as the baseline for this new brand direction.
In addition, l leveraged elements on stytch.com, Docs, or Dashboard to start a path towards a more cohesive styling across surface areas.
DESIGN
UI design
For the SDK integration builder itself, we stuck to the existing SDK styling and used elements already existing within Docs or Dashboard.
CONCLUSION
Impact
Aside from DevRel and the Go-to-Market team using AuthKit in their daily communications, it's most visible on Stytch's Docs home page, under Demos.
Learnings
More team resources for this project encouraged me to:
1. Think expansively. Brand strategy impacts many cross-functional departments such as Developer Relations and Marketing. It was a challenge to compare current design systems and to communicate a new brand vision to stakeholders.
2. Think detailedly. When it came down to the design tactics for the new brand strategy, it was a challenge to discern how specific elements in iconography or typography should be used in relation to other existing surface areas.
