All Work
UX/UI Design


During my 5 weeks at Brainstation, our class was given the assignment to create a transit app. It was left up to us to find a transit problem, and solve it with the skills and digital tools learned in class. For this project we used the human centered design approach which included identifying problems in current user experiences by user interviews and testing our solutions by having users navigate rough sketches (using the Marvel app) and low fidelity wireframes (using Moqups).

View Wireframe


The first step in the process was finding out what the problem was in the first place! I interviewed 4 people, with this set of questions:

  1. What is your name?
  2. Where do you live? And work?
  3. Describe the last time you walked somewhere.
  4. What apps do you use to navigate?
  5. What makes you walk over using public transit?
  6. What do you wish you could change about the process of navigating somewhere?
  7. What information do you wish was readily available?

I then found some common issues that my interviewees shared:

  1. Transfers were a hassle due to delays and misinformation.
  2. Navigation apps would only provide a set of immutable routes. Users couldn't change parts of a route, so that they could walk halfway instead of using a streetcar.
  3. Detailed information such as a route being presto only or pricing information wasn't easily found.
  4. Uber was expensive, and Uber Pool didn't prioritize getting users there on time.

Surprisingly, none of my interviewees didn't mind walking 20 minutes if they didn't need to take another streetcar or bus.


Using the information I gathered, I created two personas to embody the two user flows I was working towards.

Information Architecture

I created an information architecture that a conventional navigational app would, but I kept it laser focused on one thing: making commute routes changeable at all times.

User Flows & Sketches

Waze and Google Maps were the main user interface inspiration. All of the users I interviewed were very familiar with them, and I wanted to use conventional, industry standard guidelines. Every second counts when trying to get somewhere, so recognition is key.

Original First User Flow & Sketch - Use bussing to get to work

I had run into a problem during the sketch mock-up testing of one of my initial user flows, and I had to rethink the purpose of this app. My initial hypothesis was that users would want to pick a way to go instead of picking where to go. This proved to be very confusing to my test users, as they weren't accustomed to not seeing a map and choosing a place. It also didn't really serve a purpose, as person really only chooses how they want to get there after seeing where it was.

Some other interesting observations were that the "Go" button was confused with the Go Transit and users instinctively looked at the top of the screen to enter information. I created two new user flows that reflected map and location first user flows, and during testing these seemed better received.

Version 2 First User Flow Sketch - Walk due to delays

This new first flow is about a user is trying to find their way to work, and a delay comes up. They are be prompted to reroute and they follow the route. The revamped sketch included a full screen map, with a textbox at the top to type in the location.

Second User Flow - Navigate to David's Tea

The second one is a user who wants to walk halfway instead of using public transit all the way. It's a spiritual successor to the original first sketch, in that it helps the user plan their route better.


The full wireframe has 2 interactive user flows.

First User Flow Sketch - Walk due to delays

If you click on the Work button, you will follow the User Navigates to Work flow. This one demos how the app handles delays and re-routes.

Second User Flow - Navigate to David's Tea

The User Navigates to David's Tea task flow can be started by clicking in the second textbox at the top, next to the location marker. This flow showcases how to modify routes.


Final Presentation

Project Deliverables All of the following deliverables can be found in the presentation above.

  • 4 User Interviews
  • Information Architecture
  • 2 Personas
  • 2 User Flows & Sets of Sketches
  • Wireframe

The differentiating factors of Guideo were three things:

  1. A faster way to identify alternative routes, and modify specific parts of a route with walking.
  2. Pricing information is readily available, and it notifies if a route is presto only.
  3. It will notify and provide alternative walking routes when there is a delay.

I came away from the course with a greater understand of how to produce a better user experience. I learned how to throw away my ego when being critiqued. How to stay silent and provide not provide answers during user testing. When and how to prod for knowledge the interviewee thought was common sense.

Industry professionals Gerard Dolan and David Aboutboul taught our class invaluable life and career lessons. I hope to carry a design thinking approach to everything that I do henceforth.

Let's Talk

You've really made it all the way down here? Thanks for reading! If you have any questions about my Brainstation experience, or want to learn more about any steps in the process, let me know.