Context
Excelink is a conceptual career helper app that integrates skill building, mentorship, roadmap builder, and a job aggregator, all in a single platform.
Task
Build a design system and redesign the platform adhering to the design system elements along with a dedicated handoff file for each module.
Problem
Ensuring consistent scalability for an android app that includes multiple features.
Outcome
A design system for an android platform featuring over 100 design tokens and styles, comprehensive documentation, to ensure consistent scalability.
TEAM
MY RESPONSIBILITIES
Design System
Product Design
Design Handoff
Excelinks project file strcuture
First steps
Excelink is a passion project that I designed when I first began learning UX sesign and was not aware of design systems and it's role in product design. The first iteration only had a component library with no documentation for elements like typography, layout, color, etc.
For this iteration, I decided to begin by learning everything I could about design system through online articles, and most importantly, reading the documentation of well established design systems.
Design system logos
One size does not fit all
After spending considerable time reading about design systems I identified the core elements that make up a design system. I not only strengthened my foundational skills but also learnt that while every company and product has a distinct design system with unique presentation, the underlying UI design standards remain consistent.
INSIGHT
Every design system is not the same, and is tailored for a product and platform.
INSIGHT
Foundational knowledge is key in preparing a scalable design system.
Building the design system
I began building the design system by focusing on foundational elements, aiming to create a flexible framework that supports scalability while adhering to UI design and accessibility standards.
Elements in a design system
Tokens (Variables)
To ensure easy access and consistent use of the design system, I created variables for colors, typography properties, and other key elements, as well as predefined styles for typography and layout.
Color tokens from Exccelinks design system
Token heirarchy
To ensure readability across cross-functional teams, and superior control over changes in variables, I set up the color tokens in 3 distinct levels namely, Primitive, Foundational, and Component.
Each level adds a layer of abstraction that helps with understand the tokens better, avoids incorrect usage and helps achieve selective change whenever necessary.
PRIMITIVE
E.g. grey100, blue200
FOUNDATIONAL
E.g. surface-brand
COMPONENT
E.g. button-primary
Documentation
Documentation is crucial for a design system and was created for every aspect, including usage guidelines, to ensure seamless collaboration with future designers and maintain consistency in the design language.
Documentation from the layout file
Components
Design systems grow alongside the product, particularly in terms of design components. I created a separate components file to document each new component added to the product.
Contents of the components file from the design system
Design handoff
Every module designed for the platform was annotated with comments and measurements, highlighting key aspects such as adaptiveness and spacing.
Annotations
Adaptive behavior
Measurements
Documenting adaptive behavior for developers
Handoff screen example
Result
Through curiosity, and dedicated learning, I was able to create a design system with over 100 tokens from scratch, which will continue to grow as I complete the project.
I also practiced a design handoff simulation, and understood how to account for responsiveness and adaptiveness when handing off designs.
LEARNINGS
Fundamentals (Type, Color, etc)
Scalable design
Adaptive & Responsive design
TOKENS CREATED
Next steps
Complete the redesign and further develop the design system.
Collaborate with other designers and developers to gather insights on design token naming and improve the handoff process.
Learn about android front-end development fundamentals to design better for developers.
Iterate on the product to integrate existing and new features, enhancing the overall user experience.
Key Learnings
Design systems take time to build and can be complex, but when done right, they make the design process significantly more efficient.
Creating a design system helped me strengthen my fundamentals in color, typography, and layout.
Constraints and on-screen element behavior is crucial for developer handoff's and must be embedded in the design process.
Design systems often vary across platforms and screen sizes, so these distinctions need to be addressed early in the process.
A design system is not only for designers but also for developers, making collaboration essential to create a holistic system for the organization.
Other Projects
Toronto, Ontario, Canada