Design-Dev Pipeline
DubClub
As the sole Lead Designer with several engineers, we were able to streamline the design to dev pipeline by implementing Skeleton UI within Figma and the front-end component base.
I created primitives/tokens within Figma to customize the front-end skeletal framework that sped up production times and functioned in a weekly sprint basis.
Design Systems
IxD / Front-End
Content Design
Chalk White
A
A
A
A
HEX
#F4F5F9
6, 43, 254
RGB
In The Black
A
A
A
A
HEX
#1F2123
RGB
245, 0, 0
Dub Turf
A
A
A
A
HEX
#2CFF4A
RGB
255, 255, 255
Dub Green
A
A
A
A
HEX
#02B994C
RGB
29, 30, 61
Typography System
Typeface
Manrope
Aa
Aa
Regular - 400
Bold - 700
Typeface
Poppins
Aa
Aa
Semi Bold - 600
Black - 900
The Problem
The Opportunity
Legacy code created tech debt for any current enhancements being implemented
Branding and content design didn't reflect the product space superiority and differentiation
No clear path from desing to production pipeline
Build relationships with Front-End engineers decisively act on a pre-built framework that is customizable
Skeleton UI, SveltKit
The decision between myself and front-end was to move swiftly, through Skeleton UI customization for Figma and development.
This decision brought immediate alignment between the small team.
After applying the new design tokens and brand guidelines I worked on and implemented, the design to production turnover time was cut by about 75%
Content Design
Personality & Tone of Voice
Cliff-Hangers & Building Anticipation, Energetic, Friendly, Fun, Bold, Community, Exhilarating, Tactical
Familiarity of terms with cappers and their audience. We should speak the same language
Create the desire for subscribers to be "in the know" and involved
Pick Your Sport. Find Your Capper. Pick Your Plays. Win More Together.
Cappers on our platform are next to none browse by sports you are interested in and find the best capper.
All Sports
Putting it all together
Style Tiles
Leveraging the colors, typography, language combined with imagery, and “on-web” / “in-app” look and feel to grasp how all the design system elements play together.
