New Marketplace / Auction Revamp Visual Concept and Mockup Sharing Kit UED, June, 2008
Agenda <ul><li>In the Beginning </li></ul><ul><li>Basic Information of Auction </li></ul><ul><li>Visual Brainstorming </li...
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...
In the Beginning Monday (B2C) A store Comparison shopping(B2C) A mall owning lots of stores Each store has their own front...
In the Beginning We want to change it to let every property can relate to each other  New Marketplace(B2C) Collect many pr...
In the Beginning The new version will be… New Marketplace(B2C) Collect many pro-store Auction(C2C) Flea market Pro-store t...
In the Beginning the relationship between Auction and NM is….. Like sisters New Marketplace Auction They have similar feat...
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 ...
In the Beginning And the other problem is… Producer Why did you pick that color? I don’t think it can represent Auction! I...
In the Beginning Visual  Brainstorming Because Auction and NM are sisters, I decide to make Auction revamp first. Basing o...
Basic Information of Auction <ul><li>Before Revamp </li></ul><ul><ul><li>C2C  (Fun, bright) </li></ul></ul><ul><li>After R...
Basic Information of Auction <ul><li>Sex </li></ul><ul><ul><li>male 48% </li></ul></ul><ul><ul><li>female 52% </li></ul></...
Visual Brainstorming <ul><li>What should the Auction site  looks  like in your mind? Use some keywords to describe it. </l...
Visual Brainstorming--Tagging Grouping all keywords and make the tag column
Visual Brainstorming--Tagging Picking the top 6 tag, and making the stickers for each of them
Visual Brainstorming--Tagging After checking each mockup, if you find the characteristic of any mockup fitting for the key...
Visual Brainstorming--Scoring <ul><li>According to the percentage of the repetitive keywords of the top 6 keywords, we can...
Visual Brainstorming--Scoring <ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract  吸引人   total score=1(score)*1(piece)...
Visual Brainstorming--Mockup analyzing
Visual Brainstorming--Mockup analyzing But… Do these mockups own whole characteristics of the 6 tags we picked
Visual Brainstorming--Mockup analyzing Fun  (3 piece) Attract  (1 piece) Plentiful  (3 piece) Easy to close  (1 piece) Ple...
Visual Brainstorming--Mockup analyzing Fun  (3 piece) Attract  (1 piece) Plentiful  (4 piece) Easy to close  (2 piece) Cle...
Visual Brainstorming--Mockup analyzing However… some mockups which fail to chosen still have chance to be picked again at ...
Visual Brainstorming--Mockup analyzing These 2 mockups own many types of tags and get high scores, so we decide to pick th...
Visual Brainstorming--Mockup analyzing <ul><li>TOP 1:  dcx   </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Att...
Visual Brainstorming-- Mockup analyzing <ul><li>TOP 2:  STORY SHOP </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><...
Visual Brainstorming-- Mockup analyzing <ul><li>Reference:  樂天  ICHIBA  </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul>...
Visual Brainstorming-- Mockup analyzing <ul><li>Reference:  megashopping   </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><...
Visual Brainstorming-- Mockup analyzing # FFEB63 Code Color Yellow Fun, Plentiful #FECB45 Secondary Color Green Trust, Cle...
Visual Brainstorming– Visual Spec <ul><li>Rounded Corner module </li></ul><ul><li>Bright and clean typography </li></ul><u...
Visual Brainstorming– Mockup
Visual Brainstorming– Mockup Rounded Corner Yellow Green Illustration
Visual Brainstorming– Visual Spec And then, about NM… Before starting to work, I try to find the different and the same pa...
Visual Brainstorming– Visual Spec <ul><li>Same part </li></ul><ul><ul><li>Shopping site </li></ul></ul><ul><ul><li>Lots of...
Visual Brainstorming– Visual Spec <ul><li>Same part </li></ul><ul><ul><li>Shopping site </li></ul></ul><ul><ul><li>Lots of...
Visual Brainstorming– Visual Spec # FFEB63 Yellow Fun, Plentiful #FECB45 Green Trust, Clean The original color system is O...
Visual Brainstorming– Visual Spec # FFEB63 Yellow To present the feeling of high-level, I decide to enhance the hue of yel...
Visual Brainstorming– Mockup
Visual Brainstorming– Mockup Yellow Green Green Dark Yellow
Visual Brainstorming– Mockup The texture is harder and shiny    High-Class The texture is softer , and the corner is roun...
Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: smooth lines to be the frame of modules
Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: similar  design to represent the same modul...
Visual Brainstorming– Mockup Of course we can see the same design in the inside page of NM Pro-store (Backend) Pro-store (...
Visual Brainstorming– Mockup Clear direction to connect 2 property Ex: put the same place (the top right part) and use the...
Reference <ul><li>Auction HP Revamp  </li></ul><ul><ul><li>Pages: 6 pages  (HP*1, Category main page* 2, AD page *3) </li>...
Thanks! [email_address]
Upcoming SlideShare
Loading in …5
×

Yahoo!Kimo Auction Revamp Visual Concept

928 views

Published on

Published in: Business, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
928
On SlideShare
0
From Embeds
0
Number of Embeds
186
Actions
Shares
0
Downloads
17
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Yahoo!Kimo Auction Revamp Visual Concept

  1. 1. New Marketplace / Auction Revamp Visual Concept and Mockup Sharing Kit UED, June, 2008
  2. 2. Agenda <ul><li>In the Beginning </li></ul><ul><li>Basic Information of Auction </li></ul><ul><li>Visual Brainstorming </li></ul><ul><li>Visual Spec </li></ul><ul><li>Mockups </li></ul><ul><li>Reference </li></ul>
  3. 3. In the Beginning Do you really know… What’s the difference and the relationship between them?
  4. 4. 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
  5. 5. 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 Auction(C2C) Flea market
  6. 6. 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) Auction(C2C) Flea market Becomes to New Feature Y! offer the backend to let sellers manage their store Pro-store(B2C) A Store New Feature the 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
  7. 7. In the Beginning The new version will be… New Marketplace(B2C) Collect many pro-store Auction(C2C) Flea market 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
  8. 8. In the Beginning the relationship between Auction and NM is….. Like sisters New Marketplace Auction They have similar features, but they are individual
  9. 9. 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
  10. 10. 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
  11. 11. 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)
  12. 12. Basic Information of Auction <ul><li>Before Revamp </li></ul><ul><ul><li>C2C (Fun, bright) </li></ul></ul><ul><li>After Revamp </li></ul><ul><ul><li>C2C + but also can search B2C items (Fun, bright, trust, various) </li></ul></ul>
  13. 13. Basic Information of Auction <ul><li>Sex </li></ul><ul><ul><li>male 48% </li></ul></ul><ul><ul><li>female 52% </li></ul></ul><ul><li>Age </li></ul><ul><ul><li>20-24 (22.32%) </li></ul></ul><ul><ul><li>25-29 (18.67%) </li></ul></ul><ul><li>Occupation </li></ul><ul><ul><li>White-collar(45.6%) </li></ul></ul>
  14. 14. Visual Brainstorming <ul><li>What should the Auction site looks like in your mind? Use some keywords to describe it. </li></ul><ul><li>According to the keywords, explore several websites which are fit for these keywords. </li></ul><ul><li>Tips1: the keywords should be adjective </li></ul><ul><li>Tips2: the websites don’t have to be the EC sites </li></ul>
  15. 15. Visual Brainstorming--Tagging Grouping all keywords and make the tag column
  16. 16. Visual Brainstorming--Tagging Picking the top 6 tag, and making the stickers for each of them
  17. 17. Visual Brainstorming--Tagging 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.
  18. 18. Visual Brainstorming--Scoring <ul><li>According to the percentage of the repetitive keywords of the top 6 keywords, we can get the score and the ranking </li></ul><ul><ul><li>Top 1: Fun 活潑有趣 (2 分 ) </li></ul></ul><ul><ul><li>Top 2: Plentiful 豐富 (2 分 ) </li></ul></ul><ul><ul><li>Top 3: Trust 可信賴 (1 分 ) </li></ul></ul><ul><ul><li>Top 4: Attract 吸引人 (1 分 ) </li></ul></ul><ul><ul><li>Top 5: Clean 清爽 (1 分 ) </li></ul></ul><ul><ul><li>Top 6: Easy to close 容易親近 (1 分 ) </li></ul></ul><ul><li>Calculate the total score of each mockup, and pick the mockups which get score higher than 10 </li></ul>
  19. 19. Visual Brainstorming--Scoring <ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract 吸引人 total score=1(score)*1(piece)= 1 </li></ul></ul></ul><ul><ul><ul><li>Plentiful 豐富 total score=2(score)*2(piece)= 4 </li></ul></ul></ul><ul><ul><ul><li>Easy to close 容易親近 total score=1(score)*1(piece)= 1 </li></ul></ul></ul><ul><ul><ul><li>Clean 清爽 total score=1(score)*1(piece)= 1 </li></ul></ul></ul><ul><ul><ul><li>Fun 活潑有趣 total score=2(score)*1(piece)= 2 </li></ul></ul></ul>Total Score=9
  20. 20. Visual Brainstorming--Mockup analyzing
  21. 21. Visual Brainstorming--Mockup analyzing But… Do these mockups own whole characteristics of the 6 tags we picked
  22. 22. Visual Brainstorming--Mockup analyzing 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) 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.
  23. 23. Visual Brainstorming--Mockup analyzing Fun (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 list Fun (2 piece) Attract (2 piece) Plentiful (2 piece) Easy to close (2 piece) Clean (2 piece)
  24. 24. Visual Brainstorming--Mockup analyzing However… some mockups which fail to chosen still have chance to be picked again at this moment.
  25. 25. Visual Brainstorming--Mockup analyzing 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) 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)
  26. 26. Visual Brainstorming--Mockup analyzing <ul><li>TOP 1: dcx </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract 吸引人 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Plentiful 豐富 (4piece) </li></ul></ul></ul><ul><ul><ul><li>Easy to close 容易親近 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Clean 清爽 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Fun 活潑有趣 (3piece) </li></ul></ul></ul><ul><ul><li>Design element: </li></ul></ul><ul><ul><ul><li>Bright color (green, orange) </li></ul></ul></ul><ul><ul><ul><li>Rounded corner module </li></ul></ul></ul><ul><ul><ul><li>Pictures are keyed out the background </li></ul></ul></ul><ul><ul><ul><li>The typography is clean </li></ul></ul></ul>
  27. 27. Visual Brainstorming-- Mockup analyzing <ul><li>TOP 2: STORY SHOP </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract 吸引人 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Plentiful 豐富 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Easy to close 容易親近 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Clean 清爽 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Fun 活潑有趣 (2piece) </li></ul></ul></ul><ul><ul><li>Design Element: </li></ul></ul><ul><ul><ul><li>Warm color (yellow, green, orange) </li></ul></ul></ul><ul><ul><ul><li>Rounded corner module </li></ul></ul></ul><ul><ul><ul><li>Pictures are keyed out the background </li></ul></ul></ul><ul><ul><ul><li>Illustration </li></ul></ul></ul><ul><ul><ul><li>The typography is clean </li></ul></ul></ul>
  28. 28. Visual Brainstorming-- Mockup analyzing <ul><li>Reference: 樂天 ICHIBA </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract 吸引人 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Plentiful 豐富 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Easy to close 容易親近 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Clean 清爽 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Fun 活潑有趣 (1piece) </li></ul></ul></ul><ul><ul><li>Design Element: </li></ul></ul><ul><ul><ul><li>Alive color (red, green) </li></ul></ul></ul><ul><ul><ul><li>Items are listing, easy to read </li></ul></ul></ul>
  29. 29. Visual Brainstorming-- Mockup analyzing <ul><li>Reference: megashopping </li></ul><ul><ul><li>Tag: </li></ul></ul><ul><ul><ul><li>Attract 吸引人 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Easy to close 容易親近 (1piece) </li></ul></ul></ul><ul><ul><ul><li>Clean 清爽 (2piece) </li></ul></ul></ul><ul><ul><ul><li>Fun 活潑有趣 (1piece) </li></ul></ul></ul><ul><ul><ul><li>可信賴的 (1piece) </li></ul></ul></ul><ul><ul><li>Design Element: </li></ul></ul><ul><ul><ul><li>Bright color (yellow, green) </li></ul></ul></ul><ul><ul><ul><li>Illustration </li></ul></ul></ul><ul><ul><ul><li>The typography is clean </li></ul></ul></ul><ul><ul><ul><li>Rounded corner module </li></ul></ul></ul>
  30. 30. Visual Brainstorming-- Mockup analyzing # FFEB63 Code Color Yellow Fun, Plentiful #FECB45 Secondary Color Green Trust, Clean Neutral Color
  31. 31. Visual Brainstorming– Visual Spec <ul><li>Rounded Corner module </li></ul><ul><li>Bright and clean typography </li></ul><ul><li>Pictures are keyed out the background (Hard) </li></ul><ul><li>Illustration </li></ul>
  32. 32. Visual Brainstorming– Mockup
  33. 33. Visual Brainstorming– Mockup Rounded Corner Yellow Green Illustration
  34. 34. Visual Brainstorming– Visual Spec And then, about NM… Before starting to work, I try to find the different and the same parts between Auction and NM.
  35. 35. Visual Brainstorming– Visual Spec <ul><li>Same part </li></ul><ul><ul><li>Shopping site </li></ul></ul><ul><ul><li>Lots of items </li></ul></ul><ul><li>Different part </li></ul><ul><ul><li>Auction (C2C): the standard of owning a store is easier </li></ul></ul><ul><ul><li>NM(B2C): the standard is higher, suppose to be safer than Auction </li></ul></ul>
  36. 36. Visual Brainstorming– Visual Spec <ul><li>Same part </li></ul><ul><ul><li>Shopping site </li></ul></ul><ul><ul><li>Lots of items </li></ul></ul><ul><li>Different part </li></ul><ul><ul><li>Auction (C2C): the standard of owning a store is easier </li></ul></ul><ul><ul><li>NM(B2C): the standard and the service is higher, suppose to be safer than Auction </li></ul></ul>Plentiful Trust High-Class
  37. 37. Visual Brainstorming– Visual Spec # FFEB63 Yellow Fun, Plentiful #FECB45 Green Trust, Clean The original color system is OK for NM
  38. 38. Visual Brainstorming– Visual Spec # 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
  39. 39. Visual Brainstorming– Mockup
  40. 40. Visual Brainstorming– Mockup Yellow Green Green Dark Yellow
  41. 41. Visual Brainstorming– Mockup The texture is harder and shiny  High-Class The texture is softer , and the corner is rounded  Cute and easy to close
  42. 42. Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: smooth lines to be the frame of modules
  43. 43. Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: similar design to represent the same module in different mockups
  44. 44. Visual Brainstorming– Mockup Of course we can see the same design in the inside page of NM Pro-store (Backend) Pro-store (Front page)
  45. 45. Visual Brainstorming– Mockup Clear direction to connect 2 property Ex: put the same place (the top right part) and use the same color
  46. 46. Reference <ul><li>Auction HP Revamp </li></ul><ul><ul><li>Pages: 6 pages (HP*1, Category main page* 2, AD page *3) </li></ul></ul><ul><li>New Marketplace </li></ul><ul><ul><li>Pages: 13 pages (HP*1, Category main/leaf page* 4, SRP *6, Others*2) </li></ul></ul><ul><li>Pro-store </li></ul><ul><ul><li>Pages: 217 pages (Front end*90, Back end*127) </li></ul></ul>
  47. 47. Thanks! [email_address]

×