Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Design Process & Deliverables from User Research to Prototyping

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 46 Publicité

Design Process & Deliverables from User Research to Prototyping

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

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

Publicité
Publicité

Plus De Contenu Connexe

Les utilisateurs ont également aimé (20)

Similaire à Design Process & Deliverables from User Research to Prototyping (20)

Publicité

Design Process & Deliverables from User Research to Prototyping

  1. 1. I The Hunt DESIGN PROCESS & DELIVERABLES FROM USER RESEARCH TO PROTOTYPING December, 2012 Patricia de Llano
  2. 2. Table of Contents 1.  Executive Summary 2.  Design Process Overview 3.  Discovery & Insights: •  User Research •  Business Research •  Mental Model •  Social Model 4.  Scope •  Problem/Opportunity Statement 5.  Architecture •  Scenarios •  Key Flows •  Organizational Scheme 6.  Framework 7.  Next Steps 8.  Appendices The Hunt
  3. 3. Executive Summary 1.  From'our'conversa/ons'with'The'Hunt,'we'found'that'the'Business'Constraints'were:'Low'User'Acquisi3on,'Low'Ac3va3on'Rate,'Low'Engagement' and'Low'Mone3za3on.' 2.  Our'user'research'and'compe//on'analysis'suggested'that'we'should'focus'on'flows'redesign,'improvement'of'the'discovery'experience,'define' new'social'features'and'a'mobile'app.' 3.  To'solve'these'problems,'we'decided'to'carry'out'a'Gap'Analysis:' •  Who'are'we'designing'for?''The'target'user'is'a'fashion'conscious'and'wellHoff'young'woman,' 18H30'years'old.' •  From'Top'Compe3tors,'we'iden/fied'new'features'for'social'integra3on'and'community' engagement.' •  What' fashion' needs' are' we' not' covering?' We' developed' a' Mental' Model' to' analyze' the' gap' between'a'user’s'intents'and'The'Hunt’s'suppor/ng'func/onality,'and'found'out'that'there’s'room' for'features'suppor3ng'Fashion'Discovery'and'Buying'Behavior.' •  What' social' needs' are' we' not' covering?' We' defined' the' Core' Social' Model' and' analyzed' the' social'needs'that'The'Hunt'is'not'covering'yet.'We'found'out'that'SelfHExpression,'Connec3on'and' Progression'are'key'areas'to'improve.' 4.  Solu/ons'for'the'problems:' •  We'have'redesigned'the'flows'for'Start'a'Hunt,'Post'a'Find,'and'Sign'In.' •  To'improve'the'discovery'experience,'we'propose'a'new'Organiza3onal'Scheme.' •  We' have' designed' new' social' features' to' increase' SelfHExpression' (Relevant' fashion' related' user' informa/on),' Presence'(Live'Feed/Trends'Sec/on'on'the'homepage,'and'Reputa3on'(increase'the'Importance'of'Rewards).' 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' To'be'completed' 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 online Biggest 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 Jane'Miller' 18/female/Music'student/San'Francisco'' Background' Jane'is'a'freshman'at'the'Academy'of'Art'in'San'Francisco.'She'is'studying'piano.'Jane' also'works'part^/me'at'a'café'during'the'weekends'to'make'some'extra'money.' Jane' loves' shopping' and' ge`ng' new' items' to' make' different' ouUits.' She' likes' to' impress'her'friends'with'new'clothes.'' Insights' Jane' buys' clothes' online,' every' now' and' then,' from' her' Jane' likes' to' keep' updated' with' fashion' trends' and' browses' fashion' favorite'online'stores'Brandi'Melville'and'NastyGal.' almost'everyday'before'going'to'bed'just'to'relax'and'get'new'ideas'for' ' 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' ' clothing'choice.'' Concerns' Jane'enjoys'walking'in'the'stores'and'looking'for'interes/ng'deals.''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' overpriced'items'she'likes,'she'always'looks'for'cheaper'alterna/ves.'' pricey' items.' She' some/mes' gets' frustrated' with' Abercrombie,' one' of' her' favorite' stores,' because' she' can’t' ' afford'it.' ' The Hunt
  10. 10. User Research: Personas Anne'Wong' 25/female/Interior'Designer/New'York'' Background' Annie'works'full^/me'for'a'Design'Consul/ng'firm'in'New'York.'Annie'graduated'a'year'ago' and'has'now'an'entry^level'posi/on'in'a'renowned'design'firm.'She'loves'the'job'and'the' freedom'she'has'now.'' Annie'loves'NY'and'the'pace'of'the'city;'she'can’t'imagine'living'anywhere'else.''She'enjoys' going'shopping'with'her'friends'to'catch'up'and'help'them'make'fashion'choices.' ' Although'she'occasionally'shops'in'vintage'stores,'since'it’s'the' Insights' best'way'to'find'exclusive'pieces'and'great'deals.'' ' Annie'is'passionate'about'fashion'and'beauty.'She'loves'to'try'new' beauty'products'and'is'a'BirchBox'early'adopter.' 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! Polyvore'to'get'inspira/on.'' ' ' She'goes'online'to'read'her'fashion'sources,'twice'a'day,'everyday.' ' ' Concerns' She' spends' around' 2' hours' per' day' and' would' spend' more' if' she' had'more'free'/me.' Annie'always'complains'because'she'spends'too'much'/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' and'see'new'items.'She'par/cularly'loves'TopShop'and'Gilt.' trendy'but'original.'She'would'love'to'easily'find'unique'pieces' Annie'loves'to'shop'online'from'the'comfort'of'her'home.'' to'stand'out'besides'the'vintage'stores'she'frequents.'' ' ' The Hunt
  11. 11. User Research: Personas Chloe'Dupont'' 30/female/Economist/London' Background' Chloe'works'as'an'Economist'for'the'Public'Administra/on'in'London.'Chloe'was'born'and' raised'in'France'but'moved'to'London'to'study'Poli/cal'Science'and'Business' Administra/on'10'years'ago.'' When'Chloe'has'some'/me'off'she'likes'to'travel.'She'commijed'herself'to'do'a'new'trip'at' least'once'a'year.'' She'also'likes'to'go'shopping'alone'in'order'to'disconnect.' Insights' Now,' she' appreciates' more' a' good' designed' and' good' quality' piece'from'a'renowned'firm.' 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.' She'also'likes'to'read'blogs'like'LibertyLondonGirl.'She'par/cularly' ' ' ' likes'streetstyle'to'keep'up'with'trends.'' ' Concerns' When'she'has'some'free'/me,'Chloe'enjoys'the'experience'of'going' Chloe’s'main'frustra/on'is'the'lack'of'/me'to'do'all'the'ac/vi/es' shopping'to'the'different'fashion'stores'in'downtown'London.'Her' she' wants' to' do,' including' keeping' up' with' fashion' trends' and' favorite'stores'are:'Zara,'Liberty'and'Hoss'Intropia.'She'occasionally' shopping.' buys'online,'mainly'handbags,'accessories'and'shoes.' 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.'She'doesn’t'have'the'/me'to'explore'new'looks'and'she' she'was'younger.'' always'ends'up'wearing'the'same'kind'of'dress.' ' ' ' 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 LOW USER ACQUISITION ACTIVATION RATE ENGAGEMENT MONETIZATION Underperforming SEO: 15000 activated Only 10% engaged 25% come from search members users Facebook:10% of traffic, 15% Bounce Rate Stumble 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 Search'Op/ons'' Factors' Buying'Tools' Discovery' (1st'step)' 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' (2nd'step)' Magazin magazin Quality' Movies' Retailers' es' Mo/va/on' es' Needs' Physical' Social' Have'the' Social' Vintage' Give'up'' To' Network Subscrip Personal' Store' Fashion' Shipping' evade' Store' Habits' /ons' latest' Sa/sfact.' Network' Stores' (3rd'step)' Manager' Commu.' Time' s' trends' Buy' Get' Catalogue E^ something' Copy' Social' Friends' Cheaper' Shipping' Catalogues' Time' Social' Inspira/ s' Magazines' on'the' 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' Links'on' Browsing' Hunt’s' Social' Pos/ng'a' op/on:' Asking'The' content:'''''' Finds'to'the' most' Comments' ac/vity'on' Hunt' “This'look' Hunt’s' Hunts'and' online' popular' on'the'Hunts' The'Hunt' for'less”' users' Finds' stores' Hunts' Functionality Hunt’s' Asking'The' Supporting op/on:' “What'goes' Comments' Hunt’s' “Similar'to' with'this”' on'the' users' this”' feature' Hunts' Pos/ng' Hunts'on' FB,'twijer..' Sending' Hunts'by' email' Comments' The Hunt
  15. 15. Social Model Identity Components Self-Expression Connection Progression PROFILE PRESENCE REPUTATION “I speak fashion !” The Hunt
  16. 16. Social Model Identity Components Self-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 Components Self-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 Components Self-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 LOW USER 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 Flows Post 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 Thumbnail 1 By clicking on this button, a user will receive notifications when a Find for this Hunt is posted 1 2 2 The number of Finds already posted for this Hunt 3 Number of comments posted about this Hunt 4 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. Appendices Use Case The Hunt
  42. 42. 8. Appendices Use Case(cont.) The Hunt
  43. 43. 8. Appendices Use 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. Appendices Content Inventory The Hunt
  46. 46. 8. Appendices Content Inventory(cont.) The Hunt

×