1. New Marketplace / Auction Revamp Visual Concept and Mockup Sharing Kit UED, June, 2008

3. In the Beginning Do you really know… What’s the difference and the relationship between them?

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. 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. 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. 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. In the Beginning the relationship between Auction and NM is….. Like sisters New Marketplace Auction They have similar features, but they are individual

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. 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. 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)

15. Visual Brainstorming--Tagging Grouping all keywords and make the tag column

16. Visual Brainstorming--Tagging Picking the top 6 tag, and making the stickers for each of them

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.

20. Visual Brainstorming--Mockup analyzing

21. Visual Brainstorming--Mockup analyzing But… Do these mockups own whole characteristics of the 6 tags we picked

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. 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. Visual Brainstorming--Mockup analyzing However… some mockups which fail to chosen still have chance to be picked again at this moment.

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)

30. Visual Brainstorming-- Mockup analyzing # FFEB63 Code Color Yellow Fun, Plentiful #FECB45 Secondary Color Green Trust, Clean Neutral Color

32. Visual Brainstorming– Mockup

33. Visual Brainstorming– Mockup Rounded Corner Yellow Green Illustration

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.

37. Visual Brainstorming– Visual Spec # FFEB63 Yellow Fun, Plentiful #FECB45 Green Trust, Clean The original color system is OK for NM

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. Visual Brainstorming– Mockup

40. Visual Brainstorming– Mockup Yellow Green Green Dark Yellow

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. Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: smooth lines to be the frame of modules

43. Visual Brainstorming– Mockup Use several same elements to sync two mockups Ex: similar design to represent the same module in different mockups

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. Visual Brainstorming– Mockup Clear direction to connect 2 property Ex: put the same place (the top right part) and use the same color

47. Thanks! [email_address]