Flagship
eCommerce platform of Yahoo! Taiwan

Yahoo! Store Marketplace App

Yahoo! Store Marketplace for both iOS and Android is the first app the Yahoo! Taiwan Mobile Team launched. I was honored to be a part of this iconic project, which is Yahoo!’s first eCommerce mobile app. My role started as a visual designer and I was responsible for defining the app’s visual personality during the early concept phase.

My strategy and goal were to fuse the existing Yahoo! design language with a new design based on insights we found from our conversations with users. Later on, I was also responsible for bringing this new design language onto the Android platform and ensuring that the apps followed both iOS and Android’s unique traits while remaining consistent across platforms.

Insight

Inspired and tested by users

Our leadership, business partners and team had high expectations for the first Yahoo! Taiwan flagship app. The priority of the team’s mission was to find the most critical and desirable core functions and then prove our theory with target users. Inspiration came from young people who are on the leading edge of trends and fearless in trying new technologies. It was not only fun but enlightening to learn from their anecdotes, their emerging values, and also from their dressing styles, items in their bags and the decoration styles of their homes. The close and intimate observation fed my creativity and designs.

Principle

Discoverability
Familiarity
Delight

Result

Personalization Screen

Just select some of your favorite categories, and you can see products related to your favorites in the app's home stream afterwards! My strategy was to use inspiring images with corresponding colors to attract users’ attention, and let them linger for a while. Each imagery will fully portray relevant ambience of its category. For example, a fine craftsmanship photo will showcase luxury shoes and bags, a heartwarming family photo will showcase mother and baby products, and a comfortable living photo will showcase home furniture. This is a direct and explicit way to find out the preferences of the users, while producing a design which is visually pleasing without any conflicts.

Surprise Deal

Imagine you are browsing through the Yahoo! Store Marketplace and suddenly a window with rain drops appears in the home stream. You wipe it out of curiosity, and underneath the window with rain drops is a special promotion product for you. That is the way I wanted to introduce the surprise deal. The way a surprise deal shows up will be related to the current weather, time and even location. Users will receive their discount in a fun and interesting interactive way. The way people look at a promotion is now changed! Sweet and surprising!

Behind the Scene

The making of Surprise Deal

Existing research have demonstrated that consumers in Taiwan are motivated by sales promotions. During our research and interviews with our users, we found that they were also overwhelmed with promotions by other eCommerce platforms. Therefore, as we were designing the home stream (i.e. home feed) of the app, we wanted to provide users with a new way to experience promotions.

While brainstorming, we looked to familiar interactions and experiences for inspiration. In the case of the Surprise Deal, the concept of a scratch-off stood out. It's a familiar interaction that has elements of gamification and is exciting and sticky at the same time. After discussions and whiteboarding ideas with my peer interaction designer and product manager, I created a wireflow (a tool that has been helpful in my experience in communicating a sequence of interactions by showing minimal context visually) that represented the user task flow of the Surprise Deal experience. Below is the wireflow.

The Surprise Deal displays randomly in the app's home stream. The visual design would be different based on the time, location, weather, or holiday, etc. For example, on a rainy day, the user would see a window with fog and rain drops that they can wipe off.

The user will be directed to the Surprise deal screen after clicking on the deal in the home stream. There will be a motion graphic to signify how the deal could be revealed.

In the same screen, the promotion content will be revealed by scratching off the top layer. There's a mechanism to determine how big the area has been revealed. The screen will be directed right to the next one once the threshold is reached.

Impact

The future of eCommerce in Taiwan

As the No.1 eCommerce platform in Taiwan, Yahoo! Store Marketplace’s design sets the direction of the industry. After numerous divergences and convergences, the results of this user-centered project are amazing. Since the launch, there are over 6 million total downloads from both iOS and Android system, and the reviews in the iTunes App Store is 4.5. Yahoo! Store Marketplace is still evolving, and has been followed by competitors in the industry.