University Neighbourhood Association website

PROJECT DETAILS

Client: University Neighbourhoods Association
Strategy: UNA / Kimbo Design / Chris Young
Creative Direction: Chris Young / Kimbo Design

UX/UI: Chris Young
Art Direction:
Kimbo Design / Chris Young
Design: Chris Young
Web Development: Kimbo Design

Work completed while employed at Kimbo Design.

The University Neighbourhoods Association (UNA) oversees the major residential neighbourhoods around UBC’s sprawling campus as its own municipality.

In addition to services related to physical entities, the UNA ensures that residents have access to UBC facilities and manages two community centres that deliver world-class recreational programming to its members of all ages.

UNA hired Kimbo Design to design a new website to expand the Association’s marketing and communications capacities, including implementing new functionalities to streamline their operations. This includes tight integrations with the PerfectMind recreational online booking software and making the website work more intuitively for its users, requiring less input from its front desk staff.

I worked closely with UNA throughout the process to ensure that our creative direction aligned with the client’s vision for this project.

The UNA website homepage.

Website previews on mobile devices.

Recreational Programming

The University Neighbourhoods Association is proud of its Programming services, ranging from Recreational, Cultural, Arts, Educational and Camps Programs. We discussed how we could best put this Programming front and centre to showcase the range and quality of the programs from the first meeting. As an organization, they were leaping away from one recreational software package and going all-in on PerfectMind to take advantage of their API functionality and the tighter integration to create a more seamless registration process.

We wanted to provide users with as much information as possible when looking at their Program overview cards. We went far beyond what the typical PerfectMind iframe preview would show users. We even show users how many spaces are left in the programs to push some urgency in signing up if the numbers are getting low rather than leaving users in the dark. On each of the program card’s ‘Register’ buttons, there was special care of programming with a range of calls-to-action to nudge users to make a decision; the buttons would change depending on the status of that program – users will see ‘Register Soon,’ ‘Register Now,’ ‘Registration Full,’ or ‘Join Waitlist’ if one exists. The number of discussions we had about these buttons, and the depth of the conditional statements programmed for these would make your head spin, but it was things like this that we really wanted to address. We’ve heard great feedback from their community on this small detail already.

We put users first when it came to the finite filterability of the programs so that users could really hone in on the activities they’re interested in. My first-hand experience of the frustration of program sign-ups made me rethink how I should design this. Trying to sign up our twins into the same class in any Rec program or class in the Lower Mainland is a painful lesson in how not to do things. I added in small touches like being able to search for ‘weekends’ or ‘workdays’ so that users didn’t have to go and activate all five days of the week if that was their choice, and being able to search the locations so that UNA members could look at just the activities closest to them in the neighbourhood. See the video below to see it in action.

The ‘cards view’ of the Program page shows the broad range of items you can filter to hone in on your interests. The results display in card view, which you can scroll through; on mobile, it’s like scrolling through pictures.

The 'list view' of the Programs page shows more of the programs in the viewport at one time.
Knowing that some users will want to see the Programs results with more of an overview, I designed an alternate ‘list view’ so users could see a bit more at a time and review differences between programs.
UNA Fitness Centres page.
UNA Fitness Centres' page.
UNA Fitness Centres overview page.

PerfectMind API Integration for the Programs

PerfectMind is one of the leading Parks & Recreation Management and Facility Booking Software SAAS solutions for programming registration. We set out to program the best user experience possible for the UNA website. Taking PerfectMind’s backend solution and putting it on steroids using custom API calls to display everything on our front end and apply our styling. This ensures the program research experience would be seamless for the user, so they’d only have to leave the UNA website for the final registration step. Long-term goals for the site are to implement that last step onto the site so that you never leave the UNA site to register.

We know that the more information we give the user, the fewer phone calls to the front desk to ask questions that should have been in the program’s information from the outset. Reducing phone call load on the Community Centre’s front desk was one of this improved website’s most important goals.

The PerfectMind integration will significantly reduce calls to the front desk, giving as much information to the UNA members upfront. Simultaneously, the seamless integration on the front end will reduce friction and increase online registrations, room rentals and bookings through the UNA website. The flexibility of PerfectMind allows the UNA to serve its growing community without unnecessary complications.

Comparing the UNA’s website vs the standard PerfectMind iframe dropped into another Recreational Centre’s website – which would you rather use?

Advanced Search Results

We integrated advanced search results into the website to give users more flexibility in their search queries. With all my years of experience designing websites, how we display search results to users is a real lost opportunity. First, it’s often done at the end of the project when everybody is just cramming to launch on time, so it never gets the attention it deserves. The out-of-the-box solution on most WordPress sites is a linear output of results that is exhausting to even look at, let alone try to find the results you’re searching for. On the UNA website, we displayed the results in grouped views such as News & Updates, Pages, Program Listings and Events. We deliver the most relevant results first, and then if you’d like to see more, you’re one click away from seeing a more detailed view of the results, which shows some of the relevant text around the found term to give it better context.

The search results are grouped by where they reside on the site; News & Updates, Pages, Program Listings or in the Events Section.

Advanced Alerts System

An example of localized, on-page alert warning users that the Fitness Centres are closed.

An advanced site-wide alert system was custom built for timely news and updates distribution. Global alerts (site-wide) and localized alerts on selected individual pages were a priority that came up in some of our early conversations about the hopes and dreams of UNA’s new website. I took what I’ve learned about designing and programming Alerts on other websites and applied that knowledge here. These alerts can be used for anything from diverting street closures to an active shooter situation.

Set and forget alerts. Setting up an alert is easy enough if you’re doing it manually, but remembering to go back and take them down is one of those things that slips people’s minds. We integrated a customized alert system with a built-in calendar to automatically handle alerts so that you can schedule/plan alerts in advance of events such as construction updates or road closures so that the admins can efficiently maintain this critical information. In this example of the WordPress backend, you can see that this alarm is to turn on September 2, 2020, and stop displaying that alarm on September 26, 2020.

Project Results

UNA mobile screens.

The redesigned UNA website was a great success, and we’ve heard encouraging feedback from both the client and website users. We’ve continued to add improvements to the website since its launch in June 2020. We look forward to loosening restrictions due to the COVID-19 pandemic so that we can launch the website in its entirety as we had designed it, really bring to life the Recreational and Cultural Programing and having it splash across the homepage in all its glory.

All work copyright University Neighbourhood Association and Kimbo Design.

 

 

 

 

 

 

 

 

Related Projects

— PRIVATE PORTFOLIO —