Improve usability and accessibility of the college website for students.
Georgia Tech College of Computing (CoC) is a top college worldwide. Over 2,000 users visit its website daily, including people using foreign languages and from different cultures. However, the college website did not have enough research and design to support it. The website lacked a clear and usable information architecture. COC administrators reached out to our team and asked for a solution to the website.
After 4 months of working, we presented the new CoC website design with reconstructed global navigation and information hierarchy. Moreover, we recommended a module-based design for future maintenance purposes.
We started our work with a survey to identify the challenges that students face and their goals when they use the website. Specifically, we were curious about the following topics: navigation, design, content, and accessibility.
Our survey found that the most occurred issue is finding topics of interest. Students also reported low mobile usage. We were not able to collect enough information on accessibility in 195 responses, so more research on the disabled group is needed.
“Our 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 redesigning the college website. In further design, we took into account both the needs of users and 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 topics on the website were the master's degree and admission process. Getting to the destination often requires students to make several redirections.
.png)
Content drill-down for new and returning visitors.
Data is gathered from 1st January 2018 to 1st January 2019(12 months).
With the card sorting, we identified how website visitors cognitively group the website tabs into different categories. A total of 8 students were invited to the session.
From the data collected, we were suggested to exclude irrelevant information, for example, 'About Atlanta', and to rename some tabs that bring misunderstandings. The card sorting results were eventually adopted as the basis for our subsequent redesign of the navigation system.
One of the card sorting results.
.png)
Card sorting results compared with current global navigation bar.
We extrapolated evaluative criteria from a set of widely used principles and heuristics. We applied them to competitive analysis and a heuristic evaluation to diagnose the current problems of the College of Computing website from a design perspective.
Competitive Analysis
Heuristic Evaluation
We can see that the accessibility of the current CoC website does not fit in A&AA standards and that current website has trouble fitting within the college brand.
In our previous study, we collected a large amount of data. To avoid becoming overwhelmed, we used the affinity map to organize the data and summarize the four primary design problems: to improve the navigation and website organization, content, responsiveness/mobile use, and accessibility.
We also formulated user needs, business requirements, and thoughts through other influences affecting our work within the higher themes.
We identified and created two personas that we thought best represented the majority of students in the College of Computing. We utilized the personas to generate a story and share it with stakeholders.
For the design of the navigation system, we ended up with two options. The first is to categorize the tabs according to their contents; the second is to organize them according to different user roles.
I took a deeper look into both options and realized that the first one was the cause of most of the problems with the navigation system - some information was difficult to categorize into groups. Some people from other cultures have different interpretations of English words, which leads to the problem that they open a tab only to realize it is not what they wanted. So we chose the second structure, to categorize information by user groups, where users just need to find their tab and get the content related to their roles under that tab.
Two alternatives we came up with.
We want to make sure that we focus on both breadth and depth. However, due to the time constraint of this project, we can only look at the content structure, especially on the 'Perspective Students' and 'Current Students' pages.
New global navigation bar based on previous research.
.png)
Sitemap
Based on data related to content and navigation from the affinity map, we came up with the above sitemap. 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 designed a component system that can be used in multiple instances cross-site. These components are made up of essential UI elements.I designed 12 modules considering various media types, including paragraph text, headlines, images, links, and even videos.
Components are stacked on a single page. The new content can be nested into the existing component templates and added to the page in subsequent iterations, making the maintenance simple.
.gif)
We audited content in the current ‘Academic’ section to provide insights 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 way in-page.
Two feedback sessions were conducted. Our high-level goal for the first feedback session was to know how users would intuitively organize website content. For the second feedback session, we wanted to understand how users navigate from the homepage to the pages.
We printed out the components in our first feedback session and asked participants to organize 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 way that all the blocks fit together in a grid. So instead of printed blocks, we used post-it notes eventually. The image on the right shows how students cognitively organize information on the "Master's Programs" page.
.png)
Printed components we used in the first trial.
We used post-it notes to eliminate possible factors that affect how participants place the components.
After the first feedback session, I built a clickable prototype. During the second test, students were asked to click through the website tab and find a specific piece of information, for example, "Tuition information for M.S. in Computer Science program." They were asked to think aloud during the tasks.
.gif)
Click through
After two feedback sessions, we gathered additional qualitative data on the pages we had designed, as well as participants’ expectations. We also assessed whether they were able to find the pages we were asking for. Insightful findings include the proper position of the "Current Students" tab. The "Current Students" tab was placed on the top right corner, whereas some students found it confusing and suggested that "Current Students" should be next to "Prospective Students".
#1 Global navigation bar
I did three iterations on the navigation bar structure based on feedback from feedback sessions. The main point of controversy was where the "Current Students" tab should be placed. We tried to design a Hub for the current students, while during the feedback sessions, we realized that not only current students will visit the Student Hub. The prospective students might also want to see what's for current students. Therefore, we put it next to the "Prospective Students" and named it "Current Students."
#2 Breadcrumb
We removed the breadcrumbs for the tidiness of the page and to convey our new design language to the audience. However, some participants mentioned that they were lost in the pages. So we re-added breadcrumb navigation to the site.
#3 Mobile site
There were complaints about the over-long pages. Participants said they needed to scroll a while to get where they wanted to go. So we iterated our prototype before delivering it to stakeholders. For the over-long mobile pages, we designed components that can significantly shorten the page and collapse similar content. Except for the design improvements, we also suggested the administration team audit the website content again and reduce the information burden.
Before user testing.
After user testing. Iterated.
Based on our former research and feedback sessions, we developed responsive prototypes for final user testing and feedback gathering.
Desktop prototype
Mobile prototype
To validate our design, we did A/B testing for both the legacy website and redesigned prototypes on usertesting.com. We found that the new prototypes received a significantly higher review by asking participants to execute the specific tasks and fill out Likert scales to evaluate the prototypes' efficiency, effectiveness, and satisfaction.
From the result of user testing, we can see that users spent less time on the prototype than on the legacy website. Significant progress shows in finding information about tuition and international students. But still, a 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. Meanwhile, they score both the legacy website and new prototypes based on a scale of 1-5.
