A bridge between UX and FE — Design System
There are many rules and patterns that we need to follow as designers and developers, from UI kits to design documents prepared for pages. As designers, we live in a world of technology with many tools such as Sketch, Zeplin, Figma, Protopie, Prototyper. In this article, we will explain how we set up the TAV Design System, our principles, and the time we saved thanks to TAV Design System.
“TAV Design System” is the pre-configured design framework for TAV products.
On the B2C and E-Commerce side, there are many tricks and examples of design systems. As the TAV UI/UX Team, we realized that we needed a design system to meet the needs of our industry and the needs of our users, who are racing against time and need to make minimum mistakes, as we design products for the aviation industry.
We realized that we changed many tools while sharing our business requirements with Jira, and our designs via Sketch, and Zeplin while sharing the design with developers. We changed a lot of tools while making our prototypes over Prototyper, which turned out to be a waste of time. In the worst-case scenario, we decided to establish a library that we have developed and developed with the product, as a result of our pain points such as keeping the Sketch-Zeplin constantly updated in some cases, the comments from the POs being lost in the mail mess, and keeping the designs local at the person who designed the product.
In the visualization of the subject we mentioned above, we set out from a complex order to establish a simpler, more understandable order as in the image below.
After reviewing many tools in the market while organizing our workflow, we decided to use Figma because we found Figma to be used both in UI design and as a handoff tool more successfully than other products. With this decision, we have reduced our team’s spending on digital products by 50%.
“As the product team, we first reveal the needs in line with the vision/purposes of the products and modules to be developed. Then, in line with the guidance of our design team, we start to work on establishing a special design site for the relevant product/module.” — Yusuf Duman, Senior Product Owner TAV Technologies
What is TAMS Design System?
TAMS Design System is for UI/UX designers and software developers working on TAV Technology applications. It not only defines certain design elements and principles but also helps instill a philosophy (thinking model) that allows you to decide when it is appropriate to deviate from the guidelines (for exceptions or custom enhancements in apps). Adhering to the recommendations here offers many benefits:
+ Our users will learn to use our products faster as they will reuse common elements they are already familiar with.
+ Our users will complete their tasks and work faster, as it will have a simple interface design that is not confusing and difficult.
+ The amount of support we will have to provide to Scrum teams as UI design will decrease due to the reasons mentioned above.
Why do we use the Design System?
“We position both our sketch outputs and our final outputs during the Design System setup process on the Figma tool, and we continue all our comments and collaborations on this application.” — Yusuf Duman, Senior Product Owner TAV Technologies
Design efficiency: We know that drawing 2 or more of the same components is a waste of time. We use the design system to make revisions faster in UI design, to spend more time on the UX of our products, and to work efficiently.
Design integrity: By aiming to use the same components everywhere, we aim to provide integrity between the pages with the design system. Since we know that writing a different code or designing for each button is far from logic and will reduce our speed, we control the designs of all screens over a single file.
Thanks to Figma, we can keep our designs up-to-date. In addition, we do not need to update again. Both the product team and the developer team always see the most up-to-date screens.
Collaboration: We work with many stakeholders, from the developer team to the product team, while doing our work, which is the nature of the design. We use our design system to stay at the same point, stay away from designs in the mailer or .jpg format, and stay in a common language.
In addition to this, as the design team, we can help our team members who are busy with the sprint very quickly. Since we use the same components and our principles are the same, we gain the flexibility to relocate very quickly.
How did we establish the Design System?
1. Review of Our Current UI Kit and TAMS Product
We started by creating a catalog of all reusable components in your product. This includes patterns, colors, text styles, icons and layout systems. Creating an inventory of UI components revealed inconsistencies in our design language, and we were able to visualize this inconsistency.
2. Shaking Hands on the Design System with Our Stakeholders in Our Organization
It was very important for us to involve stakeholders and the product team before we started creating a design system. After explaining the inconsistencies you discovered from your inventory creation and how they negatively impacted the user experience, we made sure we were all on the same page.
3. Establishing a Dedicated Team and Making a Time Plan for the Design System
We are aware of how important planning is today, so we made our plans to implement and manage a design system throughout the entire cycle of product design. We have also made plans to meet with the developer team at the same point and make the developments.
4. Establishment of Design Rules and Determination of Principles as a Design Team
Design principles are a system of values shared throughout the entire design system. From Javascript to CSS HTML that we will use to code this design system; how we will deploy the design system; and we continued our work with the decision to use one of your digital products as a starting point for the system.
5. Creation of Color Palettes, Typography and Layouts
Colors and typography can affect all areas of our design system. Therefore, we first created a color palette. We decided to create primary colors, naming convention and accent colors. We conducted field visits and documented our reports to troubleshoot any issues you might encounter while testing the color palette in the user interface.
We decided on fonts and typographic scales because we wanted to use them for a consistent information architecture across all products. Since the typographic scale will also affect the user interface, we conducted our tests during field visits.
6. Creating the Icon Library
Icons in web design or mobile design will be useful to reduce language barriers. They will also reinforce the intended action by influencing user behavior such as the download button highlighted with the ‘down arrow’ icon. We aim for our users to process information very quickly, especially in an industry such as aviation where we compete with time.
7. Designing FE Framework Specific Elements
We have drawn all the form elements that we will use to record, read and edit information in the product according to our UI principles; like checkbox, radio button, and switches.
We arranged all our elements according to Figma’s Auto-Layout feature, and in future revisions (such as increasing and decreasing the columns where data is entered), we took faster action and removed 2–3 pixel shifts from our lives.
8. From Atoms to Molecules — Elements to Components
After creating our elements, we started to prepare our files that will create our corporate culture, such as desinging complex components, where and how these components will be used, and documentation using these elements.
In parallel, together with the developer team, we started to transfer the reflections of these components as code to the product.
9. Continuously Feedback
We know that it is important for the technology and aviation industry to analyze the future and stay open to innovations before our work becomes routine. That’s why we constantly test our design system on site with questions about how it looks for POs, developers and our users in the field, whether it is a pain point or not.
In sprint retros, we quickly incorporate the feedback we receive into our design system.
Conclusion:
We have succeeded in establishing a dynamic and open-to-development system that works in line with the rules and actions we have listed above. We see the design system not as a project, but as a process fed by continuous feedback.
Thank you so much for reading our article 👋
