The 6

The 6 is a personal project I worked on with Gamaliel Obinyan in our free time.

With individuals becoming increasingly mobile, the city of Toronto's online presence is not well positioned to engage its technologically savvy residents and visitors. The 6 is a platform to encourage civic participation and make engaging city administration more accessible.

I personally worked on the experience and visual design of the app, from sketches to a high-fidelity prototype.

role

  • visual design
  • ux design
  • prototyping

team

  • Gamaliel Obinyan

timeline

  • 5 months
view prototype

the problem

The city of Toronto lacks a mobile platform to engage its increasingly technologically savvy residents. Currently, the primary source of contact used by the city is toronto.ca — which, while suitable for viewing on a desktop, is a sub-optimal experience on other platforms.

the challenge

How might we centralize the City of Toronto's services and encourage civic engagement?

approach

We used the double diamond framework to guide our design process and ensure we were creating thoughtfully and with rigour.

research

This project began by collating a list of functions that a resident may want to engage city administration for. The non-exhaustive list includes:

  • What goes out on the curb on garbage day?
  • What sports are offered at my community rec centre?
  • How can I apply for a permit or file a complaint?
  • What road is closed this weekend?
  • What delays am I going to run into on my commute today?

We also learned that time spent on mobile devices has quickly outpaced surfing the internet on a PC or Mac — and that gap is getting wider.

This taught us two things: Optimize your experience for mobile, and leverage the power of apps to create engagement.

discovery

We also sought after what other cities were doing in this space.

Boston —

The City of Boston launched their Citizens Connect platform in 2009, allowing residents to submit requests for a variety of services such as pothole repairs and graffiti removal.

Oakland —

Alameda County, whose administrative seat is Oakland, released Mobile Citizen in 2013. It allows users to access alerts and file requests and reports.

problem space refinement

We propose that to actively engage residents, you need to reach them on their preferred platform and optimize that experience so that constituents can respond at their own time, and at their own pace.

goals & success metrics

Goals —

  • One source of truth for all things Toronto
  • Leverage mobile engagement
  • Reduce overhead by integrating functionality housed in various applications, into one (e.g. eliminate TOwaste)
  • Contribute to the city’s goal of going paperless

synthesis

Taking into account the identified goals and research, we developed insights that would inform the design of the final product:

Users would rather use one product to fulfill their needs than many

Users want to know they can trust a product as a source of information

Users need to know where there are in the experience at all times

ideation

One of our guiding principles was creating a consistent experience by striking a balance between functionality and usability. The product needed to meet the needs of Toronto’s increasingly diverse demographic by offering a variety of services, yet still feel seamless and easy to use.

information architecture

sketch of the alerts and reports screen showing the navigation system

A unique challenge emerged when designing the alerts section, which proved pertinent to other sections as well:

How might we allow the user to access information at different levels of detail, according to need?

The solution was to create multiple views:

  • Map view with list of alerts
  • "Focused" view of the map with focus on selected alert
  • Full page detail of the selected alert

KEY FEATURES

integrating TOwaste

the waste management screen, showing the map and curbside collection schedule

Additionally, users are less likely to take advantage of features if it is implied it will take them elsewhere — people like to accomplish all of their needs on a single page.

For TOWaste, the clumsy navigation bar was removed, replaced with arrows that scrolled through the three features of the waste management section. This made it feel more cohesive, distinct, and singular, rather than an app within an app.

a solution for every need

the live chat screen, showing a conversation with a chat bot that connects the user to a help agent

For features we expect to see lower traffic and to service more complex user needs, we implemented a chat feature that allows the city triage those requests appropriately.

This also helps populate the product roadmap by tracking the most requested services that are fulfilled by city agents.

transit info at a glance

the transit screen showing stop numbers and delays on each line

In order to address the most pressing needs of our users, the transit section focused on disruptions, placing the line number and type of disruption at the forefront. This allows users to quickly identify alerts on lines they regularly travel, as well as add them to their favourites.

key screens

outcomes + reflections

Love the problem, not your solution

Throughout the research phase of the project, we found ourselves jumping to the solution without fully grasping the problem ("Just make an app, right?). It took a conscious effort to take a step back to not only understand the problem, but understand why it's a problem and for whom. The last thing you want is to put your heart and soul into solving for a minor inconvenience.

Comfort in the ambiguity

We struggled to understand why the city hadn't already implemented this idea. More so, we wondered whether it was a strategic play to push out different experiences (like TOwaste) versus create an all-in-one solution (similar to other cities around the world). We couldn't really answer those questions, but we decided to press forward anyway. What's the worst that could happen, right?

Pivot

At some point, we went down a rabbit hole of replicating toronto.ca in the mobile experience. Given that mobile has significantly less real estate, this wasn't feasible. It forced us to prioritize what we felt was important, and group together secondary features to make the experience intuitive.