I design complex things simple.

Log analytics service

LogLogic Unity is the event processing application for machine data. Log data isn't just for security anymore. Log and machine data is being harnessed to provide insight into IT operational efficiencies.
placeholder

1.0 design

As the UI designer for this project, I have been working closely with IXD to accomplish a great solution for this project. We also set up a good working relationship and process with product team in order to achieve better efficiencies. The visual pattern is the key to make everything goes smoothly and benefits the entire team.
placeholder placeholder
The design of 1.0 was done with a very tight deadline. The goal is about feature completion and refreshing the UI. So at beginning, form PM to design team spent more time on the work flow and the visual design, I tried to make things as organized as possible.
placeholder placeholder placeholder placeholder placeholder

2.0 design

There are 2 main problems we are trying to solve from user's feedback: 1. Spacing and minor interaction(Ease of use). 2.Interaction consistency. Since it is the key piece of Operational group, I need to make sure all proudcts look consistent.In design 2.0, I worked closely with PM to figure out the branding color for the product. I also worked on the interaction for source configuration and search feature. Worked closely with lead engineer and PM to get requirements then design the wireframe.
placeholder placeholder placeholder placeholder placeholder

Interaction redesign

placeholder placeholder placeholder

Visual redesign

placeholder placeholder placeholder placeholder

UI pattern

Although the design has been changed quite a lot, but I still documenting the UI patterns through out the process, such as table style, dropdown, checkbox, etc. So the compoments still stays the same thing while its updating. It saves a lot of time for the current and future re-design process.
placeholder

Salesforce object design

The project is to build a object on both web and mobile for Salesforce, the goal is to create an acurrate pattern search with typeahead, configuration functions.
placeholder
I worked with product team to provide an end to end design solution from interaction to visual design. I have weekly sync-up meeting with the product team and presneted the design which closely attached with the project goal. On the mobile part, I need to communicate with mobile developer to get insight about the Salesforce mobile design knowledge to evaluate whether the design is implementable.
placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder

Office 365 purchase flow

The project is to redesign the purchase flow for office 365 on AT&T Business users. The goal is simplify the work flow and help user customize their plans.
placeholder
I worked closely with VP Product on the interaction part to make sure the design is clear enough before the visual. I designed the wizzard the flow to guide users where they are. Overall, the flow gives users a clean and simple purchase user experience and provides the right information at right time.
placeholder placeholder placeholder placeholder placeholder placeholder placeholder

Desktop application

The project is a PC desktop application for user to launch web apps with "single sign on" feature. Help user organize and manage their favorite apps.
placeholder
Desktop Application for Web Apps
The product name is Catalist which is a play word from "Catalyst" . The landing page basically reflects the concept "Catalyst" with the inking background, the goal is to let user engage with consumer and AppDirect apps together as a tool for daily use, mainly for PC business users.
I worked closely with VP product from interaction to visual design. Worked with creative director to come up the branding. Worked with front-end developer for the impelemetation.
placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder

Final outcome

placeholder

Product infographics

The infographic design is for TIBCO marketing team to demo the product stragetgy, the idea is to show the eco-system of all products.
placeholder
I got requirements from marketing director and worked with art director to come up with the "Subway" concept. The end result is pretty successful to demo the 3groups of TIBCO products in a simple infographics.
placeholder

Fashion app redesign

The project is redesign the branding of the Fashion iPhone app. The app provides a social platform for fashion designers or followers.
placeholder
I worked with the 2 co-founders for this app to figure out the branding and 3 levels of content interaction screens.

"Try It On" App

This project is for parents who want to try on clothes for kids before they physically going to shopping in store.
placeholder
"Try It On" App
Instructor: Greiman, April&Slote, Bob
” Try It On ” – Inspired by ” Purikura ”
In Japan, ” Purikura ” is the moniker of a special type of photo booths that produce photo stickers. Still maintaining huge popularity for girls in Japan, it has spread throughout Australia and East Asia to Taiwan,South Korea, Hong Kong, Philippines, China, Vietnam, and Thailand. To have fun with this contraption , girls get together and take a funny expression photo in the photo sticker machine, then they add some funny graphics around the images by the machines or hand drawing. After applying finishing touches, they share pictures to each other as interesting memories.
I was the UX/UI designer for theis project, I spent hours to gather feedbacks from the target audience to make sure this concept is implementable, so I did serveral rounds of user interview, 90% of user are really interested about this app. The deisgn was shown as a clickable prototype, after several rounds of user testings, the final design was exactly finished with user's expectation.
placeholder placeholder placeholder placeholder placeholder placeholder

Nissan iPad experience

This project was focused on integrating analytics softwares into building the business relationship with Nissan Infiniti.
placeholder
There are 2 major use cases, consumer and sales. I worked closely with director to get the entire story and came up with the storyboard/walkthrough.
The challenge was to make entire user story / flows into visual in 2 weeks. First week, we spent most of time on storyboard, and after several round, we precisely captured what the client want and put into the visual. Client was very satisfied.
placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder

Macy management tool

Macy’s project is to build an iPad app to use in their warehouse management for monitoring inventory status on daily basis.
placeholder
The client need simple UI to fetch the data fast. I drew some sketches/walkthrough to get approve from client and started with the visual directly. It was completed in a week.
placeholder
placeholder
placeholder
placeholder

Data cleansing tool

Clarity Cloud Edition helps you integrate, profile, standardize, and transform data so it is trustworthy, allowing you to use it with confidence to identify trends and make smart decisions quickly.
placeholder
It is offered as a subscription service to provide the flexibility and scalability of the cloud environment.
As the visual designer for the project, I brought the flat design concept to the UI, and it successfully work out.
placeholder placeholder placeholder placeholder placeholder placeholder

Clarity on AWS

placeholder placeholder placeholder

Clarity icon set

placeholder

W&U design studio

“wanted and unwanted” Studio concept emerges from the conception of “Going too far is as bad as not going far enough” from the Buddhism.
placeholder
placeholder
“Wanted and unwanted”emerges from the conception of “Going too far is as bad as not going far enough” from the Buddhism, neither too much nor too little is suitable.“Having done too little or too much” is the reason why so many things are done imperfectly. We should think about how we can well adjust the relationship between too little and too much.It illustrates that it is very important for us to get the so-called “degree”, and also, control is of great significance.And moreover, we should treasure what we have right now and always remember what we should do.
placeholder placeholder
placeholder
placeholder

Activespace landing page

To lift the burden of big data, TIBCO ActiveSpaces provides a distributed in-memory data grid that can increase processing speed so you can reduce reliance on costly transactional system.
placeholder
placeholder
Activespace: activespaces.tibco.com
A high-performance, distributed, persistent, and event-enabled data-grid

Cloud Bus web design

Cloud Bus empowers you to define your own integrations—or use existing integrations—then deploy them in the cloud or on-premises. With Cloud Bus extended connectivity, you can integrate SaaS applications, social networks, and your on-premises applications in real-time.
placeholder
To shorten time-to-value, Cloud Bus offers ready-to-use integration packs that connect customer and order information for popular applications like Salesforce.com, SAP, and tibbr. And because it’s a service deployed in the cloud, Cloud Bus delivers full value without a complex infrastructure.

Yingkuui kids fashion

For moms, their biggest dream is to ensure a good life quality for their children. YINGKUUI realizes their dreams by providing the best quality clothes.
placeholder
The website is responsive. I was the UX/UI designer for designing the website. The challenge was to make sure the site content can be view at crossing platform, I made several rounds of wireframe and paper prototype testing beofore starting on the visual. I spent some time to research the media query to make the site is responsive. I also spent hours to concern the content layout in different screen sizes, so it always providing the good info for users.

The website is quite responsive for it can be easily accessed through any desktop browsers and mobile devices, such as iPhone and iPad, which means young moms can easily get the product information at any time and any places whenever they want.

placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder placeholder

Clarity landing page

The landing page is build for the product Clarity by showing the way of parllax scrolling. The goal is to demo the workflow for user since it is brand new product.

placeholder
placeholder
Clarity landing page: clarity.cloud.tibco.com

Pin design

Pin design for "W&U" Studio. I deisgned the 12 animal cartoon characters along with other types of characters, then printed them on the pins and sold them at designer marketplace.
placeholder
The major part was design a long banner which includes all the funny cartoonish characters. So I start from sketch by designing the characters first, and then put them all into the banner. All the characters are designed into Pins, some of them are designed into T-shirts. The banner also used as the header of the W&U website.
placeholder
placeholder
placeholder

Notebook cover design

The project started with one of my illustration and then printed on the notebook covers.
placeholder
placeholder
placeholder
placeholder
placeholder

Logo design collection

Logo is the heart of branding, it is the first impression of product.
placeholder
placeholder
placeholder

Machine data icon set

The icon set design for machine data, the redesign provides the color and new life to the boring terminology.
placeholder
placeholder

Storyboard Starbucks

The Motion Storyboard for Starbucks, I created 4 frames storyboards in order to show the basic sequences of the motion.
placeholder
placeholder
placeholder
placeholder

Nike Station ID

The goal is to promote the brand identity for the target audience in China, using visual elements are inspired by Chinese art.

The station ID I made for NIKE CHINA. This project includes 3 short pieces for Tennis, Football ( Soccer ) and Basketball respectively, each of which is 10 seconds long.
placeholder
placeholder
placeholder
placeholder
placeholder
placeholder

Yao Ming

The motion piece tells the story of Yao Ming who has overcome numerous obstacles, both on and off the court, to play basketball from the good to the great. A tribute to Yao’s NBA journey.
placeholder
placeholder

Dreamland

The ” Dreamland ” is the place that educates kids what dreams are made of and helps them to express their own dreams.
Dreamland
The motion piece is for the kids fashion website and for the page of ” Dreamland “. The ” Dreamland ” is the place that educates kids what dreams are made of and helps them to express their own dreams. The goal of this feature is to find out what the kids truly want, what they genuinely like, in order to make sure YINKGUUI having a positive interaction with kids.
placeholder
placeholder
placeholder
placeholder

Title Sequence "Red Cliff"

The title sequence is created for the movie ” Red Cliff “, a school work I did in the advacned motion design program.

The goal is trying to reveal the bloodiness of the major battle which happened at Red Cliff 2000 years in China, by using the 2D illustration style with red and black color.
placeholder
placeholder
placeholder
placeholder
placeholder

Title Sequence "Pure"

This motion piece was inspired by the musician, Yan Tiersen.
placeholder
placeholder
placeholder
placeholder

Who has the most followers?

The project is a comparison between 2 micro-blogging sites, Twitter and Sina Weibo.
placeholder
The project is a comparison between 2 micro-blogging sites, Twitter and Sina Weibo. The goal is to let more people know about top-followed celebrities between US and China. In this project, I compared Top 30 famous people from each site, according to the number of followers. User can click people’s name to get more personal information.
Link to Project: www.yingkuui.com/infoFinal
placeholder
placeholder
placeholder

UX Strategy

placeholder
placeholder

She smiles in the rainbow

The design was inspired by a song, and I tried to visualized it in Photoshop.
placeholder

The lost San Francisco

The design practice with Michael Brunsfeld for his Digital Imaging program.
placeholder
This is a cover design for National Geographic Magazine, and I set the issue date in 2120 which can give a more futuristic flavor. The underlying story is that people who live in the year of 2120 discover the lost San Francisco which has sunk to the bottom of the sea at an unknown time.
placeholder
placeholder

My Life, My Dream

The banner design for the kids fashion company, their slogan is ” My Life, My Dream “.
placeholder
placeholder

2 Dreams

The goal of this imaging work is to experiment with the power of channels in the Photoshop. I manipulated the channels of the original landscape view to create a beautiful illusion.
placeholder placeholder

TiltShift effect

The 3 pieces of photos are the landscape I took at the snow mountain called ” Yu Long ” in China. I used the ” Lens Blur ” in the Photoshop to emulate the tilt-shift miniature.
placeholder placeholder placeholder

Cubic Distortion(Tokyo)

Experimenting Photoshop with Cinema 4D to create an intriguing digital imaging.
placeholder
1)I created a sequence of cubes in C4D and rendered out for the Photoshop. I used ” Liquefy ” tool and tweaked the alpha channels of the images of cubes. The goal is to create some abstract shapes to match the serene photo and to form an unconventionally intriguing style.
2)Created a montage by fracturing a scene into many pieces. Select and cut pieces and jump them to a new layer —then ALTER those pieces. Tried distorting them, re-coloring them, overlapping them, re-combining them, changing opacities, then adding drop shadows to separate and get things to PoP!
placeholder

Predestination

A painting to commemorate a special moment in San Francisco station Montgomery.
placeholder placeholder placeholder

Yingkuui ilustration

The illustration that shows the hometown where I grew up. It is Hangzhou which is famous for a Lake named West Lake.
placeholder
placeholder

The bubble girl

The storyboard for describing a battle between bubble girl and machine enemy.
placeholder