A lean, future-proof, small scale design system to support the growth of a humanitarian accountability platform. Built in Figma and documented in Zeroheight.
Designed for Loop with Sonder Collective
November 2021 - March 2022
MY ROLES
Design system specialist ・ DesignOps consultant ・ UI designer
TEAMMATES
Ciarán Duffy (Design lead) Iskra Ušćumlić (UX designer) Marek Wrzosowski (Engineering lead)
The challenge
Loop is a web platform that allows people receiving aid from organizations such as the United Nations and the British Red Cross to provide feedback, increasing accountability and transparency in the humanitarian sector. The platform has been rapidly expanding since its pilot launch in 2020, with over 700 organizations using it globally and support to fifteen languages.
Being a new product with two designers embedded in the team since day one, Loop UI already had a small but capable set of components. But due to the product's rapid expansion, the existing team was too busy to document design decisions and component specs. so I joined Loop's team as a freelance to fill that gap, building the V1 of their Design System.
My main goals with this project were to:
- integrate previous design decisions into a comprehensive logic and structure.
- deliver a good design-system consumer experience for current Loop designers, as well as new talent who may join the team in the coming years.
- create a library of future-proof UI components that are simple in structure, modular enough to accommodate new functionalities, and easy to re-style if the brand changes.
Timeline
The project was scoped for 6 months, and prioritization was key to ensure my work delivered value to the team continuously, not only at the end of the project. I worked in 2-week sprints, each sprint focused on delivering something tangible to the team, like functional styles, a component set in Figma or a published documentation page on Zeroheight.
A scalable style structure
A good design system starts with a solid style foundation, so reviewing and reorganizing Loop styles was my first step.
Loop's color palette was expanded with lighter and darker shades of our brand and semantic colors, giving designers more flexibility while ensuring better consistency when working with components. Color values were fine-tuned so that our primary and interactive colors were all compliant with WCAG accessibility standards.
I also defined a new naming convention for colors, adding semantic qualifiers to the color family names (brand-purple, action-teal, alert-gold, etc.) and a numeric value to denote color lightness, from 100 (lightest) to 800 (darkest).
Text styles and icons were reviewed and standardized. I gathered icons that were scattered inside various components, turned them into components, tweaked their design with visual consistency in mind, and categorized them according to their intended use in Loop's UI.
A high-tech component set
Loop existing components were not in bad shape, but they had to be redesigned from scratch to take advantage of our new style structure and Figma's recently-released features like Autolayout and component variants.
Key components like buttons, input fields and selectors were built using the base component method, that allows styling parameters like font size, border radius and spacing to be defined at the base level in a single component, and trickle down to an extensive set of components instancing it (see example below).
I also normalized all component sizing, spacing and layouts to an 8-point grid. This system-wide change made components easier to scale up and down and provided a higher level of consistency across Loop's interface.
New audio components
In parallel to my design system work in Figma, the UX team at Loop was building a new IVRR (Interactive Voice Response and Reply) functionality that would allow users to send audio-based messages to Loop's platform via phone and WhatsApp. This feature required an entirely new interface for moderators, with audio player and recorder components.
As soon as the IVRR flow and basic UX was tested and validated, I got to work on building the new components, making sure their interaction was easily understandable, while still remaining consistent with Loop's visual language.
This feature was also an opportunity to test the intuitiveness of the design system with its actual consumers, since the UI for it was built entirely with the brand new components. The impromptu usability tests gave me many insights and enabled me to iterate on some components’ structure before the documentation phase, which was very smart.
Dealing with legacy UIs
As a small team with a limited time budget, we made the executive decision not to rebuild any of the existing UIs that were already implemented, and work with the new design system components only for upcoming features (as was the case with IVRR).
Refactoring everything would be costly and not deliver immediate value to Loop. Some key screens were redesigned by me to test the new components and provide usage examples in the documentation, but that wasn't my main focus.
A lean approach to documentation
The design system documentation phase took about a third of the projects time, and we only started working on it once all components were tested and published in Figma.
We chose Zeroheight as our documentation platform. It currently houses all UI component docs and specs, and will eventually have Loop's coded components. Its main selling point was the ability to sync design assets with Figma and embed code snippets for live component previews.
After cataloguing all components in a comprehensible taxonomy, we prioritized which ones would be documented in this phase, considering the value each would add to the design and engineering teams. My strategy to tackle the writing was to go from the simplest component to the most complex.
Throughout the documentation process, I was in touch with Marek, Loop's tech lead, who provided valuable feedback from his team of engineers. Together, we honed in on the optimal language and the right level of detail for the component specs.
Taking cues from other well-established design systems like IBM's Carbon, Google's Material and also other smaller-scale references like Vitamin from Decathlon, I defined a basic structure for each component's page, detailing its intended use, anatomy, variants, states and, when necessary, additional information like spacing parameters, responsive behaviour and animated prototypes. Additional desktop and mobile specs are also published in Zeroheight, with assets that sync with Figma, so the documentation is always up-to-date with the latest version of Loop's components.
The name we chose for this design system is Equity, evoking the goal of justice and fairness for all that is one of Loop's key principles.
Results and next steps
Working as an independent consultant building a design system for an existing project was a big challenge, but Loop's team was an absolute joy to collaborate with. Ciarán, Iskra and Marek gave me all the context I needed on the product and provided valuable and thoughtful feedback throughout the process. As a distributed team, we collaborated mostly asynchronously via Figma comments and Slack threads, and it worked amazingly well, even without established rituals and processes.
We finished the project with a sense of accomplishment, knowing Loop now has a much more solid design foundation to grow as a product. Equity DS is currently in use, a few new components were built respecting the principles defined during this work, and I have received great feedback from designers and developers who use the system daily.
However, the design system work in a living product never ends. By the end of my time with Loop, the team had a wishlist of other assignments to tackle next:
- Document components and UI patterns that weren't prioritized in this cycle;
- Add Do & Don’t section to component pages;
- Provide ongoing design system support during new feature development;
- Add code snippets to Zeroheight;
- Strategically refactor some components to leverage new Figma’s features that came up since.
Equity Design System Designed for Loop with Sonder Collective November 2021 - March 2022
