Yahoo!Kimo Auction Revamp Visual Concept

New Marketplace / Auction Revamp

Visual Concept and Mockup SharingKit UED, June, 2008

Agenda

• In the Beginning• Basic Information of Auction• Visual Brainstorming• Visual Spec• Mockups• Reference

In the Beginning

Do you really know…What’s the difference and the relationship between them?

In the Beginning

Monday (B2C)A store

Comparison shopping(B2C)A mall owning lots of stores

Each store has their own front end and backend

This is the situation now we are

Auction store(C2C)A store

Auction(C2C)Flea market

In the Beginning

Monday (B2C)A store

Comparison shopping(B2C)A mall owning lots of stores

Each store has their own front end and backend

There are lots of store around, we want to arrange them

Auction store(C2C)A store


In the Beginning

We want to change it to let every property can relate to each other

New Marketplace(B2C)Collect many pro-store

Auction store(C2C)


Becomes to

New FeatureY! offer the backend to let sellers manage their store

Pro-store(B2C)A Store

New Featurethe items of pro-store will also be searched in Auction

Comparison shopping(B2C)Monday (B2C)

A store

Phase out

The store inside will become to…

downgrade

Phase out

In the Beginning

The new version will be…

New Marketplace(B2C)Collect many pro-store


Pro-store

the items of pro-store will also be searched in Auction Pro-store

Pro-store Pro-store

Pro-store

Pro-store Pro-store

Pro-store

Pro-store

Monday (B2C)A store

In the Beginning

the relationship between Auction and NM is…..

Like sisters

New MarketplaceAuction

They have similar features, but they are individual

In the Beginning

So…the 1st problem show up

Producer

How to design 2 site to let them looks similar but not same(What am I talking about?)

When people visit these 2 sites, they should find they are different but feel they relate to each other

Producer’s Wish

In the Beginning

And the other problem is…

Producer

Why did you pick that color? I don’t think it can represent Auction! I like another color more….

Producer’s Confusion

Everyone have their own imagination of Auction / NM

In the Beginning

Visual Brainstorming Because Auction and NM are sisters, I

decide to make Auction revamp first. Basing on the result, I can adjust some visual spec to create the other new site (NM)

Basic Information of Auction

• Before Revamp– C2C

(Fun, bright)

• After Revamp– C2C + but also can search B2C items

(Fun, bright, trust, various)

Basic Information of Auction

• Sex– male 48%

– female 52%

• Age– 20-24 (22.32%)

– 25-29 (18.67%)

• Occupation– White-collar(45.6%)

Visual Brainstorming

• What should the Auction site looks like in your mind? Use some keywords to describe it.

• According to the keywords, explore several websites which are fit for these keywords.

• Tips1: the keywords should be adjective

• Tips2: the websites don’t have to be the EC sites

Visual Brainstorming--Tagging

Grouping all keywords and make the tag column


Picking the top 6 tag, and making the stickers for each of them


After checking each mockup, if you find the characteristic of any mockup fitting for the keyword on your hand, paste the sticker on the mockup.

Visual Brainstorming--Scoring

• According to the percentage of the repetitive keywords of the top 6 keywords, we can get the score and the ranking– Top 1: Fun 活潑有趣 (2 分 )

– Top 2: Plentiful 豐富 (2 分 )

– Top 3: Trust 可信賴 (1 分 )

– Top 4: Attract 吸引人 (1 分 )

– Top 5: Clean 清爽 (1 分 )

– Top 6: Easy to close 容易親近 (1 分 )

• Calculate the total score of each mockup, and pick the mockups which get score higher than 10

Visual Brainstorming--Scoring

– Tag:• Attract 吸引人

total score=1(score)*1(piece)= 1• Plentiful 豐富

total score=2(score)*2(piece)= 4• Easy to close 容易親近

total score=1(score)*1(piece)= 1• Clean 清爽

total score=1(score)*1(piece)= 1• Fun 活潑有趣

total score=2(score)*1(piece)= 2

Total Score=9

Visual Brainstorming--Mockup analyzing


But…Do these mockups own whole characteristics of the 6 tags we picked


Fun (3 piece)

Attract (1 piece)

Plentiful (3 piece)

Easy to close (1 piece)

Plentiful (5 piece)

Fun (3 piece)

Attract (2 piece)

Clean (2 piece)

Fun (3 piece)

Attract (5 piece)


The types and amounts of these 4 mockups are extreme. We decide to kick them out to avoid ignoring or emphasizing some tags too much.


Fun (3 piece)

Attract (1 piece)

Plentiful (4 piece)


Clean (1 piece)

No matter types of tags and scores of the top 2 mockups are very high, so we decide to put them in the final list

Fun (2 piece)

Attract (2 piece)

Plentiful (2 piece)


Clean (2 piece)


However…some mockups which fail to chosen still have chance to be picked again at this moment.


These 2 mockups own many types of tags and get high scores, so we decide to pick them up for reference

Fun (1 piece)

Attract (1 piece)

Plentiful (2 piece)


Clean (1 piece)

Fun (1 piece)

Attract (2 piece)


Clean (2 piece)

Trust (1 piece)


• TOP 1: dcx – Tag:

• Attract 吸引人 (1piece)

• Plentiful 豐富 (4piece)

• Easy to close 容易親近 (2piece)

• Clean 清爽 (1piece)

• Fun 活潑有趣 (3piece)

– Design element:• Bright color (green, orange)• Rounded corner module• Pictures are keyed out the

background• The typography is clean

Visual Brainstorming-- Mockup analyzing

• TOP 2: STORY SHOP– Tag:






– Design Element:• Warm color (yellow, green,

orange)• Rounded corner module• Pictures are keyed out the

background• Illustration• The typography is clean


• Reference: 樂天 ICHIBA – Tag:






– Design Element:• Alive color (red, green)• Items are listing, easy to read


• Reference: megashopping – Tag:





• 可信賴的 (1piece)

– Design Element:• Bright color (yellow, green)• Illustration• The typography is clean• Rounded corner module


#FFEB63

Code Color

YellowFun, Plentiful

#FECB45

Secondary ColorGreenTrust, Clean

Neutral Color

Visual Brainstorming– Visual Spec

• Rounded Corner module• Bright and clean typography• Pictures are keyed out the background (Hard)• Illustration

Visual Brainstorming– Mockup


Rounded Corner

Yellow

Green

Illustration


And then, about NM…Before starting to work, I try to find the different and the same parts between Auction and NM.


• Same part– Shopping site

– Lots of items

• Different part– Auction (C2C):

the standard of owning a store is easier

– NM(B2C): the standard is higher, suppose to be safer than Auction


• Same part– Shopping site

– Lots of items

• Different part– Auction (C2C):

the standard of owning a store is easier

– NM(B2C): the standard and the service is higher, suppose to be safer than Auction

Plentiful

TrustHigh-Class


#FFEB63

YellowFun, Plentiful

#FECB45

GreenTrust, Clean

The original color system is OK for NM


#FFEB63

Yellow

To present the feeling of high-level, I decide to enhance the hue of yellow.

Changing the code color a little bit can not only change the quality feeling immediately, but also keep the relationship of color of two property (because they are still yellow)

#FECB45

Dark Yellow



Yellow

Green

Green

Dark Yellow


The texture is harder and shiny High-Class

The texture is softer , and the corner is rounded Cute and easy to close


Use several same elements to sync two mockupsEx: smooth lines to be the frame of modules


Use several same elements to sync two mockupsEx: similar design to represent the same module in different mockups


Of course we can see the same design in the inside page of NM

Pro-store (Backend)

Pro-store (Front page)


Clear direction to connect 2 propertyEx: put the same place (the top right part) and use the same color

Reference

• Auction HP Revamp – Pages: 6 pages (HP*1, Category main page* 2, AD page *3)

• New Marketplace – Pages: 13 pages (HP*1, Category main/leaf page* 4, SRP *6, Others*2)

• Pro-store– Pages: 217 pages (Front end*90, Back end*127)

Thanks!

[email protected]

Business

Yahoo!Kimo Auction Revamp Visual Concept