core model thinking at the norwegian cancer society - responsive day out brighton, june 27th
DESCRIPTION
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-brightonTRANSCRIPT
The Core Model
@idaAa / Ida AalenResponsive Day OutJune 27th
bit.ly/core-brighton
Redesigning the NCS1. Objectives & target audiences2. User research3. Concept & tone of voice4. Core workshops & sketching5. Design, content & development6. Governance & iterations
Don’t do anything without knowing objectives &user needs ;)
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.
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
Home page
Home page
Home page
Home page
Home page
Home page
Home page
Many users will never see
any other page
Many users will never see
any other page
Googled «lung cancer»
Many users will never see
any other page
Googled «lung cancer»
Saw a link on Facebook about cancer research
Many users will never see
any other page
Businessgoals
Usertasks
Businessgoals
Usertasks
Businessgoals
Usertasks
Businessgoals
Usertasks
Businessgoals
Usertasks
Businessgoals
Usertasks
“Lung cancer”
Businessgoals
Usertasks
Core pages
“Lung cancer”
Businessgoals
Usertasks
Core pages
“Lung cancer”“Donate”
Businessgoals
Usertasks
Core pages
“Lung cancer”“Donate”
The Core Model
@AreGH
The Core Model• Core pages is where your users solve
their task and you reach yourobjectives
@AreGH
The Core Model• Core pages is where your users solve
their task and you reach yourobjectives
• Paths, not hierarchy
@AreGH
The Core Model• Core pages is where your users solve
their task and you reach yourobjectives
• Paths, not hierarchy• No blind alleys
@AreGH
Using the core model on your team or with your clients
Lawyer
PreventionWeb editor
Design
SocionomResearch
Cancer nurse
Fundraiser
Cancer care
Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
Identify your core pagesThis is done by matching business goals and user needs.
Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
Inward pathsHow will the user get here? How will they find this content?
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?
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?
Core contentWhat content elements do we need to make sure the user solves their task (while respecting our objectives)
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?
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?
Inward paths Forward pathsCore content
Core page:
Business goals (achieve at least one) User tasks
Outward pathsAfter the user has solved their task, where do we want to send them next?
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?
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?
Using mobile to prioritizeHow would you place these elements if you only had a mobile screen available?
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?
The core is the same on all devices
Early paper sketch Early photoshop sketch HTML & CSS prototype
No “Lorem Ipsum”. We only
used actual content when
designing.
Example
Breast cancer
Time on page
3:573:48
Example
Donations
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
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...
Research project
Core page
Make a donation
Research project
Core page Outward path
Portabledonation forms!
But... Does it work?
Unique visitors
2010 2011 20142013
Launch
2012
2006 2007 2008 2009 2010 2011 2012 2013
Cancer line conversations +40%
Launch
TITTEL
123
Player 1: WilhelmLines: 4Points: 2367
Keeping priorities from small screens pays off
One time donations+198%
Regular donors
+288%
One time donations+198%
Regular donors
+288%
One time donations+198%
Regular donors sum+382%
Regular donorsx4
One time donations
x3
Regular donors sum
x5
Members+107%
Membersx2
2011 2012 2013 2014 (so far)
Annual income, regular donors (web)
2011 2012 2013 2014 (so far)
Annual income, regular donors (web)
Launch
2011 2012 2013 2014 (so far)
Annual income, regular donors (web)
Launch
2011 2012 2013 2014 (so far)
Annual income, regular donors (web)
Launch
Christmas campaign
Christmas campaign15%
Christmas campaign15% 17%
Christmas campaign15% 17%
10%
Membership campaign
Membership campaign
2,5%
Membership campaign
2,5%
6,5%
Membership campaign
2,5%
6,5%
7,3%
DesktopTabletSmartphones Text
Cold water challenge
3,5million NOKin 2 weeks
Thank you!@idaAa or [email protected]
Slides & resources:bit.ly/core-brighton