Georgia Tech

College Website Redesign

Improve usability and accessibility of the college website for students.

website page in imac mockup



Georgia Tech College of Computing (CoC) is a top college worldwide. Over 2,000 users visit its website daily, including people using foreign languages and from different cultures. However, the college website did not have enough research and design to support it. The website lacked a clear and usable information architecture. COC administrators reached out to our team and asked for a solution to the website.


After 4 months of working, we presented the new CoC website design with reconstructed global navigation and information hierarchy. Moreover, we recommended a module-based design for future maintenance purposes.

Comparison before and after redesign


Data Analytics
Card Sorting
Competitive Analyasis
Information Architechture
Affinity Map
Module-based Design
Feedback Session
Content Strategy
Design specifications
A/B Testing
Heuristic evaluation


Shihui Ruan
Jordan Hill
Harshali Wadge
Santiago Alvarez
Prabodh Sakhardande
Aug 2019 -  Dec 2019
My Role
UX Designer
User Researcher

1. Research

1.1 Survey

We started our work with a survey to identify the challenges that students face and their goals when they use the website. Specifically, we were curious about the following topics: navigation, design, content, and accessibility.

Survey results
Snapshot of a list of survey questions and justifications

Our survey found that the most occurred issue is finding topics of interest. Students also reported low mobile usage. We were not able to collect enough information on accessibility in 195 responses, so more research on the disabled group is needed.

1.2 Stakeholders Interview

“Our 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 redesigning the college website. In further design, we took into account both the needs of users and the expectations of those stakeholders.

1.3 Google Analytics Data

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 topics on the website were the master's degree and admission process. Getting to the destination often requires students to make several redirections.

Google analytics results

Content drill-down for new and returning visitors.
Data is gathered from 1st January 2018 to 1st January 2019(12 months).

1.4 Card Sorting

With the card sorting, we identified how website visitors cognitively group the website tabs into different categories. A total of 8 students were invited to the session.

From the data collected, we were suggested to exclude irrelevant information, for example, 'About Atlanta', and to rename some tabs that bring misunderstandings. The card sorting results were eventually adopted as the basis for our subsequent redesign of the navigation system.

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
News and Events
Resources for Prospective Students/Current Students

Competitive Analysis
Heuristic Evaluation

We extrapolated evaluative criteria from a set of widely used principles and heuristics. We applied them to competitive analysis and a heuristic evaluation to diagnose the current problems of the College of Computing website from a design perspective.

Competitive analysis of college website navigation bar

Competitive Analysis


Heuristic evaluation of current website

Heuristic Evaluation

We can see that the accessibility of the current CoC website does not fit in A&AA standards and that current website has trouble fitting within the college brand.

2. Synthesize

2.1 Affinity map

Affinity map results
Affinity map based on research findings

In our previous study, we collected a large amount of data. To avoid becoming overwhelmed, we used the affinity map to organize the data and summarize the four primary design problems: to improve the navigation and website organization, content, responsiveness/mobile use, and accessibility.

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

2.2 Personas

We identified and created two personas that we thought best represented the majority of students in the College of Computing. We utilized the personas to generate a story and share it with stakeholders.

Persona of current studentsPersona of prospective students

Information Architecture

For the design of the navigation system, we ended up with two options. The first is to categorize the tabs according to their contents; the second is to organize them according to different user roles.

I took a deeper look into both options and realized that the first one was the cause of most of the problems with the navigation system - some information was difficult to categorize into groups. Some people from other cultures have different interpretations of English words, which leads to the problem that they open a tab only to realize it is not what they wanted. So we chose the second structure, to categorize information by user groups, where users just need to find their tab and get the content related to their roles under that tab.

Information architecture of global navigation bar

Two alternatives we came up with.

We want to make sure that we focus on both breadth and depth. However, due to the time constraint of this project, we can only look at the content structure, especially on the 'Perspective Students' and 'Current Students' pages.

Information architecture of global navigation bar

New global navigation bar based on previous research.


Sitemap in detail


Based on data related to content and navigation from the affinity map, we came up with the above sitemap. In the sitemap, we rearranged the information structure of the current website to better fit with the reading flow.

3. Design & Iteration

Component-based Design

Instead of designing page by page, we designed a component system that can be used in multiple instances cross-site. These components are made up of essential UI elements.I designed 12 modules considering various media types, including paragraph text, headlines, images, links, and even videos.

Components are stacked on a single page. The new content can be nested into the existing component templates and added to the page in subsequent iterations, making the maintenance simple.

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

3.2 Content Audit

We audited content in the current ‘Academic’ section to provide insights 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 way in-page.

Content audit results
One of 7 content audit for the current website

3.3 Feedback Sessions

Two feedback sessions were conducted. Our high-level goal for the first feedback session was to know how users would intuitively organize website content. For the second feedback session, we wanted to understand how users navigate from the homepage to the pages.

We printed out the components in our first feedback session and asked participants to organize 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 way that all the blocks fit together in a grid. So instead of printed blocks, we used post-it notes eventually. The image on the right shows how students cognitively organize information on the "Master's Programs" page.

First feedback session in progressRevised feedback session

Printed components we used in the first trial.

We used post-it notes to eliminate possible factors that affect how participants place the components.

After the first feedback session, I built a clickable prototype. During the second test, students were asked to click through the website tab and find a specific piece of information, for example, "Tuition information for M.S. in Computer Science program." They were asked to think aloud during the tasks.

Click through prototype for second feedback session

Click through

After two feedback sessions, we gathered additional qualitative data on the pages we had designed, as well as participants’ expectations. We also assessed whether they were able to find the pages we were asking for. Insightful findings include the proper position of the "Current Students" tab. The "Current Students" tab was placed on the top right corner, whereas some students found it confusing and suggested that "Current Students" should be next to "Prospective Students".

3.4 Featured Iterations

#1 Global navigation bar

I did three iterations on the navigation bar structure based on feedback from feedback sessions. The main point of controversy was where the "Current Students" tab should be placed. We tried to design a Hub for the current students, while during the feedback sessions, we realized that not only current students will visit the Student Hub. The prospective students might also want to see what's for current students. Therefore, we put it next to the "Prospective Students" and named it "Current Students."

Click through prototype for second feedback session

#2 Breadcrumb

We removed the breadcrumbs for the tidiness of the page and to convey our new design language to the audience. However, some participants mentioned that they were lost in the pages. So we re-added breadcrumb navigation to the site.

Click through prototype for second feedback session

#3 Mobile site

There were complaints about the over-long pages. Participants said they needed to scroll a while to get where they wanted to go. So we iterated our prototype before delivering it to stakeholders. For the over-long mobile pages, we designed components that can significantly shorten the page and collapse similar content. Except for the design improvements, we also suggested the administration team audit the website content again and reduce the information burden.

original design before user testingiterated design

Before user testing.

After user testing. Iterated.

3.5 High fidelity Prototype

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

High fidelity desktop prototypeHigh fidelity mobile prototype

Desktop prototype

Mobile prototype

4. Design validation

4.1 A/B Testing

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

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 the prototype than on the legacy website. Significant progress shows in finding information about tuition and international students. But still, a mobile prototype requires more effort.

4.2 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. Meanwhile, they score both the legacy website and new prototypes based on a scale of 1-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 prototypes contained placeholder content. These scores are based on some of the new content strategies.
**Most accessibility features need to be implemented programmatically and were not part of the prototype.

Web app




Voice Assistant
for Automobile

Voice User Iterface


Mobile App