College of Computing Website

Redesigned the Georgia Tech College of Computing website.

UX Design | UX Research

OVERVIEW

Problem

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.

Objective

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.

Team

Jordan, Chaoyuan, Lu, Yuhan

My Role

UX researcher, UX designer

Course

Research Methods

Duration

Aug 2019 - Dec 2019

Timeline

Project Proposal

Research

Ideation & Design

Evaluation & Iteration

Overview

BACKGROUND RESEARCH

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 these challenges...

The website is very content heavy.

The website serves multiple diverse audiences.

The website has poor visual design.

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...

Persona

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.
Out-dated information cause frustration.
Faculty users prefer visiting the website on desktop over mobile devices.
In general, faculty users care most about research and its connection with people.

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

Designing better information architecture and webpage layout.
Making the website easier to update.
Prioritizing the desktop design with making it responsive and mobile-friendly.
Redesigning the key pages about research and relevant people.

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.

From user research, our key findings are...

Out-dated information cause frustration.
Faculty users prefer visiting the website on desktop over mobile devices.
In general, faculty users care most about research and its connection with people.

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

Making the website easier to update.
Prioritizing the desktop design with making it responsive and mobile-friendly.
Redesigning the key pages about research and relevant people.

Background Research

INFORMATION ARCHITECTURE REDESIGN

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

link

Tree Testing

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

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

KEY PAGES DESIGN ITERATIONS

We did design and evaluation iteratively.

Initial Lo-Fi Prototype

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

We designed the desktop version first and then transformed it into the mobile version, since the former one is what the faculty users mainly use.

Old Design

Our Initial Design

Homepage

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.

Navigation

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.

Research

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.

coc_old_academics_degree-programs_phd.pn

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.