Deal Technologies is a digital transformation specialist Company that has been operating in the market for 19 years. With the goal of diversifying its revenue sources and driving growth, the Product Engineering Department was established, dedicated to enhancing existing internal solutions and conducting research and development for new products.

Context

Problem

The problem we are facing is that our internal products are not standardized, which makes it hard for our design, business, and development teams to communicate effectively.

GOAL: To overcome this challenge, we must implement streamlined processes that allow for efficient and prompt delivery of standardized products. This will not only enhance communication, and create cohesive and high-quality products that reflect our brand identity.

Therefore, we decided to build a Design System as it fulfills a significant portion of our needs through the following benefits:

• Speaking a shared language based on a guide - enabling team autonomy, ensuring consistent experiences and interfaces, facilitating feature creation or refactoring, and establishing a scalable modular ecosystem.

Where to start?!

RESEARCH

Definitely, it is essential to conduct in-depth research on the subject. I read articles and reviewed design guidelines laid out by other brands including Google, Adobe, Meiuca, and Atlassian. I also interviewed experienced professionals to learn from their process, get valuable tips, and avoid making the same mistakes.

INVENTORY

After conducting initial research, the next step was to establish a list of essential global components and then assess the inventory of these user interface elements across our websites and applications. To achieve this, I captured screenshots of each item on the list.

AUDIT

Next, I performed an audit on each site, carefully documenting the reusable components utilized on our websites and organizing them into distinct categories.

When I examined them collectively, it became evident that we truly needed a system in place. I noticed that we were using only one style for buttons, and I came across instances where fonts and typography were not being used correctly. Additionally, I observed inconsistencies scattered throughout the design elements.

EDIT

Finally, we built our Design System. Doubtless, that was the most time-consuming part. We made decisions regarding naming conventions, categorization, organization, and presentation. We chose to build it based on Atomic Design principles. But, why did we choose this approach?

Based on Brad Frost's book, "Atomic Design", this approach offers a system for managing complexity in a more effective manner.

Atomic Design, introduced by Brad Frost, provides a structured framework for design that promotes consistency and reusability. By breaking elements into atoms, molecules, organisms, and templates, it simplifies the design process and ensures a cohesive user experience.

SHARING

The Company started using Zeroheight and Storybook as tools to share our design system with the whole team. It allowed us to gather feedback and collaborate more effectively.

Demonstration of the implementation, usability, and functionality of the 'Pagination' component developed in Storybook.

ENVOLVE

Now that we have a strong foundation and have established our principles and conventions, the design system will naturally evolve as we identify the need for improvements. It is important to emphasize that Design Systems are long-term investments and, as such, need to evolve continuously.

The results

Overall, the process of building a Design System was extremely challenging but rewarding. I highlight the significant results we achieved, such as:

• With the Design System implemented, our task completion time was reduced by 50%. Moreover, I had a greater sense of confidence in the final outcome, knowing it aligned with the established standards;

Solution

Timeframe

My Role

Jun to Aug 2022

UI/UX designer

Costumer

Deal Technologies

Stakeholder

Product Engineering Dep.

• Reducing the costs of future products (launching better products for the first time, using Design Thinking and the Design System).

• With faster development, we were able to focus on improving the experience by conducting more detailed testing;

• Improvements in our deliverables, resulting in a smoother and more consistent user experience. Information collected through user feedback;

Thanks for reading!

Message me on Linkedin or email me at bastostlb@gmail.com

Would you like to see more details?

Check them out on the prototype :)

More Projects