Top Banner
All Together Now Content & Collaboration in a Responsive Redesign Amy Lavoie Aura Seltzer Sara Wachter-Boettcher CONFAB CENTRAL 2014 / /
98

All Together Now: Content & Collaboration in a Responsive Redesign

Aug 23, 2014

Download

Education

Harvard College knew it was time for a website overhaul: While prospective students who visited campus raved about the welcoming staff, those who only used the website said Harvard felt distant and formal. Users had to navigate three different but often near-duplicate websites—the College, Admissions, and Financial Aid—to get critical information. Amid it all, mobile visits were soaring—and the College needed to support those users equally.

The answer? A single, responsive website that unified content from all three groups, brought the Harvard College experience to life online, and better communicated information about key topics like financial aid. But getting there took more than editorial revisions and layout decisions. It took changing how each department saw its content, transforming it from a departmental output into a student-centric resource.

Hear how web design studio Happy Cog, Harvard, and a content strategist partnered to transform multiple websites into a single, student-centered system, and learn how leading with content can:

- Help diverse departments embrace a single vision and shared roadmap
- Keep projects on time and on budget
- Ensure responsive design systems and CMS specs actually fit your content’s needs
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: All Together Now: Content & Collaboration in a Responsive Redesign

All Together NowContent & Collaboration in a

Responsive RedesignAmy Lavoie Aura Seltzer Sara Wachter-Boettcher

C O N F A B C E N T R A L 2014

/ /

Page 2: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Amy LavoieDirector of Digital CommunicationsHARVARD COLLEGE ADMISSIONS & FINANCIAL AID

Sara Wachter-BoettcherContent StrategistCONSULTANT

Aura SeltzerDesignerHAPPY COG

Page 3: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

1OneHarvard

Page 4: All Together Now: Content & Collaboration in a Responsive Redesign
Page 5: All Together Now: Content & Collaboration in a Responsive Redesign
Page 6: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Admissions

Financial Aid

Harvard College

Page 7: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Admissions Harvard CollegeFinancial Aid

Page 8: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

11One PlaceOne MessageOne Source

One PlaceOne MessageOne Source

Admissions Financial Aid Harvard CollegeOne Website

Page 9: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

from the StartContent

Page 10: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

First, we got to know the team…

Page 11: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Shift perspectiveFoster collaboration

Create alignment

Page 12: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Shift perspectiveFoster collaboration

Create alignment

Page 13: All Together Now: Content & Collaboration in a Responsive Redesign

Sketch from a student’s POV

Page 14: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Shift perspectiveFoster collaboration

Create alignment

Page 15: All Together Now: Content & Collaboration in a Responsive Redesign

Brainstorm beyond departments

Page 16: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Shift perspectiveFoster collaboration

Create alignment

Page 17: All Together Now: Content & Collaboration in a Responsive Redesign

Turn ideas into a strategic direction

Page 18: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Then, we listened to our audiences.

Page 19: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

“It was a pain to use—not very intuitive and old-fashioned. It’s kind of drab and boring.

— Harvard Applicants

Page 20: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

“There wasn’t a clear set of instructions. What do I need to do to apply?

— Harvard Applicants

Page 21: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

— A Harvard Parent

It’s been really nice to find out that Harvard is inviting, warm, loving—not snobby and exclusionary as you often believe it to be. 

Page 22: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

— An Accepted Student

When I went to the campus, I really had the gut feeling at Harvard and nowhere else.

Page 23: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

StrategyA Scalable

Page 24: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

Page 25: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

v

Page 26: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

v

Page 27: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

v

Page 28: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation. v

220

Page 29: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Sounds nice. But how?

Page 30: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Show the real HarvardMake exploration easy

Design stories, not pages

Page 31: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Show the real HarvardMake exploration easy

Design stories, not pages

Page 32: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

Before

Harvard-centricDistantPassive

Page 33: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

Before

Harvard-centricDistantPassive

Page 34: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

All of our financial aid is awarded on the basis of demonstrated financial need—there are no academic, athletic or merit-based awards, and we meet the demonstrated need of every student, including international students, for all four years. We invite you to explore our web site for a detailed description of all aspects of our aid program, including our Harvard Financial Aid Initiative for low and moderate income students…

Before

Harvard-centricDistantPassive

Page 35: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

The real Harvard is...Dignified, but not stuffyWarm, but not casualEnergetic, but not peppyPersonal, but not intimateIntellectual, but not boring

Page 36: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Your financial circumstances have never kept you from great achievement, and they will not keep you from Harvard. Applying for financial aid will not hinder your application, regardless of your citizenship. We provide the support you need to get here by working closely with you to understand your family’s individual circumstances.

After

Student-focusedDirect

Empowering

Page 37: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Your financial circumstances have never kept you from great achievement, and they will not keep you from Harvard. Applying for financial aid will not hinder your application, regardless of your citizenship. We provide the support you need to get here by working closely with you to understand your family’s individual circumstances.

After

Student-focusedDirect

Empowering

Page 38: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Show the real HarvardMake exploration easy

Design stories, not pages

Page 39: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Before

Admissions Financial Aid Harvard CollegeOverview

Net Price CalculatorProspective StudentsCurrent StudentsParentsResources

Forms and PublicationsContact Us

About Harvard College

AcademicsAdmissionsAdvising and CounselingDean of Harvard CollegeFinancial Aid

Harvard College DirectoryMap of the CampusMy.Harvard.eduOnline Publications

ParentsResourcesStudent Life

Today’s Harvard

About HarvardApplyingFinancial AidVisit Harvard

Page 40: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Before

Admissions Financial Aid Harvard CollegeOverview

Net Price CalculatorProspective StudentsCurrent StudentsParentsResources

Forms and PublicationsContact Us

About Harvard College

AcademicsAdmissionsAdvising and CounselingDean of Harvard CollegeFinancial Aid

Harvard College DirectoryMap of the CampusMy.Harvard.eduOnline Publications

ParentsResourcesStudent Life

Today’s Harvard

About HarvardApplyingFinancial AidVisit Harvard

Page 41: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

After

Harvard CollegeAbout

AdmissionsFinancial AidAcademicsStudent &

Residential Life

Page 42: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Show the real HarvardMake exploration easy

Design stories, not pages

Page 43: All Together Now: Content & Collaboration in a Responsive Redesign

W I R E F R A M E S – Harvard College, Admissions & Financial Aid Modi!ed: Mon Apr 8 2013 Page 11/28

AFFORDABILITY ( 1.2.1.1 )

Content & FeaturesSearch

About Financial Aid Academics Student & Residential Life

For Parents For Prospective Students For Current Students For School Counselors For Alumni

Admissions

Home > Admissions > Choosing Harvard >

Logo

AffordabilityAFFORDABILITY

ACADEMIC ENVIRONMENT

MEET US IN YOUR HOMETOWN

LIVING AT HARVARD

STUDENT ACTIVITIES

FACULTY ENGAGEMENT

ARTS & CULTURE

RESEARCH OPPORTUNITIES

LEADERSHIP & SERVICE

ROTC

<10% :The amount of their annual income families that make less than $150,000 are expected to contribute.

Statistics and Facts

90% of American families would pay the same or more to send their children to a state school.

More facts about Financial Aid >

We are dedicated to making Harvard affordable, no matter your family’s situation. If you are accepted, we pledge to meet your demonstrated financial need—without loans.

In fact, for 90 percent of American families, Harvard is less expensive than a state school. If you are an exceptional student but concerned about costs, we can help.

For Faculty

MyHarvard Directory FAQs College Events

1 “Financial Aid” Propeller Video (60 sec) 1.1 Optional video caption

2 Crosslink to “Assessing Need” (1.3.1.2)

3 Crosslink to “Cost of A!endance” (1.3.1.1)

4 Statistics and Facts Module A highly visual area featuring distinguishing facts and !gures will demonstrate how Harvard strives to make every student’s education accessible and a"ordable.

4.1 Crosslink to “Fact Sheet” (1.3.1.3)

4.2 Crosslink to “Fact Sheet” (1.3.1.3)

5 Crosslinks to “Net Price Calculator” (1.3.2)5.1 Module includes the !rst two dropdowns of

the calculator to lower barriers to entry and show visitors how easy it is to start using the calculator. The options in the second drop-down should change depending on the user’s !rst selection. The full calculator should prepopulate with the user’s already-complet-ed answers and pick up where the user le# o".

6 Mini Apply Module A repeatable module that calls prospectives to begin the application process. Crosslinks to “Appli-cation Process” (1.2.4).

6.1 Crosslinks to “What We Look For” (12.4.3), “Application Requirements” (1.2.4.1), and “Application Timeline” (1.2.4.2)

The A"ordability page emphasizes (from an Admissions perspective) Harvard’s dedication to making sure

that anyone who is accepted can a$end. The content needs personal appeal and warmth, to make use of

great facts, and to link to the appropriate sections of Financial Aid for details.

Content & Features

Caption for video: Ehendit que veliquos pa plitate cullesti a qui nobit, simagnim eicia vollige-nis nus apicien ducimai Iquodis evelit que.

Financial Aid

1

4

2

3

1.1

4.1

4.2

“Our doors have long been open to talented students regardless of financial need but many students simply do not know or believe this. We are determined to change both the perception and the reality.”– President Emeritus Lawrence H. Summers

Cost of Attendance

Determining your needAll of Harvard’s financial aid is awarded on the basis of demonstrated financial need. We consider many factors such as your/family income, assets, size of family, and unusual ex-penses to determine your financial aid package—which is carefully designed to ensure you can afford your education.

A private college education is a significant endeavor for any family to undertake. We break down all the parts to help your planning: from tuition to Health Services fees, even with additional estimations for things like personal expenses.

NPC Screenshot

Start the Calculator

Calculate Your Net Price

Start Your Application

Our Net Price Calculator will give you a quick estimate of the net cost of a year at Harvard and help you understand how Harvard can help. Begin here:

We outline what we look for in our applicants, tell you what you’ll need to submit, and will help you stay on track so your application best represents you.

5.1

6.1

USA

-- select --

What is your primary place of residence?

What is your primary country of citizenship?

5

6

Page 44: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

…but content patterns aren’t content.

Page 45: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

OwnershipSharing

Page 46: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Balance the load

Page 47: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Make it feel achievable

Page 48: All Together Now: Content & Collaboration in a Responsive Redesign

Make space for participation

Page 49: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Deliverables became tools

Opinions became objectives

Training became practice

Rules became habits

Page 50: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

UnityKeeping

Page 51: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Remind, realign, reassure

Page 52: All Together Now: Content & Collaboration in a Responsive Redesign
Page 53: All Together Now: Content & Collaboration in a Responsive Redesign
Page 54: All Together Now: Content & Collaboration in a Responsive Redesign
Page 55: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

How do we bring all these parts together?

Page 56: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

ContentDesigning for

Page 57: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Art directionHierarchy & priority

Responsiveness & modularity

Page 58: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Art directionHierarchy & priority

Responsiveness & modularity

Page 59: All Together Now: Content & Collaboration in a Responsive Redesign
Page 60: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Art directionHierarchy & priority

Responsiveness & modularity

Page 61: All Together Now: Content & Collaboration in a Responsive Redesign
Page 62: All Together Now: Content & Collaboration in a Responsive Redesign
Page 63: All Together Now: Content & Collaboration in a Responsive Redesign
Page 64: All Together Now: Content & Collaboration in a Responsive Redesign
Page 65: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Art directionHierarchy & priority

Responsiveness & modularity

Page 66: All Together Now: Content & Collaboration in a Responsive Redesign
Page 67: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Page 68: All Together Now: Content & Collaboration in a Responsive Redesign
Page 69: All Together Now: Content & Collaboration in a Responsive Redesign
Page 70: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Page 71: All Together Now: Content & Collaboration in a Responsive Redesign

Design for possibilities

Page 72: All Together Now: Content & Collaboration in a Responsive Redesign

Build with purpose

Page 73: All Together Now: Content & Collaboration in a Responsive Redesign

We did it!

Page 74: All Together Now: Content & Collaboration in a Responsive Redesign
Page 75: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Mobile matters, more than ever.

Page 76: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

More visitors from mobile devices

November 2012 – April 2013

17.8%November 2013 – April 2014

7.1%

Page 77: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Content strategy drives success.

Page 78: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

Page 79: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

v

Page 80: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

More applicants requested fee waivers

v16.4%2012 – 2013

22.7%2013 – 2014

Page 81: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation.

v

Page 82: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

— A Harvard Undergraduate

It's less cluttered, the font is bigger, and pictures seem to pop more on the new website. There's definitely a warmer feel... The new profiles of bloggers give a better presented literal face of the student body.

Page 83: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Turn talented, diverse prospects into confident applicants—and successful Harvard students—with content that makes Harvard feel within reach, creates a sense of belonging, and clarifies the path from application to graduation. v

220

Page 84: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

We are receiving fewer baseline questions, and operations are going more smoothly. Most of the questions are now application-related. We are funneling more specific and better questions to [College staff], because there is better information on the website.

— Anthony Grant INFORMATION SERVICES SUPERVISOR, HARVARD COLLEGE ADMISSIONS VISITOR CENTER

Page 85: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

APRILOCTOBER

New Site

Fewer Financial Aid questions received by email

80

70

60

50

40

30

20

10

Page 86: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

APRILOCTOBER

New Site

Fewer Financial Aid questions received by email

EARLY ACTION

REGULAR DECISION

FINANCIAL AID APPLICATION DUE80

70

60

50

40

30

20

10

Page 87: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

LearnedWhat We

Page 88: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Everyone is a content person.

1

Page 89: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Our new website brings clarity to the admissions process and shows the affordability of a Harvard education in a way that was simply not possible before. I’m proud of the way we have brought the Harvard undergraduate community to life online.

— William Fitzsimmons DEAN OF ADMISSIONS & FINANCIAL AID, HARVARD COLLEGE

Page 90: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

To go “responsive,” be responsive.

2

Page 91: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Feedback loops prevent loose ends.

Page 92: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

3Success is what’s

sustainable.

Page 93: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Choose perfection

Page 94: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Choose perfectionChoose progress

Page 95: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Content evolves, long after launch.

Page 96: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Admissions

Financial Aida websiteBuild momentum

Page 97: All Together Now: Content & Collaboration in a Responsive Redesign

C O N F A B C E N T R A L 2014

Admissions

Financial Aida websiteBuild momentum