How to Build Design System for Non-Designers

Big Changes, Short Time

Transformation of mobile application’s infrastructure from web to native was one of the most important goals of 2019 for the bank. The project was huge (we are talking about the whole application here, almost 1000 pages or maybe more) and the deadline was quite tight (6 months for the first release). With 3 different outsourcing companies and in-house staff, there were more than 50 developers, 20 analysts and two UX designers on our team

Problems & Challenges

The main reason for the transition was non-fluent design and performance issues with the web-based application. The first brief from the mobile team was:

1. Find and improve cases that are not suitable for native applications, such as components, navigation patterns, etc.
2. After reaching an agreement, creating a UI Kit with these deliverables

The plan was to transform all pages and flows “as is” with new UI elements. But we were also aware that these pages were far from standards and had serious design and usability issues. There was a UI Kit, but it was not available to the stakeholders. There were also no guidelines and no sample libraries, so analysts and software teams could not get up-to-date references and had different solutions that were far from standard. It was clear from the beginning that not all screens could be created by the UX team. We had to find a way.

So after a few more additions, our final goals were:

1. Analyze the current usability issues and propose a suitable solution.
2. Create a full-scale design system with pattern libraries, design guidelines, do & dont’s, voice and tone, etc.
3. Build a centralized system that is manageable, extensible, and accessible
4. Create a system that allows other shareholders to create their own pages as easily as possible.

Analysis of Web Structure

We analyzed the current usability issues with the web approach and shared our solutions with the shareholders for the native approach. After the handshake, we started working for UI Kit.

Examples from “Web to Native Transition Suggestions” Presentation

First two goals were clear. With Figma’s online collaborative structure & team library feature, we created a UI Kit that everybody can reach with just one link and always informed with the updates. Our design is based on atomic design approach.

The Challenge

For us, UX is not only about customers, but also about our partners. It was exhausting to wait for an analyst to design screen which is not part their profession. So, we wanted to create a system that would speed up the screen design process with minimal workload and minimize the adaptation time. Highlighting all design rules with words and guidelines was one option in which wouldn’t be a realistic approach. Therefore we tried something different. We come up with embedding all these rules into the components as much as possible. So when a user creates a UI, it would be as easy as building a LEGO.

There are two basic rules when creating a component:

1. Each component must have the same width
2. Each component must fit into different frame sizes ( Resizable without problem)

At the end of this work, the user has to follow 2 steps:

1. Create an empty frame
2. Place all the required components in the right order into the frame.

After minimizing the design rules, we have created a sample page which contains all the different layouts as an example. So if analysts can not find a suitable layout, only thing they should do is to request from us. In this way, we have created a process where we only work when new requests come in.

We also created a folder structure (or related components), so that related blocks are in the same hierarchy. We try to abstract all design elements as much as possible, so all colors, texts and effects are created as styles.

An example of the old vs new design with revised user flows | First page of Money Transfer

An example of the old vs new design with revised user flows | First page of Money Transfer

Outcomes

After some improvements through user feedback, we were able to create a system that even someone with no Figma knowledge, could start creating new screens after a one- hour workshop.

In addition, over 450 unique screens and patterns were added to UI Kit during the project. Being able to create screens faster, enabled analysts to spare more time for their main responsibilities. Many user workflows were revised this way. We have been continuously expanding and maintaining our UIKit since that time.