top of page

College of Computing Website

Redesigned the Georgia Tech College of Computing website.

UX Design | UX Research



The Georgia Tech College of Computing (CoC) website is accessed by thousands of prospective and current students, faculty members, and working professionals every day for different purposes. However, the existing website has several problems, especially the intuitive and inefficient navigation and unfriendly mobile version. Therefore, the CoC communications team plans to do a website overhaul.


The research and design are assigned to two teams based on the audience and our team's focus is the faculty audience

The project's ultimate objective is to design a website that serves as a practical tool for our audience with truly and honestly reflecting the robust resources available to them.


Jordan, Chaoyuan, Lu, Yuhan

My Role

UX researcher, UX designer


Research Methods


Aug 2019 - Dec 2019


Project Proposal


Ideation & Design

Evaluation & Iteration



What information is on the current website and how is the information structured?

Content Audit

To learn about existing information on the website, we created a partial content inventory and highlighted the pages presumed to be important for the faculty users. It helped us go through the high-level pages and gain a holistic view of the current website.


Reviewing the website ourselves, we think we are facing some challenges because the website... 

...has poor visual design. very content heavy.

...serves multiple audiences.


What are the context of use and user requirements?

User Interview / Contextual Inquiry

To understand faculty user's tasks, goals, preferences and behavior patterns in using the website, we conducted contextual inquiry to collect data. When reaching out to the users, we tried to get some diversity, so that we can cover different needs and requirements.


To analyze the data we got from interview, we did...


We created four personas based on patterns that we found in their thoughts, actions, and roles. Each of these personas represents a different type of user.


Task Analysis

In order to optimize the tasks that our users currently perform, we needed to understand every step that they currently do to accomplish those tasks.


Therefore, we decided to create a flowchart for each individual task to see on which steps users diverge. This method would then act as input for our comparative analysis.


The task analyses would also help to plan interview questions and discover if users perform a task in a unique way that we haven’t already discovered.

Affinity Modeling

As we obtained much qualitative data from interviews, we wanted to  synthesize the information altogether to make sure we did not miss anything important.​

By structuring the data in an affinity model with the tasks, it will be easier for us to identify the problems user may have when they use the website. 


From user research, our key findings are...

Users want to find the information they want more  🚀efficiently

Therefore, we want to improve the website by...

  • Prioritizing the desktop design with making it responsive and mobile-friendly.

❓Out-dated information cause frustration.

In general, faculty users care most about 🔍 research and connection with people.

  • Redesigning the key pages about research and relevant people.

  • Make it easier to update information.

  • Make the navigation system more intuitive and comprehensive.

Faculty users prefer visiting the website on 🖥 desktop over mobile devices.

How are other schools' websites like and what can we learn from them?

Comparative Analysis

To identify the strengths, existing problems and plausible designs of CoC website, we looked at the websites of some other comparatively reputable schools.  We reviewed their navigation and overall organization of information, as well as some features which we selected based on the task analysis.


By looking at those websites, we got some design inspiration.

  • We can use more tiers of navigation.

  • We can allow users to choose if they want to navigate based on topics or users.

  • We can make the pages more clean and efficient for users by reducing images.

  • We can use more blocky layouts to make the website mobile-friendly.

Background Research


Current Sitemap

To improve the high level navigation,  we first reviewed the website's current information architecture and visualized it in a sitemap. It made it easier for us to see the possible pathways users may go through and identify the areas or connections where problem lie.


Card Sorting

To understand the faculty users' mental models of the CoC website, we asked some users to do card sorting and think aloud during the process.

We started with closed card sorting, to directly evaluate problems with the current information architecture. After the first round of card sorting, we made some changes to the cards, and then tested them in a second round to iterate.

With the analysis of card sorting results, we were able to identify and improve the confusing naming and categorization in the  current information architecture, which allowed us to design a more intuitive navigation for the users.


New Design

Based on the feedback from card sorting, we designed the new high-level information architecture for the global navigation on the website.


Tree Testing

To validate the new information architecture, we used TreeJack to conduct online tree testing. Below is the result analysis,

Task Success Results

The three tasks all have higher success rates in the new navigation testing, with one of them has significantly lower time taken.


First Click Results

Over half of the participants got the right first click in general.


Questionnaire Results

The task difficulty level rated by participants was reduced after the redesign.


Through the testing, it was shown that new design improved the effectiveness, efficiency and satisfaction of the navigation.

Information Architecture Redesign


Initial Lo-Fi  Prototype

Trying to come up with better solutions for the user requirements we learned from research, we started designing.

Old Design


Our Initial Design


Smaller Carousel

We made the carousel smaller.

Users complained that the large carousel at the top is not very informative and they have to scroll down for other content.

Featured News & Events

We brought the News & Events section next to the carousel.

The News & Events section, as a section that is important and updated frequently, is currently at the bottom of homepage.


We put 3 important navigation boxes under the featured content, and some possible follow-up actions at the bottom.

User wanted to see more info immediately without scrolling down. Some users expect the home page to include the high level structure the website,

College History Overview

We pulled some of the information from the History section to give users an introduction to the college.

Users didn’t feel like the homepage was giving them real content.



Smaller Featured Image

We cut down the size of the image and placed the page title on it, so that other information could fit on the page.

User complained about the large images on every single page.

More Compact Layout

We rearranged the content in a more compact and blocky way.

The old layout was neither efficient nor visually appealing. User did not like it.


Research Area

Side Navigation

We used an introduction and related people as the main body of the page with the research area list as a side navigation.

User wanted to be able to navigate among different research areas and compare them easily.

Clearer Page Hierarchy

We reduced the featured image more than the one on research landing page, to indicate the hierarchy of pages, especially as we removed the breadcrumbs for more space.

The page includes the same uninformative large image at the top.


Ph.D. Studies

Lists of Programs &

Research Areas

We removed the pictures for degree programs and list them with research areas side by side.

The pictures for degree programs were not informative and took up much space. And the degree programs are highly involved with research, which is a prioritized consideration of prospective students.

More Compact Information

We added content about Ph.D. students that links to Ph.D. student directory and related news.

Users want more and better web presence of the Ph.D. students in the college.



Filter Function

We added a filter function for differentiating the faculty by research area, school, and academic rank.

Some users use the directory to remind themselves of people’s name. Some wants to learn about the people in the college as a whole.

More Information In The List


We added email address, personal website, office location, research areas and title in the directory boxes.

User said they hope they can get more useful information in the directory without clicking into individual profiles.

Profile Template

We broke down the profile into several sections with titles and a side navigation that guide users to the content they want to access.

Users reflected that information on the individual pages is outdated. The suggested sections are based on what users want to see on the page.


Getting Feedback

How we got feedback for our lo-fi prototype


News & Events

Lists of Programs &

Research Areas

We removed the pictures for degree programs and list them with research areas side by side.

The pictures for degree programs were not informative and took up much space. And the degree programs are highly involved with research, which is a prioritized consideration of prospective students.

More Compact Information

We added content about Ph.D. students that links to Ph.D. student directory and related news.

Users want more and better web presence of the Ph.D. students in the college.


Hi-Fi Prototypes

To do further testing, we brought the prototypes to high fidelity, adding the styles and interaction.

View the prototype:


Expert Evaluation

We did expert-based evaluation sessions by combining a heuristic evaluation and the think-aloud method. The evaluation provided us with both qualitative and quantitative feedback, which helped us iterated the design.


Main Design Modifications

Some main modifications we made when going hi-hi and after expert evaluation.

Interaction of Global Navigation


Consistent Styles And Components

We improved the visual consistency by using same components for a type of content. Also, we used certain styles for clickable items to differentiate them from other content.


Old Design

  • Cause confusion when going mobile

  • Poor keyboard accessibility


Our Solution

  • Can be consistent with the mobile menu

  • Good keyboard accessibility

  • Avoid confusion that could be caused by the same label

Mobile-Friendly Web Design

We added a rectangle background or a horizontal line in each block, to avoid confusion about the border between sections of content when they stack above each other in the mobile version.


User  Testing

After modifying the design, we conducted user testing with . In order to compare the new design to the old one, we design 2 sets of similar tasks with the current website and the prototype. Half of the participants were asked to do the first set and the other half the second.


The quantitative results showed that, for two of the four tasks, number of clicks/taps were largely reduced, while for the other two the numbers increased a little. For all heuristics, the system usability score increased. The total score of new design was 30 points higher than the score of the old design.

Key Pages Design Iterations
Final Outcome


Presentation & Next Step

In December 2019, we presented our research findings and redesign work  to the college of computing team, who are still continuing getting more research input. The new design of the website is planned to be launched in 2020.


Final Prototype



Limitation & Challenges

  • Due to the time constraints and difficulty to involve faculty users, we were not able to continue research until it hits a saturation point.

  • Our group was only assigned the research work about faculty users. For those web pages that are intended for multiple user groups, our design decisions must have some limitations.

  • None of our team members had much experience in web design and the project was also a learning process for us. Sometimes we were not sure which approach was best for the situation and had to try them out to see.

My Key Takeaway

  • When dealing with massive information in a long duration it is easy to get lost and forget what has been done. It is important to keep the plan in mind and look back at previous work from time to time.

  • Openly reflecting on each member's work and individual strengths and weaknesses during collaboration is very beneficial to a team. Our team did a good job on this and had really good team dynamics.


bottom of page