yahoo!kimo auction revamp visual concept

Click here to load reader

Post on 21-Oct-2014

1.211 views

Category:

Business

0 download

Embed Size (px)

DESCRIPTION

 

TRANSCRIPT

1

New Marketplace / Auction RevampVisual Concept and Mockup SharingKit UED, June, 2008

AgendaIn the BeginningBasic Information of AuctionVisual BrainstormingVisual SpecMockupsReference

In the BeginningDo you really knowWhats the difference and the relationship between them?

In the BeginningMonday (B2C)A storeComparison shopping(B2C)A mall owning lots of storesEach store has their own front end and backendThis is the situation now we are Auction store(C2C)A storeAuction(C2C)Flea market

In the BeginningMonday (B2C)A storeComparison shopping(B2C)A mall owning lots of storesEach store has their own front end and backendThere are lots of store around, we want to arrange themAuction store(C2C)A storeAuction(C2C)Flea market

In the BeginningWe want to change it to let every property can relate to each other New Marketplace(B2C)Collect many pro-storeAuction store(C2C)Auction(C2C)Flea marketBecomes toNew FeatureY! offer the backend to let sellers manage their store Pro-store(B2C)A StoreNew Featurethe items of pro-store will also be searched in AuctionComparison shopping(B2C)Monday (B2C)A storePhase outThe store inside will become todowngradePhase out

In the BeginningThe new version will beNew Marketplace(B2C)Collect many pro-storeAuction(C2C)Flea marketPro-storethe items of pro-store will also be searched in AuctionPro-storePro-storePro-storePro-storePro-storePro-storePro-storePro-storeMonday (B2C)A store

In the Beginningthe relationship between Auction and NM is..Like sistersNew MarketplaceAuctionThey have similar features, but they are individual

In the BeginningSothe 1st problem show upProducerHow 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 otherProducers Wish

In the BeginningAnd the other problem isProducerWhy did you pick that color? I dont think it can represent Auction! I like another color more.Producers ConfusionEveryone have their own imagination of Auction / NM

In the BeginningVisual BrainstormingBecause 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 AuctionBefore RevampC2C (Fun, bright)After RevampC2C + but also can search B2C items (Fun, bright, trust, various)

Basic Information of AuctionSexmale 48%female 52%

Age20-24 (22.32%)25-29 (18.67%)

OccupationWhite-collar(45.6%)

Visual BrainstormingWhat 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 dont have to be the EC sites

Visual Brainstorming--TaggingGrouping all keywords and make the tag column

Visual Brainstorming--TaggingPicking the top 6 tag, and making the stickers for each of them

Visual Brainstorming--TaggingAfter 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--ScoringAccording to the percentage of the repetitive keywords of the top 6 keywords, we can get the score and the rankingTop 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--ScoringTag:Attract total score=1(score)*1(piece)= 1Plentiful total score=2(score)*2(piece)= 4Easy to close total score=1(score)*1(piece)= 1Clean total score=1(score)*1(piece)= 1Fun total score=2(score)*1(piece)= 2Total Score=9

Visual Brainstorming--Mockup analyzing

Visual Brainstorming--Mockup analyzingButDo these mockups own whole characteristics of the 6 tags we picked

Visual Brainstorming--Mockup analyzingFun (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)Easy to close (1 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.

Visual Brainstorming--Mockup analyzingFun (3 piece)Attract (1 piece)Plentiful (4 piece)Easy to close (2 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 listFun (2 piece)Attract (2 piece)Plentiful (2 piece)Easy to close (2 piece)Clean (2 piece)

Visual Brainstorming--Mockup analyzingHoweversome mockups which fail to chosen still have chance to be picked again at this moment.

Visual Brainstorming--Mockup analyzingThese 2 mockups own many types of tags and get high scores, so we decide to pick them up for referenceFun (1 piece)Attract (1 piece)Plentiful (2 piece)Easy to close (1 piece)Clean (1 piece)Fun (1 piece)Attract (2 piece)Easy to close (1 piece)Clean (2 piece)Trust (1 piece)

Visual Brainstorming--Mockup analyzingTOP 1: dcx Tag:Attract (1piece)Plentiful (4piece)Easy to close (2piece)Clean (1piece)Fun (3piece) Design element:Bright color (green, orange)Rounded corner modulePictures are keyed out the backgroundThe typography is clean

Visual Brainstorming-- Mockup analyzingTOP 2: STORY SHOPTag:Attract (2piece)Plentiful (1piece)Easy to close (2piece)Clean (2piece)Fun (2piece) Design Element:Warm color (yellow, green, orange)Rounded corner modulePictures are keyed out the backgroundIllustrationThe typography is clean

Visual Brainstorming-- Mockup analyzingReference: ICHIBA Tag:Attract (1piece)Plentiful (2piece)Easy to close (1piece)Clean (1piece)Fun (1piece)

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

Visual Brainstorming-- Mockup analyzingReference: megashopping Tag:Attract (2piece)Easy to close (1piece)Clean (2piece)Fun (1piece) (1piece)

Design Element:Bright color (yellow, green)IllustrationThe typography is cleanRounded corner module

Visual Brainstorming-- Mockup analyzing#FFEB63Code ColorYellowFun, Plentiful#FECB45Secondary Color Green Trust, CleanNeutral Color

Visual Brainstorming Visual SpecRounded Corner moduleBright and clean typographyPictures are keyed out the background (Hard)Illustration

Visual Brainstorming Mockup

Visual Brainstorming MockupRounded CornerYellowGreenIllustration

Visual Brainstorming Visual SpecAnd then, about NMBefore starting to work, I try to find the different and the same parts between Auction and NM.

Visual Brainstorming Visual SpecSame partShopping siteLots of items

Different partAuction (C2C): the standard of owning a store is easierNM(B2C): the standard is higher, suppose to be safer than Auction

Visual Brainstorming Visual SpecSame partShopping siteLots of items

Different partAuction (C2C): the standard of owning a store is easierNM(B2C): the standard and the service is higher, suppose to be safer than Auction

PlentifulTrustHigh-Class

Visual Brainstorming Visual Spec#FFEB63YellowFun, Plentiful#FECB45Green Trust, CleanThe original color system is OK for NM

Visual Brainstorming Visual Spec#FFEB63YellowTo 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)#FECB45Dark Yellow

Visual Brainstorming Mockup

Visual Brainstorming MockupYellowGreenGreenDark Yellow

Visual Brainstorming MockupThe texture is harder and shiny High-ClassThe texture is softer , and the corner is rounded Cute and easy to close

Visual Brainstorming MockupUse several same elements to sync two mockupsEx: smooth lines to be the frame of modules

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

Visual Brainstorming MockupOf course we can see the same design in the inside page of NMPro-store (Backend)Pro-store (Front page)

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

ReferenceAuction 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-storePages: 217 pages (Front end*90, Back end*127)

[email protected]