Stytch
·
2022
Vessel
End-to-end design of a digital identity and multi-chain crypto wallet rolled into one browser extension––reimagining identity and authentication to eliminate friction on the modern web.
Role
Product designer
Team
UX researcher, Brand designer, Blockchain engineer, Engineering
Contributions
UX / UI design, Visual design, Illustration, Prototyping, Usability testing
Context
Stytch an authentication (auth) platform for developers.
Capitalizing on the industry's growing interest in web3, they wanted to launch and test their first consumer-facing product, challenging what digital identity and auth could look like on the modern web.
Problem
Both web2 and web3 users face frustrations with authentication. In web2, users frequently create new accounts and reset passwords, while web3 users contend with managing private keys and seed phrases.
How might we enable users in both web2 and web3 to authenticate and navigate the modern web securely and seamlessly?
Obejective
Design an MVP chrome extension that enables secure authentication for both web2 and web3 sites, and enables secure execution of key cryptocurrency actions.
Learning the landscape
New to the web3 / crypto space, I led a research sprint to audit popular products, run competitive analyses, and interview subject-matter experts to build a solid baseline understanding.
Research
01
What does the web3 space look like?
The web3 space remains developer-centric and largely driven by digital art trading at this time, with rapid changes marked by complex jargon, dark mode, and a futuristic / visionary aesthetic.
02
What does auth look like in web3?
Unlike web2, which relies on modes such as passwords or social media logins, web3 requires users to authenticate via a digital wallet, posing unique challenges like managing seed phrases and private keys.
03
How do we think about users?
Web3 presents a complex user experience filled with technical jargon and intricate processes. The team deliberated on whether to focus on existing web3 users or newcomers to the space.
Information architecture
Following research, I developed frameworks to define potential user types, then ideated key features and user flows to refine product requirements.
The focus was largely around how attestations would be displayed, the user journey throughout web pages and browser extension, and navigation within financial functions.
Design and prototyping
As product requirements developed, I iterated on low and mid-fidelity concept designs and wireframes, mapping out key functions such as sign up and login, crypto transactions, and editing user info.
Focusing on rapid prototyping streamlined cross-functional design reviews, helping me to articulate value props and eventually crafting the product story with stakeholders.
Iterative feedback
Given the product's novelty, quick, unbiased feedback on the concepts, content, and user flows were essential for refining key elements.
I collaborated with our UX researcher to iterate on the prototypes, gathering both practical feedback and insights into broader conceptual questions.
Insights
01
Can we narrow down on a user type?
The team toggled between targeting early adopters familiar with web3 terms like "wallet" and "on-chain", and crypto curious newcomers. Feedback guided us to settle on the latter.
02
How are users resonating so far?
Users grasped the product's overall concepts through the onboarding flow, but additional clarity through the UX and visual design were needed to highlight the benefits of its auth features.
03
Are users able to navigate end to end?
In web2, designers can often rely on established patterns to provide context and guidance. The feedback given revealed a strong need for explicit explanations, a design choice that web3 products often take at the expense of simplicity.
Look and feel
While working on the UX design, I partnered with our brand designer to create a distinct identity separate from Stytch's core brand. As the brand evolved, I refined the UI, visuals, and illustrations for both product and marketing assets.
Check out the blog post for a deeper dive into our process from mood boarding to brand application.
Introducing Vessel
Your "passport" for the internet. A key to any door on the internet. Use it to surf across both web2 and web3.
Continuous iteration
As Vessel's framing took shape, I continuously refined limited prototypes and progressed towards high-fidelity designs.
Along with the UX / UI design and illustrations, content design posed a unique challenge since messaging, copy, and terminology had to scale effectively across marketing materials and product features.
Connect Passport
Onboarding
Launching
We launched Vessel on the chrome store as well as Permissionless, a DeFi (decentralized finance) conference, giving me the opportunity to gather feedback in person.
Overall, Vessel’s branding resonated, but the bigger takeaway was how strongly attendees focused on the technical value—particularly eliminating seed phrases.
This response reflects the web3 community's build-centric mindset, characterized by a strong appetite for innovation, sometimes prioritizing technical advancements over usability.
Learnings
