Y2019-2020
IxD Pattern Solution
beyond the components and pixels
Defined a coherent and extendable IxD Pattern solution, which increased design team efficiency by 300%, reduced development costs by 50%, lowered users’ working memory load, and improved the learnability.
Lead product designer
I led 4 designers and collaborated with our development team to launch this project.
Starting from 2017, I continually iterated and expanded the UX system, this project focuses on the most recent iteration released in 2020.
Context & Problem
5 designers have been working on 6 modules in 2 time zones and collaborating with 2 development teams in 2 cities.
In 2017, I used sketch to create a library containing all the components and page layouts to improve design team efficiency. Due to a lack of scalability, when designers regularly iterated the widgets to support new functions, it was hard to maintain consistency, therefor increasing development cost.
library in Sketch-2017
In 2018, I introduced Ant Design (one of best React UI libraries for enterprises in China) to our team. This system simplified the development process and reduced costs associated with miscommunication between the design and development teams.
In 2019, as we expended our design team from three to five, designers had to spend a lot of time on determining which terms and component we should use and where to place them on the page to maintain consistency. This situation did not just cause unproductive meetings, repetitive work, worse, the more complex functions became, the lower learnability and higher memory load for our users. I realized that this problem was beyond components and layout grids in the Ant Design System.
"I like how the concepts and functions are great, but the system is hard to learn, especially the different operations across different modules " - user feedback
Process
In order to prove valuable knowledge to my team, I read books, attended conferences, and took the interaction design class at SJSU. Besides learning more technical skills, I also focused on how to coach, give constructive feedback, and share knowledge with my team.
WHY
clear goal
HOW
coach & collaboration
WHAT
understand team members & implementation
SO WHAT
Monitor and Evaluate
Visualized Uses' feedback
I directed designers to visually document the problems with our product interaction based on users’ feedback, and we inspected the problems together. This helped designers noticed that users brought up more questions regarding inconsistent usage of terms and interactions.
example: widgets_date selection tool
"do 'clear' and ‘reset' button perform the same action?"
"How can I delete the input in this date selection tool?"
Why: Clear Goal
Design Principles
Datatist Marketing cloud is powered by AI, not only for functions, but also for developing an intelligent, consistent, and holistic user experience through all the modules.
The growth of capabilities is particularly important for our innovate enterprise product, once a foundation of functionality, reliability, and usability are achieved, delight can be pursued.
How: coach & collaboration
To generate potential solutions to the problems caused by the UX inconsistency, I organized a brainstorm session with our design and development teams. I held several coaching and co-design sessions in line with the IxD Pattern Hierarchy.
UX Architecture
includes Sequential, Hierarchical, Hub and Spoke, Matrix and Network
The weakness and strength of the “network” architecture reflects previous insights we learned from users' feedback: we need to lower the working memory load and improve the learnability.
six modules in Datatist Marketing Cloud
(Network Architecture)
Network Architecture_evaluate
IxD language
Grammar is applied across/within: Components, Widgets, Archetypes, Flows and Task contexts.
problem: inconsistent information architecture taxonomy
Solution: We restructured the conceptual model, condensing 25% of actions and 30% of attributes, while also creating a vocabulary dictionary.
Before
Redundancy
After
Condensed
Archetypes
multiple widgets and components
problem: Visually, the Ant Design layout template helped us unify design, but functionally, it could not help designers make consistent decisions on action/object grammar and CTA location.
Solution: We built the grammar grid template using action/object/attribute instead of the general title. With our design team, we tested and kept iterating the grammar grid solution until we could make consistent design decisions more than 95% of the time.
grammar grid template_archetype_menu
Widgets
Components combined into a meaningful whole
We took advantage of Ant Design system's pre-defined widgets. For more user-friendly solutions, we tested with users and iterated better widgets for our product.
example: table filter
option 1: filter menu in columns
pros：direct filled in columns
cons：cannot see the selection directly, user's working memory is short, they easily forget what they filtered.
option 2: click filter icon, expand filters section
pros：save horizontal space, especially most of our users use laptop
cons：need one more click to use filter, inconvenient for some situation users regularly need to use filter.
solution: show high-frequency filters and collapse advanced filters
Most users just need to use two to four filters, so we made these high-frequency filters visible all the time. Although these filters used one row of horizontal space, they satisfied 80% of our users.
Component
Small interactive unit
By using Ant Design components, we created a balanced color theme that matched our branding. We implemented the color theme as a sketch library for the designers' convenience.
problem:
The company’s brand-orange was the only primary color. When it was widely used in buttons, prompts, and charts, it was hard for users to recognize the actions. Seeing the bright color for a long time caused eye fatigue.
solution:
1. I added a complementary color to balance the visuals.
2. In order to approach the ideal color balance for each page, I recommended using more white space and different levels of grey.
3. Brand-orange should be only used for call-to-action buttons and small areas of icons or illustrations, and should not be used in charts.
Visual Design
I created a unique style of icons to present branding. Instead of using png files for icons, we switched to uploading icons to the iconfont tool, which makes it easier for designers to manage icons and is more efficient for developers to use.
I designed Datatist’s logo in 2015. The company’s Chinese brand “Hualong” means when people draw a dragon, it will not be alive until they draw the eyes. Datatist wants to be the eyes of clients by using data intelligently to optimize their business.
So the curved lines inside the D shows the movement of a dragon, and the dot indicates the eye.
Vivid
Brand Colors
Dynamic
shape & Line
Eye
Dot
I created a design style guide with examples and instructions for icon and illustration. I also supervised and regularly checked in with team members to make sure the deliveries are consistent in style.
Key Contour Lines
outline & filled system icons
1024_48px
Line thickness is consistently 72px
Rounded corners
Edges using a 72px radius
Maintains a flat, simple style
Designed by @Luo & Milo
Business icons
1024_64px
Line thickness is consistently 56px
Rounded corners
Edges using a 56px radius
light blue : #75C8FF
dark blue: #004C95
gradient bg: #E6E6E6 - #FFFFFF
Business Icons_Designed by @Yi & Milo
illustration for product landing page
Before
Designed by @Yi
After
Designed by @Milo (Me)
product landing page _ Designed by @Milo (Me)
illustration for Aidison module
Before
Designed by @Meilin
After
Designed by @Meilin
What: understand team members & implementation
During the coach and collaborate process, I identified my team members' specific talents and motives. Hand over tasks and help them who to succeed is important. I managed this project with others paralleled sprints.
Monitor and Evaluate
