Week 5 -Wireframe+Mockup+User testing – Milly & Daisy

For this week, we keep working on improving the wireframe, mock-up and carrying out the user testing.

We test the first version of the wireframe at class. Feedback including:

A little bit confusing about the course tracking page. What does the picture placeholders stand for? It might be better to put the “history” and “in progress” in different places since they have different meanings and priority to the users.
Confused about the search page – what does the information stand for?
Back button issue (often run into situations when don’t know how to cancel or go back)
Too many choices may distract the new comers.

For the second version, we added the navigation bar on the bottom of the screen as well as putting more pictures and details on the pages to make it more understandable. Referring to several APPs, we also changed the course tracking page to the “my account” page.

Feedback for v.2:

The navigation bar has too many features and it may confuse or mislead the user. Besides, it shows on some pages while doesn’t show on other pages, which makes it troublesome to go back or cancel.
The user is not sure about the function of different icons on the navigation bar. Some users are also distracted by different pages like the available teacher and the request page.
The request function as the core part of our app is not emphasized in this wireframe and the connection between the “plus” sign and the request function is not very clear
The instruction for new users should be more user friendly. Instead of using words, it’s better to use image illustration.

Improvement on v.2:

New navigation bar – delete “category”, “plus” and add “my course”
Put research page on the top(homepage), refine the searching function into two main categories
Refine the request process – a new confirmation page with previous request information, new request successfully page with info of people with similar request
Rearrange course tracking – highlight the course in progress and show the course history in a folded way

Screenshots for v3.0 （editted after user testing）

Feedback for v.3:

Keep working on highlighting the core features of the app – quick request, location advantage. For example, putting the “nearby workshop” before the “popular topic”.
The users want to get more straightforward feedback when making the decision.
Layout of the homepage – using more images to attract the users and put the search part in a mask layer (folded when enter the page, pop up when clicked)

According to the feedback above, we mainly redesigned the homepage and the course request function to emphasize our app’s special feature. This flow has been designed more logical and clear to follow. We added the search and request functions to the initial part of the homepage with a folded button. Following is the recommended workshops nearby and popular topics of courses. In this way, we would both satisfy the users with the strong will and clear mind as well as those not having a clear idea about what to do. As for the search and request part, we select the necessary info requirement to ask our users to choose, after that, they would be led to a general result page where they could sort the results according to the filter they value the most. Besides, the brief intro of each result would contain the name, price, distance and time. What’s needed to be noticed is that after the request confirmed successfully, users could not only check the progress under “MY COURSES”, but also could see it on the homepage, where would appear a instant message to remind the users.

Theme Color，Name & Logo Design

Since the wireframe part, we’ve decided the general range of color theme. Purple or Cyan. The reason why we choose these two color as potential choice is according to the main target of our app: the young people. Thus, we would like to leave the users with a energetic and young impression. Besides, these two colors also relax and clear people’s mind, through which they could settle to learn something new.

App Name: Courcal

This name comes from two words: course + local, which means the easy-approaching local courses

Slogan: Customize your class easily!

LOGO: Giant letter C overlapped with a cat shape.

March 10, 2019April 7, 2019

Week 4 – UX-Updated Persona & User Flow & Wireframe-Milly Cai

Partner: Daisy Chen

This week, Daisy and I updated our persona, improved the user-flow chart and drew the wireframe of our APP.

Persona

This week we add the “scenario” part to the two personas we made last week. Besides, we made two more personas to further distinguish and position our target users. Last week we made one persona for the teachers and students(female) respectively. This week we made the persona of the male students and another type of teachers with a different personality and teaching fields.

Here are the personas we have so far:

Students:

Teachers :

User Flow+Wireframe

Using the draw.io, we drafted the basic user flow of our APP and developed the wireframe based on some key functions. And we mainly emphasized the division of teachers and students group at the beginning of logging in. After that, we grew up two user stream, which contains different working process and focuses. For example, as for students, the basic step is to narrow down the users’ demands by sorting the courses by their interested areas. Then, it’s the form of the class: personal or group class. Finally, it comes to the requesting page. This procedure follows the common logic and values of the student users when they are looking for a class, which we’ve got from our users’ survey. As for teachers, the logic is sort of different. As the biggest concern of our potential users is the quality of the teachers on this platform. Thus, we put the portfolio and certificate verification at the first step of signing up a teacher’s account. This step might take several days as a working period to ensure if the material offered by the teachers are veritable. After this step, besides the class offering part, the rest of the teachers’ flow just intersect with the students’ flow: the class requesting & accepting the part. In addition to the service in the beginning part of the teaching, we also take assistance during the learning process into our consideration. This problem has initially mentioned by one of our teacher interviewees. We trying to engage our platform into the learning process of the classes, which take the role of after-class assistance to support these teachers. In other words, this model is referring some existing educational apps in the market, which helps the teachers send the homework, reminder; and upload a series of samples, exercises or even play as personal learning assistance. This inspiration comes from the interviewee who is teaching baking. She suggests somehow an assistant help in the class. Thus, we are planning a (voluntary) learning assistant system who keep working with the class to help online or offline depending on the class’s type. This role could answer the problems related to the class content after-class in case that the instructor is too busy to do so.

Here’s the user flow:

For this stage and the further development of the UX design of our app, we want to focus more on the student side. Therefore when designing the wireframe we mainly draw out the pages of students port. We try to make this page as clear and brief as possible. Thus, only necessary words and icons would be included in the pages, and there would a responding page to ensure your activity after making each action of requesting a course. But still, this wireframe definitely still need to be improved and we would continue working on it in the following weeks.

Here are the wireframes:

Registration

Course Tracking (in progress, comment, history)

New Course (Find the existing class)

Class Request (Personal & Group):

Request Comfirm:

March 8, 2019March 8, 2019

Week 4-JS Conditional Exercise – Milly Cai

Here is the link to the page:

http://imanas.shanghai.nyu.edu/~yc2966/week04/index.html

The final view

Code

Problem & what learned:

As the exercise requires us to loop the actions. Thus, I created an if-conditional loop, which checks the time you click the button by calculating the remainder of the clicking times dividing by 3. It works well.

The biggest problem I’ve met in this exercise is that I used the getElementsByClassName to assign the value to the variable I created in the javascript file. As a result, it always turned out to be an error in the code getting the element. After asking Cindy about this problem, I learned that get a class name will offer me an array, which I need to call the index of the element to get what I want exactly; while getting element by the id will directly lead to the exact value. This is a useful lesson for me.

March 7, 2019March 7, 2019

Week 4-Comic project-Milly Cai

I’m working with Ying. Until yesterday, my partner would like to change the storyline, as a result, we haven’t started the website designing yet—— because the work I’ve done so far all followed the previous story setting that we’ve decided. According to what we’ve planned before, I’m responsible for the visual part, which includes the character expressions and most of the scenes drawing.

We decided to mainly use the scrolling to keep on the story and clicking the evidence in the scene to interact with the reader, which might trigger the conversation between the reader’s character and Pikachu.

Though this comic’s inspiration comes from the game, which also makes this comic’s interaction quite like a game, my personal opinion is still to tell our own story that differs from and also beyond a game. As the original setting of this story is about the pokemon with his passed-away master, somehow it also reflects the relationship between pet and pet owner in real life. Follow this idea, our initial plan is to make it closer to our daily life, thus, some of the simply game-like models should be discarded(eg. idea of completing a level mission, weird/unreasonable cause of the mission… ) Even if it’s a tiny story, it still deserves a logical and reasonable storyline. Therefore, maybe there should still be a discussion before we settle down the story.

Here’s the work that I’ve done so far:

As for detective Pikachu’s expression:

Attack:

Find the evidence/when the main character make the wrong choice:

As for these two gestures, I created the GIF image to make it more moveable and vivid.

Speak to show his own opinions:

Shock:

Common look:

Sense for danger:

The cover design:

Female character:

Male character:

The abandoned apartment (But probably be discarded due to the changing story):

Outside view

Hallway view

March 3, 2019March 31, 2019

Week 3 – User Research – Milly & Daisy

SURVEY/QUESTIONNAIRE/INTERVIEW OUTLINE DESIGN/RESULT

The purpose of this survey is to help us get a big image of our potential users. We want to figure out who might be interested in this kind of learning platform and what’s the touchpoint of these users. Milly and I worked together on discussing the questions of the survey, reaching out to

Interviewers and inviting people to take the survey.

QUESTIONNAIRE/INTERVIEW DESIGN

Personal information collection

To study how the personal experience might infect the learning experience, we collect information about gender, age, personality, job and major.

Learning experience

In this part, we aim to know more about the “goals” and “frustration” (two parts of the persona template) of our users. Therefore, we design questions to know more about what motivates them to learn, what’s their expectation of this learning activity and what kinds of the problem they encounter in the learning process so that we can take all of these concerns into account when designing the product.

The interview aims to collect qualitative data, so we choose people who are students, teachers and site providers in order to know more about their concerns and what might attract them to use this app.

Questionnaire/interview result(details see persona)

For the quantitative data, our questionnaire has received 95 answers this week. And for the qualitative data, we interview 2 teachers, 2 students, and 1 resource (like the site, equipment) provider.

Here are some charts that visualize the data we got from the survey:

Interview

The teachers’ attitude towards online platforms is mainly divided into two groups, willing to cooperate or not, especially for offline courses. Different types of teaching prefer different time-span: for example, music learning should be a long term learning while bakery could be just a one-time course. The main questions they concern are as follows:

The teaching fees (compared with they finding the student by themselves)
Platform’s credibility
Students quality
Environment: as most of the teachers don’t want to change their teaching places frequently

Most of the students are familiar with these online learning platforms and also willing to use them. The question they concern the most is the quality of the courses and the responding system of the courses. The group booking choice could be popular for most of them choose to study with their friends or classmates in school.

The resources provider is willing to collaborate with this kind of platform and prefer long-term collaboration. They are also willing to offer other resources like the equipment, teachers and drinks as long the price is fair, which is one of their main concerns.

Improvement

(Special thanks to the feedback of Prof.Azure)

Use simpler expressions and make the logic of question clearer for people to understand
The question setting can be more related to the functions of the app (need to have a more concrete idea of the app before)
Set the questions in sequence, from easy to hard

Author: Yumin Cai