Toronto Urban Hub

UX Data Visualization Mobile Application allowing users to get real-time data in Canada's biggest city

Overview

For a four month period, the students of George Brown College's Digital Experience Design program were asked to create an app that uses data visualization to either store data or retrieve data from an existing server using an API. Toronto Urban Hub is a Data Visualization web-mobile application that is meant to give convenient and seamless building, traffic, transit and environmental data to users as they traverse the city of Toronto.

The goal is to create an an application that has a smooth user flow and easy to read information depending on Geo-location.

Role

UI Designer, UX Designer

Ideation, User research, Visual design, Prototyping

Sept 2023 - Dec 2023

Client

George Brown College

The Problem

Toronto's residents and visitors currently face the challenge of accessing integrated information on traffic, building, and environmental data, as existing services primarily focus on only one of them per service. This gap in digital resources leads to a fragmented and inconvenient experience in urban navigation and decision-making. The need for a more unified, user-friendly platform that distributes different types of data is evident.

The Process

I incorporated key phases from the Double Diamond Theory and Lean UX process: Ideation, User Research, Prototyping and Implementation based on feedback into all of our projects.

Understanding the problem

To understand more about the problem, I conducted research into existing services that the city of Toronto uses. During my research, I came to the conclusion that Toronto's existing services on web browser and on mobile were inconvenient and had limited amounts of data users has access to at a given time.

Ideation and Gathering Insight

Based on the information obtained in my initial research, I was able use it in the ideation process. The ideation process consisted of crazy eights. I knew I wanted to create an application that utilizes data visualization, but I was not sure whether or not it should include the GTA or just GO Transit instead. After performing secondary research on transit used in the Greater Toronto Area, I came to the decision to make an application that would provide data within the city of Toronto based on co-ordinates.

Wireframing the solution

After coming up with the initial concept, the next part was wireframing the application. When I was wireframing, I knew about the data I wanted the application to give to users from the research and ideation process, but I did not have a clear vision of what the wireframe should look like. I conducted additional research into application with existing services and the API's that were available from Google Cloud. Through my research, I got an idea of what the wireframes should look like and what info should be available to users.

Prototyping

I worked on making a working prototype for the project. I used Visual Code Studio in order to code the application on web browser. MAMP was used to host the website locally and make changes in real-time. The coding languages used were HTML, CSS and Javascript for the project. In order to give the application real-time information,

Google Cloud, Google's cloud computing service was used for their public API's and data. The challenge was getting the code for the API's to function on the localhost domain. But most of the API's functioned properly and gave real-time data.

I conducted usability testing to make sure that the experience of using the web mobile app was smooth before presenting the project to the client.

Results

Following the delivery of the final prototype, the client was impressed with the functionality of the application, and its effectiveness at outputting real-time data to users of the application. This involved us planning and walking through a design presentation that included showing our entire design process from user research to the prototype.

Project Learnings

1 Don't focus too much time to one part of the process
Dedicating too much time to one aspect, like API integration, can detract from other crucial parts of the app's design. It's essential to maintain a balanced focus throughout the development process.

2. Conceptualize ideas before making them
Jumping into design without adequate planning can lead to challenges. Early conceptualization and wireframing are key to ensuring the project aligns with user needs and project objectives.