Duncan Schouten

Cecil Green Park House

Overview

The problem

Cecil Green Park House—a well-known Vancouver event venue—was facing a multi-year decline in revenues. With an outdated website and a poorly-defined brand identity, however, the venue was experiencing high page abandonment rates, and stakeholders were reluctant to invest in new marketing initiatives to drive traffic to the existing site.

Our approach

While the project initially began as a visual refresh of the original website, it quickly became clear that a broader scope was needed to fully address the underlying business challenges. Working with multiple stakeholders, I helped to clarify the venue’s business goals, brand identity, target audiences, and local competition.

Then, using a human-centered design approach and validating assumptions wherever possible, I undertook design of a new website and a fully-reimagined online booking process.

My role

I worked on this project as researcher, lead designer, and manager as part of my employment with alumni UBC.

Main areas of responsibility:

  • Research (business requirements, personas, user flows, heuristic analysis)
  • Wireframing & Prototyping
  • Usability testing
  • Design (information architecture, branding, and website)
  • Content strategy
  • Reporting (Google Analytics and Google Tag Manager)
  • Management (project leadership, direction of deliverables)

Challenge: no resources for research or testing

I was brought into the project several years after stakeholders identified the need for an updated website. This meant that getting a new site online ASAP was their top priority, favouring launch of a minimum viable product with post-hoc testing over preliminary user research.

Nonetheless, I incorporated as much research and testing into my process as was possible, operating on the principle that some data is better than none.

Research and Discovery

Provisional persona workshop

Business goals

The discovery process began with interviews and workshops with venue staff and stakeholders to clarify the business’s long-term goals. Two goals, in particular, were emphasized:

  1. Reach capacity of 100 weddings per season
  2. Grow the number of corporate retreats and other business events

SWOT analysis

Next, I undertook a top-level analysis of the business’s strengths, weaknesses, opportunities, and threats:

SWOT Analysis

Competitive research

Complementing the SWOT analysis was research on the most salient information of the venue’s local competition. A key takeaway from this was learning that no competitors offered real-time information on their venue’s availability.

Competitive Research

Provisional personas

Lacking budget for conducting research with past or prospective clients, I relied on a variety of alternate approaches.

Interviews with venue staff—the business’s primary client liaisons—were critical to providing initial demographic data on the primary audiences.

This flowed naturally into a workshop with staff and stakeholders where we defined several provisional user personas:

Provisional persona

Journey maps

For our main personas, we also developed provisional journey maps:

Provisional journey map

Review of Google Analytics demographics

The final step in my audience discovery process was to review Google Analytics data from the original website.

The average visitor to the original site was:
  • Female, age 25-34
  • Located in the greater Vancouver area
  • Most interested in the photo gallery and wedding information pages
  • A first-time site visitor

This data supported the information provided by venue staff and gave added weight to use of provisional personas in guiding design decisions.

Heuristic analysis of original site

I completed my discovery phase with a heuristic analysis of the original website, using a 247-point checklist found here.

Heuristic analysis of original site

While I knew this project would require a fully-redesigned website, heuristic analysis allowed me to become familiar with the original site and gauge what aspects should be carried forward in the new design.

Opportunity for improvement

No matter how well-informed, all research on the venue’s target audiences was from secondary sources. Without the opportunity to directly engage with users, we were not able to validate any of the qualitative details assembled in the discovery phase.

Hopefully, this can be rectified in the future.

Branding

Style Tile

A “just enough” approach

With a condensed working window, we adopted a “just enough” approach to branding. Through a series of facilitated workshops and discussions, I helped venue staff and stakeholders distill core aspects of the brand, while still leaving room for further refinement in the future.

Look and feel

After several iterations, we arrived on a look and feel that emphasized whitespace, a colour palette inspired by coastal gardens, and big, bold imagery that highlights both the natural beauty of the space and the people that give it life.

Tone of voice

The brand voice is warm and welcoming, guided by the idea that “the house is old, the audience isn’t.” Working in tandem with the imagery, we evoke the unique sensory experiences found across the house grounds.

Website Design

Mobile-first design

Defining website goals

We identified several key areas of focus for the new website, along with metrics to track their performance:

GoalMetric
Simplify the site information architecture and navigationBounce rate
Improve the online booking request systemTotal number of booking requests
Enhance the site-wide mobile experienceNumber of unique visitors on mobile or tablet devices
Strengthen appeal to business clienteleNumber of booking requests for business or non-wedding events
Improve the photo gallery systemTotal number of unique visitors to photo gallery directory

Challenge #1 - Simplify information architecture and navigation

Problem: complex original site architecture

Despite the relatively small scale of the original site, a review of its information architecture revealed a surprisingly complex structure:

Original site information architecture

Solution: simplify, focusing on core user needs

After presenting the original site map to stakeholders, all agreed that a simpler structure was needed.

I reviewed usage statistics in Google Analytics to determine the most popular pages of the original site and identify common user flows, giving insight on how to best organize the new information architecture:

New site information architecture

Among the principles guided that guided my revised structure were:

  • Giving greater hierarchal prominence to high-performing sections of the original site.
  • Ensuring that each page supports business goals.
  • Labeling navigational elements and page titles according to the primary tasks, interests, and/or needs of the key audiences (e.g. “request booking”, “weddings”, “meetings and events”, etc.).
  • Removing pages only intended for confirmed clients (e.g. information on usage policies for the venue) from the global architecture and blocking these pages from search engine indexing

Opportunity for improvement

While the revised site structure is relatively shallow, there is still potential for its improvement through card sorting exercises with users.

Challenge #2 - Improve the online booking request system

Problem: Frustrating, multi-step process for checking availability

Given the strong emphasis by all stakeholders on the goal of increasing venue bookings, the online booking request system is, perhaps, the website’s most important functional element.

The original system, however, forced users through a multi-step process to check venue availability:

Old booking process flow

This created two problems:

  1. Users on mobile devices were particularly averse to this (as verified in the analytics data for site drop-offs and some informal usability testing)
  2. The booking calendar file was only periodically updated—meaning that visitors often made requests for dates that had already been booked

Solution: Design a system for surfacing real-time booking data

I consulted with venue staff to investigate the parameters of their backend booking system and ideate possible approaches. Eventually, we settled on the idea of a calendar interface that surfaced real-time booking information. This was further distilled to a few core requirements:

  • Each date has three possible booking periods (morning, evening, and full-day)
  • Calendar must visually differentiate between dates with partial and full-day bookings

First iteration

I worked with IT services to determine which data could be extracted from the venue’s backend booking system. This led to my first design for the date picker UI, using orange circles to indicate dates with partial-day bookings and red to indicate full-day bookings:

Booking calendar date picker v1

In this case, users interested in dates with half-day bookings would first need to choose a date before seeing their options in the associated time picker:

Booking calendar time picker

Second iteration

When presenting my proposed design to venue staff, it emerged that an important specification was missed from the first iteration: the inclusion of tentative bookings (or “holds”).

To accommodate this, I revised my design to indicate dates with holds using crosshatching:

Booking calendar date picker v1

Usability testing

I took a prototype of this design to several individuals for “guerilla” usability testing, asking them to perform several tasks and answer questions on the system’s functionality.

Among the results, I found that:

  • Requiring users to first select a date before learning the availability of their preferred time slot added cognitive load to the process, particularly for those on mobile devices.
  • Differentiating crosshatching from solid colours was difficult for some users with vision impairments.

Third iteration and validation

With this information, I revised my design to include complete details on each day’s booking availability using only solid, contrasting colours to ensure accessibility.

After conducting another round of guerilla testing, no users reported any of the previously-encountered problems, and all were able to complete the instructed tasks.

Booking calendar date picker v3

Form interaction tracking with Google Tag Manager and Google Analytics

To ensure the ongoing optimization of the booking form and gain insights into its usage, I implemented a custom adaptation of Simo Ahava’s form interaction tracking system. With this, site administrators are able to see how users are traversing the form, where they abandon, and how they reach the final goal of submission:

Form interaction tracking results

Opportunities for improvement

  • Improve visibility on site - post-launch testing has shown the information on venue availability is hard-to-find unless users are already exploring the booking request page.
  • Identify methods for clarifying ongoing user confusion on the definition of booking holds.
  • Test alternate orderings for booking form fields according to preferences shown in abandonment data.

Challenge #3 - Improve the site-wide mobile experience

Problem: Original site not optimized for mobile devices

While the original site theme was responsive, it was only designed around a desktop layout. This led to a frustrating mobile experience, with long-scrolling pages, poorly-structured content, and long page load times.

As a result, the site-wide bounce rate was considerably higher for mobile users than for other groups.

Solution: A mobile-first design approach

I designed all pages upward from their mobile layouts, guided by several principles:

  1. Use opt-in progressive disclosure (accordions, etc.) where information is not critical
  2. Give all interactive elements appropriate padding for easy “tapability”
  3. Optimize all images and, where possible, load unique mobile-only images
  4. Edit copy blocks to their shortest length

Results

Since launching in August 2018, the the new website has resulted in several significant improvements over the same period in the previous year:

  • 70% increase in online booking requests
  • 20% increase in booking requests for business or other non-wedding events
  • 114% increase in unique page views on the booking request page
  • 64% increase in unique page views from mobile and tablet devices
  • 18% decrease in the site-wide bounce rate (21% for mobile and tablet)
  • 48% increase in unique page views on the photo gallery directory

Anecdotally, several clients have praised the new booking system, saying that it made their process easy and enjoyable to complete.

Reflection

While the final product is relatively modest, this project was surprisingly complex.

Operating largely as a “UX team of one”, I found its greatest challenge to be the absence of resources for research and testing. I was able to overcome this—to the best of my ability—by working closely with venue staff to uncover their accumulated knowledge on the characteristics and behaviour of their usual clients. Collaborative workshop sessions, in particular, were particularly effective in drawing out new insights.

Looking back, this project brought a few key takeaways:

  1. Accept imperfect research and testing

    Any insights that can be validated, even if acquired through unconventional methods, can be useful for informing the design process. In this case, data from Google Analytics corroborated and gave added weight to the anecdotal insights of venue staff.

    And while I was not able to test my designs with carefully screened participants matching our provisional personas, bringing them to a general audience allowed me to identify and refine their most problematic areas.

  2. Follow your gut, but validate assumptions

    From the outset of the project, I was instinctively convinced that the multi-step online booking system was a significant impediment to the site’s usability. Nevertheless, I did not want to strongly advocate for its improvement until I had investigated whether I was correct.

    Through a review of analytics data and some informal usability testing, my suspicions were confirmed. Which introduces my next lesson…

  3. Fight for the things to get right the first time

    Even after identifying the negative impact of the booking system, stakeholders viewed the solution as a two-phase process: design and launch the new site with aesthetic improvements, then fix the functionality later.

    Knowing that I had numerous other projects in my queue, I saw it as unlikely that “version two” would be coming any time soon – and if we didn’t improve the site’s core functionality, a simple visual refresh would have limited impact on business goals.

    I continued to build my case and eventually secured support to make the booking system a priority of the new design. Though there is still room for its improvement, the new solution has helped the venue increase its online booking requests by 70% since launch.

  4. Build in time for scope creep

    As much as we try to avoid it, scope creep is inevitable. Learning that a key requirement for the booking calendar (accommodating tentative bookings) was overlooked resulted in a significant setback in an already-tight design schedule. I should have better-accounted for these sort of events in my project timeline.