loading gif
hero image



With the platform acquisitions over the years and the rising of inconsistent user experience and UI, our UX Director decided that we should have our own design system.

The effort started with a design system from scratch, and ended up with the company's 1st design system โ€œInMarKitโ€ that led to 30% time saving for design prototyping, and 40% time saving for front-end implementation.


6 Months (from 08/2021)


In-house (InMarket)


Designer (Myself), Head of UX, UX Director, Lead Engineer, Other Designers

My Role

Research Reference, Establish Work Flow, Establish/Customize Design System, Establish Best Practice, Create and Update Components / Annotations / Examples, Collaborate with Engineer for Implementation

Project Brief



In-house product design team, and front-end engineer team



InMarket platforms were not consistent in UX/UI design & development.



Design, develop and launch the 1st design system for the InMarket platforms



The design system achieved 30% time saving for prototyping, and 40% time saving for front-end engineering.

Final Solution Demo

InMarKit for Designers

InMarKit for Designers gets released in Figma for the design team to easily reference and use. It's created and maintained by designers with interactive components and detailed documentation.

InMarKit for Engineers

InMarKit for Engineers gets released with Storybook for front-end engineer team to play and reference. It's developed with reference to the InMarKit for Designers, and maintained by the lead engineer.


Over the years, InMarket acquired a few location-based advertising companies along with their SaaS platforms. However, the platforms were drastically different in UX and UI, and the InMarket branding was weak, and thereโ€™s no well-documented design guidelines.

InMarket acquisiions

Problem & User

๐Ÿ˜ตโ€๐Ÿ’ซ Problem

InMarket platforms were not consistent in UX/UI design & development.

๐Ÿ‘ค User

In-house product design team, and front-end engineer team.

How could it work for both teams?

InMarKit would exist in both design doc and code base, thus it could work for both design and development team.

InMarket acquisiions




Most InMarket platforms are B2B SaaS platforms with users typically working with the Internet browsers on computer screens, so the design system should be strong on that.



Itโ€™s important to develop the design system for not only designers but also engineers. In this way, we can achieve huge time savings for product development.



Most InMarket platforms are data-heavy with a lot of lists, charts, and graphs. So itโ€™s important to have a design system thatโ€™s strong in data visualization.


Ant Design

  • โœ… Data Heavy
  • โœ… For SaaS Platforms
  • โœ… Good Documentation
  • โœ… Customizable
  • โœ… Engineer-friendly
Ant design

Design Principles



The design system should be strong in accessibility, and offer good user experience to a variety of users.



The design system should work well on different devices and screen sizes while the focus would be desktop.



The design system should avoid confusion and unneccesary questions, and embrace clear and succinct documentation.

InMarKit v1

Work Flow

InMarKit v1 was inspired by Ant Design, and the work flow was this:

v1 work flow


Ant Design (Figma)

Ant Design was built with Figma, and it has:

  • Overview Page (Menu)
  • Individual Pages for Different Categories
Ant design

InMarKit v1 (Adobe XD)

Our InMarKit v1 was built with Adobe XD, and Adobe XD did not offer pages!!! So I had to lay out the documentation strategically in a single design space:

  1. Lay out all the categories horizontally for easy navigatation
  2. Set up frames that allow future expansion vertically
  3. Reserve space between categories for future
Ant design

Team Feedback

I constantly checked in with the team when designing new components, and made sure that the whole team agreed on the design before I put it into the design system.

team feedback


We had an approval line in the Adobe XD design space, and we put approved content below the line, so that engineers knew what content would be implementation-ready.



We worked very closely with the lead engineer, and lived in the same Slack channel. So we constantly updated and checked in with the engineer for implementation.


Key Decision

Continue the effort?


We evaluated the outcome and came to the conclusion:

  1. The tool Adobe XD had its limitation, and was not sophiticated enough to organize the documentation or complex states, so we decided to switch to Figma.
  2. The work flow to build from scratch with reference to Ant Design was not as efficient as expected, so we need adjustment.
  3. Ant Design was not as well-known as some of the other design systems in the United States.

Exploration of Options

We then tried to explore some other options, and Material Design stood out.

engineer feedback

InMarKit v2

Work Flow

InMarKit v2 was inspired by Design System, and the work flow was simplified like this:

v2 work flow

How to customize:

1. Theming

Theme the design system to InMarket theme (colors, fonts, etc.).

Example: InMarKit v2 - Switches

InMarKit v2 - Switches

2. Adjusting

Adjust components and content to InMarket standard (icons, data formats, etc.)

Example: InMarKit v2 - Button with Font Awesome Icon

InMarKit v2 - Button with Font Awesome Icon

3. Adding

Add InMarket-specific components and content (charts, layout, etc.)

Example: InMarKit v2 - Icon Documentation

InMarKit v2 - Icon Documentation

Launch of InMarKit

Through close collaboration with our lead engineer, our design team released the InMarKit v2 for designers, and the lead engineer released InMarKit v2 for engineers:

InMarKit v2 for Designers

InMarKit v2 for Engineers


Better Research

Spend more time in research before design and development, and stear the team towards Figma and a widely-used design system for reference.

Engage Devs Early

Engage engineers at the very beginning of the development of the design system for valuable engineering input.

Educate the Team

Educate the engineers to collaborate with the designers through Figma earlier in the process, so that the engineers would not be surprised.