DEsign System

2013-2014 @ TIBCO Software

 
 

CONTEXT

The company has dozens of products that were designed by individual design fellows. The lack of consistent design language on products, including interaction and visual style, has been an issue for our user as well as the organization. For user, there is deep learning curve for products that come from the same suite but do not act like one. For the company as well as the UX team, it is not easy to be recognized as a brand when the product does not deliver a consistent experience. Also, the development cost is extremely high when the wheel need to be re-invented every time. 

 
 
 

My role

Although the Design System is a project where all UX team members contributed together to maintain sets of re-usable design elements across the company's products, in the early exploratory stage, I was the first interaction designer who started working on it, responsible for the interaction patterns of the "card" patterns.

There were groups of people I worked closely with on this project: 

  • Different product teams to find out common patterns.

  • Peer designers to get feedback on the patterns I designed.

  • Engineers to prototype, so to present to and test with a broader audience.

  • Director of the UX team to ensure the design fits into the bigger picture of design system.

 
 

Card as a design element

In one of my early projects, different sizes of "cards" were used to represent an entities of information in the system. Through drag & drop, user can easily manipulate the entities and get the job done. 

In discussion with colleagues, we found out the design of cards can be adopted by and improve related products. 

It was also the time when we were inspired by the research done on index card in the design community, like this one.  

So I started designing the interaction patterns around "card". We had peer reviews and critiques for these patterns a few times every week so to make sure the re-usability of these patterns falls into the scopes of different products.

 
 

Pattern examples

 
 
 

Explore more ideas and fun

After the basic behaviors of a "card" had been designed, the UX team members began to contributed creative ideas on how the information can be presented and interact with user. Here are a couple of my explorations:

 
 
 

After all, It's built for the products

Here are a few examples of the released products that adopted the UX pattern library.