ubc.ca - a shift in paradigm #pseweb2015

UBC.ca A Shift in ParadigmPSEWEB 2015

Adrian LiemSenior Web Coordinator@adrianliem

59, 659 students139 countries15,253

Marcomm & Web at UBC

UBC

• 150+ staff• ~900 websites• Decentralized

Informational + FunctionalAn 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 HistoricallyUBC.ca | A Shift in Paradigm

13 million Pageviews5.5 million Sessions

Baseline Stats (per year)

82% Desktop12% Mobile6% Tablet

63% Canada8% US4.5% China3% India1.6% UK< 1% 231 Other

@adrianliem

Visitor Flow Observed in Usability Testing:“There and back again”

UBC.ca | A Shift in Paradigm

12

3

@adrianliem

Visitor Flow Confirmed by AnalyticsUBC.ca | A Shift in Paradigm

Country / Territory2.31M visits, 1.19M drop-offs 1.12M visits, 707K drop-offs 414K visits, 179K drop-offs 235K visits, 128K drop-offsStarting pages 1st Interaction 2nd Interaction 3rd Interaction

Canada1.29M

United States251K

...549K

China100K

India75.3K

United Kingdom52K

/index.html1.97M

/search/ref...index.html36.1K

(>100 more pages)154K

/search/index.html88.4K

/academic/index.html41.8K

/quicklinks...index.html23.7K

/students/index.html311K

/academic/index.html312K

/search/index.html217K


/library/index.html29.5K

/abou

t

/index.html26.8K

/index.html168K



/students/index.html23.5K


/directorie...hools.html20.5K

(+92 more pages)61.4K

/index.html24.8K

/students/index.html43.7K



/vancouver/...hools.html25.3K

⇩

Homepage

1 2 3

@adrianliem

Link Clusters :(UBC.ca | A Shift in Paradigm

“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 ProblemsUBC.ca | A Shift in Paradigm @adrianliem

Scope of RedesignCLF* HeaderNavigation

“Spotlight”“Sidebar Tabs”

“Link Clusters”Page ContentInternal Design

CLF* Footer

In Scope Out of Scope


*CLF = Common Look and Feel

@adrianliem

BackgroundWeb 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 files• Varieties • HTML • WordPress (Basic and Advanced) • Drupal• CSS and Javascript hosted on a “CDN”

The CLF - Common Look and FeelUBC.ca | A Shift in Paradigm @adrianliem

Communications & MarketingUBC.ca | A Shift in Paradigm

LS

JL

KH

MCJO

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• Configure, analyze, report on metrics• Update content• Build out new sub-sections, sites• Advise, mediate• Mentor, counsel, listen, support

My RoleUBC.ca | A Shift in Paradigm

TMI

@adrianliem

My RoleUBC.ca | A Shift in Paradigm

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 deliverthe best possible solution.

@adrianliem


“Complex Organizational Environment”

http://www.flickr.com/photos/glodjib/

@adrianliem

Stakeholder EngagementUBC.ca | A Shift in Paradigm

Advisory Groups & CommitteesCommunicators NetworkWeb Advisory CouncilBrand Leadership CouncilUBC Executive

Audience StakeholdersProspective 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 Sta�)Development and Alumni Engagement (Alumni, Donors)University Relations (UBC Okanagan)

Thematic StakeholdersAthletics (Events, Campus Life)Continuing Studies (Academics, Community)First Nations House of Learning (Aboriginal Engagement)Library (Academics, Research)President’s O�ce (Strategic Priorities)

FacultiesFaculty of ArtsFaculty of MedicineFaculty of ScienceSauder School of Business

Audience RepresentationOnline feedbackOnline usability testingIn-person usability testing

@adrianliem

Stakeholder EngagementUBC.ca | A Shift in Paradigm

Listen• Seek first 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 ChallengeUBC.ca | A Shift in Paradigm

• 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

UBC.ca | A Shift in Paradigm @adrianliem

The SolutionUBC.ca | A Shift in Paradigm @adrianliem

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 e�ectiveness

@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 ManagementUBC.ca | A Shift in Paradigm

What does it tells us?• What areas of the page are being viewed• What links are being clicked on• Where visitors are mousing/exploring

Why is this helpful?• Provides indication of popular content (navigational links, design elements)• Provides insights into what information is sought after at which times of the year• Helps inform design and content adjustments

Key Takeaways• Di�erent elements serve di�erent roles • High click-rates indicates highly relevant and useful to our audience • Low click-rates indicate lower utility, but may serve a symbollic role in demonstrating institutional values

@adrianliem

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

Scrum Task BoardUBC.ca | A Shift in Paradigm




@adrianliem

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 BoardUBC.ca | A Shift in Paradigm




@adrianliem

Progress ChartsUBC.ca | A Shift in Paradigm




@adrianliem

“Burndown” Chart (thanks Dave!)





@adrianliem

UBC.ca Feature Stories - “Burndown” ChartUBC.ca | A Shift in Paradigm




Deliverable

Component/Element

Week 1 Week 2

@adrianliem

Goals + NeedsUBC.ca | A Shift in Paradigm

INFORMATIONAL

EXPERIENTIAL

FUNCTIONALInformativePrioritized

Easy to Scan

@adrianliem


Prioritized by Purpose

INFORMATIONAL

EXPERIENTIAL

FUNCTIONAL INFORMATIONAL

EXPERIENTIAL

FUNCTIONALINFORMATIONAL

EXPERIENTIAL

FUNCTIONAL

Stories Utility PagesAudience PagesInformational Pages

INFORMATIONAL FUNCTIONAL

Homepage

EXPERIENTIAL

@adrianliem


12:00 AM - April 25, 2014@adrianliem

April 2014UBC.ca | A Shift in Paradigm

InformativePrioritized

Easy to Scan

@adrianliem

“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 o�ered across the university **

Analytics• Google Analytics (w/ Event tracking)• Crazy Egg (heat maps, clicks)

UBC.ca - Under the HoodUBC.ca | A Shift in Paradigm


Easy to Scan

@adrianliem


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 ScholarsUBC.ca | A Shift in Paradigm @adrianliem

adrianliem

Typewritten Text


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





ReferralSources

APR 25, 2014to APR 25, 2015

49,965

11,491

1,790

46%

APR 25, 2013to 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• Amplifies 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


Easy to Scan

@adrianliem

(1)Stories published

in distributedweb 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”UBC.ca | A Shift in Paradigm @adrianliem


Redesigned Interior Pages@adrianliem

Providing Contextual Lead-Ins• Provide context for links• Imagery and language matches the destination• Increase visitors’ confidence in clicking a link• A “warm handshake”

New Design Pattern: “Gateways/Signposts”UBC.ca | A Shift in Paradigm @adrianliem

Gateways in PracticeUBC.ca | A Shift in Paradigm

Research.ubc.caUBC.ca

@adrianliem


Increased Depth and Context@adrianliem


Distribution of Pageviews

APR 2013to 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 2014to 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 528kUndergraduate Students 504kGraduate 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

MediaFaculty & Sta�

Donors

Sep Oct Nov Dec Jan Feb Mar Apr May Jun Jul Aug

Undergraduate Students

Pageviews

Low High

Audience

AlumniCommunity





Pageview Trends

Event Tracking

+ =

@adrianliem


INFORMATIONAL

EXPERIENTIAL

FUNCTIONAL INFORMATIONAL

EXPERIENTIAL

FUNCTIONAL

SearchStories

Dimensional Di�erences - New vs. Return Visitors




63% 37%37% 63% Return VisitorsNew Visitors

Resembles Pac-man

Does not resemble Pac-Man

@adrianliem

Analytics DashboardUBC.ca | A Shift in Paradigm @adrianliem

Automating Analytics - SetupUBC.ca | A Shift in Paradigm




Google Analytics

Google SheetsCreate:• Charts• Tabular data• Filtered data

Online Reports(with live data)

Export & Import

Embed

Print Reports& Slide Decks

Export

@adrianliem

Redesign = The End





@adrianliem


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 find 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 TestingUBC.ca | A Shift in Paradigm

What• Homepage IxD• Layouts

How• Markup for two layouts on the same file• 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 profiles)• Resources & Contacts

2014 Launch 2015 Build-Out




Faculty & Sta� 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 LiemSenior Web Coordinator@adrianliem




ubc.ca - a shift in paradigm #pseweb2015

Technology