Cecil Green Park House Brand Refresh
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.
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 elicit and prioritize the venue’s business goals, clarify brand identity, define its target audiences, and research 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.
I worked on this project as researcher, lead designer, and project manager as part of my employment with alumni UBC.
Main areas of responsibility:
- Research (business requirements, competitive assessments, 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)
Since launch, the new site has seen a 60% year-over-year increase in online booking inquiries.
Link to live site
Research and Discovery
My discovery process began with interviews and workshops with venue staff and stakeholders to elicit the business’s long-term goals. Two goals, in particular, were emphasized:
- Reach capacity of 100 weddings per season
- Grow the number of corporate retreats and other business events
Next, I undertook a top-level analysis of the business’s strengths, weaknesses, opportunities, and threats:
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.
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:
For our main personas, we also developed provisional journey maps. These helped to identify opportunities to improve customer experience, both within the new website and on a broader scale:
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.
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.
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.
Defining website goals
We identified several key areas of focus for the new website, along with metrics to track their performance:
|Simplify the site information architecture and navigation||Bounce rate|
|Improve the online booking request system||Total number of booking requests|
|Enhance the site-wide mobile experience||Number of unique visitors on mobile or tablet devices|
|Strengthen appeal to business clientele||Number of booking requests for business or non-wedding events|
|Improve the photo gallery system||Total 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:
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:
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
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:
This created two problems:
- Users on mobile devices were particularly averse to this (as verified in the analytics data for site drop-offs and some informal usability testing)
- 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
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:
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:
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:
I took a prototype of this design to several individuals for “guerrilla” 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 guerrilla testing, no users reported any of the previously-encountered problems, and all were able to complete the instructed tasks.
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:
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:
- Use opt-in progressive disclosure (accordions, etc.) where information is not critical
- Give all interactive elements appropriate padding for easy “tapability”
- Optimize all images and, where possible, load unique mobile-only images
- Edit copy blocks to their shortest length
Since launching in August 2018, the new website has resulted in several significant improvements over the same period in the previous year:
Anecdotally, several clients have praised the new booking system, saying that it made their process easy and enjoyable to complete.
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:
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.
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…
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.
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.