Student Health Services

Client: Boston University
Date: June 29, 2017
Services: UX, Visual Design, Front-End

01. The Brief

Boston University Student Health Services hadn’t had a website redesign since 2010.

It was a dated, static website, with an unorganized structure that was difficult for the user to interact with, a huge drawback as all University students must visit the site upon arrival. The redesign tackled these challenges while also merging three existing sites into one, making 6 varying departments fit together.

02. The Challenges

The three main issues existing before the redesign were

  • Forms: Arriving as new students, you must complete an array of forms and provide information, but the website did not make it clear what each student had to complete
  • Hours: Student Health Services spans across many buildings, departments, and campuses at BU. Having to make appointments was very difficult for students, and they were always calling reception about business hours
  • Resources: Rather than keeping  central location for resources, SHS had repeated their resources page 14 times (yes, 14 actual copies of the same information) across their website to ensure users would find it

03. The Process

SHS received 10 custom page templates through the design process that not only enhanced the organization, cleanliness, and look of their site, but also the user’s experience.

Bringing the SHS site into the responsive framework, my first step began by taking the Content Strategist’s notes, sketches, and research, and turning them into clickable, responsive wireframes.

Then, I created a visual style for SHS that allowed each department to act as an individual parallel, with a unique identity, yet fitting cohesively together under the SHS umbrella.

04. Launch

Using Gather Content and WordPress, we migrated the client’s new IA into their responsive site. From here, I went through the site page by page to better layout and organize their content.

I worked with our back-end developer to best organize the pages’ HTML, and added all styling with Sass and CSS. The Sass partials are organized by creating one base file, and creating color palette mixins to alter the variables per department.

With the goal of “putting the keys in the hands of the user”, together we worked hand in hand to create many custom functionalities for the client to edit their pages.