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
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 some challenges because the website...
...has poor visual design.
...is 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...
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.
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.
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
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.
KEY PAGES DESIGN ITERATIONS
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
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.
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.
Directory
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.
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
REFLECTION
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.
