Equality in Tourism
Transform the life of women in tourism.
Overview
This is a collaborative project where I worked with 4 other designers and researchers to redesign a non-profit organisation's website. Our client is Equality in Tourism, a UK based non-profit that aims to promote gender equality in the tourism industry through their awarding events, impact projects, training services and free information hub.
Our team members were from all over the world, spanning across five time zones which made this collaboration a bit more challenging but also very interesting. We engaged in fully remote communication, utilising Google Meet and Figma to sync efforts and work together seamlessly.
Problem
Equality in Tourism is facing challenges in attracting a wider audience, especially the younger generation.
The website’s design, usability and content may not align with the expectations or preferences of the young audience. This misalignment potentially hinders the organisation's ability to communicate its mission, attract financial and community support, and foster a broader base of advocacy for equality in tourism.
Furthermore, the website doesn’t work well in mobile devices, which causes even more accessibility issues towards its potential users.
Solution
We focused on fundamental changes to enhance the website's appeal and functionality for users across different age groups.
Our website redesign leveraged user-centred design principles, including the creation and testing of wireframes for both mobile and web interfaces, to ensure the final designs to be intuitive, attractive, and effective in meeting the project goals.
New structure to promote seamless navigation
- Updated information architecture based on user research
- New button labels that are more commonly known by users
- New layout tailor to each page to enhance usability
Clean and appealing interface that suits wider audience
- Clean and more minimal look
- Strategical use of colours, typography and other elements
- Refreshing and relevant imagery that conveys the right messages
Refined adaptation for mobile devices
- Seamless navigation on mobile screens
- More visually attractive design on mobile devices.
- Enhanced user accessibility on a smaller interface.
Process
1. Discover
Competitive Analysis
Equality in Tourism has no direct competitors but our research team examined multiple non-profits who shared a similar mission and vision.
- Successful non-profits made donation on their website intuitive and convenient for users. Their donation form is accessible and the process requires as little effort as possible from users.
- They had a great way to convey their message by representing key information in suitable tone, along with statistics and well-chosen images to evoke the feelings on users.
- Each non-profit applied different methods on their website to win trust from users, from showing their impact in numbers or ratings to providing downloadable financial reports, etc.
User Research
We conducted different methods to gain insights from users, including: online surveys, tree testing and cad sorting.
- Before donating, users took into account: Impact of the non-profit’s projects (62%), How their donation will change others’ life (62%) and How effective money will be spent (56%).
- When navigating through the current website, users struggled to access the resources about gender equality in tourism (67%) and info about project sponsorship (69%).
2. Define
To better understand and empathise to Equality in Tourism's users, we developed 2 personas that represented 2 different target user groups.
User Persona #1
Shipra embodied the characteristics of Equality in Tourism's existing audience: middle-aged business owners or professionals with financial stability, who are inclined to support their initiatives.
User Persona #2
Conversely, Bethany symbolised the younger demographic that our client aims to engage with as they broaden their target audience.
User Flow
We crafted the flows for our personas to complete different tasks, from making a donation to navigating through main pages on the website.
By visualising the user journey, our team could effectively communicate design concepts and set up a strong foundation for our ideation phase.
View all User Flows.avif)
3. Ideate
Mid-fi Wireframes
Our mid-fi wireframes were designed in greyscale based on the user flows and filled with the copy from the current Equality in Tourism website.
.avif)
.avif)
UI Kit
This UI Kit represented the visual elements of Equality in Tourism's brand identity. This was a part of a style guide created to ensure that the design would be consistent in all the high-fidelity pages and even in the future updates.
4. Final Design
Home page
- Tell a story about EiT's mission, work and impacts then encourage users to join their cause.
- "Our Mission" relocated and supported by statistics from EiT's research.
- "Our Work" shown in more details, so users could view and access their four types of activities;
- Testimonials added to strengthen EiT's credibility.
Support our Cause
- All support methods included, with a cleaner look and simplified copy.
- EiT's quotes used to convey their messages, while breaking user's reading pattern and separating main sections.
- New buttons added to help users explore relevant pages.
e.g, users can view EiT's current projects before they decide to sponsor one.
Our Team
- Present EiT's members (including their board of trustees), partners and associates.
- New sections added to support users who consider becoming a trustee, partner/sponsor or associate.
- EiT's quotes used to convey their messages, while breaking user's reading pattern and separating main sections.
- New "Global network" map designed to be interactive, to show associates' location and profile.
Resources
- The new "Resources" page covered all EiT's publications and articles in 4 categories.
- Search bar, filter, sorting and pagination system added to help users find and browse content.
- Article/publication cards redesigned for a more consistent and appealing look, with category tags added.
Mobile Wireframes
To optiomise our website's responsiveness, we designed high-fidelity wireframes for mobile breakpoints. This will help us communicate with our client's developer to create an appealing interface and seamless experience for users when browsing the website on their mobile devices.
5. Evaluate
We conducted 2 rounds of usability testing to evaluate our high-fidelity prototype.
In the first round, users were shown "What we do" page for 5 seconds then were asked to answer some questions. In the second round, users were given a list of tasks to perform while exploring the prototype and then, again,were to asnwer some follow-up questions.
Both methods were remote unmoderated study.
Key findings:
- Users had positive feedback on the UI, especially the layouts and colours.
- The images were memorable and drew more attention than the UX copy.
- Users had a vague idea of the non-profit's actual work, some struggled to understand the severity of the problem.
- Users preferred a simpler donation process and more payment options.
.avif)
Reflection
Since our client was a small non-profit, our team was facing a couple of financial and technical constraints. We were also instructed to follow their brand guideline and keep their colour swatches unchanged. Therefore, I was forced to think outside of the box, to come up with practical solutions without compromising the project's goals.
With the results collected from the testing phase, our team aimed to improve the UX copy and get more images that demonstrate EiT's work better. We also planned to reach out to EiT's developer team to provide support if needed during the new website's implementation.
