The Challenge
Creating a design system from scratch in preparation for future growth of the design organization and product portfolio.
The Outcome
An initial design system implementation in Figma and Framer was collaboratively tested and refined by designing user flows, and creating highly interactive prototypes for a mobile, instant loan application in a 1-week Prototyping Sprint.
The challenge
As a fast paced and resource constrained startup, Kwara initially collaborated with an agency to outsource part of their design work. With a strong customer focus, Kwara always fostered close relationships with their users and customers, and involved them during their design and development processes. After a phase of accelerated growth, Kwara soon faced the challenge of having just one cross-functional team, including one UX designer working on three products simultaneously:
- Kwara Core - Admin Platform
- Kwara Connect - Online & Mobile Banking
- Kwara Open- RESTful API.
Unsurprisingly, continuous growth soon put a strain on design capacity with just one designer covering multiple topics: UX and UI for all platforms, marketing, growth, social media channels communication content, and product team support. With the prospect of hiring and soon onboarding more product designers and product managers, the idea was born to create a design system as a means of consolidating and standardizing most of the design work. The intention was to enhance the overall consistency of designs across platforms and marketing channels, to facilitate designer-developer communication, to speed up prototyping of new ideas whilst making the process more efficient; to ease the onboarding of new hires through great documentation and last but not least, to effectively rid oneself of some of the design debt accumulated over time. The major obstacle to putting that plan into action was the continued lack of design capacity, as well as experience in building design systems in a short period of time. This was when kreuzwerker stepped in to support.
The solution
We started our collaboration by surfacing more details of the challenge ahead. We jointly wanted to reach a future state in which Kwara would attain a
- higher level of alignment between multiple product teams
- very consistent UX between different platforms and products
- way of rapidly iterating design solutions.
In order to take a first big step towards reaching those goals, we agreed on a 4-week long kreuzwerker engagement that focused on:
- co-creating a scalable design system
- testing its practical utility by creating at least one high-fidelity, highly interactive prototype of a new solution for an upcoming product backlog item.
A design system is a single source of truth that helps digital product development, and includes components, style guides, design language and the documentation of these. It also helps designers and developers to have a better handoff through reusable components, leads to consistent design language, scalability and most importantly, removes the need for tailor-made solutions to common UX problems in a product. Some good examples are Shopify’s Polaris, IBM’s Carbon, and Google’s Material.
We discussed design systems utility, structure and elements in order to understand Kwara’s needs in this respect and to collaboratively decide on the scope of the project.
For the first three weeks, a UX/UI designer from kreuzwerker collaborated closely with Kwara’s product designer to understand the needs and requirements of the product(s) and the teams, and then took the foundational steps to implement a design system. During this time, Kwara also implemented various user flows utilizing the design system and prepared a solution of an upcoming product backlog item.
We spent the fourth and final week of the engagement prototyping the proposed solution during a 5-day Prototyping Sprint.
UX Audit
To kick off the whole process, we had to know where we stood. We started by performing a UX Audit to analyze the current status of UI elements, and identify inconsistencies that existed in different areas of Kwara’s products. We initially identified the following issues:
- The styles and components were distributed across different sources such as Figma, Invision, Storybook, website and the web and mobile apps.
- After reviewing existing UI elements and styles and looking for repetitions and also for outliers, i.e. components used only once, we discovered that overall there were too many UI elements. On the one hand many were quite similar, and on the other there were a lot of single-usage elements.
For elements with clear similarities, we thought about how to unify them by using one specific style. Elements were often already part of larger components, so we also took time to extract their building blocks and map them over more granular elements, which we had already found. At the same time we looked for commonly paired elements in order to be able to create modular components.
This rendered an immediate and initial beneficial outcome: a consolidated inventory of all design tokens, UI elements and more complex components.
Collecting findings from existing design files during the audit phase.
Create a base design system in Figma
The initial UX Audit and creation of a design element inventory was conducted in Figma, Kwara’s UX design tool of choice. This allowed Kwara to use what we co-created immediately for their daily work to also improve their design processes as we progressed. kreuzwerker’s UX/UI designer collaborated closely with and mentored Kwara’s product designer, which sped up the utility and subsequent adoption of the nascent design system.
We implemented all color, typography and shadow styles in Figma’s shared styles library where we further refined them. This step included coming up with new naming conventions for colors and typography. kreuzwerker proposed to use functional instead of descriptive naming conventions to ease any future theming or reorganization of the design system. The typography style names were also redone from the font weight based on T-shirt sizing (XS, S, M, L, XL) convention. We assessed the overall component accessibility and improved on that when necessary.
Top: Design tokens in Figma.
Bottom: Excerpt from design system showing some of the components.
Prototyping Sprint and Framer
Once we reached a certain maturity of the design system in Figma, it was time for a change in the tool.
kreuzwerker always strives to use state of the art prototyping tools that can better bridge the gap between design and development - not only during the handover phase but even more so as to improve the overall collaboration and communication across the whole product development cycle. To facilitate designer-developer collaboration and to make our prototype as realistic as possible we decided to switch to Framer as our prototyping tool of choice for the prototyping sprint.
Before the prototyping sprint, Kwara already started working on an upcoming feature for their mobile app and wire framed a solution. This feature was called “Instant Mobile Loan” and let the SACCO members apply for a loan through the Kwara Connect (mobile app).
kreuzwerker implemented the solution as a fully interactive prototype in Framer by utilizing components of the new design system that were also implemented as React.js components in Framer and explored an alternative solution to Kwara’s initial idea. Framer, being flexible and powerful with interactive components, enabled us to explore multiple solutions really fast.
Top: Artboards in Framer displaying the user flow steps selected for prototyping.
Bottom: Artboards showing kreuzwerker’s alternative flow.
The outcome
Before the engagement, Kwara was dealing with an organically and rapidly-grown, digital product, whilst facing increasing demands on a lean product and design team. As a growing product team that was soon to be split into multiple squads, and with new product designers due to be onboarded soon, Kwara sought a single source of truth for UX/UI elements and visual guidelines, enabling organizational growth and speed of product development.
Product and UX roles usually work closely together to find the best solutions for certain problems customers or users have, but the prospect of regularly and rapidly exploring different solutions was constrained by the limited capacity of the design team. During Kwara’s collaboration with kreuzwerker, we managed to reduce these constraints together. Implementation of the design system enabled Kwara to have a base and a common language for collaboration within the company’s design, development and product functions. This common base will also help to address and prevent UX and UI inconsistencies between different products and upcoming new features, whilst facilitating more efficient communication in cross-functional teams.
Utilizing the new design system during the ideation process for a new feature and in our collaboration during a subsequent Prototyping Sprint also demonstrated how Kwara could in future explore different solutions more rapidly and efficiently, to validate ideas and innovate at a faster pace.
For kreuzwerker, working with a dynamic and fast-paced startup-team posed some new challenges, but it was full of learnings for both sides, which resulted in a great prototype to be tested by SACCOs and iterated by Kwara over the next few months.