Previous projectReusable UI Framework LibraryNext project
All projects

Unisys · 6 months · 2023

Reusable UI Framework Library

I led 12 people to build a themeable React Native component library. Development got 60% faster, with 30% fewer errors.

Design SystemsTeam LeadershipDesign-to-codeEnterprise UX
Reusable UI Framework Library cover

Context

Every Unisys product looked and behaved a little differently. Teams rebuilt the same components, maintenance dragged, and accessibility was patchy. The fix was one shared framework every in-house project could use. The business case was simple: fewer errors, faster delivery, lower cost.

My role

Project lead for six months. I owned user experience design and research and led a team of 12 across design, development and testing.

What I did

Research came first. I compared existing component libraries and their licences, studied user interface standards, and checked accessibility on iOS and Android.

Then I planned it sprint by sprint: user interface standards, a Figma library, a proof of concept for theming, and modules of about 20 components released as private npm packages. Each sprint ended with a demo.

The key decision was to treat the framework as a product, not a kit. It has four kinds of users: super admins, admins, theme creators and developers. I designed its website around their tasks, and built a design system where every Figma component maps to one in code.

Outcome

Phase 1 shipped 20 core components, with the Digital Banking theme as the default. On the Unisys Digital Banking app, development ran 60% faster with 30% fewer system errors.

Project presentation

Title: Reusable UI Framework Library - ensuring consistency and efficiency for in-house projectsIntroduction and contentsProblem statement, objective and goal, with project duration, role and toolsResearch and analysis: component libraries, licensing, user interface standards, best practices and mobile accessibilityEstimation and planning: sprint plan for Phase 1 basic componentsDefining users: Super Admin, Admin, Theme Creator and UserInformation architecture of the framework websiteTask analysis for each user typeTask flows and low-fidelity wireflowsHigh-fidelity wireframesDetailed user interface designs of the framework websiteBuilding the design system: type scale, colour themes and componentsRelease Phase 1: impact on users and business

Select any image to open it full size.

All projects