YardTools
YardTools is not your average meme-stock crypto startup, far from it.... They engineered bots catered to Degen traders, but with a twist - these ones had good taste...and they were losing trust in the meme crowd.
They needed a website that conveyed trustworthiness and a commitment to profitable trading experience, in their words - Simple, User-friendly and beautiful the actual brief you guys
And so they called me.
Web3
UX Design
Copywriting
Prototyping
Wireframing
Mobile & web design
User & Market Research
Usability Testing
Design Iterations
Monitoring
Challenge
The CEO had a vague concept: a website that's "futuristic, user-friendly, and shows our potential.
The developer, he was all about technical functionality over user experience, had a ‘catch me if you can’ work attitude
Complexity. The crypto language is complex especially to new users and the website needed to cater to both beginner and experienced traders.
Vague Brief
Complex product
Personnel
Solution
Involved the developer in every stage of the design process. Devised a system for us to work better together.
And designed the experience to allow users access advanced features when needed, a simplified onboarding with tiered subscription.
I defined our target users (beginner, experienced trader, etc.) and researched similar crypto platforms and trends to create a brand style guide.
Research
Collaboration
User-focused design
Founders Grotesk
A
Line height
120%
A
Letter Spacing
0.2%
Inter
A
Line height
150%
A
Letter Spacing
0%
Columbia Blue
#CADBEA
Main Icon color
Clean and modern, Columbia Blue is associated with technology and innovation and gives a touch of serenity to our icons.
For Dim mode
Icon color
#CADBEA
For Light mode
Icon color
#567189
For Dim mode
Stroke color
#567189
Naples Yellow
#F0CC4C
Main brand color
Warm and inviting, this color reflects our vibrant energy and sunny disposition.
Primary 100
#A08833
For Dim mode
Primary 200
#E7C444
For Light mode
Primary 200b
#F0CC4C
Primary 300
#F5DD88
Primary 400
#FAEEC3
Vivid Sky Blu
#4CC9F0
Secondary brand color
This was chosen as the alternate identity color. It's eye-catching but maintains a soft, inviting feel."
Alternate 100
#3386A0
Alternate 200
#4CC9F0
Alternate 300
#88DBF5
Alternate 400
#C3EDFA
Red
#FF0F0F
Lime Green
#00D400
Action colors
These colors provide a strong visual cue while maintaining a pleasant aesthetic, and were used liberally for notifications.
For Dim mode
Action color
#FF0F0F
For Light mode
Action color
#B20909
For Dim mode
Action color
#00D400
For Light mode
Action color
#09B209
Rich Black
#03111C
Accent color
Used as the text color for dark-on-light designs, or as background for inverted designs.
Dark mode
10%
#030D17
Dark mode
20%
#ABB1B5
Dark mode
40%
#58626C
Dark mode
50%
#2E3B47
Dark mode
60%
#03111C
Dark mode
70%
#030D17
Dark mode
80%
#020A11
Dark mode
90%
#01070B
Dark mode
100%
#010407
Dark mode
Base%
#041422
Buttons
Flat
Default
Hover
Disabled
Outline
Default
Hover
Active
Disabled
With Icon
Default
Hover
Active
Disabled
Elements
