Don't Design Websites. Design Web SYSTEMS! (DrupalCon London 2011)
Usability bootcamp 3 18-13 high edweb ne-final
1. Usability Bootcamp
How we transformed Admission sites by
adopting user-centered design
Val Fox
Bentley University
Office of Digital Engagement
HighEdWeb New England
March 18, 2013
2. Business school in Waltham, MA
• 4,000+ undergraduate students; 1,400 graduate students
• 20 undergraduate majors; 10 masters programs
Digital Engagement Office
• 7-person team
• Supports ~80 sites
4. Our Users
Design for me I need to find
I don’t care about
your org structure
NOT you! info quickly
Don’t talk to me in If you don’t
language I don’t make this easy,
understand I’ll leave
Photo source: webcoursesbangkok.com
5. Making a case for users begins
with NOT talking about users.
7. Admissions
Did NOT want to talk about users or a new
website.
We love our site!
Don’t make us change
our web process.
We don’t have time
to focus on this
project.
8. Admissions
So we offered them what they DO want:
• Increased lead pool
• More applicants
• Increased yield rates
9. Wake Up Call
20% of prospective students said
they would remove a school from
consideration because of a poor
web experience
Source: Noel Levitz
2011 E-Expectations Report
20. Focus Groups
Best for: Sourcing qualitative feedback
Who: • Prospective undergraduate students
• Parents (undergraduate)
• Prospective graduate students
Source: • Undergraduate Tours
• Graduate Open House
Goal: Gain an understanding of
• Priority content
• College research process
• General web usage
• Influencers
Photo source: tamarabustos.com
21. Focus Groups
Set up: 1 hr sessions at our research lab
Groups of 5-6 students/parents
Paid $50 each + pizza
Facilitator and note taker
Cost: $2,500
Time: 4 weeks
Center for Marketing Technology
Bentley University
Output: Summary of findings > shared w/team
Bring personas to life:
“Don’t tweet me after I apply, that’s just weird!”
“My mom loves helping me with the research process, it’s
her way of ‘bonding’ with me.”
23. Online Surveys
Best for: Quantitative feedback
• Purpose of site visit
• Able to complete purpose of visit
• Why (or why not)
Who: 500+ site visitors to our Admissions sites
24. Online Surveys
Tool: iPerceptions “Plus” account
• Data export
• Unlimited data collection
• Device-specific
• Adjustable invitation rate
• Multi-language
Cost: $20/mo
Approach: 4 standard + optional questions
25. Online Surveys
Standard Rate your overall site experience (1-10)
Questions: Primary purpose of visit (multi-choice)
Were you able to complete purpose of your
visit (yes/no)
• If yes > what did you value most
• If no > why not
How likely are you to recommend
Optional Visit frequency
Questions: Source (how you arrived at site)
Demographics
26. Online Surveys
Output: Summary shared via PPT doc
Key Qualified visitors are most
Learnings: demanding
Content = meat + potatoes
“Information too vague”
“Couldn’t find average SAT scores”
“I want detailed information on the grad
program curriculum”
Photo source: chefmom.sheknows.com
27. Personas
Source: Forrester Research
Agency: Primacy
28. Personas
Defined as: Hypothetical user developed through interviews &
observations of real users
Use for: Create a common understanding of target audience
Must: • Sound like a real person
• Include compelling narrative
• Call out key attributes & high level goals
• Enable design decisions
• Include scenarios
29. Personas
Infographics convey Kelly’s device usage & tech
proficiency
Photos of Kelly’s items give a feeling for her lifestyle
Source: Forrester Research
Agency: Primacy
30. Personas Lend to Scenarios
Persona Prospective graduate student
Goal: Find a part-time MBA program in Boston area
Scenario: • Searches for “Boston MBA programs”
• Reaches Bentley.edu > Academics > Graduate
Programs
• Sees MBA programs but labels aren’t clear
• Visits each program page to learn more but gets
frustrated with time spent
32. Analytics
Tools Google Analytics: Free
CrazyEgg: $228/year for
“standard” account
Best Revealing behavior – NOT
for: intent
Google Analytics:
comprehensive site analytics
CrazyEgg: ad-hoc reporting for
specific pages
33. Google Analytics
Pre-launch: Tracking out-of-the-box stats:
• Site visits & visitors
• Pageviews
• Pages/visit
• Bounce rate
• Top pages
• Traffic by source
Results: No actionable insights
No ownership
34. Google Analytics
Post-launch: Set up Admission profiles w/dashboards
Tracking KPIs via automated reports
• Conversion rates by form
• Conversion rates by source
• Cost per visit (search keywords)
Results Weekly review w/stakeholders
Ownership & accountability
35. Analytics Insights for Admissions
Output: Key user insights:
Google Analytics
• High priority content
• Top paths to content
• Content gaps (top search terms)
CrazyEgg
• Overall site experience
• Task success/failure & rationale
39. Usability Testing
Best for: Finding specific problems (prototype or live site)
Who: 8-10 students for each Admission site
Set-up: Facilitator + note-taker
Camtasia Studio (screen capture)
Cost: $99/license – Camtasia
$15 gift card - tester
40. Usability Testing
Tasks Site navigation (find a major or program)
Tested: Sign up for a tour
Find application deadlines
Find link to apply
Find info for accepted students
Output: Summary of findings
Design modifications before handoff to dev
Total cost: $400
41. Launch of BOTH sites
Nov-Dec 2012
bentley.edu/undergraduate
bentley.edu/graduate
42. Results
Results: Year-over-year online leads
Undergrad: 6% increase
Grad: 11% increase
Year-over-year mobile traffic: 2.4x higher
Year-over-year mobile traffic
Bounce rate: Dropped by 10% to 42%
Pages/visit: Slight increase
Total cost: $2,800
43. Stay in touch
• Twitter:@ValerieFox
• www.slideshare.net/FoxAtBentley
• www.bentley.edu/DE
Notes de l'éditeur
Shared this heatmap (visualization of where visitors are clicking) – brighter areas are most popular.Visitors were on task and were looking for info on:Tuition & financial aidAcademicsApplyingVery little interaction with all this content that they were putting resources against
Green light!
Green light!
Before we go any further, the best way to understand the NEW way of site development is to understand the OLD way – the linear waterfall approach
In user-centered dev, the design phase is a cyclical process whereby you’re using insights & analysis to inform the design and then testing the design BEFORE handing off to development.more cycles to the design phase …..don’t assume this means more work. Save time on the back end from fixes
Paper prototyping – no dev yet
In user-centered dev, the design phase is a cyclical process whereby you’re using insights & analysis to inform the design and then testing the design BEFORE handing off to development.more cycles to the design phase …..don’t assume this means more work. Save time on the back end from fixes
Typical use: reactions to brand positioning or new product/service
Not Zoomerang or Survey Monkey but on-site surveys to your visitorsExplain these are surveys that are served up on your site – just drop few lines of javascript code
Assume .5 – 1% of site visitors will complete survey
Musts:Real person: create empathy – you’re designing for real people!Compelling narrative: “day in the life”Call out key attributes: High level goals should be explicit (ie, print out app deadlines)Enable design decisions: Help design teams decide what features & functionality are criticalScenarios: the list of steps the persona will go thru to reach the goal
Scenario is the list of steps the persona will go thru to reach the goal
CrazyEgg supports heatmaps, scrollmap, confetti and other visualization toolsConfettishows you exactly where people clicked and is color-coded by referring site
Key pages:
All of those insights were compiled in a creative brief for the designer (who was also very vested & involved in process)