Premium shopping experience with a Yahoo signature

Yahoo! Shopping App for Android

Based on the success of the Yahoo! Store Marketplace App, I was chosen to help define the visual personality of the Yahoo! Shopping app, a Yahoo! branded eCommerce platform. I was tasked with redesigning the Category and Multiple Item screens, the most frequently-used screens of the app.

Besides designing the user experience of the screens, I was also responsible for transforming the brand visual of the screens to cater to both a higher-end target audience and those that are sensitive to fashion trends.

Insight

Always ahead with thoughtful elements for users

We carefully selected users who were highly sensitive to current fashion trends. We then observed and interviewed them. During the process, we noticed that users liked to see the product stream customized to their preferences, but at the same time pay attention to what's in trend. They hope we can fully understand what they like and recommend products thoughtfully at appropriate times. Their shopping behavior is also inspired by people or events around them. These unique targeted users wanted to be inspired from the outside and feel fulfilled from the inside, and at the same time feel thoughtfully in every way.

Principle

Inspire
Desire
Care
Respond

Result

Category Screen

I always wonder what are the factors to attract people's attention when they pass a window display of a department store? I wanted the category screen to showcase products in desirable ways, just like a department store window display does. To make the screen eye catching, I didn't want the screen to be loud and over-decorated, but to create emotion with basic elements, to bring out the quality and special trait of the products. The design was applied a diagonal element to shatter the frame, and create sense of space. The result was to allow the elements in a page to exist on a non-horizontal plane, but still easy for users to consume and be wowed at the same time.

Multiple Item Screen

Discounts are always attractive but also numbing to consumers. To consumers in Asia, who are used to seeing endless loud sale signage on the street, any discount detail has to be screaming in order to be seen. This market ambience became a challenge while designing MIS, which is creating a pattern that came from rational logic to help consumers to select and combine their desirable products in effortless ways and to keep the shopaholics emotionally satisfied.

Behind the Scene

The making of the Multiple Item screen

Conditional promotions based on the amount of items a user had in their cart was a popular type of promotion at Yahoo! Although it was a long-existing feature on the web version of Yahoo! Shopping and have historically performed well, we found that users struggled with understanding the terms of the promotions and had difficulties with the experience that enables them to add promotional items into their carts. Thus, I was given the opportunity to revamp the experience.

I started tackling the problem by understanding the flow of the user, the actions they were taking, and the steps where they were getting stuck. I came up with design solutions based on three principles: using signifiers to inform users, being consistent to create a sense of control, and providing delightful elements to appeal to positive user emotions. Below is a visual that demonstrates these principles.

Delight

The button for adding an item is animated when it's pressed. The visual feedback is hoping to achieve a positive emotional affect.

Impact

Quick delivery without compromise

Following the user-centered development process and structure of the Yahoo! Store Marketplace App, Yahoo! Shopping App only took a quarter to design and develop. There are over 4 million downloads to date. After the app launched, the number of browses, buyers and sales reached a record high. This was a major milestone for an eCommerce platform from Yahoo!. We built a carefully selected and exclusive shopping experience with a chic and tasteful aesthetic.