SharkClean
Design System
SharkClean
Design System
SharkClean
Design System
Architecting a unified, scalable global design language
Architecting a unified, scalable global design language
Background
Before 2022, Shark lacked a centralized design system. Independent internal teams and shifting external agencies managed app and web platforms in silos, each creating their own UI standards. This fragmented approach led to a disconnected brand identity and mounting technical debt.
Background
Before 2022, Shark lacked a centralized design system. Independent internal teams and shifting external agencies managed app and web platforms in silos, each creating their own UI standards. This fragmented approach led to a disconnected brand identity and mounting technical debt.
Role
Product Designer
Timeline
1 month (2022)
Team
2 Product Designers, 1 Product Owner
Tools
Figma, Figjam
Background
Despite being a high-margin product, FX Forwards growth lagged behind our core FX suite due to a legacy interface that lacked professional sophistication since 2021. I led the revamp of the contract creation process to remove operational bottlenecks and empower users to trade independently.
Background
Despite being a high-margin product, FX Forwards growth lagged behind our core FX suite due to a legacy interface that lacked professional sophistication since 2021. I led the revamp of the contract creation process to remove operational bottlenecks and empower users to trade independently.
Role
Product Designer for Treasury Tribe
Timeline
2 months (2024)
Team
1 Product Owner, 3 Engineers
Tools
Figma, Figjam
The challenge
Our agency was hired to improve app functionality and manage a messy Sketch-to-Figma transition. We quickly identified a critical third need: a unified source of truth.
Without shared guidelines, we faced two main hurdles:
Agency handover debt: Three different agencies had touched the project in a year, leaving behind zero documentation. Components were trapped in local files, preventing cross-platform reuse.
Parallel development: We had to build the system while shipping new app features with legacy screens; in other words, the app was evolving without having a steady foundation.
The challenge
Our agency was hired to improve app functionality and manage a messy Sketch-to-Figma transition. We quickly identified a critical third need: a unified source of truth.
Without shared guidelines, we faced two main hurdles:
Agency handover debt: Three different agencies had touched the project in a year, leaving behind zero documentation. Components were trapped in local files, preventing cross-platform reuse.
Parallel development: We had to build the system while shipping new app features with legacy screens; in other words, the app was evolving without having a steady foundation.
The challenge
Our agency was hired to improve app functionality and manage a messy Sketch-to-Figma transition. We quickly identified a critical third need: a unified source of truth.
Without shared guidelines, we faced two main hurdles:
Agency handover debt: Three different agencies had touched the project in a year, leaving behind zero documentation. Components were trapped in local files, preventing cross-platform reuse.
Parallel development: We had to build the system while shipping new app features with legacy screens; in other words, the app was evolving without having a steady foundation.
Stage 1
Design audit
By mapping old UI patterns against current screens, we identified duplicates and consolidated them into a unified structure.
Following atomic design principles, we categorized the inherited mess into three scalable sections, creating a flexible foundation ready for future product growth.
Stage 1
Design audit
By mapping old UI patterns against current screens, we identified duplicates and consolidated them into a unified structure.
Following atomic design principles, we categorized the inherited mess into three scalable sections, creating a flexible foundation ready for future product growth.
Stage 1
Design audit
By mapping old UI patterns against current screens, we identified duplicates and consolidated them into a unified structure.
Following atomic design principles, we categorized the inherited mess into three scalable sections, creating a flexible foundation ready for future product growth.
Stage 2
Define taxonomy
We benchmarked industry-leading design systems to establish a tailored taxonomy. We broke down existing patterns into smaller parts to spot missing or redundant elements.
To ensure long-term scalability, we organized them into four logical tiers with clear definitions.
Stage 2
Define taxonomy
We benchmarked industry-leading design systems to establish a tailored taxonomy. We broke down existing patterns into smaller parts to spot missing or redundant elements.
To ensure long-term scalability, we organized them into four logical tiers with clear definitions.
Stage 2
Define taxonomy
We benchmarked industry-leading design systems to establish a tailored taxonomy. We broke down existing patterns into smaller parts to spot missing or redundant elements.
To ensure long-term scalability, we organized them into four logical tiers with clear definitions.
Stage 3
File architecture
With the taxonomy defined, we structured the libraries for max. discoverability and performance.
Files:
Core for token-orientated atoms
Components for housing all molecules and organisms.
Pages inside Files: Each atom, molecules, or organism has its own dedicated page.
Frames inside Pages: Specific states and variations are categorized.
Stage 3
File architecture
With the taxonomy defined, we structured the libraries for max. discoverability and performance.
Files:
Core for token-orientated atoms
Components for housing all molecules and organisms.
Pages inside Files: Each atom, molecules, or organism has its own dedicated page.
Frames inside Pages: Specific states and variations are categorized.
Stage 3
File architecture
With the taxonomy defined, we structured the libraries for max. discoverability and performance.
Files:
Core for token-orientated atoms
Components for housing all molecules and organisms.
Pages inside Files: Each atom, molecules, or organism has its own dedicated page.
Frames inside Pages: Specific states and variations are categorized.
Next steps and impact
After establishing the foundation, we shifted toward building a true ecosystem by educating the team on design tokens to align design and engineering. Our roadmap focused on system flexibility to incorporate slots, and accessible documentation.
With just one month of foundational work, we achieved:
Next steps and impact
After establishing the foundation, we shifted toward building a true ecosystem by educating the team on design tokens to align design and engineering. Our roadmap focused on system flexibility to incorporate slots, and accessible documentation.
With just one month of foundational work, we achieved:
Next steps and impact
After establishing the foundation, we shifted toward building a true ecosystem by educating the team on design tokens to align design and engineering. Our roadmap focused on system flexibility to incorporate slots, and accessible documentation.
With just one month of foundational work, we achieved:
Key takeaways
Design systems are evergreen.
A shared design language is only as strong as the communication behind it. It is a collective responsibility via transparently sharing our planning, mistakes, and learnings.
Key takeaways
Design systems are evergreen.
A shared design language is only as strong as the communication behind it. It is a collective responsibility via transparently sharing our planning, mistakes, and learnings.
Key takeaways
Design systems are evergreen.
A shared design language is only as strong as the communication behind it. It is a collective responsibility via transparently sharing our planning, mistakes, and learnings.
Another story
Re-imagining the RB5 investment experience to help businesses manage and grow their capital
Another story
Re-imagining the RB5 investment experience to help businesses manage and grow their capital