Travel Unity: Uniting Audiences
Creating a bridge between different target audiences while improving information architecture and conveying organizational impact.
Yeatasmin, Sandy, Madhumitha
Team
Client:
Travel Unity
Figma, Google Suite
Tools:
Timeline:
12 weeks
UX Design, User Research + Testing, UI Design Prototyping
Role:
overview
Travel Unity is a non-profit travel organization that aims to make the world of travel more accessible and inclusive. They are focused on educating members of the travel industry, creating a travel community within youth and students, and establishing themselves as the “thought leaders” in the industry.
As a UX Consultant for Pratt’s Center for Digital Experiences, my team and I were approached to work with Travel Unity to improve the site and create a new information architecture for easy navigation and organization. Our biggest challenge was creating a digestible way for users to consume information and showing the impact of Travel Unity for their youth and alliance members. After conducting our research, interviews, and user testing, we created prototypes based on the client’s target goals.
goals
1 Convey the impact and unique services of Travel Unity
2 Improve the Information Architecture and Information Display
3 Create a bridge between two different target audiences
the process
users
Exploratory Research: Understanding the users allowed us to understand what needed to be improved on the website.
Based on our initial client meeting and looking at the current website, the target users are as follows:
Youth
Ages 14-18
Their Parents
Youth Development
research
user testing
design goals & principles
We analyzed the Information Architecture, key workflows, and content of the current website as well as the beta website that the organization was working on. Within both, we identified potential improvement areas.
1 The current website has an extremely complicated Information Architecture with so many sub-menus makes; it’s hard for the user to navigate and discover information through the site.
2 Though the current website is information-rich, it has loads of data piled up without proper structuring causing an information overload.
We then relied on a thorough Competitive Audit on other organization’s website that focus on travel and travel-related opportunities to find inspiration for what we wanted to bring to the new site. We had 4 key takeaways.
Visual Storytelling
Then, we conducted a Literature Research through various sources on existing knowledge in using language that caters to all proficiency levels, designing for text-heavy web pages, and understanding youth travelers and their challenges.
During our interviews, we conducted user tests with 3 participants: 1 alliance member and 2 students. The interviews and user tests were catered based on the type of target user they were. We wanted to understand their perspective on the travel industry and their thoughts on the current website’s navigation.
The content is very overwhelming to read through and is text-heavy - images and visuals are preferred to understand the context better.
The navigation and organization of the website could be more discoverable and with a clearer visual hierarchy.
Each page looks different in style and could be more consistent in design.
Using both the client goals and our research findings, we established our design principles to adhere to when creating our workflows and mockups.
Convey impact and inspire people
We created a Product Diagram to establish user flows with an interaction spectrum for both youth and alliance members to see where they overlap.
“I think one of the biggest benefits is just having knowledge and background and the diversity of backgrounds too. So they just offer us a different view on things.” - Alliance member
“Having other cultural learning opportunities is a good hook to get me interested in travel related programs.” - Youth
Product Diagram
Interaction Spectrum
Then, we developed a new Information Architecture which allowed us to create a concise and effective navigation system that users can interact with easily.
Confidence
What worked:
Organization
“I like the design. I like how it's clean and simple. I think that's an improvement over where we were. I like the organization.”
wireframes
usability testing
With all of this in mind, we created mid-fidelity wireframes of the three primary pages we deemed most important to test during our evaluative research and testing: Home Page, Youth Page, Alliance Member Page. We also worked on several extra pages that stemmed from the primary focus pages and information architecture. The client was presented with these wireframes, and was very confident in our progress.
Evaluative Research: We tested and implemented all the feedback for our wireframes to our final prototype.
We conducted user testing with 4 students and 1 alliance member with the wireframes we created.
“I like how it’s straight to the point, not too many layers. When hovering, there is not too much that pops up.”
Wireframe Overview
“I like how there are images throughout the page”
Alliance Members
Branding
1 Using language that caters to all proficiency levels
2 Designing for text-heavy web pages
3 Understanding youth travelers and their socio-economic challenges and interests
Organizations with memberships
Donors
The Ecosystem Map below provides an in depth overview of the users and their connections to each other. This method aided in the process of bridging the users through their commonalities. We also were able to understand the value of Travel Unity’s global reach, impact stories, and student testimonials to appeal to various audiences.
Empower travel enthusiasts
Schematic Design: Influenced by our diagrams, our wireframes were made and presented to the client.
Be inclusive and accessible
Suggestions:
The donate section was recommended to be removed from pages as there is already a donate button on the nav bar. Otherwise, it feels pushed onto the user.
Users want signup button placements to be more intentional than including them in every section.
Quotes from students on their career development experience might be helpful for future youth participants.
final prototype
Design Development: We finalized our prototype by creating a design guide and elevating the UI and visual elements of all the pages.
Keeping in mind the design styles that the client wanted to maintain within the prototype, we created a cohesive design guide to follow when finalizing our prototype. We modified the usage of the brand’s yellow color to fit in components, and identified a grid and spacing guide to ensure that our usage of negative space and layout was uniform.
Our final prototype was presented to the client with positive feedback and understanding of our design choices.
The client was highly satisfied with the redesigned website prototype, especially appreciating the clear differentiation between youth and travel industry professionals. They like the seamless bridging of these two user groups and the prioritization of key actions, such as the "Become a Member" button for alliance members.
Overall, the client commended the design for effectively catering to diverse user needs while maintaining a cohesive and user-friendly experience.
Click on the button to explore the prototype or scroll for a preview! The Research Process button leads to an in depth look at our entire project!
reflection
Our team gained a lot of research skills that we didn’t previously have, which helped us in understanding our users and the organization we were working with. We learned how to organize the work between our team from early research to final design stages, and implemented them together seamlessly. This was an enjoyable experience for us as a team. Working with Travel Unity and Brianna brought us passion for the students and alliance members who are eager to explore the world of travel in a unique light.