Laying the foundations of Wisr’s Design System

Documentation of banners and toasts defined for the design system

The goal

To create a design system in line with the company’s new branding.

No design system for Wisr had been created leading significant inconsistencies across their web and mobile interfaces.

My role

Lead UX/UI Designer

  • Created a reusable UI component library based on Wisr’s brand guidelines, existing designs and Google Material Design best practices
  • Consulted other designers and front-end developers on the designs
  • Produced reference documentation and ran training sessions with other designers on how to use the system

Outcome

The design system empowered the design and development team to create interfaces more quickly and avoid frequent disputes over styling for common components such as headings, buttons and background colours.

Company

Wisr
Online consumer lender

Year

2021

Team

I was the sole designer on this project however consulted extensively with other product designers and developers during the project

Timeline and constraints

3 months

Skills

UX/UI Design

“All I can say is WOW. Lisa has put her heart soul into the Design System for the new brand. She’s not left one stone unturned in her pursuit to deliver a considered, extensive and high quality Design System. This will no doubt make life a lot easier for designer and developers alike for years to come, but also ensures our new brand is reflected with integrity and consistency across all our digital products"
Abe Atiya
Head of UX, Wisr

Examples of assets created

Select image to zoom in
No items found.

Examples of design systems documentation created for banners, status call outs, toasts, buttons and action links

Case study coming soon!

More projects

No previous project
No next project

Learn more about my work

Contact me on lisa@lisadeng.net for in-depth case studies or to learn about how I work

Subscribe to my blog to get updates on my work and learnings.