Qianyi Chen – Page 4 – IMA Documentation

March 17, 2019March 17, 2019

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

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 17, 2019March 18, 2019

Week 5 – Interactive Comic Project -Daisy &Anica

Link

Description:

Our comic project is about telling a story from a dog’s view. At first, it is abandoned by a business people and then becomes homeless on the street. Then it is saved by people in a shelter, adopted by a girl and lives a happy life.

Process:

The teamwork of this comic project is that Anica is responsible for most of the visual assets part while I am responsible for the coding. It took us a lot of time to prepare the visual assets since we need to save several pictures in sequence. For example, for one image with 5 panels, we need to save 3 version in order to show these panels in sequence by clicking.

At first, we tried to position the text bubble using js but it turned out to be too much work so we added them into the image( but it’s still lots of work though).

For the coding part, I referred to several online tutorials and library in order to add more interactivity to our comic project. The user can interact with the page by scrolling, clicking, and moving mouse. There will also be some special effects when the mouse hovers on the image. The effect I choose is according to the specific content. For example, when the image shows a dog running on the way, I used “pulse” effect to imitate the first person perspective. When the image shows that the dog is frightened, I chose the buzz effect to express this feeling.

Meanwhile, we also design the transition between the scenes using the blink gif. The “blink” shows that the dog is in another place. The transition between different scenes also means different turning points of the story.

Screen recording demo:

Post Mortem:

Our final result meets 80% of our initial expectations. The regret is that we didn’t have enough time to add audios and background music and show the text bubble in a more fancy way. But in general, we accomplished most of our goals like showing the panel by clicking or other interaction. The hover effect of the box is better than we thought.

I also ran into many bugs and issues during coding. For example, though I change the cursor style in the css file but it doesn’t work in the browser. Finally I found that it works well on other computers so it might be an issue of my computer setting (though I still didn’t find the issue in the end). Another big trouble I encountered is that I found my o’clock function didn’t work at some point, meaning there is not response when I click on the image. Finally it turns out that it’s because I didn’t delete the opening image (the blink.gif) and it is covered on the top so I can’t actually click on other images. We have lots of improvements to do for this comic project, especially more meaningful interaction. The hint of interaction can also be improved.

Special thanks to Cindy who helped me check many bugs and Moon for checking the wired cursor issue:) And big thanks to my partner Anica’s good work 😀

March 10, 2019March 10, 2019

Week 4: UX-Updated Persona & User Flow & Wireframe-Qianyi Chen

Partner: Milly Cai

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, 2019

Week 4- js condition exercise-Daisy Chen

Link:http://imanas.shanghai.nyu.edu/~qc532/week04/

For this weekly assignment, at first I want to write a counter that increases the number every time I click. And I tried clickcounter++ and clickcounter=clickcounter+1 to realize it but neither of them works. The console can’t read the counter number in the inspector and I still didn’t figure out why. Finally, I used a simpler way which is to change the counter number to indicate the change of walking state. But I’m still curious about the reason for the previous failure since I wrote similar things last semester in processing and it worked but this time it doesn’t work in js.

March 7, 2019March 7, 2019

Week 4 – Comic project update – Daisy & Anica

I worked with Anica in this comic project. Anica works on the drawing part and I am working on most of the js and interactivity part.

Here is the screenshot of part of the storyboard:

To make the dog’s perspective closer to that in real life, we also collected info for reference. (e.g, the color perception, the eyesight)

So far we’ve finished the script for the whole story and started working on the scenes in details. Here are some draft and scenes from Anica:

I also used the photoshop and ai to edit some pictures found on the Internet so that they have a unified style. Here is the edited background:

For this week, we aim to finish most of the visual asset and start working on the coding part. After receiving the feedback last week, we found that how to balance the interactivity and the storytelling is a big question for us. Therefore, our next step is to figure out what exactly can we do with the interaction.