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 is 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.
Defining
New to the web3 / crypto space, I led a research sprint to audit popular products, conduct competitive analysis, and interview subject matter experts to gain a 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 should we approach users for this novel product?
web3 presents a complex user experience filled with technical jargon and intricate processes. Should we 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 features.
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 the value props and crafting the product story.
Usability testing
Given the product's novelty, quick, unbiased feedback on the concepts, copy, and user flows was essential for refining key elements.
I collaborated with the UX researcher to iterate on the prototypes, gathering 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 newcomers curious about web3 but still not too familiar with its culture. Feedback guided us to settle on the latter.
02
How are users are resonating so far?
Users grasped the product's overall concepts through the onboarding flow, but additional clarity through the UX and perhaps illustrations were needed to highlight the benefits of its authentication features.
03
Are users able to navigate end to end?
In web2, designers can often rely on established patterns to provide users with context without needing extensive content or explanations. However, feedback highlighted the need for extra education and guidance, 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 the 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.
Read 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
Launching Vessel on the chrome store as well as Permissionless, a DeFi (decentralized finance) conference, I had the opportunity to gather feedback in person.
At a high level, it was clear that Vessel's branding resonated well, but what stood out more was attendees’ focus on Vessel's technicalities, particularly how Vessel eliminates the need for 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
01
Designing end-to-end
Designing and launching a product from scratch was a new and challenging experience. It required balancing creative freedom with making fast, decisive choices to bring the abstract and ambiguity to tangibility.
02
Content drives clarity
Quickly researching and digesting technical information was a complex task. Synthesizing ideas, concepts, and terminology into user-friendly formats underscored content's key role in both effective design and team collaboration.
03
Live, in-person feedback
I had the opportunity to dive into a new and evolving industry, where gathering in-person feedback gave me a much clearer understanding of user sentiment and how it aligns with the broader web3 community. These interactions helped guide potential next steps.
