Empowering an enterprise-level team for efficient and effective co-creation

Pakistan Single Window is an enterprise that set out to build a system that would improve the efficiency of Pakistan’s Trade System and digitize various government and federal ministries. It will comply with the Single Window standards of other countries and provide a single gateway for trade-related activities.

As a User Experience Engineer, my goal was to design a modular system to help the team ideate and develop most of PSW’s functions with ease and efficiency..

Why do we need a design system?

Challenges

1. Consistency

Since Pakistan Single Window (PSW) Portal supports multiple platforms and encompasses various functionalities, it was crucial to understand the need for a consistent experience.

2. Reusability

While increasing reusability helps reduce the production time of a module, we also needed to make sure that customizations at all levels should be allowed in the system.

3. Efficiency

Using the design system as a tool for quick ideation became our priority goal to reduce the time to bring out new ideas, reduce design from scratch for each instance and solve the problems quicker.

Journey

Research

1. Reading popular design system documentation

We referred to well-established design-system documentation such as Material, Carbon, and Fluent as well as various guides such as Atomic Design by Brad Frost and Refactoring UI by Adam and Steve.

2. Reviewing existing requirement artifacts

We studied all the previous technical requirements documentation such as BRS, and SRS, and prioritized our existing user flows ensuring they align with our business goals.

Audit

1. Mapping the architecture

Initially, we created an information architecture to map out the main functions. This activity gave us an insight into the scale and user flows.

2. Consolidating components & patterns

We compiled all the components from various sources that are being used in our application on a single-page document to map out current and all the possible future requirements.

We used mind mapping while auditing the front end to get a holistic view of the system.

Design

Foundation

By following the atomic approach, we focused initially on the building blocks of our design system, keeping scalability in mind. All of our components are built using these properties. Since the design system is for a web application, we kept the foundation platform agnostic.

Component library

After intensive research and inventory, we compiled all of our components within the system in the form of a library with different categories of design system tokens. Since we are using React JS on the front end, it is easier to isolate components on the development side as well.

Pattern library

Working in a small design team of a large enterprise organization where collaboration was a priority, presented us with a need to create templates and define a pattern creation process for our component library.

Impact

A clear difference in time was observed [approx 40% average] between modules developed using our new design system and modules developed and designed from scratch.

We used our task management tool (click up) to measure the time taken on each module with a similar workforce.

Benchmarks & testing

Our Design System provides a guideline to benchmark our ideas and test and improve the system for new cases.

Improvement & documentation

We continue to improve the documentation and develop use cases to understand the application and help the engineering team use the system efficiently.