Prism Design System
Overview
Created a single source of truth for design decisions across all teams and departments.
Prism, Newton's design system, was built from the ground up to provide a common language and shared understanding of design across all teams and departments.
3 x Engineers
Governance
Planning & Management
Project Details
Key Challenges
- Consolidating legacy design styles defined by previous designers.
- Navigating technical constraints across three different ecosystems and assessing the impact of suggested changes.
- Balancing competing priorities while educating others on the design system's value.
- Limited resources for expanding and maintaining the design system on the design and development front.
Key Opportunities
- Reduce time to design and tech debt by leveraging established design patterns.
- Enhance user experience by leveraging familiar patterns and establish trust with the audience.
- Reassess current styles to ensure baseline accessibility standards are being met.
- Increase efficiency in design and development workflow to enable rapid iteration and experimentation.
Discovery
Auditing what's under the hood.
We spent some time to audit what lived in our Figma space, what's live in our web app, iOS, and Android. We also worked with Designers and Software Engineers to identify what's worked well and what painpoints they experience in their workflow. Some things that were discovered:
- Components and styles were scattered across various Figma libraries and design files. It was a bit of an Easter egg hunt every time a Designer wanted to use a specific component.
- Minor component design differences led to excessive variants, reducing reusability for designers and increasing design/development time, QA, and maintenance for developers.
- Discrepancies arose from different front-end approaches by the web and mobile teams, with new components often built from scratch for each feature.
- Our production environments included several one-off styles (e.g., over 60 unique hex values). A sample below:
Approach
Moving away from one big library.
We evaluated how we should structure the design system—one large library or breaking up our styles, assets, and components into multiple libraries. After weighing the pros and cons, we took the latter approach as we can:
- Enable only the required libraries for the right subset of users or teams.
- Ensure files are worked on in isolation without the potential to cause adverse effects on other files that are using elements from those libraries.
- Significantly reduce the risk of redundancies.
- Simplify and streamline style usage within components that are created.
Planning & Prioritization
Close collaboration and ruthless prioritization.
Despite recognizing the design system's value, the organization faced competing priorities. We needed to take a step back and formulate a strategy.
I created and led a planning workshop so the team can align on what would be most valuable, estimate time and effort, and developed a strategy going forward. Our small but passionate team closely collaborated as a side of desk project to make progress on it.
Building
Foundations: Establishing the building blocks of a component library.
These guidelines provide common values and principles that are fundamental to Prism. They serve as a centre of truth and assist in aligning various Newton products with a unified design language.
In addition to common foundational elements you'd find in a typical design system, we also created content writing guidelines and refined a crypto coin library which housed a collection of current and future coin icons for easy export. This allowed Newton's marketing and engineering teams to quickly release new tradable assets.
Each foundation was thoughtfully designed for scalability. For example, the colours have been formulated to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another. Each colour palette achieves three goals: It passes accessibility guidelines, keeps clear and vibrant hues, and maintains a consistent visual weight across each hue.
Building
Product Libraries &Templates.
Once key foundational elements were established, work was started on the Product UI Kit. This served as a repository for all interactive building blocks for creating a user interface, which eventually fed into our screen templates for mobile and web.
One of the common hurdles we heard from our Designers was the amount of time they spent to locate a specific screen or workflow they've seen in design critiques. We made sure to prioritize getting this out to streamline their design workflow.
Governance
Plans to scale and maintain Prism.
To further Prism's growth, we also:
- Created a process for requesting updates to the design system: Request, evaluate, work, review, publish, analyze.
- A #prismdesignsystem Slack channel to discuss progress, requests, and anything DS related.
- Changelogs / release notes to communicate Figma design system updates to the broader org.
Outcomes
Increased workflow efficiencies, as well as interface and experience consistencies.
We saw increased efficiencies in the design, development, and QA process. For Designers, they felt confident in the sources they were pulling assets from, with less time spent, and required less support in locating things.
Developers were able to build consistent front-end experiences which resulted in fewer design QC notes. When we were working to improve the overall accessibility of the app interface, they were able to scale those global changes rather easily.