1. New Marketplace / Auction Revamp Visual Concept and Mockup Sharing Kit UED, June, 2008
2.
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)
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.
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)
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.
27.
28.
29.
30. Visual Brainstorming-- Mockup analyzing # FFEB63 Code Color Yellow Fun, Plentiful #FECB45 Secondary Color Green Trust, Clean Neutral Color
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.
36.
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
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