Case Study: Vancouver Community Centres

Introduction

My third project at RED Academy was working with a team of four. I was fortunate to work with some really great people in these two weeks. Some of the difficulties on this project was definitely the short amount of time especially for testing and iterations. If I were to continue on this project I would have done more testing and refined the high fidelity with attention to detail.

Client

Our hypothetical client was the City of Vancouver and they wanted an app to streamline the experience of the OneCard and registration for community centres. These key requests included the following features for the mobile experience:

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

The OneCard is confusing on its own, being a pass that you can load passes on to. The activities you can load on to your OneCard are also limited. We had to do a lot of research to figure out what exactly this card could do in order to integrate it into the app.

Mock OneCard — created for our prototype

Research

On the very first day we were assigned the project, our team made its way to the Kitsilano Community Centre.

At the centre we were able to interview some staff members about how the OneCard works and the woes they had around it.We learned that most people find it convenient to register for activities online but find the current website hard to navigate.

We also learned that when you buy a pass online to load on to your OneCard, you have to get a new card from the front desk each time and a new card ID number. This is an administrative paint point as well as the customer’s as it takes some time to process.

A draw back from visiting the communtiy centre was that it was not allowed to survey the public at the community centre so we created an online survey.

From the survey we wanted to know about gender, the type of mobile device they were using, some community centre habits and any frustrations they have with the current system. Our survey reached 21 people and we found the following insights:

We also found out that they choose community centres over other fitness centres because of price/affordability and location. Most often the users will go to multiple locations.

Frustrations we discovered were comments on how confusing the current online system is and how it would be more convenient to scan the OneCard through an app then having the physical card.

We conducted 10 further interviews in person with different members of the community and the responses we gathered aligned with the insights from the survey. Users wanted:

  • an easy, simple way to check and sign up for different courses
  • to access their membership card or ONECARD from their phone
  • to find the most convenient location
Keywords from the interviews

Now we needed to dig in to what current processes they have in place. Each member of our group went through the registration process online and we also did some contextual inquiry with some students and alumni at RED.

We wanted to focus on identifying pain points when people registered for a class and purchased a OneCard online.

We asked our testers to try to find certain classes, passes, and to create an account. This was met with much confusion. In one particular test, one of the students got so frustrated trying to find how to purchase a OneCard that he gave up and left.

With the research that we gathered, we identified key paint points we wanted to ease in the process of buying a pass online to using it at the centre itself.

User Journey Map

For inspiration we looked into a few mobile apps that our users used most often: MindBody, MyFitnessPal, and Starbucks.

Planning

Now that we identified some pain points it was time to define our user persona and identify key features to include in the app.

User Persona, Terence Zhang

Our user persona summarizes the research that we did and gave us a clear idea of who we were making the app for.

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 closeby. He is a convenience-seeker that uses apps like Starbucks, MeetUp, and MyFitnessPal.

Process & Features

Some key features we wanted to add in order to align with the business goals were as follows:

The goals also needed to align with what the user wanted:

  • As a user, I want to find the most convenient location
  • As a user, I want to register for courses from my phone
  • As a user, I want my membership card to be accessible from my phone
  • As an admin staff, I want to reduce administrative steps of registration/enrollment in person

To breakdown some of the processes they currently have in place we brainstormed what they had and made changes to what would make sense for mobile.

Create an account sequence

From there we made some user flows on creating an account.

User Flow

The flow for creating an account was a challenge for us as there were many opinions inside and outside the team about how it should flow. We decided from our testing that it was best to break up the registration process so that they would input their address and phone number details only if they made any purchases. This decreased the barrier to entry for first-time users.

Our Information Architecture:

This outlines each screen that the app needs to function and displays each feature.

Design & Build

In order to get an idea of what the whole app would be like we built out the screens based on our IA. Our paper prototype contained all the screens on the app.

Due to our time constraint we could only build the high fidelity screens based on our 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.

The user flow below displays these two user goals:

High Fidelity

We designed the high fidelity frames that we needed to demonstrate our user scenario. We took Terence through the registration process, registered for Acroyoga, and bought a multipass.

On-Boarding

Register for a class

Purchase Multipass

Prototype

My Iterations

One of the first things I would change would be the first splash pages. Ours looked unfinished.

There are many more iterations I would like to make based on feedback however there is no time for this sprint.

Reflection

First of all it is difficult for me to write a Case Study and I hope that I can find a way that works best for me.

In this particular project I had to step back from a lot of the designing on Sketch as I didn’t have the program for my PC. It was hard for me but I supported my team mates with feedback and by working on other aspects of the project like our user journey map, presentation, etc.

For my next project I’ll be borrowing a Mac and practicing my Sketch abilities.

I definitely feel like two weeks was not long enough especially for our first group project. I think we got stuck on how confusing the city’s current process is for registration and the OneCard system and that was a big hurdle in this run. It was a sprint for sure and looking back there wasn’t much we could have changed in our process.

For myself, I would like to get better at understanding the branding and the identity of the company and their relationship with the user. I also want to learn how to make a case study in my own way because this feels a bit awkward for me.

Like what you read? Give Jorgina Thompson a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.