ADPList Design System
Role: UI/UX Designer | Team: Esther Kim, Freya Pan, Priyanka Jain, Nehal Sharma | Duration: 8 weeks
Project Overview
ADPList is a online platform that provides free mentorship from expert professionals across various fields. However, its lack of a formal design system resulted in a poor web interface that lacked consistency, and an overall frustrating experience for users.
To combat these issues, we created Sidekick, an end-to-end design system with proper documentation to unify ADPList’s design language.
Why does ADPList need a design system?
A design system would help to create cohesive and intuitive user experiences across the ADPList platform. They also aid designers and developers to create new updates to designs more effectively, and enhance their collaboration experience as well.
Process
IDENTIFYING DESIGN ELEMENTS
Our first step was to pull every existing UI element on the ADPList site, and then organize them by element type on Figma. As we did so, we took notes on inconsistencies and flaws that we could improve upon as we made our new design system.
How do inconsistencies affect user experience?
Lower user satisfaction
Reduced task completion
Higher cognitive load
CREATING A UI KIT + DOCUMENTATION
We centered our design decisions around 3 use cases- for newcomers, for existing designers, and for developers. Below are more detailed explanations as to how our design decisions targeted the needs for these three groups.
USE CASE 1: NEWCOMERS
Onboarding Guide w/ Clear Navigation
We created a comprehensive guidebook with detailed guidelines with step-by-step instructions for seamless discovery of design elements.
Detailed instructions, not just a resource display
Do you want to know what colors are available? How and when to apply them? We included concise, detailed instructions to educate the user on how to employ design elements, rather than just presenting a scattered display of everything.
Support System for troubleshooting
Sidekick comes with a contact system to help any users that might be stuck while learning to use the system
USE CASE 2: EXISTING DESIGNERS
Detailed Atomic Structure
With a detailed atomic structure, designers no longer have to create components from scratch, and can focus on the larger scale pieces of design.
Interactive UI Kit
With an interactive UI Kit, designers can directly pull elements from the system and create design layouts more efficiently.
USE CASE 3: DEVELOPERS
Preview Upcoming Designs
With an existing UI Kit, developers can preview upcoming features, which would streamline their workflow and collaboration with designers.
BRANDING + PITCHING
Lastly, we created a brand for our Design System in preparation for our pitch to stakeholders. The name we landed on was “Sidekick”, as the term embodies a loyal companion– our hope is that our design system would be like that of a loyal companion to designers and developers at ADPList, providing the support and resources needed to design a wonderful user experience for ADPList users.
KEY TAKEAWAYS + NEXT STEPS
Through this project, our team was able to understand how much more efficient the design process becomes with a design system in place. We hope to be able to expand upon our current design system in the future, especially with greater accommodations for our use case #3, developers.
A few potential steps we thought of:
