BACKUP - Harbourfront Centre (2024-11-25)

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 informed

The Maverick needs to feel inspired

PROBLEMS

Navigation and identity

The most glaring usability issue of the website was the inability for users to find their way around. 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 navigating their own website.

Another recurring theme of stakeholder conversations was the desire for the website to do a better job of telling 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; Nielsen-Norman group cite the ability for users to articulate what an organization does dramatically increases the likelihood of them donating.

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. But those different lenses made it tricky to focus in on any one business goal or user type. Steeping in the brew of the notes from a dozen different stakeholder meetings, it occurred to me that it might be better to start vague.

“It needs to be easier to find what you’re looking for.”

This quote came from my notes with the Chief Programming Officer and was a common theme amongst these chats. She was referencing a time where 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. I’m glad 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 little-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 the common 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 would likely need to work on this first impression, as well as maintaining our identity it for the entirety of the user journey. Could we strike a happy medium?

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

Leading up conducting my own user research, I thought it could be useful to collect general feedback from users that might point towards some area we should investigate. Using Hotjar, I enabled a feedback 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:

Sadly, this user didn’t leave their contact info, so I wasn’t able to inform them when we took their 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. I hope they noticed anyway 🥲

USER RESEARCH PARTICIPANTS

To assemble a panel of participants for Harbourfront Centre’s user research, I need 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 that 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”.

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. For a real thrill, you can check out the list of all sixty card items.

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. It would’ve taken months instead of weeks to get the same amount of data.

While the card sort was meant to shed quantitative light on navigation - particularly information architecture - the usability session 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 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 scale/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”).

A clear third place but still worth mentioning the value of seasonal curation. This makes sense when we consider how our own schedules and tastes vary depending on the time of 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 could 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 nodes. 🤓

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 the one linked below 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.” I could tell didn’t feel the most comfortable with their bolder interface, but I thought this was in line with their brand and, as mentioned in the story insight, it seemed to me like they did well to communicate their mission throughout the user journey. So, why did participants not pick up what they were putting down? Perhaps a negative user experience weighs the brand messaging down. The “story” the organization is trying to tell about themselves can be overshadowed by the user’s own story about their experience.

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?

LO-FI WIREFRAMES

Getting going on building these wireframes was incredibly exciting. After spending a couple months conducting user research and processing the data, I understood the problem space and the user types we were prioritizing. You can expand the sections below to see the first wave of low fidelity mobile wireframes and their accompanied annotations exactly as I presented them to my team. While there were many page types and templates to be reworked, the key pages I focused on to start were:

Just as this redesign was picking up steam and build timelines were getting agreed upon, a few significant events occurred.

1) Restructuring

It’s probably tacky to talk about this in a case study, but it altered the trajectory of this project in a major way. At the end of the year in 2023, Harbourfront Centre found itself in poor financial shape and the board of directors enacted some changes. And then many more changes followed. Here’s a cute timeline of it all:

I didn’t mean to spoil the plot, and I hope you’ll read on to see what we were able to accomplish amidst all the turbulence. The point of sharing this now is to illustrate how non-linear this process became, and how ultimately we weren’t able to fully complete the redesign. But we were still able to make some big changes that I’m very proud to show off.

Admittedly, I was hoping the “after” images would be a little flashier given the planned rebrand that was meant to coincide with this project. Unfortunately…

2) Rebrand Postponed Indefinitely

Concurrent with the TIFA rebrand was a full-scale rebrand for Harbourfront Centre. I’m talking logos, colour palettes, the works. I’ve likely already said too much, so I’ll leave the details at that. But I was excited about it.

Finding out that the rebrand was off just as we were kicking off the design phase was a real bummer. But there was still plenty we could do to move the website in the right direction.

We needed to standardize the way we talked about 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 - most people don’t know what a “vitrine” is.

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

BARNBROOK

Barnbrook was hired to lead the new brand guidelines for Harbourfront Centre and TIFA. As I mentioned in the intro video, they have quite the impressive roster of clients for their design work, including the likes of Davie Bowie and John Lennon.

Once the brand guidelines were approved by TIFA, they were shared with me and I took to updating the wireframes accordingly. It was a lot of purple, which was the 2023 theme as part of an annual rotating palette.

Once the designs were updated with the new branding in mind, I met with the designers from Barnbrook to get their feedback. They provided me with a light style guide, outlining a few more colours to use, typeface rules, and contextual corner radius rules.

If the end experience is going to be more valuable than the sum of its parts, the parts need to be well thought out. After getting the recommendations from Barnbrook, we were armed with everything we needed to launch the product. Here are the major parts under the hood:

The Impact

This site made it easier to buy festival passes, which was the primary business goal TIFA outlined in our very first chat

Barnbrook Collab

Implementing their brand guidelines went smoothly, and it was a unique opportunity for me to work with such skilled designers

Stakeholder Buy-In

Communicating with the TIFA team early and throughout the process helped establish trust and collaboration

Cross-Functional

Advising on the build and adapting to new challenges (eg. last minute tweaks to the Box Office page, rush launching the Schedule)

User Research

Research can be seen as a luxury if not a pipe dream in many organizations. Luckily we were able to run and convey its value with TIFA

Quality assurance and mutual ownership

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

Desktop First

There’s a good reason why every product designer has “Mobile First” tattooed somewhere on their body - it needs to be prioritized

Square Images

Many of the designs used 1x1 ratio images, which resulted in odd crops of many event photos because of their composition

What’s a template?

Designing each page on its meant little modulation, making the build less efficient and resulting in a less cohesive product

WHAT HAPPENED NEXT

A post-mortem review of the festival site brought up most of the points outlined above. We then started working on the new version of the year-round TIFA site, iterating on some of the new festival designs.

A sneak peak at one of those iterations is pictured to the right - an event card template that features both the author image and the book they’re promoting. The TIFA User is gonna love it.