Team
3 Designers
DURATION
March 2021 - August 2022
MY CONTRIBUTION
UX Research, Visual Design, Prototyping
OVERVIEW
Patricia is a Nigerian-based cryptocurrency startup with the mission to create a crypto-driven economy where there’s fairness, transparency and access. Today, Patricia is connecting Africans to the global economy, and local individuals and businesses can accept payments from anyone anywhere in the world without restrictions. Patricia is leveraging the power of crypto to enable Africans to preserve their wealth, and creating access to investment and wealth-creation opportunities.
THE CHALLENGE
Patricia’s internal tool (Lighthouse) was undergoing a redesign and the redesign involved us checking through every moving part of the product. From conversations with employees (users of Lighthouse) it was mentioned over and over again that Lighthouse looked confrontational and too mechanical.
Being one of Africa’s biggest marketplace for trading cryptocurrency and other digital assets. The product and engineering team had increased over the last 6 months and we recognised that there were lapses in internal design consistency. This led to severe inconsistent user experience across platforms.
This case study focuses on the design system, affectionately known internally as Token (a nod to the popular term for a denomination of cryptocurrency). Our goal was to design a secure, trustworthy and beautiful exchange so users can feel comfortable and confident when making trades, based on a solid design system.
GOALS
Being an early-stage startup, we had a fair few goals for the Token Design System to reduce duplicated effort across our products:
- Develop a comprehensive Design Language to guide the visual and interaction design.
- Update and unify inconsistent components across Patricia's digital products.
- Establish clear processes, guidelines, and extensive documentation for the team.
- Ensure users receive a high-quality, consistent experience across all current and future Patricia products.
- Simplify front-end development by providing a 1:1 design system for React implementation.
FOUNDATIONS
Built primarily on the backbone user testing, user journey mapping and JTBD frameworks. We focused on working on the foundational elements of our design system, such as 🌈colour palettes, 🔠typography, ⚙️icons, 🏃🏼♂️illustration etc., as well as a few documentation pages for new starters such as 👋 Intro and 📏 Guidelines. Getting these foundational elements right was critical to the success of the design system as they defined what the larger blocks and components were.
TYPOGRAPHY
We started with Typography, we incorporated 2 core typefaces into all of our designs.
- Gilroy
- PT Serif
We created a 7-step scale for headings (Title and Heading 1 → Heading 6), a 6-step scale for text (XXL → Default → Caption) and a simple 3-step scale for monospace fonts (small, medium and large).
For the type scale, heavily inspired by IBM Carbon’s formula for scaling fonts, we defined the base and max font sizes for body and heading texts.
- Body (Gilroy) - 12px to 24px
- Heading (PT Serif) - 18px to 60px
SPACING
In appropriately using space, we needed to ensure there was a level of uniformity in everything that we did. Spacing is an important and often overlooked aspect of an interface. It helps with grouping similar pieces of information, it helps with establishing hierarchy and also with improving readability.
We use a 4px baseline that pre-define all the spacing related areas: margin, grid sizes, border radiuses, spacing in between and within components. By using number that are multiples of 4, consistency in our spacing can be guaranteed.
We used an 4px baseline spacing system that pre-define all the spacing related areas: margin, grid sizes, border radiuses, spacing in between and within components. We used 4px baseline because it is easy to break down into smaller bits without forming decimals.
COLORS
The colour scales in Token are algorithmically generated using a combination of linearly incrementing contrast ratios, deep-learning colour generators and manual colour picking. All colour tones from the base variant, namely the 500 style.
Based on our current use case for colours, we had 3 categories of colours that we had subconsciously defined as a team. These subconscious colour definitions had become what we had used across our products. It was important that we had these colours documented and formally defined. We divided colours into the following categories.
- Base Colours
- Product Colours
COMPONENTS
While designing our components, we made sure to design the core components that every web app and mobile app would typically have. All components were designed in Figma using Figma components, auto layout and variants. Using auto layouts and variants made it possible to create components that could scale and adapt based on where they are being used. It also made it possible to create extensive states so developers could cover all the edge cases that came with each component.
DOCUMENTATION
After all components have been created, they were shared and made accessible to all members of the team through Figma’s shared library for use across all our products. Proper component documentation is the single most crucial part of a design system. Keeping the document clear and explicit is integral to ensuring organisation-wide adoption.
A core aspect of the entire design system was differentiating what components were allowed for use on the marketing website and which ones to use on the web app as well as mobile app. This made it easy for us to properly document the design system with as much detail as possible.
We outlined their use cases for every components, their various states, rules on when to and when not to use them, and how to properly combine different component types. Our documentation encompassed the following:
- Introduction.
- Component Breakdown.
- Use Cases.
- Anatomy.
- Sizes.
- States.
- Content-Type.
- In action.
IMPLEMENTATION & IMPACT
Successfully integrated the Token Design System into Patricia's cryptocurrency exchange platform, providing a unified and visually appealing user interface.
The design system is an ongoing project. We iterate, change and learn a lot in the process. Being a small team we made the decision to focus on the essentials, so far, we have a set of basic components ready, which has been game-changing for our team in terms of efficiency, as well as consistency, and standardisation.
Although fairly simple, the system has proved extremely useful in removing ambiguity and helping us work faster. Users now experience a trustworthy and consistent cryptocurrency exchange interface. Front-end development processes have been streamlined, saving time and reducing inconsistencies.
LEARNINGS
While Token Design System is still an ongoing project, I've already learned so much that I'll use to improve the design system over time (if possible) and use on future projects.
For instance, the colour palette was particularly problematic. The 500-tone colours are quite piercing compared to the rest as our visual designer only designed with them in mind. The rest of the tones were algorithmically generated and as it happens, typically these generators have a linear approach to creating new tones. Greys are particularly difficult as they need a steadily declining infusion of blue, otherwise mid-greys become slate and blacks become navy. I explored a few options here, Atlassian for example has a range of neutrals so they can tailor and limit the amount of blue injected.
Icons were an interesting area too - we relied on the Ionicons library as they were cross-platform ready (good integration in React Native through @expo/vector-icons). Unfortunately they're only exported in a single size so we had to resize the icon in each particular instance, which will undoubtedly lead to inconsistencies. Plus their folder formatting in the Figma version is by letter which is weird.
