Home / Projects / Improving Information Architecture and Accessibility for a Travel Nonprofit
Usability research for a non-profit focused on diversity, equity, and inclusion in the travel industry, including a homepage redesign, improved navigation and information architecture, and further design and accessibility recommendations.
Travel Unity is a 501(c)(3) nonprofit organization focused on establishing and fostering diversity, equity, and inclusion standards across the travel industry through educational programs for young people, people with disabilities, and travel industry professionals.
I collaborated with a team of four student usability researchers (myself, Chris Ferrara, Nathalie Traikos, and Wuke Zhou) as part of Pratt Institute’s Usability Theory and Practice course. We worked directly with the client to plan and conduct a usability study.
The final report and recommendations included a homepage redesign, improved navigation and information architecture, and further design and accessibility recommendations.
Pratt Institute - INFO-644
Usability Theory and Practice
Travel Unity
April - May 2021
6 weeks
Usability TestingUX Design
Our usability test was focused on how parents of youth ages 11 - 20 find information about Travel Unity’s youth programs, by observing and analyzing how participants interacted with the Travel Unity desktop website.
We used the moderated remote usability test method to explore our research questions. We used Google Hangouts or Zoom to spend 30 - 60 minutes with each participant as they walked through a series of predefined tasks and spoke aloud to share their thoughts about the website.
We built seven tasks focused around two different scenarios into our script for the usability tests.
Our script also included a series of pre-test and warm-up questions, which we asked before running through the tasks to get to know the participant better, and post-test questions, asked after running through the tasks, for an overall assessment of their experience on the website.
In general, the easiest tasks for users were those focused on finding specific information about Travel Unity’s youth programs and volunteering opportunities. Participants appreciated the level of information available about the youth programs and the fact that it was required an application process.
"For me, as a parent, information is good. This gives me an opportunity, if I have any questions or concerns about any of the modules, to ask those questions, before going through the whole process of signing up, doing all the paperwork. I'd much rather ask the question out the gate."
Meanwhile, tasks which asked users more broadly to “find information about the organization and how your child can participate” were ranked as more difficult, and participants struggled to figure out what the organization does early in the test when browsing the homepage.
In addition to these findings, we offered a series of general design and accessibility recommendations, since the client had expressed a desire to make their website more accessible.
"Is this geared towards travel agency type companies? Is this a B2B business working with travel agencies or are you trying to appeal to a consumer like myself?"
"I'm not sure how to describe the organization from the homepage. I'm struggling with who your customer is."
Almost all the participants of our moderated test were confused after they read the first line on the homepage. Even though many of them are familiar with non-profit organizations or youth programs, they still are not sure about some of the terminology used or who the organization serves.
We offered several recommendations for a homepage redesign which could help users better navigate this page and understand the organization better at a glance.
Half of our participants missed all of the content below the hero banner.
Participants had trouble figuring out who the target audience was and what the organization does. We recommended adding a tagline, explanation of the mission and philosophy, clear depiction of who the organization serves, and clear language about who the certification is for.
87% of consumers wanted to see more video content from a brand or business they support (source) and video is a simple, memorable way to explain what the organization does.
Users also had difficulty connecting the list of sponsor logos with the summit heading.
Many users had trouble understanding what the organization offered throughout the usability interview, or misclicked into categories that were targeted to a different target audience. We recommended a new information architecture, simplifying the navigation’s top level categories and improving the labels in order to make it explicitly clear to users looking to find certain information and allow users to seek information based on which of Travel Unity’s target audiences they belong to.
Sitemap of new information architecture.
Navigation: before redesign.
Navigation: after redesign.
While most users had little difficulty navigating to the youth programs, they had a lot of difficulty unpacking the information about the programs and tying it all together to create a clear picture of each program.
We recommended redesigning this page with imagery that reflects the types of activities youth would be involved with so that they don't mistake the program for a destination-based program, and crafting copy that speaks directly to applicants in the second person, using an active voice. The syllabus for the program, previously a simple list, could be restructured into a more compelling two-column layout.
"The page (Youth Volunteer Program) describes ‘opportunities’ but what are the opportunities? That's what I'm missing. Is it global cultures and career opportunities in the travel industry or all around the world?... The clarity for me would be the programming, how is that defined? That's how I work, I want to read that right away."
Because accessibility came up during our initial meetings with Travel Unity, we also wanted to offer some general design and accessibility recommendations (for a brief summary of accessibility golden rules, see Hendrickx, 2020) that could be applied across the entire website.
A UI style guide can speed up the design process and ensure design consistency. It also offers an opportunity to think about accessibility and how to convey information at different levels in a hierarchy. For Travel Unity’s website, we created a simplified style guide that focuses primarily on color and typography, and focuses on two of the four typefaces they were using on the current website.
When using the style guide, we recommended referencing a Contrast Checker to ensure that text is adequately readable. For example, the links on the current website [#ddd200] do not pass an accessibility check at any font size. Using one of the darker tints from our new style guide [#403814] would allow for the links to pass the contrast check. An underline or other style could be added to further differentiate the links from regular text.
For several users, it was difficult to tell when a new page had loaded after clicking in the navigation because the hero image on each page did not change. We recommend reducing the height of the hero images so users can see the new content that loads below right away, or swapping out this image for a new image on each page so the user receives clear feedback that a new page has loaded after clicking.
Youth Programs: before redesign.
Contact: before redesign.
Youth Programs: after redesign.
Contact: after redesign.
All images on the website should include alt text describing the image. Alt text is the text that appears when a user hovers over an image. Alt text allows vision-impaired users to understand the visual content on a page. It also benefits users who may be on slow-loading connections and unable to load images.
For this image, taken from the “Donate” page, alt text could read, “A person in a bright orange jacket sits on a road painted in rainbow colors.”
Buttons add hierarchy and structure and make it easier for users to determine where they should click next. The Travel Unity website already includes large, easily clickable button styles that appear on the homepage, but this style is not used frequently on the website. We recommend using bold headers and bright buttons to create a clearer information hierarchy and make it clear what users should do next.
Youth Programs: before redesign.
Youth Programs: after redesign.
Travel Unity, a champion of DE&I standards for the travel industry, plays an important role in educating young people about diversity, equity, and inclusion. Our group hopes that by offering these recommendations to improve the usability and accessibility of the website, Travel Unity's mission and message can connect with as many users as possible, particularly underrepresented groups in the world of travel.
With more time or as a follow-up, I would recommend completing card sorting or tree testing to test the suggested information architecture against the current one, and implementing these changes on the actual Travel Unity website to test their performance. Digital analytics tools like CrazyEgg could be used to produce heatmaps of how users interact with the new designs, and another round of remote user testing with new users could be completed to compare qualitative feedback to our first round.