City Mobility: UX/UI Case Study

The Challenge — City Mobility

As the relationship between the metropolis and rural areas is transforming, moving around the city has also changed over the last few years. There is now a huge variety of new transportation modes available to people living in big cities. Also, the streets have become a place where people can go for a jog and ride their bikes or exercise.

My team (Nallely Martinez Almonte, Daniel I. Silvestrini Torres, Mistral Cedanio) chose City Mobility as the topic for our first project. We identified it as one with a tremendous amount of potential due to the current inefficient public transit infrastructure in our island, Puerto Rico.

About the Project

Background

Although Puerto Rico is a small island, it doesn’t count with an extensive public transportation system that encompasses the entire island. The public transit infrastructure is very limited to certain areas, mostly in the Metro (San Juan, Guaynabo, Bayamón, Cataño, Carolina, Trujillo Alto) part of the island and Caguas. This only accounts for 7 municipalities out of the 78 that make up the entire island of Puerto Rico.

Even in this 8.97% of the island that the local public transportation system covers, there are some major structural problems that prevent it from being successful. The majority of Puerto Ricans don’t use the public transit system, as most people use cars to get around the island.

In 1891, Puerto Rico inaugurated a railway system that covered most of the island. However, with the introduction of automobiles to the island, the company in charge of this railroad declared bankruptcy in 1950. This forced them to cease all railway operations by 1951, causing the Puerto Rican population to solely rely on private vehicles and buses.

After over 5 decades of not having a railway infrastructure, Puerto Rico inaugurates its current train system, Tren Urbano, in December of 2004. However, this system is not nearly as comprehensive as the previous railway that closed in 1951. The new railroad line currently only covers a 10.7 mile radius of the island and counts with 16 stops. Besides Tren Urbano, Puerto Rico’s public transportation system comprises buses and ferries.

What is TuT?

As a team, we decided to create a platform that facilitates benefitting from the current public transportation system to Puerto Ricans. This platform, TuTransporte or TuT for short, is intended to provide the Puerto Rican population with exhaustive information about all the available methods of transit available to them. TuT is meant to have on-demand information and timely, accurate updates about the different lines of transit in Puerto Rico. The goal is for Puerto Rico’s public transit users to have a reliable resource when choosing to use public transportation, helping them get where they need to as efficiently as possible.

Problem Statement

When public transit users are faced with delays, an inefficient overall transit infrastructure, only one payment option, and a lack of information, they become distrustful about using public transportation systems.

This distrust prevents them from using Puerto Rico’s public transit system. They need an efficient way to plan their commutes accurately, in order to arrive to their destinations safely and on-time.

Solution

Create a digital tool that can address and solve the primary problems that Puerto Rico residents face when choosing to use the island’s public transportation system. This digital tool should provide them timely and accurate updates about their routes. The objective is to take public transit users to their destination on time, well-informed, and with various payment options.

Design Methodology

Phase I — Discover

Before conducting research, we performed a CSD Matrix to lay out our certainties, suppositions, and doubts we had about the project.

User Research — Quantitative Results

In order to learn more about our user, we started working on creating a survey that could get us the information we needed to move on with our design.

For our user research phase, we created a survey using Google Forms in order to receive quantitative data from the users we’re targeting. The survey had 13 questions and received 32 responses from users who live or have lived in Puerto Rico.

Phase II — Define

From our survey results, we worked on exercises that helped us define and gain better insight of who our user is and who we’re designing for.

How Might We Statement

How Might We organize the variety of people navigating the streets to provide a more efficient and cleaner city?

Empathy Map

User Persona

Journey Map

Phase III — Develop

In our Develop phase, we completed a few exercises to see how our ideas aligned and decide which ones we would be implementing on our design. We started with ideation exercises, such as Worst Ideas and Crazy 8s.

Exercise: Worst Ideas

Each team member suggested “bad” ideas related to the project. Then, each team member chose ideas to rework and make better.

• We gathered at least 5 ideas per person that we each thought were bad ideas in the context of our project and what we’re trying to achieve
• Then, we all took time to read each other’s “bad ideas” and selected one from each teammate
• Our job was to turn those ideas we selected and elaborate it into a better idea
• This exercise was harder than I thought it would be for me

Exercise: Crazy 8s

In the Crazy 8s exercise, we mainly depicted what we each imagined different screens in our user flow would look like. This exercise was a main source of inspiration when developing our wireframes.

• We each took a piece of paper, folded it in 8, and sketched ideas for 1 minute per paper section
• Doing this exercise, we found that our ideas for the digital part of the project were aligning in the same direction
• We were able to determine some of the pages we wanted to include in our digital public transit app

Site Map Sketch

We developed a preliminary, lo-fi version of what the app’s site map and its contents.

Once we were done with these exercises, we each came up with different potential name options for the app. Some ideas presented were There, Aquí, Tu Transporte, and TuT. Ultimately, we went for a combination of two of these names. We decided on Tut (TuTransporte). Then, we started working on the design aspect of our app.

• For this, we decided that we needed a UI guide. This is necessary in order to have uniformity and consistency throughout our design process and app
• In our UI guide, we decided the color scheme of our app, the types of buttons we wanted to use (e.g. rounded vs square), the style of icons we wanted to use (e.g. filled vs outlined), and what type of font we would use (e.g. serif vs sans-serif)
• We all created samples of what we thought the app’s logo should look like

Phase IV — Deliver

As our final deliverable, we created mid-fi wireframes portraying design decisions based on the research we conducted and feedback we received from different users. We produced a total of 12 wireframe screens.

Mid-fi Wireframes