Building a design system to enhance ADPList's digital experience
ROLE
Created UI inventory, designed components like navigation, carousels, toasts, icons and feedback and documented their guidelines in ZeroHeight. Structured the pitch deck.
TEAM
Esther Kim, Freya Pan, Priyanka Jain, Nehal Sharma (me)
TIMELINE
Mar 2024 - May 2024 (8 week)
PROJECT GOAL
The objective is to achieve visual cohesion, enhance efficiency for designers and developers, and create consistency across the digital platform.
TOOLS
Figma, FigJam, Google Workspace, Miro, ZeroHeight
Introduction
ADPList connects design mentors with mentees worldwide, fostering invaluable career growth. However, without a formalized design system, its digital experience lacks consistency and scalability.
Sidekick is an end-to-end design system crafted for ADPList to unify its design language.
We composed a comprehensive documentation along with a ready-to-use Figma UI kit. Additionally we crafted a compelling narrative around Sidekick and presented a stakeholder pitch.
ADPList needs a design system to ensure consistency and scalability as the platform grows and adds features like mentorship categories and AI courses. With its community reaching 100 million mentorship minutes, a design system would help create a cohesive, intuitive user experience across the platform, supporting faster development and reducing redundancy.
This framework would also enhance collaboration, allowing designers and developers to maintain ADPList's unique design language and user experience as it continues to expand globally.
Process
01 - UI Inventory
workspace - ui inventory
I deconstructed ADPList's interface by documenting each component. I identify both inconsistencies and successful patterns using the inventory.
What is an interface inventory?
Brad Frost, the author of Atomic Design, defined interface inventory as:
"…a comprehensive collection of the bits and pieces that make up your interface"
In other words, it's a warehouse of collections of all the elements of an interface, categorized neatly in boxes at one place. For example, a box for all the buttons from the entire product categorized according to their usage pattern.
I began by capturing screenshots of all the pages from the ADPList website and organizing them in Figma. As I studied these pages, I created a checklist of all the elements present in the user interface (UI). To better understand how to group these elements effectively, I looked at successful design systems for inspiration and categorized my checklist accordingly.
ADPList has 16 distinct button styles and 18 card styles within their UI!
Small design inconsistencies can lead to larger issues
02 & 03 - UI Kit & Documentation
Let's design a UI kit to eliminate design inconsistencies and repetitive work; and make scalable components!
SEAMLESS ONBOARDING GUIDEBOOK TO HELP YOU START WITHOUT FRICTION
Say goodbye to back and forth with your manager and senior designers in the team! Sidekick provides detailed onboarding guidelines with step-by-step instructions to get you started.
DETAILED INSTRUCTIONS MORE THAN A RESOURCE DISPLAY
Want to know more about Colors? How to use them? Don't worry - Sidekick is there to guide you with detailed usage information and guidelines following the anchoring principles
SUPPORT SYSTEM AT YOUR FOOTSTEP TO HELP YOU WITH ANYTHING ANYTIME!
Are you stuck somewhere and have a question? Here Sidekick is your main chick – great place to discover and ask questions to our supportive team.
CHALLENGES FOR EXISTING DESIGNERS AT ADPList
Are you the designer behind ADPList’s amazing interface?
Struggle with solid components⁉️
BRINGS YOU FREEDOM WITH INTERACTIVE ATOMIC SYSTEM
No longer to create components from scratch – with Sidekick, you can focus on bigger things like designing better experience than consistent rectangles!
SAVE TIME WITH PRE-MADE ATOMIC COMPONENTS
With Sidekick, you can drag and drop the components you need, to create those beautiful and comfortable interfaces in lesser time and more efficiency.
Next steps to provide more accommodation for developers
COLLABORATION
Increase ease of collaboration with developers by incorporating elements within our design system that make it easier for developers to digest.
TOKENS
Incorporate more tokens in addition to color tokens -for easy and straightforward implementation for developers.
IMPROVED DOCUMENTATION
Include code and language in documentation that will help developers have a more seamless experience with our design system.
04 - Branding
We named our design system — Sidekick
'Sidekick' embodies the idea of being a loyal companion, providing designers and developers the support and resources needed to succeed — just like ADPlist is to awesome design people!
