Lab 3: Simple Vehicles

Step 1: Assembly

The assembly went pretty smoothly for me. At first I was intimidated by the chinese-only instruction manual, however I quickly realized that it was actually picture-based. One part where I slipped up is with the screws — since the quality is pretty cheap, it’s easy to strip them which makes it hard to fix. After stripping one screw, I made sure that didn’t happen again. This assembly process taught me to be patient, as many of these screws and components require you to work slowly in order to ensure that nothing breaks.


Step 2: Testing

Cal and Cat User Flow + App Redesign

For today’s class, we had two exciting tasks.

The first was to create a user flow map for how our app would work or atleast the basic functions of it. We kept it fairly simple given our idea is still in prototype; however, this encompasses alot of it. It took a little of reiterations but we finally got there.

Originally, I tried to write the User flow on a paper; however, it was extremely difficult given my poor handwriting skills.

As you can see the above is barely better than chicken scratch. Anyways, here is our final version. The rounded square boxes are tasks/actions, squares are pages, and triangles are decisions.  



Our two 8 square projects depicting the problems people may of had.


On the other hand, we also had the opportunity to reorganize the PopOn app which was actually very exciting. Overall, the App is a complete mess and has way too much going on and we believe our after picture solves those.

Before: (Oh Lord, even looking at this gives me a headache… WHAT’S GOING ON?)



A Brief Blurb about what we did…

We thought that many of the features were redundant, which was confusing, so we narrowed the 5 main categories to 4: the globe, your clan, videos, and account (we moved the “training” feature to your personal account).

The globle feature is used to find new tutors and matches, have calls, etc. The clan section is like your timeline: you can see who you’re following/who’s following you, message them, comment/like/tweet at them or on their posts, etc. The video section is where you can explore and discover new friends, see worldwide popular videos or videos recommended to you, and also see the livestreams. The account section is all your own personal information. You can track your own personal training (see how long you’ve spent learning, etc etc) and see your chats with tutors.

Dear Data Shanghai–Ann(Candy)

This is a map that I made to note down my feelings in different weather in Shanghai during the last week. It provided information of how strong the wind is and how is the weather and also my feelings. My inspiration comes from the complaints about the rainy days I heard in the past week(It really rains a lot).

To directly present myself, I drew 7 little characters, representing myself in the seven days. They all have similar outfit for this is not my focus. The weather is straight forward: with five days raining , one day with clouds and one day in the sun. The wind on the other hand is shown through the character’s hair and the angle of the umbrella she is holding. I made the umbrella yellow so that the map looks better. It seldom keeps rainy for so long time in Februry in Shanghai. For me I do not feel so comfortable when it rains since my shoes would get wet and it would be sultry even indoor. I drew some black dots ahead of the 5 characters in the rain to express my resigned feelings, and of course the dots keeping accumulating. On the last two days on my map which sun starts to come out. There grows a little plant on the head of the girl to represent her happiness. It feel like a cute and efficient way to map my feeling in this way.

UX Design Documentation- Project Idea + Story Board: 3D Cake Lab

Project Idea:

Our project idea revolves around a cafe that specializes in custom 3D printing designs on cake. Paired up with a mobile app and website, customers will be able to choose any design they want to be 3D printed on a cake they ordered. They will also be able to watch the process of the machine printing the design on the cake. These customizable designs could be great for any occasion- anniversaries, weddings, or birthdays. Customers can also place the order online or through the app and get the cake delivered. With the cafe, it will attract younger customers who are looking for something more than your average cafe and have something unique to take a picture of to post on social media like Instagram.

Story Board:

A group of friends are hanging out and they’re thinking about what they should do.


Then they see the 3D Cake Lab which stands out from all the other cafes.

They’re surprised that you can design the cake from an app.


They watch the design being 3D printed onto the cake.

They are happy with the results and take a picture to post onto their social media. They receive lots of likes and comments on their Instagram post and are happy.


UX Design: Guidio Documentation

Originally, my (Callum) intended idea was an electronic music service that links Chinese fans and international artists together by managing the artist’s social platforms in China. You can find my story below; however, I soon realized this would be a hard project to do as there is no defined product since it is a service. Furthermore, my partner Cat didn’t love the idea; however, she wasn’t that invested in her idea either which was an app that brings female travelers of the world together to share their personal tips, experiences, and suggestions in one place…. So given that we decided to think of something new which lead to the greatest invention of the 21st century…….  GUIDIO


This is our map for our new app, Guidio


Guidio is an interactive and entertaining personal audio guide that caters to your preferences through computer learning. Our target demographic is millennials who love to travel, but simply don’t have the budget to afford the luxury amenities like a personal guide or tour group. Our app offers not only a personalized go at your own pace service, but it allows the user to dive into deeper topics they are interested in, while at the same time skipping over those that they may not care about because lets face it tour groups are flawed. You’re shoved into a big group, have limited time at each site, and half the time hearing information that goes in one ear and out the other… That’s not how traveling should be.

Below you will find how we produced our story board.

Cat and I meeting up to discuss our project (:

Building the story board

The Final Storyboard, Additionally, you can find the play by play below

We’re super excited to bring this project to life and cant wait to keep working on it!


UX DESIGN/ 3d Cake Lab

Class: User Experience Design

Instructor: Azure Qian

Documented by: Amber Wang

Given the fact that 3D printing technology has become a huge hit in nowadays world and the implementation of 3D tech in food industry has achieved unprecedented development, the idea I have in mind is to open a 3D cake design bakery that allows customers to customize their cakes using 3D modeling apps on mobile phones and tablets. The bakery allows online ordering as well as in-store interactive experiences. One major form would be a 3D modeling App that is very user-friendly. The interface would be similar to Tinkercad website. The users could simply use their fingers to drag the basic 3D objects (cubes, balls, characters, texts ,etc.) to the working surface (the 3D cake model), scale them and change different colors and shapes. They could also use these basic shapes to design their own characters. The bakery would have an interactive open space for customers to actually see their cakes being printed from the 3D printers. There would also be an interactive projected screen for customers to upload their own designs and vote for the best design.

Please see the following demo of the 3D food printing technology:

The idea board for the project is as follows:

The concept story board:

It was a beautiful weekend afternoon. Three best friends Amy, Lisa and Catherine were walking aimlessly on the street. Since they were the coolest girls at school, they decided to go to some really cool place to spend their afternoon. Somewhere they could take very attractive pictures and post on Instagram.

Lisa recently heard that a new bakery opened nearby. They decided to give it a try. “3D Cake Lab…?” There were no waiters to serve them. Rather they had a big iPad in front of them.

On the interface, there were all different 3D shapes on the right side of the screen. Catherine dragged one ball and two pyramids to create a shape of cat. Lisa and Amy also joined the design. They changed the color of the cake to pink and typed “Happy Day” on the surface of the cake. After pressing the “submit” button, they received their order number. They were then directed to a 3D printing machine. They couldn’t believe their eyes. What they have designed in the App was actually being printed out as a real cake!!!!!!

They brought their cute cake back to the table. They celebrated their friendship. They took a picture of the cake a selfie, and then posted them on the Instagram. In just 30 minutes, they have received 123456789 likes! What an amazing day!

UX Design | Idea Board + Storyboard | Se)( App (Forum)

Class: User Experience Design

Creator: Yang Gao

Project Name: Se)( App (Forum)

Project Idea Board: 

The lack of sex education in China has led to many serious health issues and social problems. So for my UX Design project, I want to create a sex education app (forum) for children, teenagers and their parents in China. The goal of this app is fun, interactive and easy accepted, given people’s acceptability of sex education. Also, I don’t want the users to feel that they are taking a course using this app (forum), but  ‘learning’ while play.

When login into this app, the user can choose their age range and the app will generate the appropriate content. The content is divided in few parts for users to get the information, like comic books, animation/cartoon, interactive games(in terms of what kind of games, I’ll take Swift Playgrounds App, a game that you can learn coding while adjust/play the character, as a reference), interactive stories, speeches (TED, TEDx…), TV shows, volunteer community, etc.



TapTo – A New Way to Interact with Friends

What I proposed is a mobile phone App which can build an indirect and gentle way of interaction between friends as a way to solve social anxiety.

It focuses on the problem that young people are becoming more and more sensitive with their relationship. They want to avoid useless interaction and are afraid to join conversation with strangers. This App aims to provide a new way for young generations to interact with their social network. The core function of this app is to send vibration to friends near you via their phone. To encourage a face-to-face conversation, this app doesn’t have a text function. The user interface is designed to simple but allows users to go deep into different functions.

This storyboard describes one of the using scenarios:

One day you are walking in the campus while you see one of your friends is talking happily with a stranger. You definitely want to say hi to your friends but afraid to be awkward to join their conversation. So you pick up your phone and open the TapTo. On the screen you can see the icon which represent your friend and you just tap it to send a vibration to your friend. Your friend notices the vibration and picks up his phone to check out. Then he notices it’s you that send his this vibration and you are there, just near to him. So he reaches to you and talks to you, leave the stranger aside.

I consider this App a way to achieve a new form of interaction between young people. Other new function may be added to it in the later research.


NOC – Week 1: p5 basics (Wentao)

For this assignment, I mostly focused on the function of mouse position and mouse pressed function.

When moving the mouse around the canvas, you can change the background color according to the position of the mouse.

When you click the mouse, a white ellipse will appear at the position of the mouse and will move around with the moving of the mouse.

When you press the mouse, the size, color, and transparency of the ellipse will change randomly. And when you stop pressing the mouse, the color will change back to white again.


let a, b;

function setup() {
  createCanvas(400, 400);

function draw() {
  background (mouseX*255/width,mouseY*255/height, 0, 12)
  if (mouseIsPressed){
    a = random(10, 60);
    fill(random(0,255), random(150,255))
  else {
  ellipse(mouseX, mouseY, a, b);

Nature of Code: Week 1 assignment–Moon(Candy)

Documented by: Candy Bi

Project name: Drawing Board

Professor: Moon

Date: 2/19/2019

final(video version)

For this assignment, I started without an idea of what I want to do, rather I choose to experiment to see what I could get.

I start with a red background with some moving rectangles. I make the background transparent so that the three reactangles could leave trails.

I then draw a white ellipse that would move according to mouse:


For some improvments I use the “mouseIsPressed” to create the effect that only when user clicked there would be the white circle:


I suddenly came up with the idea to make th white circle a bouncing ball that would bounce whenever it touches the three rectangles. It turned out a failure.

I then shift to the idea of playing around with lines and this is what I got:


For better visual effect, I made the other side of the lines ramdom in a certain range ( inside the big rectangle the three black moving rectangles formed). It somehow gives the feeling of modern arts: