Home / Projects / Usability Research for Travel Unity
Usability Research for Travel Unity
Usability research for a non-profit focused on diversity, equity, and inclusion in the travel industry.
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.
Team / client
Pratt Institute - INFO-644
Usability Theory and Practice
Travel Unity
My role
- Usability testing
- Qualitative data analysis
- UX design mockups
- Accessibility recommendations
- Presentation deck
Timeline
April - May 2021
6 weeks
Tools Used
- Figma
- Google Hangouts + Zoom
Usability TestingUX Design
Research Goals
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.
Is it easy/hard to find all the youth programs?
Do parents find all the information they need from the website?
Is there anything that they would like to see/know/learn that isn’t there?
Methodology
Study Design
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.
Scenario 1: You are exploring the Travel Unity website to find information about the organization and how your child can participate.
- Spend a bit of time on the homepage.
- Find out what kind of programming Travel Unity offers for young people.
- How does Travel Unity define “Diversity, Equity, and Inclusion”?
Scenario 2: You’d like to sign your child up to volunteer opportunities that will help develop their leadership skills.
- Find out how your child can volunteer with Travel Unity to develop their leadership skills.
- You and your child are ready to enroll for a youth volunteer program. Find where you would go to submit an application.
- You’d like to send a question about the youth programs. Find out how to contact the appropriate person.
- Find out if the “Travel Unity Youth Advisory Council (TUYAC) Training Program” includes a module on “Emotional Intelligence”.
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.
Findings
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.
What we found:
- People had trouble figuring out what the organization is and who Travel Unity serves
- Users had trouble knowing where they were on the website
- People couldn’t understand at a glance what the different youth programs were
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.
Recommendation 1: Redesign the Homepage
"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.
Add a hint to lead the user to scroll down.
Half of our participants missed all of the content below the hero banner.
Add copy to clarify the mission, vision, and audience.
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.
Add a video section to introduce more about what Travel Unity does and who it serves.
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.
Order and resize partner logos and make the association with the summit more clear.
Users also had difficulty connecting the list of sponsor logos with the summit heading.
Recommendation 2: Improve Navigation
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.
Recommendation 3: Communicate Scope and Benefits of Programs
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."
General Design & Accessibility
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.
Create a unified UI style guide
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.
Ensure appropriate contrast in copy and links
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.
Use different images on each page heading
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.
Use alt text for image content
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.”
Create large, easily clickable buttons
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.
Conclusion
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.