InMarKit

Introduction

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.

Duration

6 Months (from 08/2021)

Client

In-house (InMarket)

Team

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

0. Intro 1. Overview 2. Research 3. InMarKit v1 4. InMarKit v2 5. Reflections

1. Overview

Project Brief

👤

User

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

😵‍💫

Problem

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

💡

Solution

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

🎉

Impact

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.

0. Intro 1. Overview 2. Research 3. InMarKit v1 4. InMarKit v2 5. Reflections

2. Research

Background

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.

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.

Requirements

🖥️

SaaS-friendly

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.

👨‍🔧️

Engineer-friendly

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.

📊

Data-friendly

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.

Reference

Ant Design

✅ Data Heavy
✅ For SaaS Platforms
✅ Good Documentation
✅ Customizable
✅ Engineer-friendly

Design Principles

♿

Accessbile

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

🔀

Responsive

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

🆑

Clear

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

0. Intro 1. Overview 2. Research 3. InMarKit v1 4. InMarKit v2 5. Reflections

3. InMarKit v1

InMarKit v1

Work Flow

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

Framework

Ant Design (Figma)

Ant Design was built with Figma, and it has:

Overview Page (Menu)
Individual Pages for Different Categories

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:

Lay out all the categories horizontally for easy navigatation
Set up frames that allow future expansion vertically
Reserve space between categories for future

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.

Approval

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.

Implementation

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?

No!

We evaluated the outcome and came to the conclusion:

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.
The work flow to build from scratch with reference to Ant Design was not as efficient as expected, so we need adjustment.
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.

0. Intro 1. Overview 2. Research 3. InMarKit v1 4. InMarKit v2 5. Reflections

4. InMarKit v2

InMarKit v2

Work Flow

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

How to customize:

1. Theming

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

Example: InMarKit v2 - Switches

2. Adjusting

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

Example: InMarKit v2 - Button with Font Awesome Icon

3. Adding

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

Example: 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

0. Intro 1. Overview 2. Research 3. InMarKit v1 4. InMarKit v2 5. Reflections

5. Reflections

Reflections

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.