UBC.ca - A Shift in Paradigm #PSEWEB2015

UBC.ca A Shift in Paradigm
PSEWEB 2015
Adrian Liem
Senior Web Coordinator
@adrianliem

59, 659 students
139 countries
15,253
Marcomm & Web at UBC
UBC
• 150+ staﬀ
• ~900 websites
• Decentralized

Informational + Functional
An informational gateway with 38 webpages, and 39
redirects, serving 4 primary purposes:
1. Provide basic institutional information
2. Share news stories and timely communications
3. Act as a landing page during crises / emergencies
4. Provide access to other key university websites
UBC.ca Historically
UBC.ca | A Shift in Paradigm
13 million Pageviews
5.5 million Sessions
Baseline Stats (per year)
82% Desktop
12% Mobile
6% Tablet
63% Canada
8% US
4.5% China
3% India
1.6% UK
< 1% 231 Other
@adrianliem

Visitor Flow Observed in Usability Testing:
“There and back again”
1
2
3
@adrianliem

Visitor Flow Conﬁrmed by Analytics
Country / Territory
2.31M visits, 1.19M drop-offs 1.12M visits, 707K drop-offs 414K visits, 179K drop-offs 235K visits, 128K drop-offs
Starting pages 1st Interaction 2nd Interaction 3rd Interaction
Canada
1.29M
United States
251K
...
549K
China
100K
India
75.3K
United Kingdom
52K
/index.html
1.97M
/search/ref...index.html
36.1K
(>100 more pages)
154K
/search/index.html
88.4K
/academic/index.html
41.8K
/quicklinks...index.html
23.7K
/students/index.html
311K
312K
/search/index.html
217K
(>100 more pages)
225K
/library/index.html
29.5K
/abou
t
/index.html
26.8K
/index.html
168K
46.2K
(>100 more pages)
116K
23.5K
/search/index.html
39.4K
/directorie...hools.html
20.5K
(+92 more pages)
61.4K
/index.html
24.8K
43.7K
43.6K
/search/index.html
36.2K
/vancouver/...hools.html
25.3K
⇩
Homepage
1 2 3
@adrianliem

Link Clusters :(
“confusing” “overwhelming”
“daunting”
@adrianliem

Described by our visitors as:
• Conservative
• Daunting
• Confusing
• Too text-heavy
Challenges
• Thin, ”front-loaded” homepage
• Organization-centric
• Everything for everyone, serving no one
• Limited reach and engagement
• Limited analytics
The Problems
UBC.ca | A Shift in Paradigm @adrianliem

Scope of Redesign
CLF* Header
Navigation
“Spotlight”
“Sidebar Tabs”
“Link Clusters”
Page Content
Internal Design
CLF* Footer
In Scope Out of Scope
*CLF = Common Look and Feel
@adrianliem

Background
Web design framework, created to establish a
common baseline of web standards across the
university.
Version 7.0 (released Sep-2012)
• Fully Responsive (built with Bootstrap)
• Web template ﬁles
• Varieties
• HTML
• WordPress (Basic and Advanced)
• Drupal
• CSS and Javascript hosted on a “CDN”
The CLF - Common Look and Feel

Communications & Marketing
LS
JL
KH
MC
JO
KM
CJ
@adrianliem

“Senior Web Coordinator”
• Advise and help set strategy
• Liaise with agency of record
• Consult with internal stakeholders
• Oversee
• Research
• Content strategy
• UX, design
• Technical development
• Builds
• Take to market
• Project management
• Prepare status updates for:
• Managing Director
• Team
• Stakeholders
• Prepare/review all communications and deliverables
• Conﬁgure, analyze, report on metrics
• Update content
• Build out new sub-sections, sites
• Advise, mediate
• Mentor, counsel, listen, support
My Role
TMI
@adrianliem

My Role
As I see it:
• Understand the goals and expectations of the Business Owner
• Understand the goals and expectations of the Target User
• Understand the available resources, capabilities, and constraints of the Team
Lead a cross-disciplinary team to deliver
the best possible solution.
@adrianliem

“Complex Organizational Environment”
http://www.ﬂickr.com/photos/glodjib/
@adrianliem

Stakeholder Engagement
Advisory Groups & Committees
Communicators Network
Web Advisory Council
Brand Leadership Council
UBC Executive
Audience Stakeholders
Prospective Student Marketing, Communications & Social Media (Prospective Undergraduate Students)
Student Communications Services (Undergraduate Students - Vancouver)
Faculty of Graduate & Postdoctoral Studies (Graduate Students - Vancouver)
Human Resources, C&M Internal Communications (Faculty and Staff)
Development and Alumni Engagement (Alumni, Donors)
University Relations (UBC Okanagan)
Thematic Stakeholders
Athletics (Events, Campus Life)
Continuing Studies (Academics, Community)
First Nations House of Learning (Aboriginal Engagement)
Library (Academics, Research)
President’s Office (Strategic Priorities)
Faculties
Faculty of Arts
Faculty of Medicine
Faculty of Science
Sauder School of Business
Audience Representation
Online feedback
Online usability testing
In-person usability testing
@adrianliem

Stakeholder Engagement
Listen
• Seek ﬁrst to understand, and then be understood (thanks Covey!)
Provide Opportunities for Participation
• The right opportunity, for the right people, at the right time
• One-on-one interviews, group interviews, group presentations, online
feedback forms
Be Strategic
• Strategy A: Start with the “loyalists”, move to the “challengers”
• Strategy B: Start with the top, get buy-in and support as “social proof”
@adrianliem

The Challenge
• bottle opener
• built in storage for removable plates,
cutting boards, knife
• compartments to keep dry items dry
• ultra-durable wheels
• locking tie-down bungees
• waterproof LED lights in the lid
• waterproof USB charger
• removable blue tooth speaker
• blender
Cooler
Coolest
keeps food cold
@adrianliem

“If they expect a unicorn,
it’s your fault.”
- Brett Harned, Adventures in Project Management

The Solution

UBC.ca Hierarchy of Needs
(thanks Maslow!)
Informational
Functional
Experiential
@adrianliem

UBC.ca Redesign Goals
Informational
Functional
Experiential
Primary Goals
1. Improve the delivery of information
2. Improve the functional elements
3. Deliver a better experience
New
Improve
Supporting Objectives
- Audience: Communicate to our diverse audiences strategically
- Brand: Be a demonstrated proof point of the UBC Brand
- Data: Establish a means to measure and monitor effectiveness
@adrianliem

Apr 2013
Apr 25, 2014
UBC.ca Redesign Process
Research & Testing
Environmental scan & competitive positioning
Web analytics review
Usability testing
Internal stakeholder consultation
User Experience Architecture
Navigation, wireframes
User testing, validation
Design & Development
Creative exploration
Content strategy & Design comps
Content / Creative production
Technical Implementation
Launch
Operational support
Content management
1
2
3
4
Sep 2013
on-going
@adrianliem

Project Management

The Task Board
• Weekly sprints, reviewed daily
• Self-organization (individual accountability)
• Simple, fast
• Where people can see it
Scrum Task Board

The Task Board
• Weekly sprints, reviewed daily
• Self-organization (individual accountability)
• Simple, fast
• Where people can see it
Motivational tool as much as an
organizing one.
Scrum Task Board

Progress Charts

“Burndown” Chart(thanks Dave!)

UBC.ca Feature Stories - “Burndown” Chart
Deliverable
Component/
Element
Week 1 Week 2
@adrianliem

Goals + Needs
INFORMATIONAL
EXPERIENTIAL
FUNCTIONAL
@adrianliem

Prioritized by Purpose
INFORMATIONAL
EXPERIENTIAL
FUNCTIONAL INFORMATIONAL
EXPERIENTIAL
FUNCTIONALINFORMATIONAL
EXPERIENTIAL
FUNCTIONAL
Stories Utility Pages
Audience Pages
Informational Pages
INFORMATIONAL FUNCTIONAL
Homepage
EXPERIENTIAL
@adrianliem

12:00 AM - April 25, 2014
@adrianliem

April 2014

“Hand-built” & Semi-Automated
• HTML, CSS, Javascript, PHP
• WordPress as a “Content Engine”
Wrapped with the CLF
• Fully-responsive
• Multiple layout options
• Built-in UI library, iconography
• Whitney Font
** the same standard offered across the
university **
Analytics
• Google Analytics (w/ Event tracking)
• Crazy Egg (heat maps, clicks)
UBC.ca - Under the Hood

New Homepage
@adrianliem

• An open and authentic glimpse into the
personalities of the people at UBC
• A human face for what was previously
viewed as a daunting and institutional
presence online
Representation
• Students
• Faculty
• Multiple units, departments, faculties
• Vancouver and Okanagan campuses
http://ubc.ca/about/people.html
UBC.ca Feature Personalities

UBC NOW
Feature Stories
@adrianliem

http://ubc.ca/stories
UBC.ca Feature Stories
@adrianliem

UBC’s Vanier Scholars

Faces of Research - Reach and Exposure
Public recognition by the Royal Society of Canada (via Twitter)
@adrianliem

Path to Research - Reach and Exposure
Redistributed by NSERC via Twitter to an audience of 67.6K
@adrianliem

Expanded Reach
Referral
Sources
APR 25, 2014
to APR 25, 2015
49,965
11,491
1,790
46%
APR 25, 2013
to APR 25, 2014
16,247
3,720
753
41%
Change
+208%
+209%
+138%
+13%% New Visitors
@adrianliem

• Weekly collection of stories
published to the UBC.ca homepage
• Curated from across the university
• Ampliﬁes stories from smaller units
Content Types / Formats
• News, stories, events, event recaps
• Social Media: Twitter posts,
Instagram photos
UBC.ca Review | Spring 2015
UBC NOW
@adrianliem

(1)
Stories published
in distributed
web properties
(2)
Stories queued up in a
WordPress site
(3)
WP generates JSON Feed:
stories, Tweets, Instagram
(4)
Feed is published to UBC.ca,
UBC.ca directs visitors to the
stories in their respective sites
WordPress as a “Content Engine”

Redesigned Interior Pages
@adrianliem

Providing Contextual Lead-Ins
• Provide context for links
• Imagery and language matches the destination
• Increase visitors’ conﬁdence in clicking a link
• A “warm handshake”
New Design Pattern: “Gateways/Signposts”

Gateways in Practice
Research.ubc.caUBC.ca
@adrianliem

Increased Depth and Context
@adrianliem

Distribution of Pageviews
APR 2013
to APR 2014
51% 41%
9.1%
8.5%
8.6%
5.7%
4%
4%
3.7%
0.74 - 1.85%
< 0.5%
1.68 - 2.54%
0.5 - 1%
0.1 - 0.4%
APR 2014
to APR 2015
16%
Homepage 6,592k
Search 2,054k
Admissions 1,174k
Academics 1,095k
14%
Homepage 5,427k
Search 1,780k
Admissions 1,134k
Academics 752k
Prospective Students 528k
Undergraduate Students 504k
Graduate Students 480k
Our Campuses 851k
About 625k
6.5%
4.7%
4.2% About 1,095k
@adrianliem

Changes in Pageviews on UBC.ca
@adrianliem

Event Tracking
Measuring hover & click/tap-through rates on:
• Navigation
• Stories
• Promotional content
• All outbound links
@adrianliem

Data-informed Seasonal Patterns
Prospective Students
Graduate Students
Media
Faculty & Staff
Donors
Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug
Undergraduate Students
Pageviews
Low High
Audience
Alumni
Community
Pageview Trends
Event Tracking
+ =
@adrianliem

INFORMATIONAL
EXPERIENTIAL
FUNCTIONAL INFORMATIONAL
EXPERIENTIAL
FUNCTIONAL
SearchStories
Dimensional Differences - New vs. Return Visitors
63% 37%37% 63% Return Visitors
New Visitors
Resembles Pac-man
Does not resemble Pac-Man
@adrianliem

Analytics Dashboard

Automating Analytics - Setup
Google Analytics
Google Sheets
Create:
• Charts
• Tabular data
• Filtered data
Online Reports
(with live data)
Export & Import
Embed
Print Reports
& Slide Decks
Export
@adrianliem

Redesign = The End

Scope of Responsibility: Before and After
Websites
Technical scoping
Engagement with 1 council
Ad hoc usability reviews
+ Quarterly stories + weekly stories
+ Editorial decision-making
+ 2 more councils + 20+ stakeholders
+ Annual / Bi-annual reviews, on-going
feedback forms + surveys
Before After
@adrianliem

Shift in Paradigm: Scope of Responsibility
Websites
Technical scoping
Engagement with 1 council
Ad hoc usability reviews
+ Quarterly stories + weekly stories
+ Editorial decision-making
+ 2 more councils + 20+ stakeholders
+ Annual / Bi-annual reviews, on-going
feedback forms + surveys
April 24, 2015 April 25, 2015
@adrianliem

Pre & Post Surveys
UBC.ca rated on:
• Content
• Ease of use
• Overall Experience
“How would you rate the relevance
and the content in this site?”
“How easy was it to ﬁnd what you
were looking for?”
“How would you rate your overall
experience visiting UBC.ca today?”
Prospective Students
Current Students
Faculty
PRE POST
Intercept posted on UBC.ca, directing visitors to an online survey.
@adrianliem

A/B Testing
What
• Homepage IxD
• Layouts
How
• Markup for two layouts on the same ﬁle
• Markup includes unique “event” ID’s
• A vs. B loaded depending on timestamp (PHP)
• Layout A > odd second
• Layout B > even second
• Measure Events in Google Analytics (# of clicks)
Examples
• Placement / order of static promotional spots
• CTR with vs. without Story Previews

Building on New Real Estate
Launched April 2014
• Resources & Contacts
Build-Out April 2015
• What’s New (news)
• What’s Happening (events)
• Message from the President
• Your UBC (people proﬁles)
• Resources & Contacts
2014 Launch 2015 Build-Out
Faculty & Staff section (Working at UBC)
@adrianliem

Outcomes
• New conceptual model
• Increased depth with new “real-estate” for the future
• New content ecosystem (digital > web)
• Agile processes & tools in traditional environment
• Data-informed decision-making
• New benchmarks and standards
UBC.ca Redesign

Thank you!
Adrian Liem
Senior Web Coordinator
@adrianliem

UBC.ca - A Shift in Paradigm #PSEWEB2015

Recommended

Recommended

More Related Content

Similar to UBC.ca - A Shift in Paradigm #PSEWEB2015

Similar to UBC.ca - A Shift in Paradigm #PSEWEB2015 (20)

Recently uploaded

Recently uploaded (20)

UBC.ca - A Shift in Paradigm #PSEWEB2015