Huge Inc Intro to UX/UI lecture at Campus London

4,949 views

Published on

Intro to UX/UI delivered by Sophie Kleber from Huge Inc. at Campus London for Campus EDU beta.

Huge Inc Intro to UX/UI lecture at Campus London

  1. 1. October 2, 2012Google Labs: Designing for Usershugeinc.cominfo@hugeinc.com45 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 drivebusiness performance and marketing.
  4. 4. How we’re structured.Founded in 1999Full-service digital agency within Interpublic Group550 employees London. Portland. San Francisco. Brooklyn. Los Angeles. Rio de Janeiro.
  5. 5. AdAge A-List for 2012Top 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 AirwaysBarneys New York Nutrisystem Dell BBCComcast PepsiCo National Geographic DiageoFour Seasons Pizza Hut News Corporation IKEAGE Capital Reckitt Benckiser Pacific Life Landmark GroupL’Oréal Group Royal Caribbean Cruises Unilever Portland.Lowe’s Target NikeMTV 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 yourusers.
  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 usestechnology 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 inspireand 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 definedby what it does, but even more so by what it doesn’t do.
  26. 26. 1.Prioritize.
  27. 27. The no. 1 goalThe 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 helpdifferentiate… 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 ureFeat Feature ureCapa Capability 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 ureSimilar 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 ReleaseTime 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 roadblocks.To improve specific tools,flows, tasks.
  54. 54. Test early to fail big.Go rogue. Paper prototypes, clickable sketches, animatedconcepts.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 moreprecise, test more detailed interactions. Test key scenariosTest visual designs, html, java script, server calls.
  56. 56. Ask the right questions.Identify major roadblocks. “I love Under Armour, especiallyDon’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 somemore.
  59. 59. How do you know if your design succeeded?
  60. 60. Define success before you startdesigning. 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 inreal time.
  62. 62. Analytics tell us what users aredoing, and highlight issues in currentsystem Why are 43% of customers stopping after the payment info page?
  63. 63. Look at this. Tablet conversion rate0.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 rate0.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 beforeyou judge. Tablet conversion rate0.50%0.45%0.40%0.35%0.30% UK DE0.25% SE0.20% US FR0.15% CA0.10%0.05%0.00%
  66. 66. Once you have identified your mostimportant 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 / 203. Increase loyalty • Frequency of visits • - 2%
  67. 67. Measure.
  68. 68. Ask your users why things aren’tworking. “Wow… why didn’t you tell me before “What’s the return how expensive “Why should I policy?” shipping was…?”create an accountwhen I just want to shop?”
  69. 69. Don’t be afraid to touch what’s live.
  70. 70. Systematically optimizeIncremental 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.cominfo@hugeinc.com45 Main St. #220 Brooklyn, NY 11201+1 718 625 4843

×