Yahoo!Kimo Auction Revamp Visual Concept
Upcoming SlideShare
Loading in...5
×
 

Yahoo!Kimo Auction Revamp Visual Concept

on

  • 1,179 views

 

Statistics

Views

Total Views
1,179
Views on SlideShare
1,014
Embed Views
165

Actions

Likes
2
Downloads
15
Comments
1

5 Embeds 165

http://kit-lin.blogspot.com 122
http://www.behance.net 34
http://www.slideshare.net 3
http://kit-lin.blogspot.tw 3
https://www.behance.net 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Yahoo!Kimo Auction Revamp Visual Concept Yahoo!Kimo Auction Revamp Visual Concept Presentation Transcript

  • New Marketplace / Auction Revamp Visual Concept and Mockup Sharing Kit 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 Auction(C2C) Flea market
  • 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
  • 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
  • In the Beginning the relationship between Auction and NM is….. Like sisters New Marketplace Auction 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
  • 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 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
  • 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) 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 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)
  • Visual Brainstorming--Mockup analyzing However… some mockups which fail to chosen still have chance to be picked again at this moment.
  • 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)
  • Visual Brainstorming--Mockup analyzing
    • 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:
        • Attract 吸引人 (2piece)
        • Plentiful 豐富 (1piece)
        • Easy to close 容易親近 (2piece)
        • Clean 清爽 (2piece)
        • Fun 活潑有趣 (2piece)
      • Design Element:
        • Warm color (yellow, green, orange)
        • Rounded corner module
        • Pictures are keyed out the background
        • Illustration
        • The typography is clean
  • Visual Brainstorming-- Mockup analyzing
    • Reference: 樂天 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 analyzing
    • Reference: megashopping
      • Tag:
        • Attract 吸引人 (2piece)
        • Easy to close 容易親近 (1piece)
        • Clean 清爽 (2piece)
        • Fun 活潑有趣 (1piece)
        • 可信賴的 (1piece)
      • Design Element:
        • Bright color (yellow, green)
        • Illustration
        • The typography is clean
        • Rounded corner module
  • Visual Brainstorming-- Mockup analyzing # FFEB63 Code Color Yellow Fun, Plentiful #FECB45 Secondary Color Green Trust, 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
  • 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 parts between Auction and NM.
  • Visual Brainstorming– Visual Spec
    • 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
  • Visual Brainstorming– Visual Spec
    • 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 Trust High-Class
  • Visual Brainstorming– Visual Spec # FFEB63 Yellow Fun, Plentiful #FECB45 Green Trust, Clean The original color system is OK for NM
  • 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
  • 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 rounded  Cute and easy to close
  • 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 module in different mockups
  • Visual Brainstorming– Mockup Of course we can see the same design in the inside page of NM Pro-store (Backend) Pro-store (Front page)
  • Visual Brainstorming– Mockup Clear direction to connect 2 property Ex: 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_address]