Redesigning GopherTrip

As a part of my role as an At Large Representative in MSA, the student government of the University of Minnesota — we are often asked in committees to take on special projects.

In the Infrastructure Committee, we got a tip that the University was going to make several different apps just for transportation. Students were upset and didn’t want to have to download several apps just to get around campus but the university felt that there was too many features to combine into one seamless app.

I was added to the project to do two things:

1. Work with other students to design a new interface that would seamlessly incorporate new features.
2. Provide technical knowledge to help advocate for student needs.

Step 1: Research

In doing our research, we found several other universities that have combined apps. MyIowa was suggested as an app that had managed to combine many features into one. It included features like Events, that U of M students felt were not necessary in this app, but it was a good counterexample to the notion that we needed an app for every different feature.

We also looked into the companies making the features we were hoping to incorporate. Unfortunately, the company that made GopherTrip, Bishop Peak Technology, does not have an open API so we’ll have to work closely with them for these changes. Other services, like ParkMe do have an API but it is not completely open so the University would have to request access. Fortunately, the rest of the maps and features were under University control and could easily be incorporated.

In doing customer interviews, the biggest changes we heard were that users wanted more accurate bus arrival times and added maps. They generally felt the interface, although not exceptionally beautiful was easily usable and they enjoyed having a large map. One feature, the list of Stops, was rarely if ever used, so it was removed from the design. We also found that the iOS and Android designs were drastically different in some areas, and that users preferred the iOS design of stops.

In the end, we based the current app designs off of the existing app because we heard the University felt it had already invested too much into it, and did not want to do a full redesign. We then felt it was best to keep the general UI elements, so the app looks very similar.

The old design of the app on the left, compared with the new design on the right.

Step 2: Wire Frames

Two weeks after this project was initially proposed and we had time to think about it, I set about making wire frames. During the Infrastructure Committee, we broke out into a team of 4 and talked about what changes we’d like to an app. I wrote down a list of features that we had and then drew up two series of sketches. Below is the second series, after suggestions were made to the first. I then showed this to about 10 other students to get feedback on the designs again.

App designers (including myself) often like to do paper designs first because studies have shown that users are much more likely to give critical feedback that is needed when the designs look like they took less time and are more changeable. They are quick to make and easy to change.

Initial sketches that were made during the Infrastructure Committee.

Step 3: Prototypes

For the new design, the largest additions to the app design were the to the menu bar, to add additional maps and features. We put buses into collapsible menu to make more room for added options like GopherWay, Gopher Chauffeur, and a map of well lit pathways.

The prototypes were simple and only took about 1 hour to make for initial prototypes and an additional 1–2 hours for feedback and first round changes to the design. You can look through the public AdobeXD prototype designs here. https://xd.adobe.com/view/d82d5eed-42c6-4461-5fa7-e6f323db32f0-ae1c/

The second biggest change was to add an Uber-like interface to the app for both GopherChauffeur and 624 Walk, free services the University provides to get students home safely. Although these features are more to implement, we heard that the University was already making these for GopherChauffeur and hoped they were designed in a way that would be easily incorporated into the existing app. In this design, the current address would autofill based off GPS, but the user can change the address by either typing in a new one, or adding a destination address. A phone number was added to the design, so that the the dispatch coordinator can call the user if the driver can not find them.

Step 4: Feedback/Iterative Design

From getting more feedback, the designs shifted. Originally, only Gopher Chauffeur had an Uber-like design, but many users requested the same for 624 Walk, so the design was repeated there. We also added ParaTransit after users requested that this important map be included.

We are still in the process of developing this project along side the University and Bishop Peak Technology. I’ll update this story with progress to come.