Year

2021

 

Type

Design Engineering

Machine Learning

Design System

Year

2021

 

Type

Design Engineering

Machine Learning

Design System

DesignHive - Intelligent Design System

As we believe different customer would have different preference on the interface design and information perception, we use machine learning to train model on providing the preferred UI to each customer. During the past years, the team has built up strong capability of personalized UI within Taobao guided-shopping channels. However, to scale this up, our bottleneck was mainly from the design supply side. As the design itself was still provided by designers manually, it is tedious and impossible to come up with a lot of different design solutions for all the channels and pages and modules.

Thus, I initiated the project DesignHive as PM role, to create an intelligent design bot to minimize the manual work of designing different UIs.

Competitor Analysis

There are many products help users create graphic designs by selecting templates and inputting parameters. However, not many products use machine learning to generate designs within UI/UX domain. In Industry Design, there is 3DGAN model that generates 3D designs, and in Architecture there is ArchiGAN generating in-building layout designs. Within UI design, the only similar product I found is Salesforce's Einstein Designer. Meanwhile there are a few major differences between this product and our scope:

  1. Salesforce is a seller tool to enable SME creating their online shops, while our application within Taobao is a platform where sellers can join campaigns to get exposure in guided shopping channels. The user group is different -Salesforce's users are seller, our user currently are company's internal designers - our colleagues who design the platform shopping channels.
  2. The way how customers perceive information is hugely different. The Chinese customers are used to higher density of information comparing to western. There is unique pattern when we design for Chinese e-commerce - displaying key information within fewer screens, lively & busy campaign atmosphere, using attractive product images according to the category, etc. Thus, our algorithm model, actually, is much more complex that deals with much thicker layer of data.
Frame 1

Core System Interaction

IUI-1

The main function of DesignHive is to generate UI solutions for the online decision-making algorithm. I designed the entire system architecture from platform scope - it should be able to be used by different APPs within the company organization, as well as different business domains within each APP.

It embeds a design token library for different APPs to have consistent design system naming method. On the APP level, global design system is defined to make constraints for the design algorithm - what's the range for a border radius to vary? How much should a header size increase by each step?

Then on the business domain level, each product designer gets to apply those guidelines and generate many different UI solutions.

On the other hand, the online performance will tell the design teams about the best practices and look into detailed design analysis by data tracking.

Roadmap Planning

1

First phase MVP

The first phase is to test if the loop 'setup style → generate design → online personalized algorithm' works between different systems.

 

 

First phase MVP

The first phase is to test if the loop 'setup style → generate design → online personalized algorithm' works between different systems. 


2

UI generation

As we already tested design asset generation by setting up variable styles, we then combined design assets with module layout options to generate complete UI solution.

UI generation

As we already tested design asset generation by setting up variable styles, we then combined design assets with module layout options to generate complete UI solution.


3

Design Token System

The previous pilot phases didn't well utilized design token everywhere, so there were limitations of generating UI under design system constraints. On the other hand, the cost of inputting variable constraints of design assets and layouts is a bit high. That's why we decided to embed the concept of design token in each level:

A. a standard token naming system for each application

B. APP design system teams can customize the token value as they need

C. Different business domain designers can inherit the APP & global tokens as well as modify their own global token values

In this way, the algorithm is able to understand the design-oriented features - as tokens have semantic meaning within itself. Therefore, the algorithm can continuously iterate according to the online performance.

Product Design & Development

As this is a initiative project, I also did the product design & development for illustration and demo purpose.

The primary user roles are Design System (DS) Crew and Domain Product Designers. 

DS crew is responsible for managing APP global design guidelines as well as managing general design assets. Domain product designers will follow the variable design system and make their own intelligent UI solutions.

IUI-6

Homepage Design & Development

Outcome

The whole idea is to composite variable design assets under the DS constraints. We utilize machine learning and algorithms to filter the most fit solutions within power-squared cases. Thus, the final output is usable, well considered design principles, and made for personalization in atomic level.

IUI-4
智能建场demo