Ironhack Challenge 1: Design Thinking Citymapper
By: Katalina Vasquez
Tags: UX Design, Citymapper, First Experience, Women In Tech, Wireframe

Currently, there are a slew of applications to help us navigate around. In my first challenge as apart of my Ironhack prework, I explored the application Citymapper.

Citymapper is “a public transit app and mapping service which displays transport options, usually with live timing, between any two locations in a supported city. It integrates data for all urban modes of transport, including walking, cycling and driving, in addition to public transport”. While using the application, I identified an issue, as most travel planning apps have, which is the inability to purchase different public transport tickets through one channel.

With this issue in mind, I decided to go through the design thinking steps in order to determine how to solve it. The steps being to empathize, define, ideate, and prototype.

To empathize is to listen, and that’s exactly what I sought out to do. In this first step, I created a set of questions for my 5 interviewees to answer. The purpose of this interview was to determine if my idea of a problem was shared, in addition to getting more information on how to solve it.

Define Stage: Sketch-notes on the interviews, summarizing what I learned about the users.

I began by creating a Google Form with 12 simple questions which increased in complexity as the interview went on. I began by asking the users about the current trip planning applications they use, why those, and if they had any issues with them. I really wanted to know what main factors influenced the trips they plan.

What I found was quite surprising, I initially thought the users would be concerned with the quality of the trip, and what companies got them where they were going. In reality, their main concerns were how much the trip would cost, and then they would consider how fast they could get where they were going. Additionally, that the application contained the ability to purchase all the tickets, and keep them in this application so that upon arrival they didn’t need to switch between various channels.

Next was the define phase, which condensed my finding to identify the shared problem. Some key words I gathered from the compiled results were: “cheap”, “quick” and “all-inclusive”. With this information, I defined the problem:

“The sample population wanted a feature that showed cheap tickets for a quick trip in one all-inclusive application.”

The Ideation Phase, based on the problem definition in the previous phase.

In the ideation phase, I began sketching out different ideas considering what would best fit. As you can see in my notebook sketches, I wanted to make sure the feature showed the different modes of transportation someone would take, in addition to the time and cost. On the lower half of the page, I had two ideas on how to show their priorities of quickness and price. On the left there is one that shows route options, but first recommends a route to take. An algorithum would be created in order to find the route that would get someone there quickly while still being cost efficient. It would act as a happy middle ground. Meanwhile on the right, there is a sketch that showed any and all routes on how to get somewhere, with a little filter icon above allowing the user to choose if they prioritized how fast they reached their destination or the price of it.

Had I had more time, this is where I would have liked to make two prototypes in order to do some more user interviews. Though, due to the time restraints I ultimately made the decision to go with the left design because I believed the users would like a quick suggestion for how to reach their destination.

Prototype Phase, a scan of my attempt at a wireframe

Finally, I made it to the prototyping phase where I made a wireframe, putting my ideas to paper. Here, I am able to fully visualize my ideas as well as easily communicate them.

Starting with the top left screen going to the bottom right, I began with the current homepage of the Citymapper app. Following are the screens that would follow. I do believe this solves the issue well enough, although upon completion I realized I missed a screen between the Checkout screen and the final Confirmation screen. Of course, this would be where the person puts in their credit card information in order to purchase, so I thought that screen was implied. Looking back now, I can see that it leaves a hole in the experience and is just another lesson for me.

In conclusion, this first challenge has been enlightening in so many ways. Showing me that its impossible to really know what the user wants unless I listen. An obvious lesson that had to be reiterated for myself in order to thoroughly define and solve the real problem. It also made me realize how many components go into a 30 second interaction between the user and experience. And finally, the third takeaway being some admiration for the UX designers who do this daily. Soon enough I will join them, but for now I will continue to learn more in the next steps of my UX/UI journey!

Thank you for reading.