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

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. About Huge.
We help transform brands
and grow businesses.

3. Our approach.
Great user experiences are what drive
business performance and marketing.

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. 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. 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. 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. It’s all about your ideas.

9. It’s all about your ideas.
It’s all about your users.

10. Three steps to designing a user experience:
1. Listen.
2. Focus.
3. Listen some more.

11. 1. Listen to your
users.

12. You have a target audience for
your product…

13. How do you find out how to
design for them?

14. Never only go by what people say.

15. Instead, watch what they do.

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. Ask freeform.

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. Get to know them, summarize
them, utilize them.

20. Know your user s’ digital habits.
Redesign of UnderArmour.com.

21. Understand their full decision journey.

22. Listen to your users.
Always come back to them
during design.

23. 2. Focus.

24. What makes a great digital
product?

25. A good product isn’t only defined
by what it does, but even more so
by what it doesn’t do.

27. 1.
Prioritize.

28. The no. 1 goal
The basis of your business the reason for users to come.

29. In addition to the top goal…
Top priority. The basis of your
business, must be fulfilled.

30. … 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

31. … 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.

33. 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

34. 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

35. A clean, focused feature set.
Feat
Feat ure
ure
Feat
ure
Feat Feat
ure ure
2
Feat 3
ure
Feat Feat
ure ure

36. Be thorough up front. 36.

37. 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

38. 2.
Construct.

39. It’s time to start drawing.

40. 1.
The most important building blocks
2.
The structure
3.
Detailed design

41. Example:
Under Armour

42. Question:
What’s UA’s most important page,
user task, and feature?

43. Your most important page.

44. Your most important task.

45. Features that support main goal

46. Ways to get there.

47. Ways to make it stick

48. Most important entry and exit.
Running shorts
Thanks. Cool.

50. Design out the pages

62. Always keep your users and
goals in mind.
Always focus.

63. 3.
Test.

64. Will it work?

65. Can we test this?

66. Can we test this?
We have to test this.

67. Ask the users.
To test multiple ideas /
concepts.
To identify major road
blocks.
To improve specific tools,
flows, tasks.

68. 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.

69. 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.

70. 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.”

71. Listen to your users,
because they are right.

72. Listen some
more.

73. How do you know if your design
succeeded?

74. 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

75. Every digital product has to evolve in
real time.

76. Analytics tell us what users are
doing, and highlight issues in current
system
Why are 43% of
customers
stopping after the
payment info
page?

77. 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

78. 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

79. 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%

80. 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%

81. Measure.

82. 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?”

83. Don’t be afraid to touch what’s
live.

84. 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

85. Become more intelligent with
each test.
Institutionalize knowledge.

86. Become better.

88. Questions…

89. hugeinc.com
info@hugeinc.com
45 Main St. #220 Brooklyn, NY 11201
+1 718 625 4843