Design Process & Deliverables from User Research to Prototyping

16,215 views

Published on

UX Design Project for TheHunt.com (fashion startup). It contains:
- User Research
- Personas
- Competitive Landscape
- Mental Model
- Social Design
- Organizational Scheme
- Scenarios
- Task analysis of critical flows
- Use Cases
- Content Inventory
- Interface design for main screens

Published in: Design

Design Process & Deliverables from User Research to Prototyping

  1. 1. I The Hunt DESIGN PROCESS & DELIVERABLES FROM USER RESEARCH TO PROTOTYPINGDecember, 2012 Patricia de Llano
  2. 2. Table of Contents1.  Executive Summary2.  Design Process Overview3.  Discovery & Insights: •  User Research •  Business Research •  Mental Model •  Social Model4.  Scope •  Problem/Opportunity Statement5.  Architecture •  Scenarios •  Key Flows •  Organizational Scheme6.  Framework7.  Next Steps8.  Appendices The Hunt
  3. 3. Executive Summary1.  Fromourconversa/onswithTheHunt,wefoundthattheBusinessConstraintswere:LowUserAcquisi3on,LowAc3va3onRate,LowEngagement andLowMone3za3on.2.  Ouruserresearchandcompe//onanalysissuggestedthatweshouldfocusonflowsredesign,improvementofthediscoveryexperience,define newsocialfeaturesandamobileapp.3.  Tosolvetheseproblems,wedecidedtocarryoutaGapAnalysis: •  Whoarewedesigningfor?ThetargetuserisafashionconsciousandwellHoffyoungwoman, 18H30yearsold. •  FromTopCompe3tors,weiden/fiednewfeaturesforsocialintegra3onandcommunity engagement. •  What fashion needs are we not covering? We developed a Mental Model to analyze the gap betweenauser’sintentsandTheHunt’ssuppor/ngfunc/onality,andfoundoutthatthere’sroom forfeaturessuppor3ngFashionDiscoveryandBuyingBehavior. •  What social needs are we not covering? We defined the Core Social Model and analyzed the socialneedsthatTheHuntisnotcoveringyet.WefoundoutthatSelfHExpression,Connec3onand Progressionarekeyareastoimprove.4.  Solu/onsfortheproblems: •  WehaveredesignedtheflowsforStartaHunt,PostaFind,andSignIn. •  Toimprovethediscoveryexperience,weproposeanewOrganiza3onalScheme. •  We have designed new social features to increase SelfHExpression (Relevant fashion related user informa/on), Presence(LiveFeed/TrendsSec/ononthehomepage,andReputa3on(increasetheImportanceofRewards). The Hunt
  4. 4. 2. Design Process Overview Discovery&Insights Scope Architecture Framework Surface Business IxD : User Research: Problem & Research: Scenarios. IA: Prototyping: Goals and Opportunity Constraints & Use Cases. Organizational Wireframes. Methodology. Statement." Objects and Mock-ups! Goals." Scheme. Findings" Features. Content Target User. Competitive Inventory. Key Flows & User’s Needs, Landscape! Proposed Edge Cases. Motivations & Solution! Behavior. Personas. Social Design: Identity Mental Model. ! Components. Social Activity Map!Legend Completed Tobecompleted The Hunt
  5. 5. 3. Discovery & Insights: User Research Goals & Methodology 1 2 3 IDENTIFY UNCOVER UNDERSTAND THE TARGET USER HIS MOTIVATIONS FASHION BEHAVIOR Snowball Sampling Questionnaires & Interviews Random Selection Benchmarking The Hunt
  6. 6. User Research: Top Findings 1 Value and ask for fashion opinions to friends Shopping with friends is a Social event & family Laptop is the most popular device to browse and buy fashion onlineBiggest constraint to fashion Hardcore user: browses fashion 1-2 times/day, 2 activities: Time hours on average, buy at least once a month The Hunt
  7. 7. User Research: Top Findings 2 Finding the exact desired item is not so important. Alternatives are ok. Google is the first step to find items Favorite items to buy online: handbags, shoes and accessories Differences between countries:If possible, users would buy cheaper versions of US buys more often online than the EU what they like
  8. 8. User Research: Target User Well-off and fashion conscious young woman Regularly follows and purchases fashion online and offline. 18-30 years old The Hunt
  9. 9. User Research: Personas JaneMiller 18/female/Musicstudent/SanFrancisco Background JaneisafreshmanattheAcademyofArtinSanFrancisco.Sheisstudyingpiano.Jane alsoworkspart^/meatacaféduringtheweekendstomakesomeextramoney. Jane loves shopping and ge`ng new items to make different ouUits. She likes to impressherfriendswithnewclothes. Insights Jane buys clothes online, every now and then, from her Jane likes to keep updated with fashion trends and browses fashion favoriteonlinestoresBrandiMelvilleandNastyGal. almosteverydaybeforegoingtobedjusttorelaxandgetnewideasfor ouUits. Her favorite website is style.com because “they cover “I"love"coupons,"especially"from" everything”. my"favorite"stores! She likes going with her sister to get opinions and recommenda/ons. ” They usually go together on Saturdays and she loves that “Just girls” ritual. Some/mes they even share their wardrobes to have more clothingchoice. Concerns Janeenjoyswalkinginthestoresandlookingforinteres/ngdeals.Her Jane has a very /ght budget. She would like to have more favorite stores are Forever21, H&M and Hollister. When she finds money to go shopping more oen and not to worry about overpriceditemsshelikes,shealwayslooksforcheaperalterna/ves. pricey items. She some/mes gets frustrated with Abercrombie, one of her favorite stores, because she can’t affordit. The Hunt
  10. 10. User Research: Personas AnneWong 25/female/InteriorDesigner/NewYork Background Annieworksfull^/meforaDesignConsul/ngfirminNewYork.Anniegraduatedayearago andhasnowanentry^levelposi/oninarenowneddesignfirm.Shelovesthejobandthe freedomshehasnow. AnnielovesNYandthepaceofthecity;shecan’timaginelivinganywhereelse.Sheenjoys goingshoppingwithherfriendstocatchupandhelpthemmakefashionchoices. Althoughsheoccasionallyshopsinvintagestores,sinceit’sthe Insights bestwaytofindexclusivepiecesandgreatdeals. Annieispassionateaboutfashionandbeauty.Shelovestotrynew beautyproductsandisaBirchBoxearlyadopter. Annie follows fashion in all possible ways. She religiously read “ You"can"find"amazing"pieces" ” Vogue and Olivia Palermo’s blog. She also uses Pinterest and and"deals"on"vintage"stores! Polyvoretogetinspira/on. Shegoesonlinetoreadherfashionsources,twiceaday,everyday. Concerns She spends around 2 hours per day and would spend more if she hadmorefree/me. Anniealwayscomplainsbecauseshespendstoomuch/me(and money) looking for items that match her style. She would love She also checks her favorite online stores to keep up with trends new and exclusive sources with new ideas in order to stay andseenewitems.Shepar/cularlylovesTopShopandGilt. trendybutoriginal.Shewouldlovetoeasilyfinduniquepieces Annielovestoshoponlinefromthecomfortofherhome. tostandoutbesidesthevintagestoresshefrequents. The Hunt
  11. 11. User Research: Personas ChloeDupont 30/female/Economist/London Background ChloeworksasanEconomistforthePublicAdministra/oninLondon.Chloewasbornand raisedinFrancebutmovedtoLondontostudyPoli/calScienceandBusiness Administra/on10yearsago. WhenChloehassome/meoffshelikestotravel.Shecommijedherselftodoanewtripat leastonceayear. Shealsolikestogoshoppingaloneinordertodisconnect. Insights Now, she appreciates more a good designed and good quality piecefromarenownedfirm. When Chloe was younger she used to read a lot of fashion magazines. Now it’s more convenient to go online to read about fashion. However, she keeps reading Elle and Vogue when she is “ please?! May"I"have"28"hours"in"my"day," ” travelling. ShealsolikestoreadblogslikeLibertyLondonGirl.Shepar/cularly likesstreetstyletokeepupwithtrends. Concerns Whenshehassomefree/me,Chloeenjoystheexperienceofgoing Chloe’smainfrustra/onisthelackof/metodoalltheac/vi/es shoppingtothedifferentfashionstoresindowntownLondon.Her she wants to do, including keeping up with fashion trends and favoritestoresare:Zara,LibertyandHossIntropia.Sheoccasionally shopping. buysonline,mainlyhandbags,accessoriesandshoes. She always gets rushed when trying to find ouUits for special Chloe doesn’t buy a lot of cheap clothes, as she used to do when events.Shedoesn’thavethe/metoexplorenewlooksandshe shewasyounger. alwaysendsupwearingthesamekindofdress. The Hunt
  12. 12. Business Research: Competitive Landscape Main Features Top Competitors The Hunt
  13. 13. 3. Discovery & Insights: Business Research Business Constraints 1 2 3 4 LOW LOW LOW LOWUSER ACQUISITION ACTIVATION RATE ENGAGEMENT MONETIZATION Underperforming SEO: 15000 activated Only 10% engaged 25% come from search members users Facebook:10% of traffic, 15% Bounce RateStumble Upon: 60% of traffic, 40% Bounce Rate > Pinterest: 30% of traffic, 25% Bounce Rate Goal Reach 100,000 users. Increase Activation Rate and Engagement The Hunt
  14. 14. User Research: Mental Model Fashion Buying Behavior Locating the Buying Discovery desired item decision SearchOp/ons Factors BuyingTools Discovery (1ststep) Tools Physical Intents and Store Offline& Online& Social Online Opinions reputa/on Networks Stores Fashion Smartph Fashion Friends one Offline& Brand Apps Forums Online& Apps TV^ Product Shopping Alterna/ves Fashion E^ Online Online Discovery Shows/ Stores Mo/va/on Process Blogs (2ndstep) Magazin magazin Quality Movies Retailers es Mo/va/on es Needs Physical Social Havethe Social Vintage Giveup To Network Subscrip Personal Store Fashion Shipping evade Store Habits /ons latest Sa/sfact. Network Stores (3rdstep) Manager Commu. Time s trends Buy Get Catalogue E^ something Copy Social Friends Cheaper Shipping Catalogues Time Social Inspira/ s Magazines onthe ouUits Ac/vity &Family versions constraint Family Networks Cost on spot Social Buy Fashion Fashion Physical Special Retail Google Similar No Item’s Item’s Fashion Clothes Friends Magazines Blogs Stores event Therapy Search items results reviews price Trends oen Browsing Linkson Browsing Hunt’s Social Pos/nga op/on: AskingThe content: Findstothe most Comments ac/vityon Hunt “Thislook Hunt’s Huntsand online popular ontheHunts TheHunt forless” users Finds stores HuntsFunctionality Hunt’s AskingThe Supporting op/on: “Whatgoes Comments Hunt’s “Similarto withthis” onthe users this” feature Hunts Pos/ng Huntson FB,twijer.. Sending Huntsby email Comments The Hunt
  15. 15. Social Model Identity ComponentsSelf-Expression Connection Progression PROFILE PRESENCE REPUTATION “I speak fashion !” The Hunt
  16. 16. Social Model Identity ComponentsSelf-Expression Connection Progression PROFILE PRESENCE REPUTATION Profile Pic Location Followers “I speak fashion Status !” Fashion Icons Wishlist Style The Hunt
  17. 17. Social Model Identity ComponentsSelf-Expression Connection Progression PROFILE PRESENCE REPUTATION Community Live Feed Trends Section Community Mgmt “I speak fashion !” Blog Posts The Hunt
  18. 18. Social Model Identity ComponentsSelf-Expression Connection Progression PROFILE PRESENCE REPUTATION Number of Gems Number of Followers “I speak fashion !” The Hunt
  19. 19. Social Model Social Activity Map Share Comment Follow Give View Photos Gems Save Add to Wishlist Tag Users
  20. 20. 4. Scope: Problem/Opportunity Statement Problems 1 2 3 4 LOW LOW LOW LOWUSER ACQUISITION ACTIVATION RATE ENGAGEMENT MONETIZATION Redesign flows and discovery Better use of social networks, email digest & notifications > Solutions Design new features Develop a mobile app The Hunt
  21. 21. 4. Scope: Proposed Solution Problems More Intuitive 1 2 3 New User 4 LOW LOW LOW Flow LOW USER ACTIVATION ENGAGEMENT MONETIZATION ACQUISITION RATE Organize Redesign flows and discovery Items and Better use ofinformation social networks, email digest & notifications > Less aggressive Solutions Design new Look and Feel features Develop a mobile app The Hunt
  22. 22. 4. Scope: Proposed Solution Add Notifications Problems on the site 1 2 3 4 LOW LOW LOW LOW USER Improve ACTIVATION ENGAGEMENT MONETIZATION Opengraph ACQUISITION RATE aggregation on FB Redesign flows and discovery Better use of social networks, email Daily email digest & digest notifications > Solutions Design new Improve features Community Management Develop a mobile app The Hunt
  23. 23. 4. Scope: Proposed Solution Problems 1 2 3 4 LOW LOW LOW LOW USER ACTIVATION ENGAGEMENT MONETIZATION Increase New Sections ACQUISITION RATE importance of Collections/ (Trends, Live Feed Rewards Wishlist celebrities, best clones, etc.) Redesign flows and discovery Better use of social networks, email digest & notifications > Solutions Design new features Develop a mobile app The Hunt
  24. 24. 4. Scope: Proposed Solution Problems 1 2 3 4 LOW LOW LOW LOW USER ACTIVATION ENGAGEMENT MONETIZATION ACQUISITION RATE Photo Location: Redesign flows and discoveryShow places Feature: Top Hunts Instant where other Better use of Upload pictures feature messaging Hunts were social on the go found networks, email digest & notifications > Solutions Design new features Develop a mobile app The Hunt
  25. 25. 5. Architecture: Scenarios Scenario 1: Starting a Hunt Scenario 1: Starting a Hunt Oh...where am I going to find it?! idea Start a Hunt ...While browsing She uploads a She goes to The Pinterest, Annie picture of the And The Hunt is BUT The source is no AnD SUDDENLY, ANnie Hunt.com AND found a beautiful scarf and posted! Time to indicated on the pic recalls The Hunt! clicks on “Start scarf she would enterS a little wait for replies A hunt” love to buy description... Scenario 2: Posting a Find Oh...it’s from zara! Post a Find Chloe was browsing ...She recognized a dress another user was SHE looks for the dress on And clicks on Chloe doesn’t have an account She’d love to share her hunts with her FB The Hunt Now Chloe is connected and uploads an image
  26. 26. 5. Architecture: Scenarios ...While browsing She uploads a She goes to The Pinterest, Annie picture of the And The Hunt is BUT The source is no AnD SUDDENLY, ANnie Hunt.com AND found a beautiful scarf and posted! Time to indicated on the pic recalls The Hunt! clicks on “Start Scenario 2: Posting a Find scarf she would enterS a little wait for replies A hunt” love to buy description... Scenario 2: Posting a Find Oh...it’s from zara! Post a Find She’d love to Now Chloe is Chloe doesn’t share her hunts ...She recognized a SHE looks for connected and Chloe was browsing And clicks on have an account with her FB dress another user was the dress on uploads an image the hunt when... “POST a FIND” so a sign-up friends so she looking for. zara.COM and info about window pop-ups does FB the item connect The Hunt
  27. 27. 5. Architecture: Key Flows Start a Hunt This map describes one of the main tasks on The Hunt: Start a Hunt. The systems analyzes first if the user is registered or not and launches the Sign in or Sign up flow depending on the case. Then the user uploads a picture and enters information about the item Finally the system checks that all the mandatory fields are filled up and the photo meet the requirements established The Hunt
  28. 28. 5. Architecture: Key FlowsPost a Find & Give a Gem This map describes two main tasks on The Hunt: Post a Find and Give a Gem. The typical use case for Posting a Find is described by a user browsing the homepage, seeing an item she recognizes, locating the item online and posting a picture and a link (posting a Find) to the item on the corresponding Hunt page. When a user posts a Find on a Hunt’s page, the Hunt’s owner receives a notification of a New Find. The user can then give a Gem to the user who found the item The Hunt
  29. 29. 5. Architecture: Key Flows Sign In The Hunt
  30. 30. 5. Architecture: Organizational Scheme Main elements present on the Homepage Secondaty elements present on the Homepage Tertiary elements present on the Homepage Top subcategories inside main elements Secondary subcategories Rest of elements The Hunt
  31. 31. 6. Framework: Wireframes 1 Homepage Main Navigation Bar, including: Profile, Sign Up and Search. 2 Redirects the user to a new page to place a Hunt 1 3 2 4 Navigation Bar including filters by type of Hunt, 3 Find, category 4 This Live Feed has similar functionality as 5 the Facebook ticker. The objective is to show the most recent activity on the site. 5 Photos of Hunts on the main feed The Hunt
  32. 32. 6. Framework: Wireframes 1 Main Navigation Bar, including: Profile, Sign Up and Search. 1 2 Navigation Bar 2 including filters by type of Hunt, Find, item category, collections. 3 4 3 Main Feed containing all the pictures about Hunts followed or started by the user, finds and collection 4 Personal Info including profile pic, number of gems gained, number of followers, number of Profile Page people following, status, style and other fashion related info. A Follow button is included too. The Hunt
  33. 33. 6. Framework: Wireframes Hunt Thumbnail1 By clicking on this button, a user will receive notifications when a Find for this Hunt is posted 1 22 The number of Finds already posted for this Hunt3 Number of comments posted about this Hunt4 Number of people following this Hunt ! Popularity of the Hunt 4 3 The Hunt
  34. 34. 6. Framework: Mock-ups Homepage The Hunt
  35. 35. 6. Framework: Mock-ups Sign In The Hunt
  36. 36. 6. Framework: Mock-ups Sign Up The Hunt
  37. 37. 6. Framework: Mock-ups Personal Profile The Hunt
  38. 38. 6. Framework: Mock-ups Hunt Page The Hunt
  39. 39. 6. Framework: Mock-ups Thumbnail of a Hunt 3 Finds Little Black Dress 38 Followers 10 The Hunt
  40. 40. 7. Next Steps EVALUATE AND CREATE A CONSOLIDATE DEFINE WORKING WEB/MOBILE VISUAL DESIGN PROTOTYPE DESIGN 1 2 3 The Hunt
  41. 41. 8. AppendicesUse Case The Hunt
  42. 42. 8. AppendicesUse Case(cont.) The Hunt
  43. 43. 8. AppendicesUse Case(cont.) The Hunt
  44. 44. 8. Appendices Objects and Features < Key Activities < < Social Features > Features of a Hunt as an object The Hunt
  45. 45. 8. AppendicesContent Inventory The Hunt
  46. 46. 8. AppendicesContent Inventory(cont.) The Hunt

×