Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX Design process: Integrating features into existing assets

445 views

Published on

As part of a group class assignment, we were tasked with designing features for Zalora which integrate into their existing website and/or app.

The retrospective accompanying the project can be found here: https://medium.com/@sansian/introduction-cdb761180474

Published in: Design
  • Be the first to comment

UX Design process: Integrating features into existing assets

  1. 1. WARREN, SIAN, MAS
  2. 2. Brief Zalora would like to explore a social feature for users of their app Suggested Features: - Design a user flow that helps customers create and edit a style profile - Recommended items to drive sales - Social connection between users Target Device - iPhone or Android native application
  3. 3. Research Zalora the Brand Zalora’s Competitors
 Zalora’s Users
  4. 4. 0 1.25 2.5 3.75 5 Zalora ASOS Yoox ShopBop Amazon REI Allibaba Social Media Referrals % of total website traffic
  5. 5. Comparative analysis Task:Pick an item and share via Facebook Tap Main Nav HOME HOME: Drop Down Select: BAGS & PURSES BAGS & PURSES Select: SPECIFIC BAG SPECIFIC BAGTap: Share- Facebook Pop-up: Share- Facebook Type: Caption Tap: Share SPECIFIC BAG ASOS FLOW
  6. 6. User research
  7. 7. Screeners To find users who • Are between 18 to 34 years old • Bought clothes 1-2 times in the last month • Post on social media (daily or weekly) Received 84 responses
  8. 8. User interviews 8 screener respondents interviewed
  9. 9. Affinity mapping
  10. 10. • Sharing - what, and with whom • Platforms • Communication Form Affinities and findings Social Factors • See for real • Opinions • Price • Occasions Purchasing Factors
  11. 11. Findings • People share about apparel and accessories, 
 but only privately, with intimate friends • WhatsApp or copy/pasting into Facebook Messenger • Triggers for sharing are related to price or style • A regular pain of shopping online is gauging accurate fit
  12. 12. Persona
  13. 13. Problem statement • ask close friends • fit and feel of a product
  14. 14. Storyboard
  15. 15. Feature ideation
  16. 16. Design Studio Process Initial designs per feature - 10mins - 6 sketches/person Top 2 designs selected (group vote) Further re-design - 10mins Usability test of LoFi features
  17. 17. Lo-fi sketching
  18. 18. (still) lo-fi Prototype
  19. 19. (still) lo-fi Prototype
  20. 20. (still) lo-fi Prototype
  21. 21. Usability testing Visibility of System Status • Users expected to see a signifier that the message has been sent.
  22. 22. Iteration of lo-fi sketching
  23. 23. Product page (v1) 1 Navigate to ask friends
  24. 24. Product page (v1) 1 Navigate to ask friends 2 Select friend(S)
  25. 25. Product page (v1) 1 Navigate to ask friends 2 Select friend(S) 3 Select Question
  26. 26. Product page (v1) 1 Navigate to ask friends 2 Select friend(S) 3 Select Question 4 Send
  27. 27. Usability testing results Current Feature (VirtuSize) • Users did not notice the feature
  28. 28. Problem
  29. 29. Product page (v2)
  30. 30. How it works
  31. 31. Website MidFi Usability Testing
  32. 32. Product page (v2)
  33. 33. Product page (v2) Users unsure what the arrow means Visibility of System Status
  34. 34. Iteration
  35. 35. Iteration Users think the message has been sent Aesthetic and Minimalist Design
  36. 36. Iteration Original Re-designed
  37. 37. Messaging (v1)
  38. 38. Messaging (v1)
  39. 39. Usability testing Flexibility and efficiency of use • Users wanted a closer look at the image without needing to go into the Product Page
  40. 40. Iteration
  41. 41. Usability Testing Flexibility and efficiency of use • The two inbox/ outbox layout is confusing
  42. 42. Iteration The messaging system without inbox/sent is also confusing Aesthetic and Minimalist Design
  43. 43. Iteration
  44. 44. Users Sarah Ron
  45. 45. Website Demo
  46. 46. Mobile app MidFi Usability Testing
  47. 47. Mobile Application Ask your Friends Feature 3 Main tracks in this feature: 1. Requesting feedback from your friend(s) on items. 2. Getting notified of requested feedback from your friends & logging your answers 3. Viewing your friend(s)’ feedback.
  48. 48. WorkFlow Mobile App Requesting feedback from friend(s) Product Page Click on “share with friend” icon Share with Friend wizard. Click on friend(s) Question Selection Click on OptionClick Send.Success Message Click on Next Click CloseProduct Page Track One
  49. 49. Iterations Mobile App No issues with all testers! Requesting feedback from friend(s)Track One
  50. 50. Mobile App Demo Requesting feedback from friend(s) Track One
  51. 51. WorkFlow Mobile App Getting notified and logging answers 1st Iteration Track Two MessageBox Icon Click on Icon List of messages Click on Message With ! mark Detailed Message Page Click on OptionClick on SubmitList of messages MessageBox Icon Click on Icon List of messages Click on Message With ! mark Detailed Message Page Click on OptionClick on SubmitList of messages MessageBox Icon Click on Icon List of messages Click on Message With ! mark Detailed Message Page Click on OptionClick on SubmitList of messages
  52. 52. Element Issue Mobile App
  53. 53. WorkFlow Mobile App Getting notified and logging answers 1st Iteration Track Two MessageBox Icon Click on Icon List of messages Click on Message With ! mark Detailed Message Page Click on OptionClick on SubmitList of messages MessageBox Icon Click on Icon List of messages Click on Message With ! mark Detailed Message Page Click on OptionClick on SubmitList of messages
  54. 54. Element Issue Mobile App
  55. 55. Iterations Mobile App New Design
  56. 56. WorkFlow Mobile App MessageBox Icon Click on Icon List of messages Click on non- white out message Detailed Message Modal popup. Click on OptionList of messages Getting notified and logging answers Track Two 2nd Iteration
  57. 57. Iterations Mobile App ISSUE! Track Two 2nd Iteration
  58. 58. Technical Issue Mobile App VS Original Vertical Swipe Carousel Left/ Right Button Carousel
  59. 59. Iterations Mobile App New Design
  60. 60. Iterations Mobile App Getting notified and logging answers Track Two 3rd Iteration
  61. 61. Iterations Mobile App Viewing feedback from your friends Track Three
  62. 62. Same Technical Issue Mobile App
  63. 63. Iterations Mobile App Viewing feedback from your friends Track Three 3rd Iteration
  64. 64. Mobile App Demo Final Product
  65. 65. Future Updates Zalora Big Data User centric and recommended items
  66. 66. Future Updates Zalora Live Chat p2p b2p
  67. 67. Future Updates Zalora Virtual Wear
  68. 68. Thank you

×