Harbourfront Centre

CLIENT

Harbourfront Centre is an Arts and Culture nonprofit operating on a 10-acre campus on Toronto’s waterfront. Their programming includes art exhibitions, cultural festivals, camps, and school visits. This redesign coincided with Harbourfront’s 50th anniversary.

ROLE

Researcher Design Lead

TEAM

1 Designer 1 Developer

TIMELINE

Oct, 2023 - Sep, 2024

THE USERS

The Guardian needs to feel welcomed and informed

The Maverick needs to feel intrigued and inspired

PROBLEMS

Navigation and identity

The website's most glaring usability issue was navigation. This was true for internal users as well - stakeholders identified “finding their way around” as a key area of the website needing improvement. It’s a bad sign if employees have trouble using their own website.

Another theme identified in stakeholder feedback was the need for the website to better tell our story. This was echoed by users during usability testing who said the website didn’t feel like it aligned with the in-person experience at Harbourfront Centre. Storytelling is particularly important for nonprofit websites; according to Nielsen-Norman Group, when users are able to articulate what an organization does, the likelihood of them donating dramatically increases.

INTERFACE SOLUTIONS

Hierarchy anarchy

Users get slowed down by unclear information. In a vacuum, this might seem harmless. But with a lot of a content, confusion leads to overwhelm, which in turn leads to a negative user experience and a spiking bounce rate.

Playing tag

Comparative analysis with live participants showed how quick they are to pick up on colour-coded tags. The engagement implications are huge - users adopt the system and leverage it to find things they are actually interested in.

Webpage traffic

Card sorting helped define users’ mental model of our offerings. Basing our new taxonomy on what made sense to users was key. The biggest summer festival’s page views more than doubled from the year prior, suggesting that these pages were easier to find and navigate between.

User engagement

Key insights from usability testing guided decisions about user engagement - learning what they’re drawn to and why. Craft & Design pages, which were particularly difficult to comprehend in years past, saw a 45% increase in average session time.

UX maturity

The design process had never been conducted at Harbourfront Centre before. By engaging stakeholders, presenting research findings with clarity, and establishing a quality assurance process, we improved the UX maturity level from absent to emergent by Nielsen-Norman Group’s standards.

STAKEHOLDERS

Everybody knows that UX lives where user needs overlap with business goals. There’s a Venn Diagram illustrating it perfectly right over there. My first objective on the business side was to speak with leadership from various departments - Programming, Marketing, Volunteers, and Development. These conversations were helpful in learning about the problem space through different lenses.

This quote came from my notes with the Chief Programming Officer and was a common theme of these chats. She was referencing a time when she was at the dog park and wanted to share festival details with a friend. After bouncing around on the Harbourfront Centre website to no avail, she ended up Googling what she was looking for. She was able to eventually find it, but we needed to do better than relying on the Google safety net to bail users out. Why was it so difficult to find things? Harbourfront Centre offers many different types of programming, yet their top level navigation looked like this:

Clean, no? Perhaps a little too clean, though, if we consider everything that needs to be nested under this navigation. Two of the four top level menu items here are for less used, very specific use cases - Donate and Careers. This means that What’s On and Explore are responsible for housing everything. That’s a lot of responsibility for these two pages, especially when we consider that What’s On is essentially a calendar.

“Welcome. We’re so delighted you’re here.”

Another quote from the Chief Programming Officer, this one regarding how she thought the user journey should start. The sentiment did seem to reflect Harbourfront’s general vibe - welcoming and friendly. So, how does this compare to how most user journeys begin? The images to the right highlight a discrepancy between the online experience and the in-person one. The home page, while clean and contemporary in design, might come off as cold or confusing to users. If welcoming is what we’re going for, we needed to address this first impression while maintaining our identity for the entirety of the user journey.

In 2021, Harbourfront Centre hired Strategic Counsel to conduct audience research. Though not directly related to the website, I looked through the report to see if there were any helpful insights to get us started.

My key takeaways from this research were:

1. Harbourfront’s location by the water is a major draw for visitors
2. It’s a very mixed bag of programming types that people know Harbourfront for

Before conducting user research, I gathered general online feedback to identify potential areas for investigation. Using Hotjar, I enabled a widget that, when clicked or tapped, prompted users to give a star rating on their experience, add a message for context, and leave their email if they wished to be contacted about their feedback.

This didn’t do much by way of pointing to website pain points. A lot of the responses had to do with on-site issues, such as washroom critiques or concert complaints. Whenever these came in, I would forward them to their respective jurisdictions and get back to my day. Only once did we receive interesting website feedback, but it was worth all the bathroom concert messages in the world:

We took this feedback to heart and added a lazy-load feature to the What’s On page that removed the need to “SHOW MORE” again. And again. And again. Sadly, this user didn’t leave their contact info, so I wasn’t able to thank them for their service.

USER RESEARCH PARTICIPANTS

To assemble a panel of participants for Harbourfront Centre’s user research, I needed to first identify what kind of sample we wanted. Demographic details like age, gender, or ethnicity weren’t really a concern for the purposes of this research. What I did want to control for, though, is the participant’s familiarity with Harbourfront. I didn’t want to end up with biased data sourced only from people who knew the place really well. A healthy mix of familiarity would lead to more well-rounded results indicative of regulars and newcomers alike. I also wanted to make sure we were testing with some parents given how much kid-related and family-friendly programming Harbourfront offers.

Initial outreach went out on social media with a link to a survey. In this screening questionnaire, there were questions about how frequently they visited Harbourfront Centre and the circumstances that typically lead them there (i.e. planning a visit vs. wandering onto campus). The latter question was meant to help quantify their level of engagement. Participants were also asked if they had children and the general age range(s) of them to add that additional sort.

The participant groupings were categorized as follows:

The Enthusiast makes plans and attends Harbourfront events 3+ times per year

The Visitor comes to Harbourfront 1-2 times per year. They make plans and/or visits on a whim

The Wanderer visits Harbourfront once every couple years, and only ever visits on a whim

The Lost Soul never visits Harbourfront Centre

CARD SORT ACTIVITY

One of the best ways to tap into the minds of users when it comes to website navigation is to run a card sort activity with them. The results can serve as a guiding light for how the website’s contents ought be organized. Using Optimal Workshop’s card sort platform, I set up a test for sixty (60) participants to arrange sixty (60) cards into categories that made sense to them. The cards contained a variety of programming types along with some more common website items like “About Us” and “Box Office”. Check out the full card list if you’re looking for a real thrill.

The open nature of the card sort meant that users made up their own categories - they weren’t provided with any existing groups. This made the test more taxing, especially because of the large quantity of cards. It would also prove to be more work to process the data. But I believed it would be worth the increased load on both ends of testing to get a truer picture of how people make sense of Harbourfront’s offerings.

The incentive for completing the card sort activity was a $10 gift card for the participant’s choice of either Starbucks or Tim Horton’s.

When a card contained a more niche item like, say, “Digidance”, I provided a short blurb to explain what it was. If you’re curious, Digidance was a Canada-wide video dance performance series that emerged during pandemic lockdowns. This was an unmoderated, open card sort. The drawback to being unmoderated was that we couldn’t ask clarifying questions, like “Why did you put that card there?” However, it allowed us to record the sessions fairly quickly, as people could do them on their own time.

While the card sort was meant to shed quantitative light on navigation - particularly information architecture - the usability sessions were going to explore more nuanced, qualitative patterns relating to how users interact with our website. Unlike the card sort, these were to be moderated sessions where we could ask users the all-important “why?”

We had plenty of people respond with interest in both the card sort and the usability sessions. The incentive for usability participants was the same gift card offer as the card sort, plus a pair of tickets to an upcoming event of their choosing, valued at about $80 per ticket. We ended up with a testing sample of sixteen (16) participants, as outlined below.

CARD SORT DATA PROCESSING

With sixty (60) participants each sorting sixty (60) card sort items, we ended up with thirty-six-hundred (3600) data points. It was quite the Excel spreadsheet, if you’re into that sort of thing.

Together with the Digital Coordinator, we each took some time sifting through the sea of numbers. We would meet and discuss what we were noticing, and then crunch the numbers some more. Below is what this iterative data processing looked like.

My hypothesis going into this exercise was that interest-based groupings (eg. art, culture, dance) would be the clear frontrunner for how users categorize Harbourfront Centre’s programming.

I hypothesized wrong. Kinda. The prevailing patterns showed that participants categorize programming in three key ways:

The biggest surprise was the frequency with which users grouped items by format. It appeared people were just as, if not more interested in the type of experience than its subject matter.

Even where it wasn’t the primary sorting category, it was helpful to learn what the leading interest label was for the programming-based cards (eg. “Art” was far more prevalent than “Visual Arts”).

Though less prevalent than the other two sorting strategies, we still noticed a trend toward seasonal curation, reflecting how personal schedules and tastes shift throughout the year.

Having established the primary sorting methods as either by format or interest, I set out to find ways to utilize both to help users find things and understand them more readily. By organizing the key interest categories into their own “Program” pages, we would have a more structured home for users to follow their interests.

Likewise, each programming format would also have its own home underneath the broader What’s On calendar for users to discover programming by how it was presented instead of what it was about. This was around the time I discovered my new favourite UX word: Polyhierarchy - a structure in which at least some child nodes have more than one parent node. 🤓

Mining insights from hours worth of transcripts can be a slog. Having learned some valuable lessons from my previous project with TIFA - and knowing that we had double the amount of data to go through this time around - I employed the help of some artificial intelligence to make life a little easier.

Using Notably, I produced transcripts from the recorded videos and had the AI software generate a summary for each session. I found them to be surprisingly good - have a look at this sample summary if you’re curious.

One thing this technology lacked, though, was the human touch. Not to get overly sentimental, but there is a deeper level of connection at play when a real human is going through the data - especially when the data is paired with the video where certain cues may have been missed in the transcript. So, despite the nifty AI summaries, I still went through each session individually, adding notes and tags to fill in the gaps. And this is where the software drastically expedited the synthesis process.

Below are the main points that I shared with stakeholders at the end of the research phase of this project. I started with about twenty insights, then whittled them down to seven key points that I believed were both interesting and actionable with the design phase looming. Inside each you’ll find a corresponding “How Might We” statement that sparked our approach to solving the problem presented.

At very end of each usability session, I asked participants to rank the three websites in terms of ease of use and identity, which I defined as how well they conveyed who they are and what they do.

The least surprising result here was Barbican getting first place for ease of use. Despite some users not loving the style of the site, it was clear that users responded positively to their structure and design. Their site does a great job at using colour to help communicate what the user is looking at - it was already giving me ideas for our new program families, as evident in the site map.

Most surprising was PHI’s last place finish in “Identity.” As mentioned in the story insight, they did well to communicate their mission throughout the user journey, but their bold interface was not for everyone. Perhaps a negative user experience outweighs the impact of a brand’s story.

Once I had processed all the usability session data and went through the insights, two different but clear user personalities emerged. I opted to present these as lo-fi superheroes instead of overly-detailed personas so as avoid getting distracted by details that didn’t really matter for our design purposes. By keeping these characters somewhat vague, I think it makes it easier to empathize with them. Plus, they’re cute as hell, you’re gonna love them.

The Guardian

needs to feel welcomed & informed

“I want an inviting website with a very clear schedule. Something I could take the kids to would be great. ”

Tendencies

→ makes plans in advance, often for a group → cares more about who content is for → very enticed by free programming

Likes

→ friendly interfaces → clear information → stacking plans

How might we… structure the website in a way that feels comfortable to The Guardian?

The Maverick

needs to feel intrigued & inspired

“I want a bold website with a distinct personality - something that speaks to me beyond just words.”

Tendencies

→ makes plans on a whim, often solo → cares more about who made the content → enticed by free programming

Likes

→ stylish interfaces → engaging visuals → mystery boxes

How might we… style the website in a way that feels attractive to The Maverick?

Getting going on building these wireframes was exhilarating. After spending months preparing, conducting user research, and processing the data, I understood the problem space and the user types we were prioritizing. Sharing these with the team got everyone excited about what could be.

Design updates for this project happened in a very piecemeal way, and the event cards were the first get a facelift. We needed to standardize the way we talked about and presented our programming. Cards had been used on the website with many different variations depending on the context, resulting in little consistency between pages. This lack of continuity increases the cognitive load for users scanning content, as the information they’re looking at can vary depending on the page they’re on.

Enter: The Universal Programming Card, a standardized way to present any type of programming on the website.

Events are the standard units of programming at Harbourfront Centre. They’re often what draw people out, and they’re typically the only revenue-generating type of public-facing attractions outside of Camps - most exhibitions and festivals are free to attend. With that said, the design for exhibition pages needed more attention because of the nature of building hours and location.

Once the template was built for exhibition pages, it would be easier to adapt for an event page instead of the other way around.

The Universal Programming Card and Exhibition Page would serve as the main building blocks for the rest of the site. Modular by design, as we iterated the template for one, the others would get updated. With that in mind, here’s an abridged look at the other key pages as spin-offs of what we’ve already seen.

Quality Assurance

We defined a process for internal review of new designs, fostering more input and buy-in from colleagues, and more rapid iteration to improve the digital product.

UX Culture

Turning an opportunity into a noticeable shift in mindset about UX. Colleagues would refer to “The Guardian” like an old friend and get excited about upcoming research.

Dev Partnership

Over the course of this project, the lead dev and I grew from collaborators to partners. And friends. It was a privilege to play a key role in making things better together.

Templates

Learning my lesson from the TIFA project, I strived to come up with designs that were more “plug and play”, even getting involved in the CMS design to smooth out the entry process.

User Engagement

Our most recent update on the Craft & Design class pages showed a 45% increase in average session time. People were staying to hang out, which is typically the sign of a good party and website.

Analytics

I never really established a formalized funnel to monitor the success rate of these design changes. It would have been helpful in putting this case study together, not to mention in informing future iterations of the site.

Restructuring

Organizational changes including leadership transitions and the cancellation of a major rebrand presented significant challenges to this redesign, ultimately leaving it incomplete.

Unfinished Business

My time at Harbourfront ended with a layoff of my own in the middle of a slew of works in progress - School Visits user research, another What’s On update, and new types of programming pages. Rats.

WHAT HAPPENS NEXT

Hey, I’m as excited as you are to find out. I’ll see ya there.

Sincerely yours,

✉️ Email me 🗨️ Book a chat