A 20 minute case study of how we use the core model and mobile first thinking to redesign the Norwegian Cancer Society's website. Find resources here: http://bit.ly/core-brighton

1. The Core Model
@idaAa / Ida Aalen
Responsive Day Out
June 27th
bit.ly/
core-brighton

3. Redesigning the NCS
1. Objectives & target audiences
2. User research
3. Concept & tone of voice
4. Core workshops & sketching
5. Design, content & development
6. Governance & iterations

4. Don’t do anything
without knowing
objectives &
user needs ;)

5. Top task survey
“If you’re visiting The Cancer Society’s website, which
five tasks are the most important to you?”
1000+ participants chose between 79 different tasks.

6. Treatment of cancer
Symptoms of cancer
Preventing cancer
Cancer types
Latest research
Choosing a hospital
Patient rights
Next of kin advice
Waiting times
Dietary prevention
0 % 1 % 2 % 3 % 4 % 5 % 6 %
Top 25%
6 out of
79 tasks got
25% of the
votes

7. Home page

8. Home page

9. Home page

10. Home page

11. Home page

12. Home page

13. Home page

15. Many users
will never see
any other page

16. Many users
will never see
any other page

17. Googled «lung cancer»
Many users
will never see
any other page

18. Googled «lung cancer»
Saw a link on Facebook about
cancer research
Many users
will never see
any other page

19. Business
goals
User
tasks

20. Business
goals
User
tasks

21. Business
goals
User
tasks

22. Business
goals
User
tasks

23. Business
goals
User
tasks

24. Business
goals
User
tasks
“Lung cancer”

25. Business
goals
User
tasks
Core pages
“Lung cancer”

26. Business
goals
User
tasks
Core pages
“Lung cancer”“Donate”

27. Business
goals
User
tasks
Core pages
“Lung cancer”“Donate”

28. The Core Model
@AreGH

29. The Core Model
• Core pages is where your users solve
their task and you reach your
objectives
@AreGH

30. The Core Model
• Core pages is where your users solve
their task and you reach your
objectives
• Paths, not hierarchy
@AreGH

31. The Core Model
• Core pages is where your users solve
their task and you reach your
objectives
• Paths, not hierarchy
• No blind alleys
@AreGH

32. Using the core model on
your team or with your
clients

33. Lawyer
Prevention
Web editor
Design
Socionom
Research
Cancer nurse
Fundraiser
Cancer care

34. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks

35. Identify your core pages
This is done by matching business goals and user
needs.

36. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks

37. Inward paths
How will the user get here? How will they find this
content?

38. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
How will
the user find
its way to this
core page?

39. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
How will
the user find
its way to this
core page?

40. Core content
What content elements do we need to make sure the
user solves their task (while respecting our objectives)

41. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
What’s
the optimal
solution, for
the user and
for us?

42. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
What’s
the optimal
solution, for
the user and
for us?

43. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks

44. Outward paths
After the user has solved their task, where do we want
to send them next?

45. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
Where
should we send
the user, after
they’ve solved
their primary
task?

46. Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
Where
should we send
the user, after
they’ve solved
their primary
task?

47. Using mobile to
prioritize
How would you place these elements if you only had a
mobile screen available?

48. Inward paths Core contents & forward paths
Core page:
Business goals (achieve at least one) User tasksIf you
had a small
screen, how
would you
prioritize these
elements?

50. The core is
the same on
all devices

51. Early paper sketch Early photoshop sketch HTML & CSS prototype
No “Lorem
Ipsum”. We only
used actual
content when
designing.

52. Example
Breast cancer

59. Time on page
3:573:48

60. Example
Donations

61. Treatment of cancer
Symptoms of cancer
Preventing cancer
Cancer types
Latest research
Choosing a hospital
Patient rights
Next of kin advice
Waiting times
Dietary prevention
0 % 1 % 2 % 3 % 4 % 5 % 6 %
Top 25%
6 out of
79 tasks got
25% of the
votes

62. Treatment of cancer
Symptoms of cancer
Preventing cancer
Cancer types
Latest research
Choosing a hospital
Donate
Volunteer
Memory gift
Will gift
0 % 1 % 2 % 3 % 4 % 5 % 6 %
Top 25%
6 out of
79 tasks got
25% of the
votes
Fundraising
was at the
bottom...

63. Research
project
Core page

64. Make a
donation
Research
project
Core page Outward path

65. Portable
donation forms!

69. But...
Does it
work?

70. Unique visitors
2010 2011 20142013
Launch
2012

71. 2006 2007 2008 2009 2010 2011 2012 2013
Cancer line
conversations +40%
Launch

72. TITTEL
1
2
3

73. Player 1: Wilhelm
Lines: 4
Points: 2367

74. Keeping
priorities
from small
screens
pays off

76. One time
donations
+198%

77. Regular
donors
+288%
One time
donations
+198%

78. Regular
donors
+288%
One time
donations
+198%
Regular
donors sum
+382%

79. Regular
donors
x4
One time
donations
x3
Regular
donors sum
x5

80. Members
+107%

81. Members
x2

82. 2011 2012 2013 2014 (so far)
Annual income, regular
donors (web)

83. 2011 2012 2013 2014 (so far)
Annual income, regular
donors (web)
Launch

84. 2011 2012 2013 2014 (so far)
Annual income, regular
donors (web)
Launch

85. 2011 2012 2013 2014 (so far)
Annual income, regular
donors (web)
Launch

86. Christmas campaign

87. Christmas campaign
15%

88. Christmas campaign
15% 17%

89. Christmas campaign
15% 17%
10%

90. Membership campaign

91. Membership campaign
2,5%

92. Membership campaign
2,5%
6,5%

93. Membership campaign
2,5%
6,5%
7,3%

97. Desktop
Tablet
Smartphones
Text
Cold water challenge
3,5
million NOK
in 2 weeks

98. Thank you!
@idaAa or ida@netliferesearch.com
Slides & resources:
bit.ly/core-brighton