Successfully reported this slideshow.
Your SlideShare is downloading. ×

Huge Inc Intro to UX/UI lecture at Campus London

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 89 Ad
Advertisement

More Related Content

Similar to Huge Inc Intro to UX/UI lecture at Campus London (20)

Advertisement

Huge Inc Intro to UX/UI lecture at Campus London

  1. 1. October 2, 2012 Google Labs: Designing for Users hugeinc.com info@hugeinc.com 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843
  2. 2. About Huge. We help transform brands and grow businesses.
  3. 3. Our approach. Great user experiences are what drive business performance and marketing.
  4. 4. How we’re structured. Founded in 1999 Full-service digital agency within Interpublic Group 550 employees London. Portland. San Francisco. Brooklyn. Los Angeles. Rio de Janeiro.
  5. 5. AdAge A-List for 2012 Top ten agencies as ranked by AdAge, across all marketing disciplines. Social media agency of the year 2011 and 2012 by OMMA / MediaPost. Most innovative agency for 2012 by Digiday and One of Five for 2011 by Mashable.
  6. 6. Clients. New York. Los Angeles. London. American Express Newell Rubbermaid Cellular South / C-Spire British Airways Barneys New York Nutrisystem Dell BBC Comcast PepsiCo National Geographic Diageo Four Seasons Pizza Hut News Corporation IKEA GE Capital Reckitt Benckiser Pacific Life Landmark Group L’Oréal Group Royal Caribbean Cruises Unilever Portland. Lowe’s Target Nike MTV Networks Time Warner Rio de Janeiro. Nestlé Waters Verisign San Francisco. Abril Samsung Vale
  7. 7. In the next 90 minutes: 1. Whom to listen to, and how 2. Construct a digital user experience 3. Make it better and better
  8. 8. It’s all about your ideas.
  9. 9. It’s all about your ideas. It’s all about your users.
  10. 10. Three steps to designing a user experience: 1. Listen. 2. Focus. 3. Listen some more.
  11. 11. 1. Listen to your users.
  12. 12. You have a target audience for your product…
  13. 13. How do you find out how to design for them?
  14. 14. Never only go by what people say.
  15. 15. Instead, watch what they do.
  16. 16. Visit them. Follow them around. Ethnographic studies let you understand how your audience uses technology on a daily basis: • Equipment set up • Context • Savvy • Time spent in digital • Shadowing • In home visits
  17. 17. Ask freeform.
  18. 18. Look outside the box. To discover true opportunities, find out: • What else are they interested in? • What digital tools do they use daily? • What digital products are they love? Why? Find the commonalities to inspire and shape your product. Opportunity Direct competition
  19. 19. Get to know them, summarize them, utilize them.
  20. 20. Know your user s’ digital habits. Redesign of UnderArmour.com.
  21. 21. Understand their full decision journey.
  22. 22. Listen to your users. Always come back to them during design.
  23. 23. 2. Focus.
  24. 24. What makes a great digital product?
  25. 25. A good product isn’t only defined by what it does, but even more so by what it doesn’t do.
  26. 26. 1. Prioritize.
  27. 27. The no. 1 goal The basis of your business the reason for users to come.
  28. 28. In addition to the top goal… Top priority. The basis of your business, must be fulfilled.
  29. 29. … supporting goals can help differentiate… Top priority. The basis of your business, must be fulfilled. Secondary goal, supports top priority, could be key differentiator. 2
  30. 30. … and further define the product. Top priority. The basis of your business, must be fulfilled. Secondary goal, supports top priority, could be key differentiator. 2 3 Supports first and second goal, also necessary to succeed.
  31. 31. Feat ure Capa Idea bility Feat Feat ure ure Feat Feat ure ure Capa Capa bility bility Feat Idea ure Idea Feat Feat ure ure
  32. 32. Prioritize. Map back to goal. Define. Feat Doesn’t support any ure Idea Capa use case bility Will distract from Feat Feat main goal ure ure Similar to other Feat Feat Doesn’t support feature ure ure a KPI Capa Capa bility bility Feat Idea ure Great idea - for a different goal Idea Feat Feat ure ure Nice to have, but not necessary
  33. 33. A clean, focused feature set. Feat Feat ure ure Feat ure Feat Feat ure ure 2 Feat 3 ure Feat Feat ure ure
  34. 34. Be thorough up front. 36.
  35. 35. It’s worth it. Time defect is detected Require- Archi- Construc- System Post ments tecture tion Test Release Time defect is introduced Requirements 1x 3x 5-10x 10x 10-100x Architecture 1x 10x 15x 25-100x Construction 1x 10x 10-25x
  36. 36. 2. Construct.
  37. 37. It’s time to start drawing.
  38. 38. 1. The most important building blocks 2. The structure 3. Detailed design
  39. 39. Example: Under Armour
  40. 40. Question: What’s UA’s most important page, user task, and feature?
  41. 41. Your most important page.
  42. 42. Your most important task.
  43. 43. Features that support main goal
  44. 44. Ways to get there.
  45. 45. Ways to make it stick
  46. 46. Most important entry and exit. Running shorts Thanks. Cool.
  47. 47. Design out the pages
  48. 48. Always keep your users and goals in mind. Always focus.
  49. 49. 3. Test.
  50. 50. Will it work?
  51. 51. Can we test this?
  52. 52. Can we test this? We have to test this.
  53. 53. Ask the users. To test multiple ideas / concepts. To identify major road blocks. To improve specific tools, flows, tasks.
  54. 54. Test early to fail big. Go rogue. Paper prototypes, clickable sketches, animated concepts. Look for the epic fails, but leave nuances aside for now. Test as often as you can.
  55. 55. Test higher fidelity to refine and tweak. Learn from previous rounds of testing. Become more precise, test more detailed interactions. Test key scenarios Test visual designs, html, java script, server calls.
  56. 56. Ask the right questions. Identify major roadblocks. “I love Under Armour, especially Don’t try to test nuances their sports drinks, super cool.” (your sample isn’t large enough) Be scientific about results. “I hate this new site, I would never use it. Why not keep it all how it is?” Be aware of your user’s context. “I don’t like these colors.”
  57. 57. Listen to your users, because they are right.
  58. 58. Listen some more.
  59. 59. How do you know if your design succeeded?
  60. 60. Define success before you start designing. KPIs: What to Measure: 1. Increase sales • No. of sales • Average revenue per order • Ratio of visits to sales • Conversion rate • No. of visits 2. Increase traffic • Search performance • Referral performance • % of new vs. return visits 3. Increase loyalty • Frequency of visits
  61. 61. Every digital product has to evolve in real time.
  62. 62. Analytics tell us what users are doing, and highlight issues in current system Why are 43% of customers stopping after the payment info page?
  63. 63. Look at this. Tablet conversion rate 0.18% 0.16% 0.14% 0.12% 0.10% 0.08% 0.06% 0.04% 0.02% 0.00% Jan-12 Feb-12 Mar-12 Apr-12 May-12 Jun-12 Jul-12
  64. 64. Look again. Tablet conversion rate 0.18% 0.16% 0.14% 0.12% 0.10% 0.08% 0.06% 0.04% 0.02% 0.00% May-11 Jun-11 Jul-11 Aug-11 Sep-11 Oct-11 Nov-11 Dec-11 Jan-12 Feb-12 Mar-12 Apr-12 May-12 Jun-12 Jul-12
  65. 65. Look at data from all angles before you judge. Tablet conversion rate 0.50% 0.45% 0.40% 0.35% 0.30% UK DE 0.25% SE 0.20% US FR 0.15% CA 0.10% 0.05% 0.00%
  66. 66. Once you have identified your most important issues… KPIs: What to Measure: Metric: 1. Increase sales • No. of sales • -0.7% • Average revenue per order • Steady at $40.89 • Ratio of visits to sales • Up by 1% • Conversion rate • -5.1% • No. of visits • +10% 2. Increase traffic • Search performance • + 0.3% • Referral performance • Steady • % of new vs. return visits • 80 / 20 3. Increase loyalty • Frequency of visits • - 2%
  67. 67. Measure.
  68. 68. Ask your users why things aren’t working. “Wow… why didn’t you tell me before “What’s the return how expensive “Why should I policy?” shipping was…?” create an account when I just want to shop?”
  69. 69. Don’t be afraid to touch what’s live.
  70. 70. Systematically optimize Incremental design improvements can have a huge impact. A • A/B test micro-elements like wording, an image, etc. • Multi-variate test isolated layouts and functionalities. B • Statistically significant • Evolutionary vs. Revolutionary
  71. 71. Become more intelligent with each test. Institutionalize knowledge.
  72. 72. Become better.
  73. 73. Questions…
  74. 74. hugeinc.com info@hugeinc.com 45 Main St. #220 Brooklyn, NY 11201 +1 718 625 4843

×