Delivering the Best International User Experience

Work

Delivering the Best International User Experience

Johns Hopkins SAIS

The Johns Hopkins School of Advanced International Studies is one of the highest-ranked graduate schools in the world for international relations.

With campuses in the US, China, and Italy, Johns Hopkins SAIS needed an outstanding, admissions-focused website that could welcome a global audience.

mockup of home page mockup of internal page mockup of mobile website mockup of multiple screens from site mockup of tablet view

Strategic Goals

As a former admissions officer, Johns Hopkins SAIS Senior Director of Marketing Lindsey Waldrop had a unique advantage in entering the website redesign process: keen understandings of recruitment messaging and conversion strategies. “Our most important admissions content — the program pages — were seven clicks down on the old website,” Waldrop said. “Our analytics showed that prospective students weren’t getting to the content they needed. I knew we had to retool the site to make it an outward facing marketing tool. We needed to keep a laser focus on prospective students, which is easier said than done.”

To accomplish this, Waldrop enlisted the help of mStoner. “There was never any doubt that mStoner was the right agency for this project,” Waldrop said, citing mStoner’s deep background in higher education user experience design as a particular standout.

student at stacks in library
two students talking
SAIS building
smiling student in class

Strategies

The Experience Map

To bring a truly user-centric approach to the project, mStoner conducted an experience mapping workshop on the Johns Hopkins SAIS Washington, DC campus. “Any successful website redesign needs to begin with a thorough understanding of how key audiences experience an institution,” said mStoner CEO and Head of Client Experience Voltaire Santos Miran. “The experience mapping exercise helped us clarify the many touch points for all students around the world considering Johns Hopkins SAIS.”

After many interviews with students, faculty, and stakeholders, mStoner created a detailed experience map identifying the thoughts, feelings, actions, and trusted sources for information that were specific to Johns Hopkins SAIS prospective graduate students. Together, mStoner and the workshop participants mapped these across each of the four phases in the enrollment decision-making process: understand and explore; narrow options and apply; decide and accept; and commit and transition.

The resulting experience map laid the foundation for the site’s design and information architecture — and so much more.

Waldrop later repeated the exercise in Bologna, Italy to make sure the map included the experiences of students who began their studies in Europe. She returned to the map frequently when developing content for the new site. When she printed the map on a wall-size vinyl canvas and posted it near the dean’s office, she found the map also served as a banner to rally excitement for the new website among the school’s leadership.

“We hung up a wall-sized print of the experience map so people could see the depth of strategy behind this project—that it was so much more than a pretty design. It showed the complexity of what goes into producing a website for a higher education institution. People looked at it and went away thinking, ‘Wow, a lot of work is going into this and the site is going to be great.’”

Program Finder

The former website struggled to present the most basic information for prospective students: what degrees and concentrations are offered. The site more resembled a think tank website because research, events, and faculty news dominated the former homepage. Students faced an additional challenge in untangling which degrees and concentrations were offered at which campus.

To solve these challenges, mStoner and the Johns Hopkins SAIS team designed a sophisticated program finder that offered an efficient user experience for applicants looking for the best-fit program. mStoner Creative Director Ben Bilow said, “I’m very proud of our collaboration on the program finder. It was really fun to figure out how to show an applicant all of the programs that might interest them. This tool takes program finders to another level. It is a bit more complex than what other schools are using.”

I’m very proud of our collaboration on the program finder. The tool we piloted takes program finders to another level. It is a bit more complex than what other schools are offering. It also telegraphs that the school’s programs deal with very current topics, which is great for brand awareness.

— Ben Bilow, Creative Director for mStoner

The tool offers students no fewer than six ways to find the right program. A “program wizard” walks prospective students through a series of questions like “How much work experience do you have?” and “How long do you plan to pursue your studies?” An interactive results page allows users to search and filter programs by area of interest, trending topics, level of study, campus, program duration, and prior work experience.

Johns Hopkins SAIS project manager and content strategist Erin Lyons observed that the tool solves two important challenges in user experience design. “With the program finder, mStoner designed an ingenious way of providing both findability (making sure users can find the content they are looking for) as well as discoverability (helping users encounter new content they were not aware of previously). mStoner pulled out all the stops on this with very high-level design thinking and custom configuration. We all spent a lot of time refining the functionality and structuring the data, but it only came together in the end because of the expertise of the mStoner developers and [mStoner Chief Operating and Financial Officer] Bill McLaughlin’s leadership.”

Program Pages

Once prospective students could find programs they were interested to explore, the site’s program pages had to close the deal. “Communicating the value of a degree in international affairs is often challenging,” Waldrop shared. “Prospective students are often considering other types of degrees like MBAs, and they need to hear what this degree can help them do.”

The team decided to go heavy on outcomes-based content to make a compelling case for why a student should enroll in each program. “For the program pages, it was important to bring the why as much as to the forefront as the what,” said Miran. “Before we provided details about what students will study, we provided clear reasons as to why they should study this and how it will help their career. You could say we’re appealing to the heart just as much as the head.”

The program pages accomplish this with consistent sections that repeat the four benefits of a Johns Hopkins SAIS education: “Become an Expert,” “Learn From the Best,” “Advance Your Career,” and “Build Your Network.” The page content reinforces the brand messaging with abundant proof points: career outcomes, recent employers and internships, high-profile media coverage of faculty members, examples of networking opportunities, and current student profiles.

 

“It’s clear to everyone now — from our media relations manager to our faculty affairs coordinator — that we all play a part in helping the admissions team market our programs better. The website has changed how we all talk about the Johns Hopkins SAIS. There is definitely more pride conveyed.”

— Lindsey Waldrop, Johns Hopkins SAIS Senior Director of Marketing

Results

Sometimes the sweetest sound of success is silence. Waldrop reports that administrators across the school are receiving far fewer questions from prospective students, staff, and faculty alike because the website is dramatically better at serving everyone’s needs. “We expected an onslaught of requests for edits,” said Waldrop. “But it’s been crickets. People love the site and that’s pretty awesome. The school’s last two site redesigns had major hiccups at launch time and it was so imperative to get this launch right.”

Applications are up significantly over the prior year, and while Waldrop can’t attribute this to the website alone, “it certainly played a major role.” Operationally, the site is helping all teams at the school understand how important their work is to the admissions process. “It’s clear to everyone now—from our media relations manager to our faculty affairs coordinator—that we all play a part in helping the admissions team market our programs better. The website has changed how we all talk about Johns Hopkins SAIS. There is definitely more pride conveyed.”

Awards

  • ava digital honorable mention award

Services

Discovery report; user experience design; experience mapping; information architecture; responsive redesign; visual design templates; art and photography direction; content management system selection; program finder creation; thematic CSS development; programming and site implementation; content migration; quality assurance testing; analytics configuration and custom reporting.

 

Visit the Site