ZooEx Design System
Developed a scalable design system with 40+ standardized components, reducing inconsistencies and cutting development time.
ZooEx is at the forefront of decentralized finance (DeFi), offering affordable multi-chain index and leveraged tokens. The platform enables users to seamlessly engage in decentralized trading and investment across various blockchain networks.
My Role
UX Designer
Team
3 UX Designers
1 Brand Designer
1 Product Manager
2 Developers
Timeline
May 23' - Aug 23'
Skills
Design Systems Thinking, UI design, Cross-functional Collaboration
Problem Space
The ZooEx platform faced inconsistent and inefficient modal designs across the web and mobile, leading to:
Trust issues due to varying button styles and modal dimensions.
Inefficiencies from duplicated code and longer development cycles
Modal designs lacked visual cohesion with the new ZooEx branding.
My Goal was to build a scalable design system that streamlines workflows, creates reusable components, and aligns with ZooEx’s refreshed brand identity.
My contribution & Impact
I designed and implemented a scalable modal system for ZooEx in three phases: research, design, and execution. By standardizing layouts, states, and components, I ensured platform consistency, reduced development time by 25%, and enhanced the user experience through improved hierarchy.
Before
Inconsistent styling, such as mismatched radii, inefficient layouts, and misaligned typography, resulted in increased user friction and the platform's scalability.
After
Consistent styling aligned with the rebranded design language improved visual cohesion, and efficiency, resulting in better usability and reduced development rework.
The design system is still a work in progress. My contributions focused on rebranding and establishing foundational elements, including an enhanced color palette, typography, grid system, and scalable modal components.
Understanding the Problem
Phase 1: Research Insights & Findings
To understand the challenges, I conducted an audit of existing modal designs and interviewed stakeholders across teams.
Audit Existing Modals
We analyzed over 12 modal styles across the product suite and documented key inconsistencies in layout, behavior, and styling. Issues included misaligned buttons, disjointed typography, and inefficient interactions, which led to user confusion and inefficiencies in design and development workflows.
Stakeholder Interviews
I interviewed designers, developers, and product managers to understand their challenges with modal usage. Developers noted that creating modals from scratch often resulted in duplicated code, while designers identified inconsistencies in button alignment and spacing.
Turning Insights into Solution
Phase 2: Creating Modal components
Following the research findings, I established the design principles and created a style guide for the new system.
Coherence
Unifying look, feel, and behavior across all modals for both web and mobile platforms, aligning with ZooEx’s new branding.
Scalability
Designing modular and reusable components that adapt to various use cases.
Clarity
Ensuring modals have clear layouts, visual hierarchy, and intuitive interactions to build trust and improve usability.
Base Elements
Typography
Inter was chosen for its clean, modern, and highly readable design, aligning with ZooEx's focus on trust and simplicity.
Color
The color palette reflects ZooEx’s core values: greens convey trust and growth, neutrals enhance readability, and soft yellows add freshness.
Button States
Building on the existing foundations, I designed interface components, button states, and variants for modals.
Icons, Radii and Strokes
I refined key design elements such as icons, border radii, and strokes, tailoring them to enhance clarity.
Input Fields
I designed input fields with clear labels, consistency, and spacing.
Modal Overlays
I refined modal backgrounds, including containers and nested overlays.
Reusable Design Patterns
I created reusable design patterns by auditing existing designs and establishing guidelines for typography, spacing, and behavior. These patterns enhance usability, streamline workflows, and establish a cohesive foundation for scalable design and development.
Example
I created components and documented them for ease of use.
Desktop (1024 px)
I designed input fields with clear labels, consistent spacing, and accessible states, to ensure cohesion across the modals.
Mobile (375 px)
Components were adapted for smaller screens, with streamlined layouts and spacing to maintain usability without overwhelming the interface.
Getting into the details
Phase 3: Execution
I worked closely with developers to ensure seamless handoff and accurate implementation of components. Using tools like Figma, I provided detailed specifications for grid systems, spacing, and interactive states, enabling consistent application across the platform.
The execution phase successfully established reusable components and patterns for ZooEx’s design system. As the system evolves, the next steps will focus on comprehensive documentation to ensure seamless team adoption and scalability.
Testing
We conducted usability tests with 12 participants, including existing ZooEx users and internal stakeholders. The tests focused on validating modal layouts, button interactions, and input field accessibility.
Enhanced User Experience
Users reported a smoother, more intuitive experience when interacting with the redesigned components, reducing cognitive load and improving task completion time.
Faster Developer Implementation
Streamlined the handoff process and ensured faster implementation by reducing ambiguity.
Improved System Usability and Adoption
The iterative testing process improved the design system’s usability, accessibility, and developer adoption, ensuring it met the needs of all stakeholders.
Experience Overview
Learnings
Maintaining Consistency to Build Trust
Developing the ZooEx design system showed how consistent UI components not only streamline development but also build user trust by delivering a cohesive experience across platforms. Collaborating closely with developers ensured practical solutions that addressed both user and technical needs.
Adapting to Evolving Needs Through Iteration
Creating reusable components emphasized the importance of scalability in meeting future demands. Iterative feedback loops with stakeholders highlighted blind spots, enabling the system to adapt effectively to real-world challenges and brand evolution.
Other projects
Web3
B2B & B2C
Web & Mobile Redesign
Type!t
Redesigning TypeIt’s (Web3) mobile and web app by simplifying the wallet linking process, invitation dashboard, and content layout.
DeFi
Design System
B2B & B2C
ZooEx Design System
Developed a scalable design system with 40+ standardized components, reducing inconsistencies and cutting development time.
Thanks for visiting my portfolio!
I'm open to new opportunities and would love to hear from you.