UXD Final Project Documentation (Portfolio) – Xinye Jiang

Course: User Experience Design

Professor: Azure Qian

My app is called “Doge Spa” (道格SPA), and it is an app that provides taxi service for pets, especially for dogs as you can probably tell from its name. Along with its taxi service, it also provides reservation service for pet shower, so that pet owners do not have to worry about whether the shower appointment will be fully-booked before they get to the store. Another very important thing about my app is that the pet owners do not have to go with the pet to the store, the drivers will actually take care of the pet and bring the pet to pet store while the pet owners can actually see where their pets are at and how their pets doing through my app.

Inspiration:

There is always a problem that I encountered when I tried bringing my dogs to the pet store to shower, and that is either being rejected to take the car by DiDi drivers or the pet store shower appointment being fully-booked. Therefore, I was inspired that if there is an App that can really help the pet owners, especially dog owners, to make pick-up appointment and shower appointment, life will indeed be so much easier for dog owners like me.

Initial Thoughts:

My initial thoughts about my App was to have several functions such as delivery services for pet products, door-to-door pick up service, reservation service for pet shower, reservation service for pet foster care, dog training service, and so on. I also thought its best form will be mobile application, which it is convenient for users to use as well as rather easy to advertise compared to like real stores.

User Scenario:

Based on different types of users of my app, I drew all different kinds of the user stories based on what my app can help and solve for each different type of the users. The users include: pet owners, pet store owners, delivery men and drivers.

 

We were also asked to finished the eight minutes challenge by drawing out what my app can really help to solve current problems that other app cannot.

Storyboard:

After drawing out all the user stories and realized all the problems that users might encounter without using my app as well as  all the solutions my app can give to these problems. I started to draw the story line of pet owners who are basically the most important users of my app. Below is the storyboard that I drew.

As you can see the first picture shows a pet owner wondering how he can bring his pet to shower without having his own car or without have free time. The second image shows that he realized that he can use “道格SPA“ (doge spa) to call and car as well as make a pet shower appointment online. Then the car comes and the driver picks up his pet and brings the pet to the pet store. Finally he thinks this app is amazing and very helpful.User Research

Professor Azure always said in class that user research is a very important step that we have to take before even designing anything for our app. After the entire seven classes, I totally agree with what she said.  I did not collect as many as responses for my survey compared to other group members, it might be because I am doing this project alone or maybe because I did not ask the right group of people to do it since my app is all about pets. I should have asked people who are more interested in pets to answer my survey. However, I did conduct 6 interviews with 3 types of people that I wrote as personas below.

User Persona

Here are the user personas that I wrote based on the information that I have collected. I divided them into three categories: Students, office workers and business owners. In this way, we can see what people from different field, or people from different ages are most concerned when taking care of their dogs.

The most important sentence that I found through mostly all of their surveys/interviews is that they think taking shower for a dog requires not only a lot of time but also a lot of effort. Most of them do not have time for that and they mostly think cleaning up the mess after showering a dog requires even more effort and time. As for taxi service, most of them think it would be really a good idea to implement to real life.

 

Therefore, through the user research, I found that pet shower and taxi service are the two services that most of them think would be helpful. At this stage, I still haven’t decided whether I should narrow down my functions to just two.

Paper Prototype & Marvel Test:

So here are the paper prototype that I created for my app. I still wanted to have all the functions that I mentioned in the beginning at this point before conducting my usability test.

 

Here is the video of the marvel test for the paper prototype! Click to see how it works!

 

 

Usability Test:

After having several users playing the paper prototypes on marvel, they all suggested that I should do something different from what 饿了么 and 大众点评 are doing. For example, having delivery men delivering pet products. In addition, they all really liked the idea of me having taxi service as well as the reservation service in the app, so that most of them suggested that I should totally narrow my entire app down to just these two functions. After talking to 5 of them, I gradually started to agree that doing something very special would be really helpful to a start-up app in the beginning instead of doing something that all the other apps are doing. I then narrowed my functions down to just the “taxi service” and the “reservation service for pet shower”.

Visual Design:

  • Theme Colors:

The theme colors of my app are mainly: white, orange and dark grey because I want it to be as simple as possible so that it will look simple and advanced at the same time. I do not expect my users to find my app very complex by its colors or look.

  

  • Logo Design:

 

If you haven’t notice through the logo, it is a car giving a ride to a dog. As you can see, the color of my logo is very similar to the entire theme color. I purposely did that because in this way users will think about the app whenever they see this color. Theme color of the entire app is fairly important to new apps like mine.

  • User Interface Design (Using Sketch):

As I mentioned above, I want the interface to look professional and advanced, so that users who first start using my app can still trust the service and believe that it is a well-planned app. I do not want the entire app to look messy and out of order, so after meeting with Azure, I fixed many little problems that the interface used to have and changed it to this final version shown below.

 

  • Posters:

Here are the posters that I made for this App.

Final Marvel Test:

https://marvelapp.com/5623bib/screen/51399738

Here is the link to the final marvel test of my app! Please check it out!

Future Development:

For the future development of this app, I will be working more in depth on the suggestions that I received from both my classmates and professor. For example, professor Azure gave me a suggestion on perfecting the pet store recommendation page by adding the title of each store; one of the classmates pointed out that I should check with the customers whether the dog I am sending back after shower is the right dog that they send over and etc. I thought these were all good suggestions and by perfecting my app, I hope it could bring some true help to the users.

UX Design Project Portfolio – Ji Hwan Shin

Project: POREfect (Personalized beauty/skin care planning app)

Partner: Ashley Friedland

Professor: Azure Qian

Date: 12/16/18

Brainstorming/Idea

For our project, we wanted to create an app that simplifies the process of finding out our skin types and getting product recommendations. Seeing the over-saturation of brands and inconsistent diagnosis on similar apps (Paula’s Choice & 你今天真好看). Allowed us to address some of these shortcomings on our own app. We wanted to provide a thorough skin diagnosis using a questionnaire that examines one’s skin care routine, diet, and lifestyle habits. With this information, we wanted to recommended customer reviewed and clinically approved products to our users. Lastly, our key feature would allow people to set up their personalized skin care routine and set alerts to check off items on their to-do list.

From our brainstorming, we identified two segments for potential user persona – those who are aware of skin care and incorporate several products into their routine and those who are unaware of the proper way to take care of their skin. We figured that our app would have to address both of these segment groups by simplifying the process and providing quality content (like skin care steps and product recommendations).

User Research, Personas, and Scenarios

We conducted our research to see of our user segmentation was correct. We prepared a survey on Google Forms about basic skin care knowledge as well as user input into what kind of functionality they would like to see in our app. You can check out the questionnaire here: https://goo.gl/forms/NvyRMZvSNFRbuMGE3

We got over 60 responses from people of all ages and nationalities. True to our expectations, there was almost an even divide in people who already had an established skin care routine and those who wished to learn more about skin care or had no clue at all what they were doing. We also had a wide range of responses from people with differing skin concerns that stemmed from genetic, hormonal, or hygienic reasons.

Looking at this data, we confirmed our initial assumptions and came up with two user personas – “Beth” and “Tati.”

Storyboard

Wireframe

Prototype (https://marvelapp.com/66fegh3)

Usability Test (Beta Version)

Some Recommendations:

  • Thumbprint login | Sign in with Google or Facebook
  • “These are suggestions not prescriptions”
  • Explanation of questionnaire
  • Skip questionnaire option

What we chose to incorporate:

  • Sign in with Google / Facebook
  • Suggestions not prescriptions
  • Skin care front page

What we chose to not incorporate:

  • Skip questionnaire option  – because the questionnaire is crucial to the app

Usability Test (Second Version)

Some Recommendations:

  • M and E for routine changed to icons
  • Questionnaire comes earlier in the app
  • Different colors
  • Bigger text

What we chose to incorporate:

  • M&E to a sun and moon
  • Different colors
  • Bigger text

What we chose to not incorporate:

  • Questionnaire earlier in app – not enough time

FULL User testing audio can be found in our Google Drive: https://drive.google.com/drive/folders/1b9lzovlgYEmkRqsX3libH2qhNQi2r498?usp=sharing

Presentation

Presentation Slides: https://docs.google.com/presentation/d/1m-wlMS_N9tVKpAy-lPcOKdCGecjJ2EniaMBgGI6OAHk/edit?usp=sharing

UX Design Project Portfolio —— 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

UX portfolio | Linda Chen

Project: Hum It

Partners: Quoey, Tiger

Professor: Azure Qian

Slides: https://docs.google.com/presentation/d/1_t1QxPEtBR99jASnRttqiOKSnobIAnOd_Xqfbs_HZ-c/edit?usp=sharing

Motivation

Our project idea is about an app that can help users compose music by simply humming and recording the tune the user is thinking about. The app will automatically recognize the specific tune, play the tune out with any instrument and add drum beats that fit into the music. Users can choose instruments they would like to have to perform the tune. Users can also create their unique sounds with anything by audio recording any sounds in the nature. It’s a composition app users can open at anytime anywhere when they have creative ideas. The form will be an app as it’s very flexible. The material will be a phone and most importantly, YOU! Verb actions users will have include singing, composing and sharing. YES! Sharing! The app allows collaborative work with multiple users. The app will be in App Store, mainly for iOS users. Audience of the app are music lovers, mostly millennials who would love to record life in forms of music and audio files.

Then after the discussion with Quoey and Tiger, I realized that the app can have another function of friends and community. It’s not only an app for composing, but it’s a community where users can listen to other users’ music if they share it publically. Besides, thanks to Quoey’s brilliant idea, the app will use artificial intelligence to generate music for user by automatically combining clips the user has on his/her phone, which makes composing music much easier for beginners who don’t have any basic knowledge of music.

Storyboard

Based on our discussion, we created the storyboard from songwriter’s perspective. Tony is a guy who doesn’t have basic knowledge of music. One day, he had an idea of a piece of music. He became disappointed when he found out that music software is too complicated for him. He then opened Hum It to record his melody. He published it on the app and shared it with his friends. He got many likes and favorites on the app. He is very happy.

The app encourages people to compose music whether they are professionals or not. People can share their feelings and emotion through the app by recording any voice or sound.

Story Arc

We developed the concept story arc from the songwriter’s perspective at first. The climax is that when the user sings some simple melody to express his/her emotion to the app, the app then generates the music he/she wants. Later he/she finishes the piece and is content with the music. He/she uploads it to the platform.

We improved the user story arc by adding another perspective from listeners. Listeners can also listen to other users’ music and explore through different genres. They can also get recommendation from the app based on their previous listening history.

User Research, Personas and Scenarios

Survey

After figuring out what the product is and what main functions the product will have, we worked on researching our users and creating their personas and scenarios.

We conducted a user survey and collected 121 answers, and we did three interviews. We used wenjuanxing to design and spread out the survey.

Survey: https://www.wjx.cn/jq/30940623.aspx

Survey and interview questions we designed: https://docs.google.com/document/d/1yjJxCPvoUx3l_RdoxoJykwyMphbidVmzHd3PgU8dvuw/edit

The primary target market for Hum It is music lovers who don’t have any basic knowledge of musical theory and young millennials who love to record some audio. We sent out the survey on people’s experience of having the incentive to make music while confined by the difficulties of professional music making software, and people’s attitude toward making music and sharing with other users on the app. In the survey, 80% percent of the participants have love music related stuff such as singing and playing musical instruments. 16% of the participants indicate that they have composed music in their past experience. Among the 16% of people who have experience, 50% of the participants suggest that the professional software is too complicated for amateurs, among which 14% of them complain the interface is too complicated for anyone. For people who have experience composing music, 50% of them already stop using the software due to its difficulty. For 84% of people who have no past experience composing music, 69% of them say that they would like to try our app. We also conducted users’ preference research while using the app. 30% of the participants will compose the music while sharing with other users on the app or through social media. 20% of the participants are only willing to compose music without sharing to others due to plagiarism worries. 36% of participants are only interested in other users’ composition. From the survey we conducted, we can conclude that most of our customers are music lovers, while most of them (85%) don’t have experience composing music. These individuals hope to make music through an easier app. 90% of the participants are willing to compose music pieces or share with other users through the app and other social media platforms. Survey shows that our product solves people’s pinpoint of creating music without any music background.

Interview

We interviewed three people who have strong interest in composing music and yet don’t have much knowledge about music. During the interview, we found that they are eager to have an app that is much easier to use than other professional software such as GarageBand, FL Studio, etc. Our interviewees also suggest that it may be better if we add a section of plagiarism detection, as they are aware of the possible copying issue when they share their music piece.

Personas and Scenarios

We identified two main user groups: listener and creator. Based on the survey, we finished user persona using key features shown in the survey.

The first user persona is from creator’s perspective. They account for 50.5% of respondents including those who have previous experience composing music and those who are interested in composing music but haven’t tried. They are interested in music and relevant stuff. Their primary pinpoint is that they would like to have a platform that is easier to use compared to other software.

The second user persona is from listener’s perspective. They account for 65.3% of respondents. They enjoy listening to music every day and they are eager to explore different genres after they are tired of listening to music in the marketplace nowadays.

User Flow and Site Map

After the survey and several interviews, we decided to have three sections for the app including listen, record and my profile. The users can explore whatever music they like composed by other users under the listen tab. The users can record their idea under the record tab. And they can change their settings under the my profile tab.

The initial user flow and site map is:

We then added more functions to the app and eliminated functions that are too complicated for music beginners. The user flow and site map become:

Wireframe and Usability Test

The wireframe is based on the user flow diagram. We divided the work and draw three parts separately. The wireframe at first is like below:

   

After three usability test, we collected a lot of suggestions.

  1. Users would like to have a tab for editing when they want to edit clips.
  2. Users would like to have a tab for saving the file to the phone, without publishing it.
  3. Users felt like there should be more instructions. The interface for recording and generating the music piece is especially confusing for them.
  4. Users felt like there were too many buttons, which is distracting for them.
  5. Users felt like the style of wireframe is inconsistent, due to our division of work.
  6. Users felt that several buttons were ambiguous. For example, in the initial design, we have both “heart” shape and “star” shape. Both of them are shapes of like and favorite.

Two Videos for usability test:

We improved our design according to the suggestions we got from the usability test.

  1. We added a edit tab in the recording interface. Users can drag midi piece to anywhere they want.
  2. We added a save tab after successfully generating the music.
  3. We decreased some of the buttons in the recording interface. We added more interfaces with less button for recording, so that users don’t need to think which one of the button they should click.
  4. We changed the design of several buttons. We changed the “star” shape to “bookmark” shape.

Brand identity

Logo

Our design of logo is relatively simple. It is a microphone, with the background color of our secondary color. We hope the logo reminds people of recording the sound. Moreover, we hope that the logo tells users to record their mood whenever they have some kind of feelings.

Theme color

Primary color: #c8e6c9

Secondary color: #455a64

Our theme color is a combination of a light, green color and a dark, blue color. The green color symbolizes happiness and pleasure. We hope that when our users generate their own music piece in our app, they feel happy, and this is the reason why we set the primary color green. The secondary color we choose is kind of a “high tech” color. It is also the background color of most of our “recording” interface. We would like our users to record and generate music piece with Artificial Intelligence just like entering a professional studio where everything is high tech.

Prototype

Based on the suggestions we got from our usability test, we improved the interface and made a prototype in Sketch.

The demo can be found here:

Special Thanks to professor Qian and our interviewees who gave us feedback along the way. In the future, we would like to develop prototypes and improve more.

 

 

 

UX Portfolio: Lily Mark

Project Title: Wanderlust
Documented by: Lily Mark
Partner: Vanelly Garces
Professor: Azure Qian
Slides: https://docs.google.com/presentation/d/1xGm6cTxuYo_KAaP8GWNRu1te6P4g6s6xeRFvaYjOwso/edit?usp=sharing

Ideation:

This idea was inspired by all of traveling done by students at NYUSH. As one of these students myself, I wanted to explore different ways travelers could share their experiences.
That is when I created this Project Paper brainstorm where we considered different audiences, forms, materials, etc.

From there my partner and I looked into different core-tasks through storyboarding-

During this stage of ideation, we realized we had two main users – the travel content researcher as well as the travel content creators. Once we made this discovery, we created a story arc poster with both in mind –

During this phase was when we came up with name Wanderlust to capture the sense of wonder of our target users. And from here we created our logo –

We hoped the blue would spark a sense of adventurer and mimic feelings of the ocean and that the cursive would play off of a sense of whimsy.

User Research:
Our next stage was to conduct user research in order to better understand our users. We did this through two keys stages a survey distributed to mostly people in their twenties as well as two interviews with members of our target audience to gain more insights!
In the google survey we asked general demographic questions as well questions about travel habits both during trips, as well during the planning stage. The most interesting key insights are as follows – One was that no one uses travel agents anymore and the other was that social media was the main source of sharing about travels.

This helped us realize the interesting trend in how the younger generation really differs from our parents and led us to some even more interesting findings from our user interviews.
We interviewed two college students, one studying in London and on studying in California. They both had interesting insights to share. One mentioned how transitioning to traveling as an independent adult was more difficult than expected. The other talked about how her ambition when traveling in alone was greater than what she felt her options were in the way other research.

User Personas:
The user research helped guide our three user personas.
Enrique (Business Traveler looking to make the most of his experiences) –

Courtney (Travel Influencer looking to share her journey) –

Moe (Newly seeking travel opportunities and ways to research her travels) –

Brainstorm, Mock-ups & Wireframes:

Once we had identified who our users were we began prototyping our mobile application. The decision to focus on a mobile application came directly from our user research! We wanted to create something as user-friendly as possible therefore we chose a mobile-first design.
From here, our first step was to think of some specific user problems to get inspired. We did this with a 60-second brainstorm that generated 8 ideas-

From here we started to make this idea come to life with rough mock-ups and wireframes:

User Testing:
Next we conducted user testing with our paper prototypes to help us work through our design before we implemented sketch and digital prototyping. From our users we gained valuable insights into which icons would be more intuitive, what to put on our homepage and the most important insight of all – to increase the feeling of social media to incentivize posting as well as set us apart from other travel platforms.

From this, we were able to solidify our user flow into something that could be the backbone of our design and navigation bar!

Design:
Next, we moved into our design phase, where we were able to choose our colors fonts and imagery.

Colors:

Fonts:

Imagery:

We took this to Sketch where we were able to make our page designs and navigation bar-

Final Prototype:

Here we have a screen recording our user flow through the navigation bar made with the help of Marvel!

IMG_5468

Next Steps:
This project was so fun to work and I truly do believe in its potential. With more time, I would love to develop more pages, particularly the section for adding to an itinerary. I believe there is a lot to do in regards to making that section as user-friendly as possible.
I can’t wait to keep prototyping! Lastly, a huge thank you to Professor Tian for all of her support and insights.