the core model at ux camp cph 2014

136
The Core Model: Getting to business while making friends Ida Aalen @idaAa UX Camp CPH 2015

Upload: ida-aalen

Post on 20-Jul-2015

1.046 views

Category:

Design


0 download

TRANSCRIPT

Page 1: The Core Model at UX Camp CPH 2014

The Core Model:Getting to business while making friends

Ida Aalen @idaAaUX Camp CPH 2015

Page 2: The Core Model at UX Camp CPH 2014

@idaAaIda AalenUX Designer

Page 3: The Core Model at UX Camp CPH 2014

Home page

Page 4: The Core Model at UX Camp CPH 2014

Home page

Page 5: The Core Model at UX Camp CPH 2014

Home page

Page 6: The Core Model at UX Camp CPH 2014

Home page

Page 7: The Core Model at UX Camp CPH 2014

Home page

Page 8: The Core Model at UX Camp CPH 2014

Home page

Page 9: The Core Model at UX Camp CPH 2014

Home page

Page 10: The Core Model at UX Camp CPH 2014
Page 11: The Core Model at UX Camp CPH 2014

Googled

Clicked a link on Facebook

Page 12: The Core Model at UX Camp CPH 2014

Googled

Clicked a link on Facebook

Many users will never see

any other page

Page 13: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Page 14: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Page 15: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Page 16: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Page 17: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Page 18: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Cores

Page 19: The Core Model at UX Camp CPH 2014

Businessgoals

Usertasks

Cores

Forward paths

Page 20: The Core Model at UX Camp CPH 2014

The Core Model• The Core is where your users solve

their tasks and you reach yourobjectives

• Paths, not hierarchy• No dead ends

@AreGH

Page 21: The Core Model at UX Camp CPH 2014

@AreGH

Page 22: The Core Model at UX Camp CPH 2014
Page 23: The Core Model at UX Camp CPH 2014
Page 24: The Core Model at UX Camp CPH 2014

Do your user research

Page 25: The Core Model at UX Camp CPH 2014

...and establishobjectives!

Page 26: The Core Model at UX Camp CPH 2014

Core workshopPeople work in pairs,and present their workafter each step

1. Identify core pages2. Inward paths3. Core content4. Forward paths5. Prioritizing core elements

Page 27: The Core Model at UX Camp CPH 2014
Page 28: The Core Model at UX Camp CPH 2014

Make cores, not wars

Page 29: The Core Model at UX Camp CPH 2014

6–14 participantsNo web, design or content skills necessary!

• facilitator (you!)• your team: design, UX, content, etc• people with expert knowledge• content owners• people who should be collaborating, but

aren’t• people with strong opinions about the

website

Page 30: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 31: The Core Model at UX Camp CPH 2014
Page 32: The Core Model at UX Camp CPH 2014

Lawyer

PreventionWeb editor

Design

SocionomResearch

Cancer nurse

Fundraiser

Cancer care

Page 33: The Core Model at UX Camp CPH 2014

Step #1

Identify your core pagesThis is done by matching business goals and user needs.

Page 34: The Core Model at UX Camp CPH 2014

Top task survey«If you’re visiting The Cancer Society’s website, which five tasks are the most important to you?»

Page 35: The Core Model at UX Camp CPH 2014

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

Page 36: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 37: The Core Model at UX Camp CPH 2014

Step #2

Inward pathsHow will the user get here? How will they find this content?

Page 38: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

How will the user find their way to

this core page?

Page 39: The Core Model at UX Camp CPH 2014

Step #3

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

Page 40: The Core Model at UX Camp CPH 2014

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?

Page 41: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 42: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 43: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 44: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 45: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 46: The Core Model at UX Camp CPH 2014

Step #4

Forward pathsAfter the user has solved their task, where do we want to send them next?

Page 47: The Core Model at UX Camp CPH 2014

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?

Page 48: The Core Model at UX Camp CPH 2014

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?

Page 49: The Core Model at UX Camp CPH 2014

Inward paths Forward pathsCore content

Core page:

Business goals (achieve at least one) User tasks

Page 50: The Core Model at UX Camp CPH 2014

Step #5

Prioritizing core elementsHow would you place these elements if you only had a mobile screen available?

Page 51: The Core Model at UX Camp CPH 2014
Page 52: The Core Model at UX Camp CPH 2014
Page 53: The Core Model at UX Camp CPH 2014

Updated template!

Page 54: The Core Model at UX Camp CPH 2014

The core is the same on all devices

Page 55: The Core Model at UX Camp CPH 2014

Example

Breast cancer

Page 56: The Core Model at UX Camp CPH 2014

Warning!

Page 57: The Core Model at UX Camp CPH 2014
Page 58: The Core Model at UX Camp CPH 2014
Page 59: The Core Model at UX Camp CPH 2014
Page 60: The Core Model at UX Camp CPH 2014
Page 61: The Core Model at UX Camp CPH 2014
Page 62: The Core Model at UX Camp CPH 2014

Time on page

Page 63: The Core Model at UX Camp CPH 2014

Time on page

3:573:48

Page 64: The Core Model at UX Camp CPH 2014
Page 65: The Core Model at UX Camp CPH 2014
Page 66: The Core Model at UX Camp CPH 2014

– More people contact the cancer line now than before, but now they’re more informed when they contact usAnine Wiig DagestadOncology nurse

Page 67: The Core Model at UX Camp CPH 2014

2006 2007 2008 2009 2010 2011 2012 2013 2014

Cancer line conversations

Page 68: The Core Model at UX Camp CPH 2014

2006 2007 2008 2009 2010 2011 2012 2013 2014

Cancer line conversations Launch

Page 69: The Core Model at UX Camp CPH 2014

2006 2007 2008 2009 2010 2011 2012 2013 2014

Cancer line conversations Launch

+43%

Page 70: The Core Model at UX Camp CPH 2014

2006 2007 2008 2009 2010 2011 2012 2013 2014

Cancer line conversations Launch

+58%+43%

Page 71: The Core Model at UX Camp CPH 2014

Unique visitors

2010 2011 2012 2013 2014 2015

Page 72: The Core Model at UX Camp CPH 2014

Unique visitors

2010 2011 2012 2013 2014 2015

Launch

Page 73: The Core Model at UX Camp CPH 2014
Page 74: The Core Model at UX Camp CPH 2014
Page 75: The Core Model at UX Camp CPH 2014
Page 76: The Core Model at UX Camp CPH 2014

Example

Increasing sales of mobile broad band

Page 77: The Core Model at UX Camp CPH 2014

0

10000

20000

30000

40000

1 7 13 19 25 31 37 43 49 55 61 67 73 79 85 91 97 103 109 115 121 127 133 139 145 151 157 163 169 175 181 187 193 199 205 211 217 223 229 235 241 247 253 259 265 271 277 283 289 295 301 307 313 319 325 331 337 343 349 355 361 367 373 379 385 391 397 403 409 415 421 427 433 439 445 451 457 463 469 475 481 487 493 499 505 511 517 523 529 535 541 547 553 559 565 571 577 583 589 595 601 607 613 619 625 631 637 643 649 655 661 667 673 679 685 691 697 703 709 715 721 727 733 739 745 751 757 763 769 775 781 787 793 799 805 811 817 823 829 835 841 847 853 859 865 871 877 883 889 895 901 907 913 919 925 931 937 943 949 955 961 967 973 979 985 991 997 1003100910151021102710331039104510511057106310691075108110871093109911051111111711231129113511411147115311591165117111771183118911951201120712131219122512311237124312491255126112671273127912851291129713031309131513211327133313391345135113571363136913751381138713931399140514111417142314291435144114471453145914651471147714831489149515011507151315191525153115371543154915551561156715731579158515911597160316091615162116271633163916451651165716631669167516811687169316991705171117171723172917351741174717531759176517711777178317891795180118071813181918251831183718431849185518611867187318791885189118971903190919151921192719331939194519511957196319691975198119871993199920052011201720232029203520412047205320592065207120772083208920952101210721132119212521312137214321492155216121672173217921852191219722032209221522212227223322392245225122572263226922752281228722932299

Pagev

iews

Pages (ranked)

Page 78: The Core Model at UX Camp CPH 2014

0

10000

20000

30000

40000

1 7 13 19 25 31 37 43 49 55 61 67 73 79 85 91 97 103 109 115 121 127 133 139 145 151 157 163 169 175 181 187 193 199 205 211 217 223 229 235 241 247 253 259 265 271 277 283 289 295 301 307 313 319 325 331 337 343 349 355 361 367 373 379 385 391 397 403 409 415 421 427 433 439 445 451 457 463 469 475 481 487 493 499 505 511 517 523 529 535 541 547 553 559 565 571 577 583 589 595 601 607 613 619 625 631 637 643 649 655 661 667 673 679 685 691 697 703 709 715 721 727 733 739 745 751 757 763 769 775 781 787 793 799 805 811 817 823 829 835 841 847 853 859 865 871 877 883 889 895 901 907 913 919 925 931 937 943 949 955 961 967 973 979 985 991 997 1003100910151021102710331039104510511057106310691075108110871093109911051111111711231129113511411147115311591165117111771183118911951201120712131219122512311237124312491255126112671273127912851291129713031309131513211327133313391345135113571363136913751381138713931399140514111417142314291435144114471453145914651471147714831489149515011507151315191525153115371543154915551561156715731579158515911597160316091615162116271633163916451651165716631669167516811687169316991705171117171723172917351741174717531759176517711777178317891795180118071813181918251831183718431849185518611867187318791885189118971903190919151921192719331939194519511957196319691975198119871993199920052011201720232029203520412047205320592065207120772083208920952101210721132119212521312137214321492155216121672173217921852191219722032209221522212227223322392245225122572263226922752281228722932299

Pagev

iews

Everyone agrees these

pages are important

Pages (ranked)

Page 79: The Core Model at UX Camp CPH 2014

1 7 13 19 25 31 37 43 49 55 61 67 73 79 85 91 97 103 109 115 121 127 133 139 145 151 157 163 169 175 181 187 193 199 205 211 217 223 229 235 241 247 253 259 265 271 277 283 289 295 301 307 313 319 325 331 337 343 349 355 361 367 373 379 385 391 397 403 409 415 421 427 433 439 445 451 457 463 469 475 481 487 493 499 505 511 517 523 529 535 541 547 553 559 565 571 577 583 589 595 601 607 613 619 625 631 637 643 649 655 661 667 673 679 685 691 697 703 709 715 721 727 733 739 745 751 757 763 769 775 781 787 793 799 805 811 817 823 829 835 841 847 853 859 865 871 877 883 889 895 901 907 913 919 925 931 937 943 949 955 961 967 973 979 985 991 997 1003100910151021102710331039104510511057106310691075108110871093109911051111111711231129113511411147115311591165117111771183118911951201120712131219122512311237124312491255126112671273127912851291129713031309131513211327133313391345135113571363136913751381138713931399140514111417142314291435144114471453145914651471147714831489149515011507151315191525153115371543154915551561156715731579158515911597160316091615162116271633163916451651165716631669167516811687169316991705171117171723172917351741174717531759176517711777178317891795180118071813181918251831183718431849185518611867187318791885189118971903190919151921192719331939194519511957196319691975198119871993199920052011201720232029203520412047205320592065207120772083208920952101210721132119212521312137214321492155216121672173217921852191219722032209221522212227223322392245225122572263226922752281228722932299

«But my pages are important

too!»

Pages (ranked)

Page 80: The Core Model at UX Camp CPH 2014

Our products• Subscriptions• Pricing• Coverage• Buy

Page 81: The Core Model at UX Camp CPH 2014
Page 82: The Core Model at UX Camp CPH 2014

What are the different subscriptions?

Page 83: The Core Model at UX Camp CPH 2014

What’s the price?

Page 84: The Core Model at UX Camp CPH 2014

Coverage

Page 85: The Core Model at UX Camp CPH 2014

My connection

isn’t working!

Page 86: The Core Model at UX Camp CPH 2014
Page 87: The Core Model at UX Camp CPH 2014

Reorganizing the content

using the core model

Page 88: The Core Model at UX Camp CPH 2014

+80%

Sales of mobile broad band

Customer support emails

Number of pages

-35%-80%

Page 89: The Core Model at UX Camp CPH 2014

Example

Increasing donations

Page 90: The Core Model at UX Camp CPH 2014

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

Page 91: The Core Model at UX Camp CPH 2014

Treatment of cancer

Symptoms of cancer

Preventing cancer

Cancer types

Latest research

Choosing a hospital

Donate

Volunteer

Memory gift

Legacy gift

0 % 1 % 2 % 3 % 4 % 5 % 6 %

Top 25%

Fundraising-tasks were on the bottom of

the list!

6 out of 79 tasks got 25% of the

votes

Page 92: The Core Model at UX Camp CPH 2014

Research project

User task

Increase donations

Objective

Page 93: The Core Model at UX Camp CPH 2014

Make a donation

Research project

User task Forward path

Increase donations

Objective

Page 94: The Core Model at UX Camp CPH 2014

Portabledonation forms!

Page 95: The Core Model at UX Camp CPH 2014
Page 96: The Core Model at UX Camp CPH 2014
Page 97: The Core Model at UX Camp CPH 2014

Portable donation

form

Page 98: The Core Model at UX Camp CPH 2014

Treatment of cancer

Symptoms of cancer

Preventing cancer

Cancer types

Latest research

Choosing a hospital

Donate

Volunteer

Memory gift

Legacy gift

0 % 1 % 2 % 3 % 4 % 5 % 6 %

Top 25%

But some

people are actually

coming to donate

Page 99: The Core Model at UX Camp CPH 2014

Make a donation

User task

Increase donations

Objective

Page 100: The Core Model at UX Camp CPH 2014

Recurring donation

Make a donation

User task Forward path

Increase donations

Objective

Page 101: The Core Model at UX Camp CPH 2014
Page 102: The Core Model at UX Camp CPH 2014
Page 103: The Core Model at UX Camp CPH 2014

One time donations+602%

Page 104: The Core Model at UX Camp CPH 2014

Regular donors

+704%

One time donations+602%

Page 105: The Core Model at UX Camp CPH 2014

Regular donors

+704%

One time donations+602%

Regular donors sum+847%

Page 106: The Core Model at UX Camp CPH 2014

Regular donorsx8

One time donationsx7

Regular donors sum

x9

Page 107: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Page 108: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Page 109: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Launch

Page 110: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Launch

Page 111: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Launch

Improved forms

Page 112: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Launch

Improved forms

Page 113: The Core Model at UX Camp CPH 2014

2011 2012 2013 2014

Annual income, regular donors (web)

Launch

Improved forms

Page 114: The Core Model at UX Camp CPH 2014

Example

Increasing membership

Page 115: The Core Model at UX Camp CPH 2014

How do you increase membership when the idea of membership can be frightening?

Page 116: The Core Model at UX Camp CPH 2014

Rehabilitation

IT

Fundraising

Webmaster

Member services

Page 117: The Core Model at UX Camp CPH 2014
Page 118: The Core Model at UX Camp CPH 2014
Page 119: The Core Model at UX Camp CPH 2014
Page 120: The Core Model at UX Camp CPH 2014

Living with loss of vision

User task

Increase member-

ship

Objective

Page 121: The Core Model at UX Camp CPH 2014

Call us for advice

Living with loss of vision

User task Forward path

Increase member-

ship

Objective

Page 122: The Core Model at UX Camp CPH 2014
Page 123: The Core Model at UX Camp CPH 2014

How do you get from core pages to design and content creation?

Page 124: The Core Model at UX Camp CPH 2014
Page 125: The Core Model at UX Camp CPH 2014
Page 126: The Core Model at UX Camp CPH 2014
Page 127: The Core Model at UX Camp CPH 2014
Page 128: The Core Model at UX Camp CPH 2014

We built the core

model into Statamic

Page 129: The Core Model at UX Camp CPH 2014

Fundraising

Information Web editor

Rehabilitation

FundraisingPolitics

IT

Page 130: The Core Model at UX Camp CPH 2014
Page 131: The Core Model at UX Camp CPH 2014
Page 132: The Core Model at UX Camp CPH 2014
Page 133: The Core Model at UX Camp CPH 2014
Page 134: The Core Model at UX Camp CPH 2014

Did you notice I didn’t show any home pages?

Page 135: The Core Model at UX Camp CPH 2014

Takeaways• Objectives and user tasks first• Start with the core• Get rid of dead ends• Be creative about your forward

paths• Home page last, not first

Page 136: The Core Model at UX Camp CPH 2014

Ida Aalen / @[email protected]

Thank you!(Ask me for a Webdagene discount!)

Slides & resources: