Georgia Tech

Website Redesign

Improve usability and accessibility of college website for students.

website page in imac mockup

Overview

Problem

Georgia Tech College of Computing(COC) is one of the best CS colleges national wide. However, they do not have enough research and design to support their website. The website lacks a clear and usable information architecture. COC reached out to us and asked for a solution to their website.

Solution

After 4 months of working, we presented the brand new CoC website with reconstructed global navigation and information hierarchy. Specifically, we recommended a module-based design for future development. Over 24,000 current and prospective students will soon be able to access the new website.

Comparison before and after redesign

Approaches

Research
Survey
Data Analytics
Card Sorting
Heuristic Evaluation
Competitive Analyasis
Synthesize
Personas
Sitemap
Information Architechture
Affinity Map
Design
Module-based Design
Feedback Session
Content Strategy
Evaluation
User Testing
Heuristic evaluation

Logistics

Team
Shihui Ruan
Jordan Hill
Harshali Wadge
Santiago Alvarez
Prabodh Sakhardande
Time
Aug 19' -  Dec 19'
My Role
UX Design
User Research

Research

Survey

We start our work with a survey to understand the current problems of the website. Our survey identified the goals and challenges that students face when they use the website. Specifically, we were curious about the following topics: navigation, design, content, accessibility.

Survey results
Snapshot of list of survey questions and justifications for all the questions used

In our survey, we found that the biggest issue students have is finding topics of interest. Students report low mobile usage across topics. We found no valuable information on accessibility in 195 responses, so more targeted research is needed.

During the synthesis session, we added the survey results and our insights to an affinity map.

Stakeholder Interview

“Website lacks clear navigation to useful resources for students.”

Director of Academic Programs

“Truly accessible websites require usability and programmatic testing.”

QA Accessibility Analyst @Center for Inclusive Design & Innovation

Meeting multiple stakeholders and accessibility practitioners shed some light on what success looks like for them, and how they would benefit from a redesign of the CoC website. In future design, we must take into account not only the needs of users, but also the expectations of those stakeholders.

Google Analytics

We wanted to gain a deeper understanding of google analytics data - including bounce rates, click rates, and session times - so we may gauge how users were navigating through the website, where they were coming from, and how long they were staying.

Based on data analytics, we knew that the most popular topic on the website was the master's degree and admission process.And to get to the destination, students often need to make multiple redirections.

Google analytics results

Content Drilldown for new and returning visitors.
Data is gathered from 1st January 2018 to 1st January 2019.

Card Sorting

With our hybrid card sorting task, we wanted to identify how visitors group the website tabs and to verify the global navigation of the current website.

From the result of cardsorting, we discarded irrelevant information from website for example 'About Atlanta', and we renamed some of the tabs for causing misunderstandings. The results of card sorting were eventually adopted as the basis for our subsequent redesign of the navigation bar.

Card sorting in progress

One of the card sorting results.

+

Card sorting result analysis

Card sorting results compared with current global navigation bar.

Most Matched Categories
Least Matched Categories
New Categories Suggested
Research
News and Events
Community
Academics
About
People
Industry
Resources for Prospective Students/Current Students
Finances

Competitive Analysis
&
Heuristic Evaluation

We extrapolated evaluative criteria from a larger set of widely used common principles and heuristics, and applied them to a competitive analysis as well as a heuristic evaluation in order to diagnose the current status of College of Computing website.

Competitive analysis of college website navigation bar

Competitive Analysis

+

Heuristic evaluation of current website

Heuristic Evaluation

From the research, we can see that the accessibility of the current CoC website does not fit in A&AA standards. Besides, current website has trouble fitting within the college brand. Stanford Engineering provides us a positive example of designing a navigation bar according to the user group.

Standfors college o engineering website navigation bar

Each tab correspond with a user group.
From left to right: Prospective students; Current students; Faculty; Industry

Synthesize

Affinity map

Affinity map results
Affinity map based on research findings

From the compilation of all our research findings, we gleaned insights into a large amount of information. We also were able to categorize information into four main themes of navigation and website organization, content, responsiveness/mobile use, and accessibility.

We formulated user needs, business requirements, and thoughts through other influences affecting our work within the higher themes.

Personas

We ended up identifying and creating two persona types that we thought best represented the majority of students in the College of Computing.

Persona of current studentsPersona of prospective students

Information Architecture

For the redesign of the navigation bar, we have two options. The first one is to categorize the information content according to the information content, and the second one is to categorize the information content according to the needs of different roles.

I took a deeper consideration and realized that the first option was the cause of most of the problems with the navigation bar - some information was difficult to categorize clearly. So we chose the second structure, where different users just need to find their own tab and get the content they are interested in under that tab.

Information architecture of global navigation bar

Two alternatives we came up with.

We want to make sure that we will focus on both the breadth and depth when designing. But due to the time constraint of this project, we can only look at the information architecture of global navigation and content structure especially in 'Perspective Students' and 'Current Students' tab.

Information architecture of global navigation bar

New global navigation bar based on previous researches.

+

Sitemap in detail

Sitemap

Based on information about content and navigation from the affinity map, we came up with the sitemap website, which focuses on Current Students and Prospective Students.

In the sitemap, we rearranged the information structure of the current website to better fit with the reading flow.

Design & Iteration

Component-based Design

Instead of designing page by page, we are designing a system that can be used in multiple instances cross-site. These components are made up of UI element groupings and contextually link to the content.

Low level componentsHigh level components
Components are made up of UI element groupings
The components can be stacked to create pages

Content Audit

We audited content in the current ‘Academic’ section to provide insight into what we plan to migrate to the new website’s Content Management System, as well as how that content could potentially be organized in an intuitive and useful way in-page.

Content audit results
One of 7 content audit for new website

Feedback Sessions

Our high-level goals for the first feedback session will be to know how users would intuitively organize website content, and as for the second feedback session we want to understand how users navigate from the homepage to the pages.

In our first feedback session, we printed out the components we designed and ask participants to organize distinct in-page components based on their understanding. However, we found that the shape of the block was misleading. The participant attempted to order the content in a manner such that all the blocks fit together in a grid. So instead of printed blocks, we used post-it notes eventually.

First feedback session in progressRevised feedback session

Printed components we used in the first trial.

We used post-it notes to eliminate possible factors influence the usertesting.

During the second test, users were asked to click through the website tab and find a specific piece of information.

We asked users to start from the homepage and find "Master Program" and "Program Advising" on the website.

Click through prototype for second feedback session

Click through

After two feedback sessions, we gathered additional qualitative data on the content of each page we had designed, as well as participants’ expectations. We also assessed whether they were able to find the pages we were asking for, and what issues they had along the way.

Iterations

#1 Global navigation bar

I did three iterations on the structure of the navigation bar based on the feedback received from user testing. The main point of controversy was where the current students tab should be placed. We ended up putting it in the top right corner so that current students could download forms by logging in and we renamed it to students hub.

Click through prototype for second feedback session

#2 Breadcrumb

Some users mentioned that they were a bit lost in the web pages. So we re-added breadcrumb navigation to the site.

Click through prototype for second feedback session

#3 Mobile site

Based on the issues that occurred in user testing, we iterated our prototype before delivering it to stakeholders. For the over-long mobile pages, we designed some components that can greatly shorten the page and condensed similar content.

original design before user testingiterated design

Before user tersting.

After user testing. Iterated.

High fidelity Prototype

Based on our former research and feedback sessions, we came up with responsive prototypes for final user testing and feedback gathering.

High fidelity desktop prototypeHigh fidelity mobile prototype

Desktop prototype

Mobile prototytpe

Design validation

A/B Testing

To validate our design, we did A/B testing for both legacy website and redesigned prototypes on usertesting.com. By asking participants to execute the specific tasks and fill out Likert scales to evaluate the prototypes' efficiency, effectiveness, and satisfaction. We found that the new prototypes received a significantly higher review from participants.

A/B testing results
Participants are asked to find out 4 types of information from both legacy website and redesign prototype.

From the result of user testing, we can see that users spent less time on redesign prototypes than on the legacy website. Significant progress shows in finding information about tuition and international students. But still, mobile prototype requires more effort.

Heuristic evaluation

Before presenting the prototype to users, we invited 4 experts in HCI and design-related fields to test the prototypes and find out potential UX problems ahead. In the meantime, they evaluate the performance of the legacy website and new prototypes with scores on a scale of 1 to 5.

Heuristic evaluation results prove that the design is effective
Prototype got a much higher score from the experts than current website.
*Most of the prototype contained placeholder content. These scores are based on some of the new content strategy
**Most accessibility features need to be implemented programmatically and were not part of the prototype

Meeting
Web app

Aldo

Juke

Focus
Device

Voice Assistant
for Automobile

Voice User Iterface

Benevv

Social
Giving
Mobile App