Overview
Problem
The HCII program at Carnegie Mellon faces increasing competition from newly established programs at other schools and the growing availability of HCI learning resources online. How can we design a website that effectively showcases the program’s unique strengths and sets it apart in this evolving landscape?
Impact and Outcome
100% of surveyors preferred the redesigned website over the existing website. 88% of surveyors saw an improvement in the visual design and ease of use of the website.
Collaborators
Maddy Cha, Andrew Siheon Lee, Anurati Sodani, and Antonio Song
My Role
Interaction Designer and UX Research Lead
Client
Carnegie Mellon University Human Computer Interaction Institute
Key Features
In our project, we came up and redesigned these key pages for our stakeholders to elevate the existing branding, as well as provide crucial and valuable information to the students who use this site.
Home
With the cinematic video background, innovative projects, and enticing parallax effects, we elevated HCII’s brand image. With this cleaner look and clearer navigation, more students had a higher opinion of CMU’s commitment to modern design.
Electives
By adding descriptions, filter functions, and topic categorization, users are able to pick out electives that are relevant to their interests and priorities. By also seeing what type of elective it is (eg. Theory, studio, popular) students are given more context to courses that sound vague.
Research
With the filter functions and the at-a-glance descriptions of research labs, students were able to find research opportunities quickly and effectively.
Design Process
Phase One: Discovery
Competitive Analysis
We analyzed 5 schools to analyze the existing competition for HCI programs. We learned that many other schools had a better visual design and branding presence, which potentially will make it easier for students to navigate and apply to. Looking at the competition, what stands out about CMU’s HCII’s program is its focus on research, interdisciplinary studies, and the 1-year time frame.
Knowing this information, how can we highlight that key information so that it can set CMU apart? In addition, how can to make our branding and visual design more modern so it highlights that the HCII program will be seen as “innovative, and future-oriented? to draw more students in? We kept these questions in mind before approaching the design phase.
Google Web Analytics
We did an analysis of the 2 years of data collected on the existing website to understand what areas the website is doing poorly, where the sources of traffic are, and the demographics of our users.
We found that…
MHCI is the most popular landing page after the homepage (12.65%), followed by Ph.D. (2.03%), BHCI double major (0.87%). We wanted to make sure to design these pages to be eye-catching, as well as thorough.
A large portion of the website access is from Desktop (70%), and ~30% mobile access, informing us to focus on providing a rich desktop experience that scales well to mobile.
View detailed web analytics analysis here.
This information will help us understand how to continue driving the web traffic, what pages we need to pay extra attention to, as well as inform us on the needs and demographics of our personas.
Interviews & Surveys
We recruited 5 students to interview and collected 29 responses from our survey to understand their experiences using the existing HCII website.
From the interviews, we learned that many students struggled with navigating the website due to its complex information architecture and the lack of categorization. Specifically, finding electives and research opportunities was not easy for them.
From the surveys, most students cite “Top ranking” (100%) and “job prospects” (75%) as the primary reasons students enroll in HCII at CMU. Knowing their needs, this helped me strategize on the types of content and brand strategy that we must leverage on the website.
Site Audit of the existing website
When we conducted the interviews of the students, we also did a site audit and got initial feedback from out users as we watched them navigate the current website.
Many of them found that the lack of categorization and organization of the navigation items made it hard for them to find important things they need to know about the major. Not only that, a majority of them were suprised by the lack of attention on the branding of the site, seeing that the program is geared towards UX design.
Phase 2: Evaluation
Personas
Affinity Diagram
Through our research, we compiled our findings into an affinity diagram. Overall, we found that the visual design and lack of branding really negatively affected their overall impression and ability to navigate the website.
The repetitive information, lack of accurate information, and uncategorized lists of long information made it hard for the users to digest and look at the content in the website. Users did not expect an academic website to have lack of up-to-date information.
Opportunity Area
Ideation
We created 5 different ideas for the website in parallel, after consolidating the research, and then tested them on users to get their responses.
After consolidating the user’s responses, we decided what direction to go. We chose the best ideas from each of the designs and then created one prototype with the combined ideas to further iterate.
Phase 4: Design
Persona-Driven Structure
We created a site map to allow for organization in our page designs and flows. I’ve also listed the pages (next page) that are specifically viewed by our personas, so we can focus on perfecting those pages for the redesign.
Usability Testing
Iteration One:
Number of participants: 5 Clients (HCII Professors & Administrators), 5 Users
Task: Users were asked to find the application deadlines and find the electives for Machine Learning
Takeaways:
Decide on the best way to categorize electives
Find optional ways to categorize current and past research projects
Define CMU brand more clearly
Create hierarchy on what user prioritizes
Make all visual design standardized (create design system)
Iteration Two
Number of participants: 5 Clients (HCII Professors & Administrators), 5 Users
Task: Users were asked to find course prerequisites and faculty members who focus on artificial intelligence as a research area.
Takeaways
Make navigation consistent, as participants found that certain pages were hard to find
Reduce scrolling as participants found it cumbersome to read long paragraphs of text
Make the website more accessible and tighten up the typography
The red “Carnegie Mellon University” bar on top of the nav is repetitive
Using Card Sorting to better categorize courses
We also found that we needed to better categorize the electives to match the mental model of the user. We recruited 7 users to do a card sorting exercise.
We found…
Students find it hard to place electives without having the descriptions
Some descriptions of the electives by the Professor doesn’t clarify the nature of the elective
Categories by topics rather than by school makes it more efficient for students to pick electives
Students find it useful to have multiple sorting options, e.g., easiest to hardest , requirements fulfilled, recommended classes
Phase 5: Implementation & Code
Using Webflow to Code the Website
For the final design and iteration, we decided to code our prototype. This allowed us to ensure that our designs can actually be implemented, and it allows us to test certain features (video, filters) more effectively.
From an administrator's perspective, webflow is better than drupal (the existing system) because it allowed more flexibility, and allowed administrators to easily update content without needing a technical background. Webflow also allows our design to be translated easily and efficiently.
CMS
We’ve also implemented the CMS feature of Webflow so that the future administrators of the website can easily add, edit, or delete content without having to alter any layout or code of the website.
Final Design
About
This page highlights the history and explains what the program is about at Carnegie Mellon.
People
The cards are consistently sized to add more uniformity to the website, making it easier to look at. By taking out unnecessary details, users are able to have a better understanding of the professor’s practice. By simplifying the search bar and filter functions, this allows users to focus more on the task they are doing
Undergrad
By taking out repetitive content and tightening up the typography, users were able to find important information at a glance with fewer clicks. With anchor points throughout long pages, this allowed users to quickly jump to sections and complete tasks in no time
Phase 6: Measuring Success
We met all our success metrics for the re-designed website!
Design System
Reflection
This was a great learning experience to fully design a website from it’s prototype stage, to collaborating with engineers to fully code and maintain the website. For the next steps, we definitely want to make sure that the content is curated in the website, and make sure to make it accessible. There also might be some more possibilities to experiment more with the brand.