Improve usability and accessibility of college website for students.
Georgia Tech 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 website lacks a clear and usable information architecture. COC reached out to us and asked for a solution to their website.
After 4 months of working, we presented the brand new CoC website with reconstructed global navigation and information hierarchy. Specifically, we recommended a module-based design for future development. Over 24,000 current and prospective students will soon be able to access the new website.
We start our work with a survey to understand the current problems of the website. Our survey identified the goals and challenges that students face when they use the website. Specifically, we were curious about the following topics: navigation, design, content, accessibility.
In our survey, we found that the biggest issue students have is finding topics of interest. Students report low mobile usage across topics. We found no valuable information on accessibility in 195 responses, so more targeted research is needed.
During the synthesis session, we added the survey results and our insights 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 @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 a redesign of the CoC website. In future design, we must take into account not only the needs of users, but also the expectations of those stakeholders.
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 topic on the website was the master's degree and admission process.And to get to the destination, students often need to make multiple redirections.
.png)
Content Drilldown for new and returning visitors.
Data is gathered from 1st January 2018 to 1st January 2019.
With our hybrid card sorting task, we wanted to identify how visitors group the website tabs and to verify the global navigation of the current website.
From the result of cardsorting, we discarded irrelevant information from website for example 'About Atlanta', and we renamed some of the tabs for causing misunderstandings. The results of card sorting were eventually adopted as the basis for our subsequent redesign of the navigation bar.
One of the card sorting results.
.png)
Card sorting results compared with current global navigation bar.
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.
Competitive Analysis
Heuristic Evaluation
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
From the compilation of all our research findings, we gleaned insights into a large amount of information. We also were able to categorize information into 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.
For the redesign of the navigation bar, we have two options. The first one is to categorize the information content according to the information content, and the second one is to categorize the information content according to the needs of different roles.
I took a deeper consideration and realized that the first option was the cause of most of the problems with the navigation bar - some information was difficult to categorize clearly. So we chose the second structure, where different users just need to find their own tab and get the content they are interested in under that tab.
Two alternatives we came up with.
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.
.png)
Sitemap
Based on information about content and navigation from the affinity map, we came up with the sitemap website, which focuses on Current Students and Prospective Students.
In the sitemap, we rearranged the information structure of the current website to better fit with the reading flow.
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 the content.
.gif)
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.
Our high-level goals for the first feedback session will be to know how users would intuitively organize website content, 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.
.png)
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.
.gif)
Click through
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.
#1 Global navigation bar
I did three iterations on the structure of the navigation bar based on the feedback received from user testing. The main point of controversy was where the current students tab should be placed. We ended up putting it in the top right corner so that current students could download forms by logging in and we renamed it to students hub.
#2 Breadcrumb
Some users mentioned that they were a bit lost in the web pages. So we re-added breadcrumb navigation to the site.
#3 Mobile site
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.
After user testing. Iterated.
Based on our former research and feedback sessions, we came up with responsive prototypes for final user testing and feedback gathering.
Desktop prototype
Mobile prototytpe
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.
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.
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.
