City of Mississauga

eRec responsive website design

A banner image of the active Mississauga logo with children taking swimming lessons in the background
More than 700,000 people make their home in Mississauga, Ontario.

The family friendly city of Mississauga is known for its spectacular recreational opportunities, which include 480 parks, numerous of golf courses, and 11 leisure centres that operate year round. The city provides its residents with access to programs and activities they can register for through Active Mississauga, which is run by the City of Mississauga.

The challenge

Twice a year, Active Mississauga staff update and print a 200-plus page directory with details on thousands of programs it offers to everyone from infants to seniors. Residents can flip through its pages to find the activities they are interested in, and then register in person, over the phone, or online. Overall, our challenges were to:

  • Streamline a multiple-step and costly process used by City staff to manage and communicate about the various recreation programs and replace the print directory with a completely online system.
  • Allow the City to continue to manage program data in the existing tool – Active Network Class.
  • Create an improved user-friendly interface and establish a baseline for a responsive redesign of the City of Mississauga website.

The goals

Their overarching goals were as follows:

  • Enable staff to update the database of programs and activities in real-time.
  • Provide the diverse audience of recreational users – children, adults and seniors – with an interface that’s easy to use, regardless of their level of technical expertise.
  • Take a “mobile first” approach so that people can find and register for courses seamlessly when they’re on the go regardless of their device.

The solution

Like many municipalities in Canada, Active Mississauga uses the Class database to manage millions of pieces of information on its recreational programs. We had worked with Class previously with the City of Surrey (we created an app that pulled data from the Class database) and knew the data can be a challenge to work with. We already knew the potential for building an application that met both the technical and user experience goals for Active Mississauga “eRec” site, but that was just part of the challenge. We also had to satisfy users’ needs by understanding how they would interact with such an application to find and register for programs, whether they wanted to sign up for a yoga class or find a public golf course.

Discovery

Although Mississauga’s web presence was not optimized for mobile visitors, we knew this was a priority for their team in near future. That meant the eRec interface we were building would be the first step of a responsive web presence. Our initial meetings with the Mississauga team were particularly productive; the business lead had already gathered some very specific project requirements, which enabled us to delve into the details right away and start gaining critical insights.

Staff needed to be able to make program changes on the spot, and residents needed to be able to access up-to-date information in real-time, anytime – whether on smartphone, desktop computer, or other device. For instance, if a program time had changed or a class was cancelled, the printed directory was out of date. That meant it was easier for users to simply phone Mississauga staff to get the latest information, which wasn’t an efficient process for anyone.

We also knew that we would be dealing with massive volumes of detailed information in an existing database, which needed to be searched and filtered logically by its users – and quickly. Since the intent was for the new interface to replace the printed directory as well as the existing hard-to-use online system, it had to cater to an audience of all technical skill levels, from basic to advanced. Otherwise they’d resort to the old call-in process, which was more expensive for Mississauga to support and less convenient for citizens to use.

Design

The Mississauga team had developed some initial wireframes to map out how program information could be best organized on the site at a high level. We refined these further — working in partnership with their team, quickly getting into a rhythm of designing a couple of pages, getting feedback, and tweaking the wireframes. This iterative approach enabled us to quickly make progress and keep the project moving forward.

User testing

Where can you take a 10-year-old for swimming lessons in Mississauga on a Saturday afternoon? Is it drop-in? Or do you need to register beforehand? The questions seem simple enough, but if you can imagine the potential variables, you start to get a picture of the complexity of such a query. And that’s exactly the type of multifaceted information Mississauga residents were looking for when searching for activities.

The Mississauga staff knew their audiences very well, and throughout the design process they ran user tests on a prototype we had built using real data. Although we would typically take on the user-testing facet of the project, it made sense for Mississauga staff to get in-person, hands-on reactions from people who used the leisure centres. This process also allowed the Mississauga team to test some of the assumptions they had. As it turns out, their users weren’t just looking for simple information; they wanted sophisticated searching and filtering functions, and this became an integral part of the development. Learning this information early allowed us to iterate on the design and user experience of the site.

A screenshot of the Mississauga Active website wireframes

Guiding the user experience

Mississauga’s internal design team provided us with some insight into how people would navigate the site. In this particular project, it’s almost impossible to narrow down the user to a specific persona, given the sheer volume of variables and information. That’s why paying close attention to the user experience (e.g. how menus slide, how to select multiple items in a list, etc.) is critical. We were taking an existing database and building a layer on top that allowed anyone registering for a course to find the information they needed as quickly and intuitively as possible.

We also wanted to avoid the clunky experience that horizontal navigation typically offers because it requires the user to take a number of steps, clicking through various menus until they find the information they’re seeking. Instead, our solution was to deliver complex information in digestible “chunks.” This way, a person can find an activity (e.g. drop-in programs, registered programs, etc.), further refine the parameters using filters and drop-down menus, and book activities online – all within minutes.

A design partnership

Once we completed the wireframes, the Mississauga team designed the overall look-and-feel of the site's interface on top, incorporating their branding, typography, and so forth. This approach is somewhat unconventional for our design team, but it allowed us to focus our time and efforts effectively, while building a strong partnership with the Mississauga team. We also integrated social sharing buttons in the design to allow users to interact not just with the site, but with friends, family, the Mississauga community, and beyond.

A screenshot of the Mississauga Active website on a laptop

Development

Since we were already starting with a robust database and its millions of pieces of information, our challenge was to build a lightning fast and logical way to get users the information they wanted with little effort or network lulls during filtering.

With the mobile user in mind, we had to find a way to have 12,000 potential programs accessible by phone so people could search for information while on the go. Since the application can run off the cached data, users don’t require a constant connection, which means a brief service interruption won’t affect browsing. The Mississauga team also wanted to make sure people could bookmark and share programs on their phones, further enhancing the user experience and encouraging engagement.

Speed was critical, so we compressed as much content as possible, but made sure that the high-level categories available on desktops were also accessible on mobile. But to be truly user-friendly, we needed to develop logic between search and filtering so people didn't have to sift through a thousand potential results, but instead, could zero in on the info they needed.

Building this type of logic between search and filtering thousands of programs without affecting response speed was extremely complex. However, a number of discussions with the Mississauga team allowed us to test and number of scenarios and refine our work until we had achieved our ultimate goals of providing the user with both speed and sophistication when looking for programs.

With the mobile user in mind, we had to find a way to have 12,000 potential programs accessibly by phone so people could search for information while on the go.
A screenshot of the Mississauga Active website on an ipad and iphone

The results

We’re always looking for ways to be nimble in order to create value for our clients during the project lifecycle. The close partnership we developed between our team and Mississauga’s team is an example of how an iterative approach allowed us to continually improve and leverage each other’s expertise and insights. This was big benefit, considering that our respective teams were working thousands of kilometres apart.

The impact

At the time of writing, the new eRec application has only been live for about a month, but everyone who has used it has been thrilled with the overall look-and-feel and functionality and other outcomes:

  • Replaced the printed catalogue with a real-time interactive “mobile first” site that can easily be used by everyone from children to seniors, whether they’re tech-savvy or novices.
  • Built a speedy and sophisticated searching and filtering mechanism so users can access the information they need, with little effort or network lulls.
  • Improved user engagement by integrating social share buttons within the site.
  • Streamlined and improved how staff can update the programs and activities in real-time.
  • Provided multiple users with access to the site, so staff can now edit and personalize individual leisure centre pages.
  • Created a training document for the eRec app, using a sprint-based approach to rollout new information every couple of days.
  • Integrated a Google-based advertising system into the site.

What's up next

Now that they have successfully delivered a responsive web application, Mississauga staff are about to take on the bigger challenge of making the entire web platform responsive. The lessons learned in this project convinced Mississauga of the benefits of focusing on user-centred, mobile first approach.

See it for yourself

Visit activemississauga.ca