All Together Now: Content & Collaboration in a Responsive Redesign
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

All Together Now: Content & Collaboration in a Responsive Redesign

on

  • 7,188 views

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 ...

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

Statistics

Views

Total Views
7,188
Views on SlideShare
6,855
Embed Views
333

Actions

Likes
87
Downloads
154
Comments
5

5 Embeds 333

https://twitter.com 296
http://www.chupchip.com 28
https://www.linkedin.com 4
http://dev.inspera.no 3
http://zacarbonim.ru 2

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Sara,
    Thanks for sharing your nice work! I particularly like the way you highlight parts of the website by clipping them out for emphasis. Underlining in a paragraph works well in your presentation to avoid the 'sea of words.' Despite the advice of corporate presenters. sometimes more words really are necessary -
    Are you sure you want to
    Your message goes here
    Processing…
  • Great presentation, super interesting and helpful- thank you so much for sharing this!
    Are you sure you want to
    Your message goes here
    Processing…
  • @undefined Hi Sara! I just saw your comment. Sorry for the delay!
    I don't think this talk was recorded, but I'd love to come talk with your team sometime. Send me a note at sarawb.com.
    Are you sure you want to
    Your message goes here
    Processing…
  • Dear Sara,
    Is it possible to purchase recordings of your presentations? I'd love to hear your voice along with these slides!
    (another Sara) Newman
    Are you sure you want to
    Your message goes here
    Processing…
  • What a fabulous presentation - I am so sorry I was not there in person to hear you present but as I viewed the slides it was so easy to follow along and the Harvard University story so resonated with what I am trying to do at the National Cancer Institute.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

All Together Now: Content & Collaboration in a Responsive Redesign Presentation Transcript

  • 1. All Together Now Content & Collaboration in a Responsive Redesign Amy Lavoie Aura Seltzer Sara Wachter-Boettcher CONFAB CENTRAL 2014 / /
  • 2. CONFAB CENTRAL 2014 Amy Lavoie Director of Digital Communications HARVARD COLLEGE ADMISSIONS & FINANCIAL AID Sara Wachter-Boettcher Content Strategist CONSULTANT Aura Seltzer Designer HAPPY COG
  • 3. CONFAB CENTRAL 2014 1One Harvard
  • 4. CONFAB CENTRAL 2014 Admissions Financial Aid Harvard College
  • 5. CONFAB CENTRAL 2014 Admissions Harvard CollegeFinancial Aid
  • 6. CONFAB CENTRAL 2014 11 One Place One Message One Source One Place One Message One Source Admissions Financial Aid Harvard CollegeOne Website
  • 7. CONFAB CENTRAL 2014 from the Start Content
  • 8. CONFAB CENTRAL 2014 First, we got to know the team…
  • 9. CONFAB CENTRAL 2014 Shift perspective Foster collaboration Create alignment
  • 10. CONFAB CENTRAL 2014 Shift perspective Foster collaboration Create alignment
  • 11. Sketch from a student’s POV
  • 12. CONFAB CENTRAL 2014 Shift perspective Foster collaboration Create alignment
  • 13. Brainstorm beyond departments
  • 14. CONFAB CENTRAL 2014 Shift perspective Foster collaboration Create alignment
  • 15. Turn ideas into a strategic direction
  • 16. CONFAB CENTRAL 2014 Then, we listened to our audiences.
  • 17. CONFAB CENTRAL 2014 “It was a pain to use—not very intuitive and old-fashioned. It’s kind of drab and boring. — Harvard Applicants
  • 18. CONFAB CENTRAL 2014 “There wasn’t a clear set of instructions. What do I need to do to apply? — Harvard Applicants
  • 19. CONFAB CENTRAL 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. 
  • 20. CONFAB CENTRAL 2014 “ — An Accepted Student When I went to the campus, I really had the gut feeling at Harvard and nowhere else.
  • 21. CONFAB CENTRAL 2014 Strategy A Scalable
  • 22. CONFAB CENTRAL 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.
  • 23. CONFAB CENTRAL 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
  • 24. CONFAB CENTRAL 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
  • 25. CONFAB CENTRAL 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
  • 26. CONFAB CENTRAL 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
  • 27. CONFAB CENTRAL 2014 Sounds nice. But how?
  • 28. CONFAB CENTRAL 2014 Show the real Harvard Make exploration easy Design stories, not pages
  • 29. CONFAB CENTRAL 2014 Show the real Harvard Make exploration easy Design stories, not pages
  • 30. CONFAB CENTRAL 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-centric Distant Passive
  • 31. CONFAB CENTRAL 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-centric Distant Passive
  • 32. CONFAB CENTRAL 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-centric Distant Passive
  • 33. CONFAB CENTRAL 2014 The real Harvard is... Dignified, but not stuffy Warm, but not casual Energetic, but not peppy Personal, but not intimate Intellectual, but not boring
  • 34. CONFAB CENTRAL 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-focused Direct Empowering
  • 35. CONFAB CENTRAL 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-focused Direct Empowering
  • 36. CONFAB CENTRAL 2014 Show the real Harvard Make exploration easy Design stories, not pages
  • 37. CONFAB CENTRAL 2014 Before Admissions Financial Aid Harvard College Overview Net Price Calculator Prospective Students Current Students Parents Resources Forms and Publications Contact Us About Harvard College Academics Admissions Advising and Counseling Dean of Harvard College Financial Aid Harvard College Directory Map of the Campus My.Harvard.edu Online Publications Parents Resources Student Life Today’s Harvard About Harvard Applying Financial Aid Visit Harvard
  • 38. CONFAB CENTRAL 2014 Before Admissions Financial Aid Harvard College Overview Net Price Calculator Prospective Students Current Students Parents Resources Forms and Publications Contact Us About Harvard College Academics Admissions Advising and Counseling Dean of Harvard College Financial Aid Harvard College Directory Map of the Campus My.Harvard.edu Online Publications Parents Resources Student Life Today’s Harvard About Harvard Applying Financial Aid Visit Harvard
  • 39. CONFAB CENTRAL 2014 After Harvard College About Admissions Financial Aid Academics Student & Residential Life
  • 40. CONFAB CENTRAL 2014 Show the real Harvard Make exploration easy Design stories, not pages
  • 41. AFFORDABILITY (1.2.1.1) Content & Features Search About Financial Aid Academics Student & Residential LifeAdmissions 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. MyHarvard Directory FAQs College Events 1 “Financial Aid” Propeller Video (60 se 1.1 Optional video caption 2 Crosslink to “Assessing Need” (1.3.1.2) 3 Crosslink to “Cost of Attendance” (1.3. 4 Statistics and Facts Module A highly visual area featuring distinguishin and figures will demonstrate how Harvard to make every student’s education accessib affordable. 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 5.1 Module includes the first two dropdow the calculator to lower barriers to entr show visitors how easy it is to start us calculator. The options in the second d down should change depending on th first selection. The full calculator shou prepopulate with the user’s already-co ed answers and pick up where the use 6 Mini Apply Module A repeatable module that calls prospectives begin the application process. Crosslinks to cation Process” (1.2.4). 6.1 Crosslinks to “What We Look For” (12. “Application Requirements” (1.2.4.1), an “Application Timeline” (1.2.4.2) The Affordability page emphasizes (from a that anyone who is accepted can attend. T great facts, and to link to the appropriate s 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 need All 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
  • 42. CONFAB CENTRAL 2014 …but content patterns aren’t content.
  • 43. CONFAB CENTRAL 2014 Ownership Sharing
  • 44. CONFAB CENTRAL 2014 Balance the load
  • 45. CONFAB CENTRAL 2014 Make it feel achievable
  • 46. Make space for participation
  • 47. CONFAB CENTRAL 2014 Deliverables became tools Opinions became objectives Training became practice Rules became habits
  • 48. CONFAB CENTRAL 2014 Unity Keeping
  • 49. CONFAB CENTRAL 2014 Remind, realign, reassure
  • 50. CONFAB CENTRAL 2014 How do we bring all these parts together?
  • 51. CONFAB CENTRAL 2014 Content Designing for
  • 52. CONFAB CENTRAL 2014 Art direction Hierarchy & priority Responsiveness & modularity
  • 53. CONFAB CENTRAL 2014 Art direction Hierarchy & priority Responsiveness & modularity
  • 54. CONFAB CENTRAL 2014 Art direction Hierarchy & priority Responsiveness & modularity
  • 55. CONFAB CENTRAL 2014 Art direction Hierarchy & priority Responsiveness & modularity
  • 56. CONFAB CENTRAL 2014
  • 57. CONFAB CENTRAL 2014
  • 58. Design for possibilities
  • 59. Build with purpose
  • 60. We did it!
  • 61. CONFAB CENTRAL 2014 Mobile matters, more than ever.
  • 62. CONFAB CENTRAL 2014 More visitors from mobile devices November 2012 – April 2013 17.8% November 2013 – April 2014 7.1%
  • 63. CONFAB CENTRAL 2014 Content strategy drives success.
  • 64. CONFAB CENTRAL 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.
  • 65. CONFAB CENTRAL 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
  • 66. CONFAB CENTRAL 2014 More applicants requested fee waivers v16.4% 2012 – 2013 22.7% 2013 – 2014
  • 67. CONFAB CENTRAL 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
  • 68. CONFAB CENTRAL 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.
  • 69. CONFAB CENTRAL 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
  • 70. CONFAB CENTRAL 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
  • 71. CONFAB CENTRAL 2014 APRILOCTOBER New Site Fewer Financial Aid questions received by email 80 70 60 50 40 30 20 10
  • 72. CONFAB CENTRAL 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
  • 73. CONFAB CENTRAL 2014 Learned What We
  • 74. CONFAB CENTRAL 2014 Everyone is a content person. 1
  • 75. CONFAB CENTRAL 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
  • 76. CONFAB CENTRAL 2014 To go “responsive,” be responsive. 2
  • 77. CONFAB CENTRAL 2014 Feedback loops prevent loose ends.
  • 78. CONFAB CENTRAL 2014 3 Success is what’s sustainable.
  • 79. CONFAB CENTRAL 2014 Choose perfection
  • 80. CONFAB CENTRAL 2014 Choose perfectionChoose progress
  • 81. CONFAB CENTRAL 2014 Content evolves, long after launch.
  • 82. CONFAB CENTRAL 2014 Admissions Financial Aid a websiteBuild momentum
  • 83. CONFAB CENTRAL 2014 Admissions Financial Aid a websiteBuild momentum
  • 84. CONFAB CENTRAL 2014 Thank you! Amy Lavoie AALAVOIE@FAS.HARVARD.EDU college.harvard.edu Sara Wachter-Boettcher @SARA_ANN_MARIE sarawb.com Aura Seltzer @AURASELTZER happycog.com