UHCS Website Design


Class: Interaction Design, Northeastern University

Dates: Sept - Dec 2018

Tools: InDesign, Adobe XD, InVision

The Project

Over the course of a semester for my Interaction Design class, I worked individually to create a full website design for the Northeastern University Health Center (UHCS).

Defining the Problem

The first step in my process was establishing primary and secondary users and their goals. Primary users consisted of college students, since they are the main users of UHCS and would thus be the main users of the website. Secondary users consisted of NEU faculty and staff that have access to UHCS, as well as healthcare professionals who may need to access patient information and records.

I concluded that the main goal of primary users would be to monitor and tack their health, as well as gain information about health-related issues. Including, but not limited to, preventative, curative, or diagnostic measures.


Research + Discovery

To begin initial research, I conducted a survey to collect information about how people felt about UHCS and their desires for an online presence. Most of the results demonstrated a negative attitude towards UHCS and a majority of people expressed frustration over the lack of online resources for booking appointments, updating records, etc. 75% of participants said they have been to UHCS before in person, 33% of which said they were extremely dissatisfied with their visit. 62% of participants said they make appointments to UHCS by calling the office.

UX Design

Keeping the insights from the surveys in mind, I created a series of wireframe sketches on paper, which I later digitized in Adobe XD. I also created a sitemap to determine the hierarchy of information for the website and each page.

personality levers personality levers

Once the structure of the website was created, I started working on branding elements, like color palette, logo, and typography.

I decided on a simple three color palette that stayed on brand with Northeastern's red. I also wanted to keep the logo simple and make it easily recognizable.

UI Development

The last step in the process was creating high-fidelity mock-ups of the wireframes with applied branding.

page design page design

I was very excited to try some tips and tricks for animating my prototype in Adobe XD. Overall it was a very rewarding learning experience. You can view a clickable prototype of the website here.

© Copyright © All rights reserved | Made with by Colorlib
Customizations by Cam McKenzie