Background

Rushable develops a operations platform for restaurants to automate tasks such as custom-built website; online ordering; getting full-service support, integrations and analytics anytime. It disrupts third-party services that come between the restaurant and customers. Rushable helps restaurants drive revenue, directly through their restaurant's website. It is trusted and loved by thousands restaurants.

Before I joined Rushable, the team does not have a design system supporting the development circle. They even do not have a professional product designer, only rely on the engineer team and GitHub template building the market-fit product. As a product designer with business sense, I clearly know that the consistent design system will not only shorten the design and development circle in a long term, but also give the clients a professional impression which is extremely important for a B2B product.

Duration

Team

Tool

Status

4 weeks.

1 PM. 1 Product Designer(me).

Figma.

On-going work.

Learn more about Rushable

Problems

Why do we need extra time building design system?

The initial design file is in Adobe XD. The team expected me to start design work immediately. As I get deeper into the product during the 3 days onboarding trip, I aware the necessary to build a new design system:

UI/UX inconsistency.
There were many noticeable inconsistencies (fonts, colors, usage of components etc) across the product experience overall, but recurring UI patterns and systems would continue to exist as product development and iterations. Redoing or standard all patterns is an apparent problem to solve.
Enhance efficiency and save time for the future.
With continuous iterations, there will have many common components(pop-up window, input field, buttons) repeating in use. A consistent design system will benefit an early-stage start-up to rapid iteration. Furthermore, it will increase the effectiveness of design & engineering collaboration.
Professional business impression matters.
As a B2B tool, restuarants are our main users. The dashboard's first impression will set the tone for our future business relationship and shows that we are professional and prepared. Consistently making a strong first impression is essential to gaining new customers and clients. Consistent and stantdarize the product will help us get there.

* Initial XD file. Left board contains all components the team have.

Goal

Flexibility and professional impression.

I know it will be the infrastructure of the product and never perfect to meet all requirements for the future. After careful thought and discussions with the team, we ultimately arrived agreement that I will have 3 more weeks on establishing the design system. By the design system, we will get：

Efficient on product iteration.
Design system could help the team move fast and focus on product's development.
Professional corporation image.
Deliver a consistent experience that conveyed trust and confidence to potential and current customers.

Process

01. Product anatomy to understand recurring patterns

To a deeper understand the product, I did the product anatomy to learn the UI patterns and core user flows：

Link to Figma

Point out inconsistency patterns:

02. Design Principles

03. Trust the power of Figma

Another decision I made is moving XD file to Figma. Auto layout and variants will help the team to manage components and export code easily.

04. Redefine basic necessities

Typeface - Roboto.
standardize icons to 16pixels. 20pixels.
Core layout and spacing.
Organize recurring components(input fields, buttons, nav system).
Preset auto layout and pop up window.

05. Peer review and hand-off

Figma Liarary

Basic necessities

Grid and Layout

Showcase

Create a left navigation bar is really fast

Changing status indication(variants)

Pop-up window(auto-layout)

Takeaways

You don't need to have everything

Design system is a combination of brand guidelines, UI components/pattern library, voices and tones, process documentations, motion guidelines, accessibility standards, etc. But it varies across companies because the needs of the team are different. As an early stage start-up, I start by investing my time creating a simple version of the design system based on the real needs and share it with my team.

Communicating the value of design system

It was challenging to convince the team to build a design system. They said NO to design system due to the fast iteration and tight deadlines. My experience is gathering information regarding the benefits of design system and share my findings with my team.

Starting point of growing

Working on design system is a both challenging and rewarding experience for me and my team. It requires a great deal of persistence to advocate and develop. This is starting point that will have the potential to drive positive impact for the business.