UX Design Project Portfolio (Fall 2018)—— Skye Gao

Project: NYU Shanghai bus capacity service

Partner: Lach Mundair

Professor: Azure Qian.

Date: 12/16/2018

Motivation

The motivation of our project comes from the direct experience of NYU Shanghai shuttle bus system. All NYU Shanghai students and faculty who live in the dorms face a similar problem. The NYUSH shuttle buses designed to transport between the dorms and the Academic Building often fill up and leave before their scheduled departure time. Being aware of our peers’ wish to have an affirmation on bus capacity and a more reason bus schedule, we wanted to develop a system that can place our school’s bus system into a virtuous circle. 

In this sense, our product aims to give people a convenient way to check bus capacity to know when they should be heading down to the bus, and also gives them the ability to update the system for others. 

Based on these basic ideas, we started to design the user journey and identifying our core tasks:

The first version of our core tasks have two parts:

  • Check availability

Users will check the availability of seats before heading for bus, so that they will decide when and whether to leave.

  • Scan card to update

Each user will scan their card when getting on the bus to update the availability, so that following users will be able check again.

Considering the time span, we decided to focus on the check availability part, which is about app design on smartphones.

From our brainstorm, we identified our target users into two groups: bus riders (students) and bus drives, and our initial plan was to design two different app services on the smartphone for each group to which extent the bus is full. The goal for the project will be minimizing the time wasted on catching bus/missing bus, and saving students time to the most. We also expect this project being beneficial for the school bus system and widely applied to other bus services (company, public service etc.).

User Research, Personas, and Scenarios

Based on our identification of target users, we started our user research. Considering the population and variety of our target users are quite small, we decided to only use the method of interview rather than survey to find our user’s pain points and interests.

Lach interviewed the group of students and I group-interviewed three bus drivers, and we built out user persona based on the results from our interviews:

  • For the students, they all show great interests in our design idea but holds the concern of how we would implement it with physical devices.
  • While for the drivers, though thinking it is a good idea for students, they did not find it necessary to include them as users. They did not see the exceeding advantages of this system for them than their old experience (which are counting numbers and leave based on experience). As they said, most of them are more or less nor techonoligical-inesitive, some of them even seldom use WeChat scanning. Rather than online channels, they preferred physical approaches which should be as explicit as possible. Such feedback really set us rethink about our targeted groups and our implement approaches.

Story Board

Based on the feedback we had from our interviews, we decided on focus in the students users. Thus we draw the storyboard about a students who is studying in the library and hesitates to leave for bus. The app we design however gives him the message he needs to know about the bus capacity and finally he happily gets on the bus without wasting time. 

Wireframe

Considering this is a service based in NYU Shanghai community, we did not use our own logo but design our product as a part of the NYU Shanghai WeChat official account. Thus, our style is very much WeChat based.

Prototype

Based on wireframe, we used Marvel to make our first prototype. (Below is the user flow of bus from AB to Pusan).

Since we are designing a NYU Shanghai service, the color template we used is that of the official color template NYU has provided. And the color we actually used are HEX 57068c with different opacities.

Usability Test

With our prototype, we has run several round of user tests and made the following changes according to the feedbacks.

First round suggestions and changes:

  • The color used for the circle is too bright which was not very user-friendly, so we changed it to the  circle below:
  • The parallel scrolling bar of the bus schedule was a little bit confusing because the user had to think about which one to scroll and what will happen with the other one. So we separate the scrolling bar adding a destination option interface before this interface:

   

Second round suggestions and changes:

For the second round, our users were more clear about what to do and what should be expecting, however, their comments were still mainly about the design of the last interface. Feedbacks we got were that the circle made a strong indication that this is a button and should be click into. So considering that, we removed the circle and replace it with a simple icon of bus and a notification of the left seats.

Third round (in-class presentation) feedback:

After we gave the final presentation, we got further feedback from our professor that we could actually utilize the “button indication”of the circle and make it more entertaining. We think this thought is very interesting and will think about it for the future improvement.

Below is the prototype demo of our product:

Mock Up & User experience demo:

Since the application service we designed in this class is only one part of the whole design plan, so we shot this user experience video to help demonstrate the whole experience of our product.

Special thanks to:

Professor Azure Qian

Leave a Reply