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

A21_Calculator Musicbox(Candy)

The project ‘CALCULATOR MUSICBOX’ is inspired by the old-fashioned calculator which sounds everytime a number is pressed. I find it really interesting to connect notes with calculator since both of them can be symbolized by numbers.

I try to keep the visual straight forward and simple. In this project, each number is connected to a chord and when the outcome is calculated, it is then transfered to part of the music loop together with the numbers pressed by user. A red dot is added to tell the starting point of one loop. For now, it is however not a real calculator as it can only work with * which I choose for bigger range of numbers of the calculated outcome.

Link to p5

a21 demo.

Code of Music A21: Harmony Project – Alex Wang

Task:

Harmony Project: Design and implement an exploration of harmony using code. This could be an interactive piece or a fixed composition. Record a 20-second snippet of the piece in action*. Collaborations between two students are encouraged.

P5 Editor Link:

https://editor.p5js.org/alexwang/present/3iZ2RjcdR

Final Product:

Inspiration and concept:

Interest in music is becoming more and more common and people can still enjoy playing music without a solid understanding of music theory. A quick google search will tell you the chords to your favorite song and what individual notes and voicing are suitable for playing the chord. However, it does not go the other way. When people are experimenting with harmony themselves it is harder to go the other way and have someone tell you which chord you are playing. I find this personally finds this frustrating, not being able to tell the name of a chord I landed on. This is why I wanted to create an interface where the program will tell you which chord you are playing, regardless of voicing.

A description of your main music and design decisions:

I did not include any music in this project, mainly because I wanted this project to be something more useful as opposed to something more artistic, I also made the overall visual design simple because of this. Playing a note changes the color of the corresponding block on the keyboard, also displaying the pitch of the note above it. Playing 3 or more notes will display the name of the chord you are playing, if it is a non-ambiguous chord.

An overview of how it works:

The way this program works is by storing all triads and seven chords in an array. Then I use another array full of boolean values to check what notes are currently being played. After sorting all the notes being played in order(solves the voicing issue) and eliminating any duplicates when playing octaves of the same note, I will compare that set of notes with the library of known triads and seven chords to see if anything matches.

Challenges:

This project is definitely way more complex than I thought it would be. A lot of the chords did not exactly have a specific name and many chords shares the same exact notes. For example, A sus4 (A, D, E ) and Dsus 2 (D, E, A) has identical notes. Some chords doesn’t even have names, chords like D A C can be interpreted differently depending the context of the music. It could either be a Dm7 by adding a F, or it could be a D7 chord by adding a Gb, it could even be a C6/9 chord by adding E and G. Chords like this can only be identified with the full context of music, information such as chords played before and after this chord in the progression, as well as key of the song, and the notes played by other instruments(bass usually indicates root).

Future Work:

With these challenges in mind, I would like to explore more with harmony in potential future work. Perhaps using algorithms to analyze the most possible chord that these harmonies are trying to suggest, maybe even utilize machine learning to train the perception of harmony according to the context of the music. These could all be interesting things to explore in future versions of chord analyzing software.

COF_A20(Candy)

I started out with testing with different values. The empty String seems to work fine except for some very low note that can be barely heard without earphone.

Test with empty string solution

This gave a hint that lowering the note frequency may be a solution. I then tested out in P5. Then I googled the lowest value Tone accept, which is E0. Unfortunately, the low note problem still exists.

 

While discussing with Ying, he suggested 0 may be helpful. Yet just like the two tests before, I can still hear a low note beated with my earphone.

Even though none of the three is perfect, I think they all can be the solution for this since one can bearly hear the three notes and they all have the music played as wanted.

Code of Music A19: Harmony example – Alex Wang

Task:

Post a link to or blog post about a song whose harmony appeals to you

Song:

Hip Dipper by Arch Echo is a very harmonically interesting song, the song itself blends multiple genres and takes a very creative approach to the composition. A short break in in the song that starts at around 35 seconds introduces a short piano solo where the harmony sounded very jazzy, I do not know the exact chords but it sounded like it was more than just triads.