Gumrail Design System
A design system at Gumrail is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of features
Gumrail web/app design system
As the lead UX/UI designer for Gumrail, a promising new startup, I faced the critical task of establishing our first comprehensive design system. In the early stages of rapid development, our team had been focused on shipping features quickly, leading to a fragmented visual design across our digital products.
This project was a design system designer's dream—a complete redesign from the ground up for a promising new startup.
This project required not just design skills, but also a strategic approach to align our visual identity with our brand values and business goals, while setting up processes for long-term maintenance of the design system.
ROLE
Senior Product Designer
SKILLS
Design System, Interaction Design, Atomic Design, Prototyping, Typography, Product Design Thinking, Competitive Analysis, UX Research
Tools
​
Sketch, Photoshop, Abstract, StoryBook, Invision, MIRO, Mind Meister
TIME
4 months
UNDERSTANDING THE PROBLEM
Upon conducting a thorough audit of our existing codebase and design assets, I uncovered several challenges:
​​
-
Inconsistent use of colors and fonts across different projects and features.
-
Numerous duplicated UI elements, leading to inefficiencies in both design and development.
-
Non-scalable and non-responsive grid systems and layouts, hindering our ability to maintain a cohesive user experience across devices.
-
A disconnect between design and development, exemplified by developers resorting to color-picking from design files rather than using standardized values.
​
These issues were not only impacting the visual coherence of our product but also slowing down our development process and potentially affecting user experience. It became clear that Gumrail needed a robust, scalable design system to support our growth and ensure consistency across all our digital touchpoints.
THE PROPOSED SOLUTION
Creating a seamless, inclusive user experiences that not only updated the visual language but also improved accessibility. Gather valuable insights that guides our design decisions including dozens of components, page layouts, and design system documentation.
CHALLENGES
The challenge was to create a design system from the ground up that would:
​
-
Establish a unified visual language for Gumrail
-
Improve collaboration between designers and developers
-
Enhance efficiency in the product development process
-
Ensure scalability and responsiveness across all devices and platforms
-
Lay a strong foundation for Gumrail's future growth and product expansion
PHASE 1: RESEARCH
Our research phase was pivotal in laying the groundwork for Gumrail's inaugural design system, spanning approximately three months. We recognized that a deep understanding of our current design and development practices would be crucial in building a unified system that could support our rapid growth. Our research efforts encompassed:​​​​​​​​
1. Stakeholder Interview
We conducted in-depth, one-on-one interviews with various team members, including designers, developers, product managers, and executives. These conversations helped us gather valuable insights into their specific needs, challenges, and the ad-hoc solutions they had developed to meet tight deadlines. Understanding these workarounds was key to ensuring our new design system would address real-world pain points and foster adoption.
2. Collaborative workshops
We organized a series of cross-functional workshops that brought together members from design, development, marketing, and leadership teams. These sessions were instrumental in aligning our design system goals with Gumrail's overall brand vision and business objectives. We used these workshops to define our design principles, discuss potential scalability challenges, and brainstorm innovative solutions that would set Gumrail apart in the competitive startup landscape.
3. Competitive Analysis
As a new player in the market, it was crucial for us to understand the design trends and best practices in our industry. We conducted a thorough analysis of our competitors' digital products and design systems, identifying opportunities to differentiate ourselves while also learning from established patterns that users might already be familiar with.​
Material by Google, Polaris by Shopify, Carbon by IBM, Atlassian, WIX and many more
PHASE 2: DESIGN
THE PROCESS
Developing out the fundamentals of the design system
The design phase was not about tweaking existing elements but rather about defining an entirely new visual language.
A significant portion of this phase was spent defining typography ramps, color palettes, grid systems, corner radius, borders iconography and other design elements that would ensure consistency across all digital products.
TYPOGRAPHY (Text Style)
COLOR PALETTES
Created a Design System Framework
With the design system principles defined, the design team created a framework that would guide the design of all digital products. The framework included templates, guidelines, and rules that designers could follow to ensure that their designs were consistent with the design system principles.
​
The framework also included a component library that contained reusable design elements, such as buttons, forms, and navigation menus. The component library allowed designers to quickly and easily create new designs that were consistent with the design system.
PHASE 3: EXECUTION
DESIGN PRINCIPLES
A guide for the creation of future components
A crucial part of our solution was the creation of a living style guide and component library. We built this as a web-based tool, accessible to both designers and developers. It included detailed documentation for each component, explaining its purpose, usage guidelines, and code snippets.
We also implemented a Design System Blueprint to help manage the workload and partnered with our PM and dev teams to develop a clear roadmap.
​
This phase, which is currently underway, focuses on designing, spacing, and documenting the components for development. It will ensure that the entire system is ready for launch with all necessary guidelines and documentation.
Key Learnings
INSIGHTS
-
Too many choices may lead to inconsistencies.
-
Design System won’t be perfect, and mistakes are ok
-
Design system should live in a source control repository independent from your main codebase
-
There is no “one size fits all” design system
-
Presentations and documentation help to make sure everyone is on the same page
-
Build Design Systems with modularity in mind
LEARNINGS
The Design System is a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term. With the design system, we have one single source of truth for how the design looks across all of our products and pages. This single source of truth allows us to have a simple, unified design everywhere