P3 Case Study: Vancouver Community Centres

This is my first group project from RED Academy. We were assigned team members to complete a three week group project.

The Problem

The City of Vancouver operates 24 community centres, 240 parks and 3 golf centres. These centres offer a wide range of programs such as fitness, dance, education and family activities. These services are offered to the general public and including low income and at risk adults.

These centres are a wonderful opportunity to meet new people, train skills and build community. Unfortunately, the registration process is an out of date desktop experience and many customers want to bring the signup process to mobile devices.

Another issue is that the City of Vancouver recently introduced the new OneCard service which integrates all of the customer’s community services into a singular card for easy usage.


In order to solve this we will go through these steps:

Client Goals

Requested features/functions for the mobile experience:

  • Register for an account
  • Discover activities
  • Register for activities
  • Manage existing registrations
  • Personalized experience
  • Integration of OneCard

The OneCard, if you’re not familiar with it, is a card you register with your account and you can load different recreation passes on to them.


In our research we did:

Survey findings:

  • 67% Male
  • The Majority: 49% are aged 16 to 25
  • Over 50% used Androids
  • 57% aren’t originally from Vancouver
  • Location and Price is most important to them
  • Use the centres mostly for fitness

From our Interviews the average age is 24, 5 Male 4 Female.

Some of the key insights:

  • Users wanted an easy, simple way to check and sign up for different courses
  • Want to know the number of people signed up for class
  • Users were frustrated with the current signup system
  • Users wanted to find the most convenient location
Keywords from our survey

Organizational Research

We researched what exactly is the OneCard and its functions. And what are the current systems for registration/create account and the pass purchasing they currently have in place.

To do this, we selected a few users who never used their system before. And had them tested their current systems on to identify pain points and how we could better integrate everything into an app that is convenient and stress free for the user.

With the gathered findings we came up with this Persona:


Terence is a college student living in Kitsilano. When he first arrived from China three years ago, he lived in Richmond before moving to Vancouver. He’s interested in making friends and wants to explore his new community. He has a part-time job working in inventory at SportChek. As a fitness junkie, he goes to two community centres for their gym and yoga: one by his work near the mall and another by his house. He chooses the community centre because it’s both cheap and close by. He is a convenience-seeker that uses apps like Starbucks, MeetUp, and MyFitnessPal.

Before we determine the user flow we created a User Journey Map:

User Journey Map

Pain points discovered:

  • User found it hard to locate where to buy the OneCard passes from
  • Had difficulty finding the right pass for them (there are too many different flexipasses)
  • Staff + User pain point upon arrival as new card and number need to be issued before they can use and scan the pass

To determine the goal of the user we created the user flow:

User Flow Chart

Then created the Information Architecture of the app.

Information Architecture

And a prioritized feature list:

Before we sketch the design of the app we created a storyboard to illustrate the scenario of our persona, Terrence.

Then we made paper prototype sketches

And turned our wireframes into this prototype


When we tested our prototype we came across some issues. These issues includes security, buttons and sign up issues.

Security — users were concerned about the app’s security feature. They were scared that anyone can take a photo of their pass and use it as their own.

Buttons — some testers thought that our buttons look like images. We fixed this by using drop shadow to show that the buttons are on different layers that are a part from the images.

Sign up — some users thought the signup process was too long so we broke it up into different areas.


The tools used for this prototype is Sketch and Invision.

Here is the scenario:

Terence wants to engage with his new community so he needs to create an account with the Vancouver community centres.

First, He wants a Multi location flexipass so he can go to the fitness centre.

His second goal is to try something new and he heard about Acroyoga through a friend.

Prototype link

Future Considerations

We want to add social aspects to the app, such as a commenting section on the course page. So future students and teachers get to know each other. Events calendar to show upcoming events. Incorporate other City of Vancouver Centres services such as Parks and Recreation and golf courses.