Destination Ontario’s Travel Website I

Design process

heuristic evaluation

As the Travel Resources section was our top priority, I first started out with a heuristic evaluation on the section, based on Jakob Nielson’s 10 Heuristic Principles for UX design. I identified six key issues:

• Excessive top-level categories overwhelms users – there were 10 category options in the secondary menu of the travel resources landing page.
• Overlapping and unclear category labels – Some labels were too similar, vague or incomprehensive on their own without proper context.
• Long carousel for itinerary articles that is exhaustive to scroll – 20+ related card links in a single row for horizontal swiping
• Unnoticeable switching to international/corporate site– clicking on certain options in the global header and footer leads the user to a different Destination Ontario site that looks too similar to the original site. There are no distinctive themes, descriptions or icons to alert user that they are redirected to a different website by Destination Ontario. This is bound to make navigation confusing.
• Long content width – some articles span up to 10 printed pages of scrolling
• Inconsistent navigation from global header and footer – clicking on certain options in the global header and footer unexpectedly leads the user to a different Destination Ontario site. There is no way to return to the previous site.

It is clear that the first few requirements that we require to take action on are:

• Improving the navigation structure with additional card-sorting and tree mapping tests
• Finding an alternate way to display these categories without confusion
• Rethinking how we may rework the global header and footer for quick distinction between different sites
• Content hygiene work to reduce text-heavy content, making articles succinct and easy to read

---

Research

Primary and Secondary research in both qualitative and quantitative forms were conducted. I did some jurisdictional reviews and comparative analysis with the travel sites of industry competitors such as Travel BC, New Brunswick and Hello BC. This allowed me to compare some best practices and design inspirations which I could adopt and improve on for our Travel Resources section.

To understand the key pains, needs, frustrations, goals and desires of our travel consumers, I also wanted to conduct a:

1) Task-based tree mapping test (i.e. unmoderated, virtual with UX metrics & Google Forms) to understand HOW users are finding their information with the current navigation system and WHAT they think/feel about it; and

2) Open card sorting test (i.e. unmoderated, virtual with UX metrics & Google Forms) to understand WHERE users would expect certain information to be found at, HOW they would like the information reorganized and WHY.

Thus, I worked with my boss to prepare a list of eligible participants, survey questionnaires and test plans. My boss was really helpful in connecting me with external Ontario government civil servants as voluntary participants. I followed Barnum’s rule of thumb and managed to recruit at least 8 participants for both tests.

The following is a preview of the user test results and findings for both the tree map and card sorting:

tree-mapping

Card sorting

Here are the insights I gleaned from the jurisdictional review, heuristic evaluation, and user tests:

---

Define & prioritise

improving our information architecture

With the new user discovery, I got the content team together in a whiteboarding session to relook how we might rework our Travel Resources’ navigation sitemap. Originally, we had over 10 main categories listed on the Travel Resources’ landing page. We discovered that users found this amount too overwhelming, and most preferred an average of 4-6 category options. As such, we reformatted the navigation structure to have just 4 main categories, with secondary categories and additional related content links within each of them.

prioritising overlapping issues into phase 2 of site revamp

While brainstorming on the structure of the Travel Resources section, we realised there were several dependencies of design components from other parts of the website that could affect the experience of our Travel Resources section, and vice versa. One example was the lack of a visible search bar for easy discovery. Along the way, we also realised that we needed a new component to include related content links as the sitemap included several related articles linked to one another.

These concerns convinced us to take a step back to re-evaluate the various element/molecule/page issues that needed to be worked on, and prioritise them according to their perceived value and costs/risks involved. I taught the team how to use the Hypotheses Prioritisation framework (by Jeff Gothelf) to prioritise our ‘to-do’ list according to the following:

We decided that some of the quick wins that we could tackle simultaneously would be a dynamic map feature on every travel article page (i.e. for Trips & Itinerary), a dedicated Contact Us page for consumers, top-row anchor links and a simple related content section at the bottom of every page.

---

IDeate & Prototype

By understanding our user requirements and priorities, our next step was to ideate based on the areas of opportunity. For most of the time, I made full use of the pre-set Design System of Destination Ontario, and occasionally designed my own components from scratch (e.g. Accordion menu with thumbnails) for a new functionality.

ideation for travel resources landing page

My team internally voted for three of these ideas based on highest feasibility and impact for incorporating into early-stage mock-ups for user testing:

• (Option A) Accordion Menu — an expandable and collapsible accordion menu with list of secondary categories. This minimizes real estate since categories are hidden, but is not accessible friendly as users need to expand the menu to view the categories. One way to remediate this is to keep the menu expanded by default.
• (Option B) Carousel  — row by row carousels for each primary category. This minimizes real estate but additional interaction cost (of horizontal scrolling) is required to browse categories.
• (Option C) Grid formation — Bucketing secondary categories together into boxes. This allows for quick glance on all available options but takes up a lot of space

These top ideas were incorporated into our early-stage mockups for user testing:

IDEATION FOR Supporting elements – contact us, itinerary & road trips, map component

I also got to work on the other priorities at hand. I did some jurisdictional reviews and benchmarking for all of these components. Most of them do follow a common industry standard, such as the Contact Us and Itinerary landing pages. With some quick mock-ups, internal reviews and extra refinements, these 2 components were relatively straightforward to design and build for quick-wins.

The map feature on articles was a bit of a challenge as there were so many functional use cases and types of maps to consider. I went about this by doing a jurisdictional review on 4 travel guide competitor websites – Hello BC, Travel BC, Lonely Planet and blogTO. From there, I discovered 3 common uses cases for maps as follows:

I did a quick mock-up for the map feature in mobile and desktop view. The following are my first prototype iterations which I used to test asynchronously via Yammer.

---

test & validate

I established a way to obtain users to test and validate my prototypes by starting a Yammer community for OPS employees who are interested in UX.

I wanted to get some quick and dirty feedback from fresh, inexperienced users before making further iterations. Yet, this was partly challenging as almost everyone in Destination Ontario have used the website before.

I decided to set up an open interest group on OPS’ Yammer, where OPS members outside Destination Ontario could join our community to participate and stay abreast with our UX projects. This not only gave me a steady stream of online users to post and test my mockups asynchronously (via online survey/polling/forum discussion), but also a reserved pool that I could tap onto to recruit live participants, and build online presence for Destination Ontario’s Content and UX teams. I do take personal pride for this particular idea as not only does it help with my job, but also cast a spotlight on my team.

Below are a few of the findings and iterations we made to our mock-up:

1. Accordion menu works best for accessibility and readability in both mobile and desktop view — 70% of participants were in favour of this layout
2. Most renamed category labels work well, except for a couple — confusion remained for broad phrases such as “Accessible Travel”, “Sustainable Tourism”, etc.
3. A visible, centered aligned search bar works best — ALL participants would like to see a visible search bar on the hero banner for quicker keyword searching.
4. Opening maps from travel article pages with current button options is not intuitive – there was a mixture of responses regarding the use of a radial floating button and a slider to open the map. From an accessibility perspective, it may be difficult and non-intuitive to drag the slider out. A small floating button is insufficient to indicate a hidden map.

High-fidelity prototype

Taking the above feedback into account, I eventually designed the final outcome of the Travel Resources page, Itinerary and Road Trips page, Contact Us page, and Article pages with interactive maps. I used sample content from the Travel Resources section to illustrate how it may look like on existing content.

These were then pushed into agile sprint delivery (via Jira platform) to be built into code. Meanwhile, I assisted the developers with quality assurance (QA) testing to ensure that my designs were built correctly.

---

Evaluate

We conducted one more round of usability tests for the Travel Resources section and In-page Maps with 8 new representative users. Using similar tasks and protocol, we discovered the following:

Strengths

Intuitive with good ease of use — accordion menu expanded by default provides users with a quick glance of all available options. All navigation routes are in one place from the Travel Resources landing page. The map is also simple but dynamic enough to highlight respective location references as the reader scrolls through the article sections

Only essential information is front-loaded— The Ontario Travel and Information Services (OTIS) card provides travel users with a more direct call-to-action to contact our travel counsellors to plan their trips. By  making this information more visible, this will hopefully increase our customer conversion rates.

Reduced landing page real estate — The page length was reduced in half after hiding sub-categories in four main secondary menus and reducing the clutter of category cards.

further Considerations

Additional Usability Assessment Test (UAT) and refinements for next sprint — there are still several minor discrepancies in the current built version relating to spacings, paddings, column alignments and icon sizes of the said pages. These must be pushed to the following sprint.

Search filter function — 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.

Redesign of 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 redirected the user to a different page instead of filtering options. The efficacy of the naming conventions of these buttons are also questionable. The cards were also inconsistent in size and layout. 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.

In-page anchor links for long content – While it is ideal to cut down the content in some articles, we will still need some in-page anchor links to accommodate articles that are inherently long e.g. Day-to-day travel itinerary, list of places to go.

Content Hygiene — Heavy texts and long paragraphs affects readability. There is a need to make content more succinct and easier to read. I will be assisting the Content team by providing some inputs on UX writing (e.g. choice of category titles, headers and call-to-action statements)

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 phase of our site revamp (see Part II).

Key lessons

1. Fail earlier, learn faster.  Many organizations are very output-driven and would rather jump straight into solutioning instead of spending more time on user research and testing. I am equally guilty on this part; since time was of essence and resources for in-depth research were constrained. However, by skipping early-stage research and testing, we risk sacrificing the true needs and wants of the user. It can also be costly to roll out a product of high perceived value that ends up not working well for users.
2. The power of stakeholder management to get the resources you need – leadership is important to influence the team in taking UX suggestions.  What amazed me was how my bosses were supportive and ready to accommodate to my suggestions for testing our prototypes with people outside Destination Ontario. They were able to link me up with the right people and resources, which made me realize the importance of growing our peer learning environment even at work. I also recognize the importance of UX leadership and influence – the ability to persuade and gain the trust of the team to trust the UX design process with good storytelling, credibility and reliability.
3. Humility is a virtue. We designers must be humble enough to not just empathize and listen to the true needs and wants of the users, but also our working team members. It was an eye-opening experience to work with the software developers in this project as I got to listen and understand their working constraints, so that we could find alternate ways to solve particular issues together.