Developing a Design System

A task involving many areas

< Home

Establishing a brand identity

Branding always helps defining a company’s face towards the market. The colors, the voice, the way they approach customers, the way they deal with issues, the way they gather brand lovers. But, obviously, for that to happen, every aspect needs to be organized, sorted.

A design system plays a critical role in this process, as it not only establishes a visual hierarchy, but also aligns user expectations with the development team’s understanding of how to meet those expectations. It’s important to note that creating a design system is a collaborative effort and cannot be done in isolation.

As a product designer, you ought to understand front-end trends, libraries, frameworks. UX professionals must be polyglot inside a team, making the standardization easier.
You have your visual rulebooks, so you need a bookshelf big enough to organize them.

Keeping your visual rulebooks organized

Fusing a Design System with NativeBase

At an investment company, I could notice how important that UX-Dev bridge should be. We were improving the digital B2C and B2B products, the marketing area had just announced their rebranding, so we had to catch up and reflect the new visual approach to our app.

They used to have an UI-centered design system, that wasn’t bad, but not really functional, development-wise. There were plenty of improvisation moments from the dev team, who tried to follow the design system’s visions, slowing the process.

When I assumed the project, I tried to expand this vision, pulling the dev team closer, trying to understand their needs and pain points, the language they were using, and how we could come up with a good solution for both sides.

Design Systems are made to be a forever work in progress, so be sure you have room for improvement!

Choosing the right tool

Thus, after some research, we decided to give NativeBase a try, incorporating the library into our layout. It would be a complex project, restructuring the app’s code, but making it easier for future developments and UI processes.

Quoting their website: NativeBase is an accessible, utility-first component library that helps you build consistent UI across Android, iOS and Web.

It has all the components needed to build a product, saving a large amount of time prototyping every single element, only having to focus on specific attributes related to the app.

The colors follow NativeBase rules, having a defined color range and alerts.
Also, the product colors were thought through an accessibility check, being chosen not to be confusing by colorblind people.
Typography also follows NativeBase scaling rules and naming, thinking about responsive layouts.
And all the components were designed using NativeBase standards, only adapted to our needs and branding.

Working smart

Effective communication between teams, organized task management, and thorough research are all key components of a successful project. As such, product designers must be well-versed in every aspect of the development process and be able to make intelligent decisions with the end user in mind.

By understanding and following every step of the journey, from ideation to launch, product designers can ensure that the final product is both innovative and user-friendly. This requires a combination of strategic thinking, creative problem-solving, and a deep understanding of the needs and preferences of the target audience.

Thank you for reading my case study!

Want to work with me? Feel free to contact me!