tackling complex web projects
TRANSCRIPT
![Page 1: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/1.jpg)
Tackling Complex Web Projects
Museums and the Web 2016Sean O’Shea
1
![Page 3: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/3.jpg)
UX Design
3
Strategy
Advocate for the user throughout all project phases.
Adapt project processand empower internal stakeholders
![Page 4: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/4.jpg)
Building a website* is a complex endeavor.
*or any digital experience4
![Page 5: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/5.jpg)
5
![Page 6: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/6.jpg)
1. Lay the Foundation
2. Create Consensus & Momentum
3. Maintain Alignment
6
![Page 7: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/7.jpg)
Lay the Foundation— Section 1 of 3 —
7
![Page 8: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/8.jpg)
Adopting a Discovery Mindset
Lay the Foundation
8
![Page 9: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/9.jpg)
“A problem well stated is a problem half solved.”
Charles Kettering
9
![Page 10: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/10.jpg)
We need a better website.
10
![Page 11: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/11.jpg)
We need a better website.↑ This is not a problem.
11
![Page 12: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/12.jpg)
Parable of the Elephant“Many-sidedness”
12
![Page 13: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/13.jpg)
Adopting a Discovery Mindset
Dig deeperDon’t settle for your current understanding
Take three steps backAcknowledge that proximity affects perspective
Tap into and unify perspectivesAlign visions to align momentum
13
![Page 14: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/14.jpg)
Setting PreliminaryGoals
Lay the Foundation
14
![Page 15: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/15.jpg)
Increase MembershipIncrease Attendance
Reduce Info Calls
WCAG Compliance
Immersive Online Collection
At-a-glance Info
17
![Page 16: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/16.jpg)
Setting Preliminary Goals
Create initial North StarsThe first heading for your journey
Don’t set them in stoneContinually reassess throughout the project
18
![Page 17: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/17.jpg)
19
![Page 18: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/18.jpg)
DefiningYour Team
Lay the Foundation
20
![Page 19: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/19.jpg)
25
![Page 20: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/20.jpg)
Defining Your Team
Who is involved?Plot everyone who can or should have influence
Set expectationsMake sure everyone understands their role
26
![Page 21: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/21.jpg)
27
![Page 22: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/22.jpg)
Mapping YourEcosystem
Lay the Foundation
28
![Page 23: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/23.jpg)
29
![Page 24: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/24.jpg)
Mapping Your Ecosystem
Include all touchpointsEvery way your audiences interact with you
Include all integrationsEverywhere your data goes
Look for opportunitiesReuse, new connections, path optimizations
31
![Page 25: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/25.jpg)
32
![Page 26: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/26.jpg)
Create Consensus— Section 2 of 3 —
and Momentum
33
![Page 27: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/27.jpg)
34
![Page 28: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/28.jpg)
SpectrumPolling
Create Consensus and Momentum
35
![Page 29: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/29.jpg)
1 2 3 4 5
36
![Page 30: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/30.jpg)
1 2 3 4 5
Dog CatEqually Both
Are you a dog person or a cat person?
37
![Page 31: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/31.jpg)
Keep users on the site
Get users to quality content
Equally Both
What is our primary goal?
38
![Page 32: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/32.jpg)
Keep users on the site
Get users to quality content
Equally Both
What is our primary goal?
39
![Page 33: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/33.jpg)
40
![Page 34: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/34.jpg)
41
![Page 35: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/35.jpg)
Spectrum Polling
Returns analog feedbackSolicits non-binary data
Equalizes playing fieldQuieter voices don’t get lost
Creates ownershipStakeholders are able to retain control
42
![Page 36: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/36.jpg)
43
![Page 37: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/37.jpg)
Personasand Empathy
Create Consensus and Momentum
44
![Page 38: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/38.jpg)
“[Personas enable you to] focus on a manageable and memorable cast of characters.”
Shlomo Goltz, Smashing Magazine45
![Page 39: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/39.jpg)
46
![Page 40: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/40.jpg)
48
Everyone.↑ Not helpful.
![Page 41: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/41.jpg)
49
![Page 42: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/42.jpg)
Five Types of Museum Visitors
— John Falk, Identity and the Museum Visitor Experience
Explorers
Facilitators
Experience-Seekers
Professional/Hobbyists
Rechargers
50
![Page 43: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/43.jpg)
Personas
Catalysts for empathyTool to get inside head and heart of others
Explore segmentationsReframe how you divide folks up
51
![Page 44: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/44.jpg)
52
![Page 45: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/45.jpg)
CardsortingCreate Consensus and Momentum
53
![Page 46: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/46.jpg)
54
Cardsorting Supplies
Note cards or sticky notes
Sharpies/markers
Personas
Group of internal stakeholders.
![Page 47: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/47.jpg)
55
Step 1
Create two columns—wants and needs
Go over your personas
Assign each stakeholder a persona to inhabit
Ask “what content or functionality do you need to see on the site to accomplish your goals”?
![Page 48: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/48.jpg)
56
Step 2
Stakeholders create cards, announcing to the group as they do
Stakeholders place cards in what they feel is the appropriate columns
Ask stakeholders to step out of their personas back into themselves
Is there anything missing?
![Page 49: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/49.jpg)
57
Step 3
Collectively, stakeholders group similar concepts or families of cards
At the same time, they discuss if cards need to switch columns
Have each explain the content they attributed to their persona
Do others have anything to add?
![Page 50: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/50.jpg)
58
![Page 51: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/51.jpg)
Cardsorting
Content brainstorming methodPrioritize and qualify content
Approach from persona and museum POVBe purposeful about switching between them
59
![Page 52: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/52.jpg)
60
![Page 53: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/53.jpg)
Maintain Alignment— Section 3 of 3 —
61
![Page 54: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/54.jpg)
Exploring withMood Boards
Maintain Alignment
62
![Page 55: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/55.jpg)
— Laura Franz
http://branding.blogs.umassd.edu/2015/02/09/mood-boards/
63
![Page 56: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/56.jpg)
64
![Page 57: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/57.jpg)
Mood Boards
Prototyping for designLow-effort exploration of design directions
Tool for iterationGather feedback, explore more
68
![Page 58: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/58.jpg)
69
![Page 59: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/59.jpg)
SitemapsMaintain Alignment
70
![Page 60: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/60.jpg)
71
![Page 61: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/61.jpg)
72
![Page 62: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/62.jpg)
73
![Page 63: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/63.jpg)
74
![Page 64: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/64.jpg)
76
The Three Click Rule↑ Forget it.
![Page 65: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/65.jpg)
Sitemaps
Approach from users’ POVCheck your institutional baggage
Be wary of anecdotal evidenceBackup with research
77
![Page 66: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/66.jpg)
78
![Page 67: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/67.jpg)
Lo-Fi PagePrototyping
Maintain Alignment
79
![Page 68: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/68.jpg)
80
Page Prototyping Supplies
Note cards or sticky notes
Sharpies/markers
Personas
Group of internal stakeholders.
![Page 69: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/69.jpg)
81
Step 1
Go over your personas
Assign each stakeholder a persona
to inhabit
Ask “what content or functionality
do you need to see on this page to
accomplish your goals”?
![Page 70: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/70.jpg)
82
Step 2
Stakeholders create cards,
announcing to the group as they do
Ask stakeholders to step out of
their personas back into
themselves
Is there anything missing?
![Page 71: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/71.jpg)
83
Step 3
Prune content that is better suited
to a different location on the site.
If this is the homepage, think of it
as your 30s elevator pitch.
![Page 72: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/72.jpg)
84
Step 4
Decide where on the page content
should live.
At the top? Middle? Bottom?
Group content that might coexist.
![Page 73: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/73.jpg)
86
![Page 74: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/74.jpg)
87
![Page 75: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/75.jpg)
Lo-Fi Page Prototyping
Approach from persona and museum POVBe purposeful about switching between them
Remember to pruneNo one page should do all the heavy lifting for your site.
88
![Page 76: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/76.jpg)
89
![Page 77: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/77.jpg)
90
Project Roadmap
Laying the Foundation
Discovery Mindset
Preliminary Goals
Defining Your Team
Ecosystem Maps
Consensus and Momentum
Spectrum Polling
Personas
Cardsorting
Maintaining Alignment
Mood Boards
Sitemaps
Lofi Page Prototyping
![Page 78: Tackling Complex Web Projects](https://reader031.vdocument.in/reader031/viewer/2022030307/58e894441a28ab291c8b486b/html5/thumbnails/78.jpg)
Thanks!
Follow-Up & Feedback@sposhe / @[email protected]@cuberis.com
Resources & Slidescuberis.com/mw2016
Special ThanksEmily Lytle-Painter
91