Class: Interaction Design, Northeastern University
Dates: Sept - Dec 2018
Tools: InDesign, Adobe XD, InVision
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.
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.
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.
The last step in the process was creating high-fidelity mock-ups of the wireframes with applied branding.
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.