← Take Me Back UXPrototypeWireframing

Commuter App

An application intended for commuter students and involved design personas, rounds of user testing, and prototyping.

Role: Project Manager 📝, Designer 🎨

Smartphone Mockup

The Problem

Our challenge for this project was to interview our peers, identify a common problem among them, and build out a solution for their problems whether through an application, a website, or some other means.

After interviewing about a dozen classmates, we saw that many of them were commuter students and faced difficulties in finding which line to take, purchasing tickets, and paying for parking.

The Users

Our ideal users for this application are 20-something, commuter, college students. As these were the people from whom the problem originated, we built with them in mind.

In order to get a better understanding of their problem, we completed a series of interviews and created a user profile of the things our users say, do, think, feel, and need, as well as their pains and insights.

The Process

Flowchart

We started the development process with a high-level flowchart which detailed the four primary pages, the features of each of the pages and the completable actions on each of the pages.

By creating a flowchart, we were able to define what tasks the user would be able to accomplish and the steps they would need to take in order to accomplish them.

Application Flowchart

Low Fidelity Wireframes

The next step in the process was to sketch out by hand a series of low-fidelty wireframes which gave a basic outline of the structure without having to worry about the more particular details like color or type.

After having finished drawing those out we imported the images into Marvel to add the minimal amount of interactivity viable for user testing and research.

Low Fidelity Wireframes

Guerilla Testing

After going out around campus and into the streets were were able to interview and test over a dozen users and gather feedback about our design and the flaws it had.

We asked our volunteers to complete two of the apps most common and simplest actions: use and view a ticket, and pay for a parking space.

By asking users to complete what we had identified as common tasks, we were able to find problems with our design and working on refining it.

High Fidelity Wireframes

We then went into Figma to create high fidelity wireframes in which we hoped to solve the problems identified in the testing.

These high fidelity wireframes were then plugged into InVision to create a more advanced prototype which was then presented to the class.

High Fidelity Wireframes

The Result

Unfortunately the commuter app never moved past the high fidelity wireframe stage and ended there. Though if it were to have progressed the next step we would have begun work and development in Xcode.

At the end of the day we ended with a strong base for a commuter application rooted in two rounds of user testing, empathy mapping, and user research.