Destination ontario’s travel website revamp (Part 2)
This is an ambitious, multi-phase project that aims to revamp the entire travel guide website in order to improve the web browsing experience for Canadians and international travelers. The website is divided into 3 main sections: Regions, Cities & Towns; Things to Do; Travel Resources. Part 2 is about improving the web experience of the former 2 sections and the Home Page.
Collaborator
Destination Ontario (Ministries of Heritage, Tourism, Sport and Culture Industries), Technology & Insights Department
Timeline
May 2022 – Dec 2022
Role
Sole UX designer of the Technology and Insights (agile) team, providing inputs on user research, ideating, prototyping, usability testing, visuals & overall design direction.
Tools
Figma, Miro, Google Forms, UX Metrics, Optimal Workshop, Yammer, Jira, Contrib
overview
Destination Ontario’s consumer’s travel website offers multiple travel ideas, resources and navigation guide for travelers to get inspirations and plan their travels in Ontario. The website was first launched in 2019 with no further improvements to the website made ever since.
I was engaged by Destination Ontario to help them refresh their entire website, starting with their Travel Resources section, before moving on to improve their Home, Regional Cities/Towns, and Things to Do sections in Part 2.
Design process
research with jumping elephant
A design consulting agency, Jumping Elephant was engaged in June 2022 to help facilitate the redesign of Destination Ontario website. We worked closely with them to conduct usability tests with think-aloud protocol for each of the 3 sections. I was tasked with drafting and planning the scenario-based questions and tests before Jumping Elephant implement the tests with their collected participants from our predominant markets – the US, UK Canada.
The following is a preview of the user test results and findings for 3 sections:
Home/site-wide
- Overwhelming carousel navigation: Due to a high number of cards (up to 50 in some cases) on the carousel, participants indicated it got very tedious and repetitive to have to click through every single card to find what they were looking for. Some participants expressed they would likely abandon the carousel after 10-15 cards and they were in favour of using the search bar instead
- Unorganized content management: Some attractions and trip ideas are scattered among other areas of the site.
- Limited search tool does not aid with findability: Although some participants expressed that they liked the search bar, overall it did not do a good job of returning relevant search results based on what the participants were looking for.
- Categories for Trips and activities do not meet users’ expectations: When looking for trips, activities, etc., participants were expecting to find information split into different categories such as seasons, trips including duration, environmentally friendly and so on.
- Misperception of ‘Travel Resources’ title: Some of the participants did not associate some of the content found within the “Travel Resources” section as travel resources. Thus, some participants did not consider navigating to the “Travel Resources” section at times or if they did it was not an initial instinct to do so.
- Limited understanding of geographical orientation to navigate correct information: Multiple participants indicated that they were unaware of the geographical regions of Ontario and without having a map to reference, it was very difficult for them to understand the areas and complete some of the tasks at times
things to do
• Less visible CTA in ‘Explore More Things to Do’ section: Most participants relied on the global menu to navigate the site. Further, many participants at some point missed the “Explore more Things To Do” call-to-action button as it was not easily noticed when they relied on the menu.
• Text-heavy content: Some of the participants found the information presented on some pages is content heavy, with lots of text and topics are also presented with large amounts of information that users need to scan through.
•Overloaded carousel adds mental load: Several participants indicated that the “Popular Things To Do” section included a large number of cards to go through in the carousel.
• Ineffective geographical location indicators: Participants frequently shared a lack of understanding about the geography of Ontario.
• Missing Activities filter chips on mobile: None of the participants on mobile sessions could find the filter chips (“All”, “Food and drink”, etc…) under the “Things To Do” section as they were not presented on the mobile version of the site.
Regions, cities & towns
Overall
- About half of the participants preferred the Regional menu path over the homepage path to find “Regions, Cities & Towns.”
- A few participants felt that there was too much information on the page and it was cluttered.
Categorisation and Sections
- The majority of the participants would like to have the Regional menu broken into sub-categories to avoid scrolling too much (e.g “Regions” category, “Towns” category, “Cities” category).
- Some participants also mentioned organising categories by types of things to do (e.g Outdoor, Family etc).
- Participants stated that “Regions” could be re-classified as larger geographical regions/divisions within Ontario, comprised of multiple cities and towns.
Identifying Locations and Areas / Map
- Many participants were unfamiliar with and did not generally understand the geography and the names of locations (even those in Canada).
- Many participants attempted to use the static map since they expected the map of Ontario to be interactive.
- A few participants mentioned they would prefer going to Google to check the distances between cities and towns.
High content-depth with confusing site navigation structure
- Pages of similar information were used interchangeably which made it difficult for participants to find the exact information
Cards
- Participants tend to quit searching when there are many cards on carousel to scroll through
- Some participants mentioned that cards with longer text looked like blog posts and stated that they prefer the ones with shorter descriptions.
Mobile Specific
- Excessive scrolling with content heavy pages
- Landing page for “Regions, Cities & Towns” is long on mobile, with many cards to overloading the mental model of users.
Define
Key Needs
The user findings can be summarized into the following user needs that are applicable site-wide:
- Overlapping and unclear category labels – Some labels were too similar, vague or incomprehensive on their own without proper context.
- Confusing navigation depth – several overlapping information and interchangeable pages can streamlined and referenced with collateral/redirectory links
- A better search and filter tool is desired — Our initial study found that many users would like to have a more visible search bar display, potentially around the hero image of the Home page. As many heavily rely on the search tool to look up targeted information, this will be a very important feature to roll out soon.
- Unintuitive Accessible Options Menu under ‘Accessible Travel’ page — There are several issues on the ‘Things to Do with Accessible Options’ menu under the ‘Accessible Travel’ page. For one, the following button chips, apart from having too many of them, did not work as expected as they did not filter the catalogue, but redirected the user to a different page instead. The efficacy of the naming conventions of these buttons were also questionable. The cards were also inconsistent in size, alignment and categories. This is potentially a major issue to users with disabilities, as the current display convention is unlikely to work well on accessibility tools such as screen-readers and tab focus.
- Content Hygiene — Some articles span up to 10 printed pages of scrolling. Heavy texts and long paragraphs affects readability. There is a need to make content more succinct and easier to read. I assisted the Content team by providing some inputs on UX writing and re-organizing page sections.
design guidelines
As we have people coming into the site with accessibility needs (visual impairments, physical impairments), there are also more considerations to design content that is screen reader and tab focus friendly. There is also a need to strong deliver content that is mobile friendly. Hence we take a mobile-first approach in our designs. Taking a mobile first approach in our design, we hope to restructure the navigation of our site to improve how users search, explore and lookup information, paying more attention to mobile interactions. Hence, we derived the following guidelines when going about our ideation process:
- Accessibility improvements for screen-readers and tab focus
- Rethink how users interact with relevant content on mobile: 70% of our organic users view DO site on mobile
- Navigation restructuring: To address how users interact with different pages, category options and even with the search tool
IDeate & Prototype
Ideation and prioritisation
By understanding our user requirements and priorities, our next step was to ideate based on the areas of opportunity.
To get everyone aligned on our feature requirements and priorities, I organized a prioritisation workshop with my UX and Content team, where we vote and evaluate our identified feature requirements (from our user findings) based on impact value and level of risks (i.e. feasibility).
mid-fidelity Prototype
New Components and pages
My team internally voted for six of the following ideas based on highest feasibility and impact for incorporating into early-stage mock-ups for user testing.
As many functionality fixes to the aforementioned user findings could be applied site-wide, I begin my focus in drafting a few variations of feature components and page modules, on mid-fidelity. For most of the time, I referred to our pre-set Design System of Destination Ontario to maintain branding consistency, and occasionally designed my own components from scratch. I took many design inspirations from travel site competitors such as Hello BC, Contiki and even Airbnb!
- Global Mass Menu — an expandable and collapsible drop-down with list of secondary categories for each menu title. This minimizes real estate since categories are hidden, but is not accessible friendly as users need to hover and expand the menu to view the categories.
- Advance Search and Filter Page — Filter by topical categories (activities, regions, seasons), and toggle search results based on articles, itineraries or points of interests. This helps narrow down searches for experienced users who have a specific search objective, but additional interaction cost (of horizontal scrolling) is required to browse categories.
- New Accessible Travel page – located under ‘Travel Resources’, this page provides specific information on where and what accessible amenities and support are available for different trip plans and visiting locations. We have a new dedicated page for accessibility as there is a growing demand for such information.
- Quick keyword search – located at top navigation bar for easy information lookup
- Tag descriptions on cards — Clickable tags under card descriptions to quickly identify topical categories related to the linked article
- Anchor links for long articles
These top components were incorporated into our early-stage landing page mockups for user testing.
home page Landing
For the Home Page landing, I wanted to investigate the effectiveness of the different variations of card tags and mass menu categorisations. Thus, I came up with 2 mockup options to be A/B tested in the next round.
Option A
- Mass menu 1 – includes 2 sub-categories for Regional menu (with ‘Explore More of Ontario Regions’ map), and 3 sub-categories for Travel Resources menu
- Short description with additional tags on cards
- Video showreel as additional marketing tool
- Re-organisation of landing page sections to feature top, seasonal articles by menu categories only
- New Accessible Travel page – advanced sort and filter by accessibility support and amenities
- Advanced search and filter page with results that can be toggled by ‘Articles’ or ‘Itineraries’
- Frontload featuring top rated articles instead of full article listing at Home landing
Option B
- Mass menu 2 – includes Cities & Towns sub-category only for Regional menu (with ‘Explore More of Ontario Regions’ map), and 2 sub-categories for Travel Resources menu
- Tags listing only for cards description
- Mid-page static image banner as additional marketing tool
- Re-organisation of landing page sections to feature top, seasonal articles by menu categories only
- New Accessible Travel page – advanced sort and filter by accessibility support and amenities
- Advanced search and filter page with results that can be toggled by ‘Articles’ or ‘Itineraries’
- Frontload featuring top rated articles instead of full article listing at Home landing
things to do
I also wanted to test out 2 landing page options to find out whether the sort and filter section works well on the landing page.
- Drop-down filter tool under ‘Explore More’ section for mobile view.
- Advanced sort and filter tool to browse articles, itineraries and points of interests by activities, seasons and travel group types.
- In-built anchor links to long articles and static map for easier read and/or to identify geographical bearings of each points of interests
- New ‘Related Content’ section at end of each article
regions, cities and towns
Several options of my Regional landing page mockups that I want to test includes:
- Interactive map to filter and browse articles by Regions only
- OR Advance sort and filter section by Regions, Cities and Towns
- In-built anchor links to long articles and static map for easier read and/or to identify geographical bearings of each points of interests
- New ‘Related Content’ section at end of each article
Lean evaluation
We have planned for Jumping Elephant to conduct one more round of summative usability tests (using similar tasks and protocol) with our prototypes for the Home, Things to Do and Regional sections. As we have several design options for each of the sections, this would help validate and finalise our prototypes before implementation.
Unfortunately, I was not able to oversee this part of the project as my Co-op was concluding. Nevertheless, I was able to consolidate my new designs into a style tile for team members to adopt. This includes my new card design systems and search and filter components. Doing this ensures continuity of my work after I have left the organization.
During the design refinement process, I was able to demonstrate my prototypes and mockups with the technology staffs and front-facing travel counsellors; and managed to derive the following evaluation:
Strengths
- Easier findability and discoverability — the introduction of a global mass menu with drop-down menus provide additional context for each of the menu titles, and allow users to quickly navigate to their desired pages with less clicks.
- Only essential information is front-loaded— Category tags on each cards also helps organise content better and allow users to perceive summary information quickly.
- Reduced landing page real estate — Having a search and filter tool allows us to hide some cards instead of listing them in full. This helped reduce the length of the Things to Do and Regional landing pages.
FURTHER CONSIDERATIONS
- Potential dependencies of other site components affecting overall experience – There are several UX elements and components that are dependent on one another. As such, we should take these into account when we work on the next iterative improvement of our consumer site.
- More in favour with Option B of Home landing page – interestingly, more are in favour of having simplified cards with short tags for descriptions, since they contain sufficient information through the listed categories. Removing text excerpts in the cards also allows more real estate to add more meaningful tags. This is an option we can consider for our final Home page design.
Our next steps would be to continue testing and iterating the designs based on the user analytics we received. This includes re-evaluating our existing features and integrating new feature iterations based on our prioritization.
Key lessons
- A mobile-first design approach. While it is tempting to start prototyping for desktop view to factor in the full content that we want to display, a mobile-first design approach is important to cater to the growing mobile users that enter our website. As majority of information is consumed on mobile, we want to make sure there is minimal information overload and ease of navigation.
- Accessibility considerations for the mass audience. It was a dauting task to improve accessibility features of the website from scratch, since this was not strongly taken into account previously. It is important to remember that accessibility design is more than just the visuals, but also the assistive audio, and mobility experience.
- Balancing between organization mandate and user needs. There were situations when we were unable to implement useful UX enhancements due to corporate and political restrictions mandated by the government. For example, certain naming conventions for Accessibility issues are standardised by the Ontario government to uphold political sensitivity. However, some of their titles are long, repetative and not ideal to the user experience. It was thus important to consider the multifacets of this issue when attempting to challenge the current status quo. I was able to nevertheless persuade my stakeholders to open up a conversation to consider working on changing the naming conventions of these Accessibility terms, to one that caters to the user experience while empathizing on the sensitivity of these accessibility users.
EXTRAS
Final Figma Prototype: Home landing/Site-wide (Desktop, mobile)
In-progress Prototype: Things to Do (Desktop, mobile)
In-progress Prototype: Regions, Cities and Towns (Desktop, mobile)
Style Tile – Cards