thirdweb
Platform & development toolkit for building web3 apps. As the first design hire at this startup, I established the brand identity and design system from inception.
Tenure at thirdweb:
Feb 2022 – Aug 2023
Projects
Brand Book
Setting up a Design System
My Role
Brand Design
Design System
Design Research
UX / UI Design
Team
Co-Founder: Steven Bartlett
Creative Director: Cathal Berragan
Graphic Designer: Anshu Tukol
Animation: Sian Morton, Andrew Begafria
thirdweb’s Series A announcement | Creative Lead: Cathal Berragan, Art Direction: Anshu Tukol, Video & Animation: Sian Morton, Andrew Begafria
PROJECT 1
Establishing a Brand Identity:
Who is ‘thirdweb’?
As an early-stage tech startup in web3, thirdweb required a cohesive brand identity that could scale and iterate as quickly as it grew.
It also faced the challenge of looking and feeling accessible to audiences unfamiliar with web3.
BRAND DESIGN DESIGN RESEARCH
My Process
Discovery Snapshot
I spoke to…
And I looked at…
1
Co-founders are inspired by clean, streamlined brands like Apple
How can we show we are an experimental product while maintaining a clean aesthetic?
Key Findings
2
Web3 market is full of colorful, dynamic brands
Gradients, gradients!
We also see a trend of 3D imagery
Is there a way to match the level of creativity in the market and yet stand out?
3
Target market was shifting from creators to developers
Developers like no-fuss brands
We will be posting a lot of statistics – simple design
We need a flexible system that allows for many styles and design outputs.
Giving the Logo Meaning
3 prongs denote web’3’
‘W’ stands for ‘win’ in tech forums, showing success
Purple-pink gradient conveys energy and passion, stands out from commonly used gradients
Brand Book
PROJECT 2
Setting up a Flexible Design System
UI DESIGN DESIGN SYSTEMS
Typography
Establishing a type rhythm was necessary to achieve balance in the content on thirdweb’s web pages. Using the golden ratio as a basic foundation, I experimented with scale and weight to provide the team of developers and engineers with a type guide, and made the naming system (S, M, L) more accessible and memorable than the norm.
The typeface used is Inter. It is crafted for digital use and available on Google Fonts.
Potential Application
This is an example of type style pairings.
Color
Primary Violet
Highlights brand color that breathes life into pages and interfaces.
Good for interactive elements.
Secondary Grey
Neutral tone for foundational purposes.
Easy to layer for text.
Tertiary Fuschia
Drawn from brand colors and compliments primary violet where there is space for creativity.
Tertiary Ocean
Good complement to other colors, for CTAs, buttons, information tags and announcement banners.
Error Red
To show errors, or indicate negative or destructive actions. Please do not use an arbitrary shade of red in its place.
Success Green
To show success states, or indicate positive or confirmation actions. Please do not use an arbitrary shade of green in place of this.
Contrast Grids
These help assess the accessibility of our chosen colors. Color combinations used for backgrounds and foregrounds should be easy on the eye, and text should be easy to read.
I also made sure to reference the grading scores for each color combination according to WCAG compliance.
Iconography
For the foundational icon library, I utilized variations of the brand colors, and maintained rounded corners and smooth edges for seamlessness. I wanted the icons to be playful, meaningful and built of similar building blocks and basic shapes.
Components Library
Measuring the Impact of our Design Strategies
Reduced Questions
As a result of introducing company-wide access to the brand book, I got 60% fewer design-related questions the following month from the Growth and Business Development teams.
Increased Efficiency
As a result of templatizing the UI Design System, there was more clarity among engineers when implementing new product pages. We observed shorter building phases for new features.
Recognizable Logo
The ‘W’ logo took off, on Discord and X (formerly Twitter). Users started making ASCII art of our logo. Developers on these platforms began equating the logo with “win”, and would respond with our logo sticker when expressing excitement about the product.
Demands for Merch!
At various hackathons, and conferences/events like ‘ethDenver’, NFTNYC etc, our merch and swag boxes were in demand. We would get questions about when the next thirdweb hoodie was releasing!
