THE ROLE
Product Designer
THE DURATION
September & October
Overview
Xetova is a start-up company that provides a platform for managing procurement and supplier relationships. The company was experiencing inconsistent design across their products, which was causing confusion among users and making it difficult for the development team to maintain the products. The company needed a solution that would help them create a more consistent and efficient design. In this case study, we will examine how the power of defining and designing a design system helped Xetova improve their products and achieve success.

How might we create a solution to help create more effective usage of Engineers time, and give ample time for Designers to conduct Research?

Pain Points
After the user research, I compiled my observations and interviewed each party of clarification. I found out that each cross-functional team had something to say. I figured out the frustrations and wants/needs of each party.
Design Team

Not enough time given for proper UX and collaboration with other designers

Engineering Team

Designs are not ready 70% of the timeand there are too many one-off components.

Product Managers

There is an unorganized structure and no visibility on what the latest designs are.

Business & User Goals
After the user research, I compiled my observations and interviewed each party of clarification. I found out that each cross-functional team had something to say. I figured out the frustrations and wants/needs of each party.
Business Goal

Decrease time to design, iterate, and deploy = faster ROI = faster turnaround time.


The key metrics is time to iterate, time to deploy, time to design. Using recyclable design components will definitely speed up sprint deployment and productivity across all teams.

User Goal

Bridge gaps between all parties: Design, Product, and Engineering.


Help align all Product Design across platforms, create scalable components to solve Design and Engineering extra deployment time, and aid the missing gaps between the triage.

The Execution
The component rebuilding took a case-by-case and agile approach.With understanding current component behavior and opportunity to improve, each of those had various difficulty, repetitiveness across the product, time to develop, and time to design.We started with globally used & smaller components (fonts, buttons, input), then worked my way to components like modals and navbars.
Scalability
To enhance scalability, structure was formed by creating a component list document and tagging all involved parties to increase ownership amongst everyone on the team. Being a growing Design and Engineering team, a UI usage guide was created to help enforce uniform design patterns across the products and finally every time someone modify or adds components, everyone was prompted to write on the change log.
Conclusion

Development Lifecycle 4X’ed overtime.

Without the Design System, the product team would be able to carry out max. 3 features a month. With the DS, the product team can now carry out 12 features a month.

Xetova Design System is now an integral part of Xetova.

It is now used across all platform deployment.

The Product & Design team is now Autolayout-savvy 😆

We are all a fan of auto-layouts. We love it.