Aaron Charles-Rhymes
UX designer

San Francisco State University Commute App

Image alt tag

A technological intervention, specifically an app, would tackle the current issue and create an app for students to get to San Francisco State early or on-time.

  • Role: User Research, Sketching, Prototyping, User Testing

  • Timeline: November-December (4 week project)

  • Team: Aaron Charles-Rhymes, Hannah Hum, Ervin Advincula

  • Tools: Figma

Problem Statement

Due to Covid-19, many students have had to move back home or move out of the city for financial reasons. With remote learning, they were able to still get an education while not being in campus. Now that we’re transitioning back to normalcy, many students have had to commute long distances through the use of several types of public transportation. On top of getting a formal education, they now have to balance their time with the schedules of various trains and buses so that they can arrive to campus on time.

The Solution

To consolidate several useful tools and information in one spot for ease of use and convenience. Through this mobile app, commuting for SF state students will be easier and less of a hassle because it will efficiently calculate the fastest route to campus and provide helpful features that aid students in their commute.


Research and Analysis

When gathering data, we used our own experience as SFSU students and also surveyed our peers by asking for their thoughts on their commute to school, and if COVID- 19 has impacted it in any way at all.

This allowed us to gain a deeper understanding on the variety of ways that students come and go from campus. We learned that commuting plays a big role in the student’s attendance for their in-person classes and how troublesome traveling to campus can be as the school transitions back to in person learning.

SFSU Commute App


From our initial research, we created a persona: Eran Chan, a 20 year old design student at San Francisco State University that has to travel to campus for his classes.


Based on the data we gathered and the persona we created, we found a few problems that SFSU students face when commuting to school:

  • A lot of commuting from point A to point B

  • The stress of commuting is not a problem if a person has a car that they can use.

  • The COVID-19 pandemic changed how often students commuted to school.

  • Students having trouble deciding what bus to take/whats faster


Keeping in mind our own experience as SFSU students as well as what we learned from our peers, we sought out to create a mobile app that help students commute to school, which features that include:

  • A way to allow users to find the most optimal way to campus

  • Notifications about public transportation used in commuting

  • An interactive map that shows the user where they currently are

  • An integrated messaging feature to communicate with their classmates

First Evaluation Paper Prototypes
SFSU Commute App

Paper Prototype

For our first step in creating the app, we sketched out the features we wanted to include based on our directives onto paper screens and mapped out the user flow.

Image alt tag

Image alt tag

Image alt tag

Image alt tag

Image alt tag

Image alt tag

Evaluation: Scenario

During the first evaluation of our paper prototype, we enlisted the help of our classmates and created a scenario for the test user to follow:

"You’re an SFSU student. Due to covid and remote learning, you have not used public transportation for a long time. You now have to travel down to the SFSU campus. You open up your mobile phone and use the SFSU Commute App to find the quickest route to campus."

SFSU Commute App


In our test, we had one person on the team record the process, one person taking notes, and one person acting as the machine, swapping paper screens based on the user’s actions. Through this, we found a few issues in our paper prototype. Namely:

  • The lack of a back button on most screens

  • A button that takes the user to the main page after they finish their current task

  • The current user flow and navigation takes too long

Prototyping and Second & Third Evaluation

Second Evaluation

In the second evaluation test, we had our full mockup design and fixed some of the issues from the first evaluation. Swapping through on the mockup prototype on figma based on the user’s actions. Through this, we found a few more issues in the prototype. Namely:

  • Linking both the “Account Button” and “Users Name” to access the profile page of the user

  • Exiting the “Menu Bar Section” without using pressing the “Exiting Menu Button”

Third Evaluation

In the third and last evaluation test, we improved some of the issues from are feedback in the second evaluation this time in full depth. Through this, the user found more usability issues in the prototype. Namely:

  • Add a sub search bar on top of the bottom menu so the user can start scheduling her/his commute.

  • Add a the user’s home location on the home screen

  • Be more pacific where the user wants to go before searching

  • Show the current location of the user’s when searching on the app

  • Improve on the time scheduling

Final Design
SFSU Commute App

UI Design


Once I tested out all usability mistakes, I started designing the final screens in Sketch.

Guiding Questions:

  • What kind of visual style did you follow? (Fresh, corporate, dark, light?)
  • What inspired you to use this style?
  • Did you follow any guidelines? (Material Design, iOS Styleguide, etc?)
  • What platforms did you design for?
  • Which details really fill you with pride?
  • How does your final design reflect your learnings about your users?
  • How does this design help achieve business or user goals?

Using basic designs and insights from Iteration, we created a high-fidelity prototype for the SFSU commuting app using Figma. The color choices were to reflect on the SFSU colors from the Identity system guidelines. The font choices were also from the SFSU Identity system guidelines to make the app feel modern.

  • SF state students will have easy access to useful information and helpful tools.

  • Many helpful features are consolidated into one single app.

  • Students will have one less thing to worry about.

  • Commuting will be less of a hassle and more efficient.


Build a strong foundation

In order to design a fully fleshed out product, we had to build a strong foundation. We had to go through our design process carefully and deliberately so that we would have a solid structure for our design. This enabled us to not leave key information out and gave us a structure to look behind on when we get lost.

Focus on the User

Throughout our process, we found that it was very important to keep the user in mind. Through each step of our design process, we had to focus on our potential user and their needs. We weren’t designing for ourselves but solving a problem that our potential user faces.

Don’t reinvent the wheel

We found that many of the features that we wanted the app to have was already present in other navigation oriented apps. Instead of toiling away and unnecessarily making it hard for ourselves, we opted to take inspiration from other apps and mold it into our design. This simplified our process and would let us focus on other areas of the project.

Think Ahead

Throughout the design and implementation stages, we found that thinking ahead was an important factor to our project’s success. We were able to prevent potential problems from occurring and implement needed solutions early in the process.