A detailed design system consisted of 25 categories to streamline collaboration and ensure consistency in a fast-paced environment.
Company GloZ inc.
Period 8 weeks
Contribution Led the project (100%)
Role Haley (UX/UI Designer)
After delivering the design system, six PMs and engineers personally shared how it significantly improved their efficiency. This feedback underscored the value of investing time in building a solid foundation, as it leads to substantial time savings and smoother workflows in the long run.
Streamlining Success: How 86% of Tech Team Members
Boosted Speed and Consistency.
We had only one year to build a Translation Management Platform for four different roles: Localization Product Managers, Clients, Freelancers, and the Talent Acquisition Team. That's why we decided to focus on UX and purchase a UI kit from an existing source. While we initially started with an existing UI package that included many platform elements, the complexity of the features led to variations and inconsistencies as the project evolved.
Domain context:
Problem:
As the platform grew, project managers, software engineers, and I — as the designer — had different interpretations of design elements. This resulted in confusion and inconsistency in how elements were used across new features.
Design solution:
I proposed creating a Design System to unify our understanding of design elements. This would help ensure consistency and streamline collaboration, ultimately improving efficiency as the platform continued to develop.
PHASE1
DISCOVERY
Sensing that our team was struggling with unspoken concerns, I took the initiative to speak with each team member individually to uncover the root of the problem.
1:1 Coffee Chat with Team Members
Listening to Engineers and PMs to Identify their Struggles
I was able to hear their concerns naturally during our 1:1 coffee chat sessions. Our team members were quite introverted, so they wouldn’t initiate communication about their concerns. It was nice to have that time to listen to their struggles while working on a fast-paced startup project.
As the sole designer, I regularly scheduled coffee chats every two to three weeks with Product Managers and Engineers to check in on their well-being and address any concerns they had. Given the 17-hour time difference and our remote setup, I prioritized fostering open communication, offering support, and building strong, trusting relationships to ensure the team felt connected and cohesive.
#Planning Challenges
#Lack of Consistency
#Lack of Vision
#Uncertainty in Execution
Identifying Solution and Persuading Stake holders
Summing Up Their Pain-points and Needs
After conversations with engineers and product managers, I was able to clearly identify the user group and their needs for the solution: to build a design system.
How might we build a Design System that serves up consistency, reliability, and time-saving magic, all while winning our customers' trust for the long haul?
Gaining Stakeholder Support: Building a Design System for Efficiency and Trust
The reason we purchased the UI kit was to save time, but as the sole designer, I had to convince the leaders and stakeholders to allocate some time for me to build a robust design system that everyone could use. I explained how investing this time upfront would ultimately save us more time in the long run. Additionally, I highlighted how a consistent design system would build trust with our customers by providing a cohesive user experience.
PHASE 2
DEFINITION
Identifying Key Sections to Add Based on Timeline and Needs
Prioritizing structures
Structuring Design System by Prioritizing Needs
I listed the sources for the Design System, focusing on how we could ensure a shared understanding of when to use each design element based on different needs, and how to find what we needed easily.
Reasons Behind Decisions
PHASE 3
DEVELOP
As I began developing the Design System, I saw it as a valuable opportunity to enhance the design elements. To ensure these improvements aligned with user needs, I conducted user research. The process of implementing changes followed these steps:
Interviewing Users
Let’s Listen to the Users Before We Build Something Long-Term
I conducted user interviews with four Localization Product Managers to gather insights before finalizing the design. They completed a task while thinking aloud, and I followed up with questions to identify usability issues and pain points, ensuring the solution addresses their real needs.
During the interviews, I focused on understanding users' expectations, actions, pain points, opportunities, and feedback. I then categorized potential solutions into four groups: low feasibility, high feasibility, topics to discuss with team members, and planned developments.
Hard to distinguish between required and optional fields
Too many clicks needed
Limited number of rows at a glance
Presenting Solutions to Engineers and PMs
Persuading the Team with Research-Driven Solutions
After conducting user research, I organized a meeting with the team to present my findings and proposed solutions. The goal was to gather their feedback and collaboratively explore feasible solutions within our timeline.
Agreeing on Making Three Changes
1. Enhancing Required Field Visibility with Layout Changes
Before
User Feedback
Users found it difficult to distinguish between required and optional fields, leading to confusion when filling out forms.
One user mentioned they struggled to fill out the form because they were unaware that certain fields were optional.
After
Decision Made
Positioned the titles above the input fields and made them bold. This visual change helps clearly differentiate the fields, improving user understanding and form completion.
2. Replacing Confirmation Modals with Snackbars
Before
User Feedback:
Users found the extra confirmation step before saving unnecessary, especially when no data was at risk of being lost. The additional clicks added up stress, particularly during busy periods.
Users struggled to notice confirmation/error messages in the snackbar due to its position at the bottom left of the screen, which made it hard to catch notifications in time.
After
Decision Made:
Replaced the confirmation modal with a snackbar to eliminate the extra step for saving. For high-importance actions, I added an "Undo" feature to provide a safety net without interrupting the workflow.
Moved the snackbar to the top right to improve visibility and ensure users notice confirmation and error messages more easily.
3. Increasing List Visibility on a Single Page
Before
User Feedback:
Users reported that seeing only 10 rows at a time was inefficient, especially when managing extensive data sets. They emphasized the need to view more rows to speed up their workflow.
After
Decision Made:
Reduce the row height and decrease the font size from 16px to 14px. This adjustment allowed us to fit 20 rows on the same screen, offering users the enhanced visibility they needed, while ensuring the filter and search bar stayed accessible at the top for easy use.
PHASE 4
DELIVER
The Journey of Creating Design System V.1 and Evolving it into V.2 Through Feedback
Design System V.1 and hosting meetings
Presenting Design System V.1: Explanation and Feedback
After completing the first version, I hosted three review sessions to break it into three parts of the design system. These sessions explained how to utilize the system and gathered feedback for improvement.
Summary of Revisions after the Meetings
Based on the feedback, I determined that the design system needs clearer structure and more detailed explanations so that even those unfamiliar with the project's history could understand it after reading.
Design System V.2 and Slack Communication
Iteration and Communication for More Feedback
With new solutions to enhance the first version, I created Design System V.2. To stay aligned with engineers and PMs, I shared each completed category on Slack to ensure it became a design system everyone understands.
Before
Update History
Variant Guidelines
Component Overview
After
Update History O
Component Overview O
Variant Guidelines O
Feedback and Outcome
Back to Coffee Chats: Gathering Feedback ☕️
After the final delivery, I sought individual feedback through one-on-one coffee chats. Out of seven team members, six shared how reliable and valuable the design system was. Both backend and front-end engineers, as well as PMs, expressed their gratitude.
I continued gathering feedback and added new categories while creating components to ensure PMs always had access to the design assets they needed.
I firmly believe that being on the same page and fostering a sense of ownership leads to better product outcomes.