A new beginning of
College of Computing
Improve usability and accessibility of college website for students.
Georgia Tech's 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 webstie lacks of clear and usable information structure. COC reached out to us and asked for a solution of their website. We are a team of 5, and my key role in this project is a lead designer.
Up to 63% of pages have instances of dead or broken links.
Only 7.7% return users.
Low mobile usage.
After 4 months of working, we presented the brand new CoC website with a reconstructed global navigation bar and information architecture. Particularly, we proposed a module-based design strategy that can be applied to all pages. Now the new website is under construction and will be ready to serve over 24,000 students and applicants soon.
Aug 19' - Dec 19'
Santiago Arconada Alvarez
We start our work with survey to understand who is our user in a whole picture. Our survey identified the areas of interest and usability challenges that students face when they use the website. Specifically, we were curious about the following themes: navigation, design, content, accessibility.
Snapshot of list of survey questions and justifications for all the questions used
From our survey, we can know that the biggest issue they face is finding topics of interest. Students self-report low mobile use across topics, but access some topics more than others. While in 195 responses we could not find valuable information about accessibility, so it needs further targeted research.
We wrote down the survey results and our insights on post-It notes and added them to an affinity map.
“Website lacks clear navigation to useful resources for students.”
Director of Academic Programs
“Truly accessible websites require usability and programmatic testing.”
QA Accessibility Analyst @CIDI
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.
We wanted to gain a deeper understanding of session 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.
From data analytics we can know that the hottest topic in CoC is master degree and its admission process.
Content Drilldown for new and returning visitors.
Data is gathered within a calendar year from 1st January 2018 to 1st January 2019.
With our hybrid card sorting task, we wanted to identify how visitors group the website content and to verify the global navigation bar of current website.
From the result of cardsorting, we discarded irrelevant information from website for example 'About Atlanta', and we renamed some of the inappropriate named tabs for causing misunderstandings.
One of the card sorting results.
Card sorting results compared with current global navigation bar.
Most Matched Categories
News and Events
Least Matched Categories
New Categories Participants Suggested
Resources for Prospective Students
Resources for Current Students
Competitive Analysis and Heuristic Evaluation
Since we are not designing for a new website, we are redesigning a currently existing website. So we need to do research on the current website and see what’s wrong.
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.
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.
Each tab correspond with a user group.
From left to right: Prospective students; Current students; Faculty; Industry
Affinity map based on research findings
From the compilation of all our research findings, we gleaned insights on a large amount of information. We also were able to categorize information to 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.
We ended up identifying and creating two persona types that we thought best represented the majority of students in the College of Computing.
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.
New global navigation bar based on previous researches.
Based on information about content and navigation from the affinity map, we came up with the sitemap the website, which focuses on Current Students and Prospective Students.
In the global navigation bar, we divided student groups into prospective students and current students because their interests are different.
In the sitemap, we rearranged the information structure of current website to better fit with the reading flow.
Sitemap based on previous researches.
Click to magnify +
Design & Iteration
Content Strategy - 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 content.
Components are made up of UI element groupings
The components can be stacked to create pages
Content Strategy - 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 structure for new website
Our high-level goals for the first feedback session will be to know how users would organize website content in an intuitive way, 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.
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.
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.
High fidelity Prototype
Based on our former research and feedback sessions, we came up with responsive prototypes for final user testing and feedback gathering.
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.
Prototype got a much higher score from the experts than current website.
*Much 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
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.
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. From the after-test questionnaire, we found that it is because of the over-long mobile pages that contain a large amount of information from original desktop website.
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.
Before user tersting.
Too much scroll down for users.
After user testing. Iterated.