Every generation is a little different. They bring different beliefs and perspectives tied to their upbringing. Generation Z, those born in 1995 or later, have been brought up in a world where information is at their fingertips. They are digitally connected through laptops, tablets and smartphones. If they have a question, all they have to do is pull out a device and ask Siri, Google or Alexa. They have a drive for getting information, learning new things and making an impact.

Gen Z students interested in Stanford are no different. We've often heard Stanford describe their students as adventurous, highly motivated, and passionate in their desire to come together and deepen their learning. During their time at Stanford, they will discover what motivates them and how they can impact the world after graduation. This is true of full-time Stanford students, as well as visiting students participating in the Summer Session. Stanford’s Summer Session provides current Stanford students, high schoolers and students at other universities with the unique opportunity to complete a summer at Stanford – getting a full experience of the coursework and college life Stanford offers.

The program isn’t cheap, and not every student can afford it.

We recently worked with the Stanford Summer Session communications team to combine the high school and college level websites into one site with a fresh design and structure. We kicked off the project with a discovery phase that included user surveys and stakeholder interviews.

The Problem

Image 1

The old tuition tables from Stanford Summer Session. Students had to navigate the fees and add all the relevant fees up on their own.

As we learned from the user surveys, students are cost-aware individuals, just like Gen Zers all over the nation. Corey Seemiller and Meghan Grace in Generation Z Goes to College couldn’t have put it any better: “Anxiety over being able to afford a college education is forefront on the minds of these students.” Prospective Summer Session students were specifically looking for ways to make the program fit within their budget. This message was amplified by the interviews we conducted with the Summer Session staff, who noted that tuition information was buried, and in some cases, scattered throughout the site.

Through more discussion with stakeholders and students, we learned that students struggled with deciphering the available tuition and fee tables, inhibiting them from learning how much the program would cost (see Image 1). Additionally, as fees and tuition changed every year, staff found it painful and time-consuming to update information in the old system.

The Solution

So what did we do to help these students out? We created a one-stop-shop to get an estimate of the cost – welcome the tuition and fees calculator. By answering a few simple questions, students can get a true estimate of the total cost for their summer at Stanford. If they’re not happy with the results, they can tweak their answers to help make the program fit their budget.

As an added bonus, the system makes it really easy for staff to update the costs each year! On the admin side, each question and list of answers are fully editable. The dollar amounts can be changed for each student type to ensure the estimate will stay accurate for each coming school year. On the front end, the questions are organized, options are shown or hidden depending on previous answers, and the total amount is tallied on the final screen. Vue.js allowed us to build a complex interface simply, while making the static data more engaging.

How We Got There

Hopefully you’re in love with the solution we came up with, and maybe you’re wondering how we got here. Well, you already know we did some research – surveyed current students and interviewed staff – to learn about the problems they were facing. We then brought our two teams together to brainstorm ideas using the Core Model exercise.

We took a few minutes to sketch out the proposed solution.

These ideas were then further refined in wireframes and design:

And finally developed in Drupal 8.

The tuition and fees calculator was designed to provide Gen Zs with the information they need to financially plan their summer at Stanford, but all generations can benefit from it. Since launch in November 2017, the calculator has appeared in the top 10 visited pages of the redesigned site, with an average of 3000 pageviews per month.