[Capstone] Week7: Feedback from week6 user testing


  • reading a poem to limit the uncertainties
  • a real astronomical position for users(Celestial coordinate system)
  • Change the icons & some namings of buttons
  • Orbit Control > auto rotation
  • Mood & voice
  • Lack “己” on the bagua pattern used


User Testing


[User flow] Do they understand the flow of the website?

[Understanding] Is there any confusion about the information architecture, the naming of the buttons, which button is for what?

[Save] If you save it, what type of file you expect to download?

[Control] Do you expect the constellation to rotate/move by itself or by your orbitControl?

[Design] The Mapping System

Suppose you are required to find the connection between your voice and constellations, what can you guess?

Can you describe your personal constellation? Shape, color, movement, etc.

Observe the testers reaction on my mapping system. Do they have questions or confusions?

Test 1: Shawn, Computer Science background


  1. [Menu Page] – Naming: confused about “Learn More” (credit, constellation WIKI), maybe “About the project”
  2. [Generate Pages] – Understanding on icons & features: confused about the icons. Tried to move mouse & hover the icons for further explanations
  3. [Generate Pages] – Suggested reading a poem with the same information for less bias.(ex: read a poem)
  4. [Generate Pages] – control: expected to control the constellation by himself (instead of auto-rotation)
  5. [Finish Page] – Understanding the writing: thought “Share” is to share on social media platforms instead of “Upload”
  6. [Finish Page] – Expectation: Save as an HTML file; suggested to have a specification about a moving model
  7. ** [Generate Pages] (icon在右上角,点击出现浮层,横向显示星座一点一点生成的样子) Suggest an additional floating page(expansion panel interface), showing your progress of generating the constellation

[Design System]

  1. [The pattern used] lack “己”
  2. frequency -> k -> the force among stars

Tester 2: Chang, Data Science background

[Learn More Page]

  • user feedback
  • about the artist
  • explain how it works

During the testing

  • confusion about the icons (sound & microphone)
  • do twice, different results
    • repeat their voice for several times

Tester 3: Yiyi, Finance BG


  1. [Menu Page] – Naming: Learn More” – Project Idea, Designer info
  2. [Generate Pages] – Understanding: understand the icons well
  3. [Finish Page] – Expectation: save as “screen saver”/ image. Maybe choose different types of files.


  1. Any relationship with the western twelve zodiac system?
    1. For example, start from Sagittarius(射手座), then gradually becoming a personal constellation with Chinese characteristics.
  2. Mood & Constellation
  3. Hope to have a real astronomy position of her constellation
  4. After seeing my NOC project, hope to see the little stars explode and spread out when inputting the voice

Tester 4: Richard Huang, China Study BG

[Relationship between sound & constellation]烟花 – 有声音, Fireworks(like constellations, shining & have sound) * There is a changing process. Sound should be live.

ex: ios – 指纹扫描效果 (Process indicator animation)

How the sound shape changes the angle among the three axes of shapes.


Tester 5: Jennifer

尖锐的声音 – 密集的, 清亮的

沉的声音 – 扩散的, 浑浊的


Week6 – Project Progress



  1. Birthday Mapping
  2. Sound Mapping
    (Chinese) Equal temperament
    1/The frequencies corresponding to the equal temperament

    十二平均律中各音的频率(0.00001 Hz):
    C4: 261.62557 Hz
    #C4: 277.18263 Hz
    D4: 293.66477 Hz
    #D4: 311.12698 Hz
    E4: 329.62756 Hz
    F4: 349.22823 Hz
    #F4: 369.99442 Hz
    G4: 391.99544 Hz
    #G4: 415.30470 Hz
    A4: 440.00000 Hz
    #A4: 466.16376 Hz
    B4: 493.88330 Hz
    C5: 523.25113 Hz

    2/The “DiZhi”/Lunar month corresponding to the equal temperament

    孟春之月,律中太簇;   寅(Janurary)
    仲春之月,律中夹锺;   卯 (Februry)
    季春之月,律中姑洗;   辰(March)
    孟夏之月,律中仲吕;   巳(April)
    仲夏之月,律中蕤宾;   午(May)
    季夏之月,律中林锺;   未(June)
    孟秋之月,律中夷则;   申(July)
    仲秋之月,律中南吕;   酉(August)
    季秋之月,律中无射;   戌(September)
    孟冬之月,律中应锺;   亥(October)
    仲冬之月,律中黄锺;   子(November)
    季冬之月,律中大吕;   丑(December)


  1. Calculate the TianGanDiZhi Calendar based on your birthday (Sexagenary cycle) with javascript
  2. Basic user flow interface with React.js
  3. Read SVG in three.js, get vertexes information, and generate geometries & meshes
    屏幕快照 2018-03-12 上午9.38.12
  4. Studied on three.js basics & advanced:
    1. Particle system & the use of HTML canvas to draw texture and map() it to the material -> create a shining effect
      function generateSprite() {
      var canvas = document.createElement('canvas');
       canvas.width = 16;
       canvas.height = 16;
      var context = canvas.getContext('2d');
       var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2);
       gradient.addColorStop(0, 'rgba(255,255,255,1)');
       gradient.addColorStop(0.2, 'rgba(0,255,255,1)');
       gradient.addColorStop(0.4, 'rgba(0,0,64,1)');
       gradient.addColorStop(1, 'rgba(0,0,0,1)');
      context.fillStyle = gradient;
       context.fillRect(0, 0, canvas.width, canvas.height);
      var texture = new THREE.Texture(canvas);
       texture.needsUpdate = true;
       return texture;
    2. Tween.js for easy animation – *There is also tween.js for react
      屏幕快照 2018-03-12 上午10.25.11
    3. shader – built-in shader & external shaders – 五行元素may use this
      屏幕快照 2018-03-12 上午10.02.47

      1. BloomPass(built-in shader) for shining effect
    4. [Questioned. May just use one scene] Combination of threeJS scenes using THREE.effectComposer(webGLRenderer)
      THREE.renderPass & THREE.shaderPass

      1. When the user types the birthday, they can see the live encoding of the Bagua birthday(1st three.js text scene) & then see the mapping of the Chinese characters.(2nd three.js scene)

[Reactive User Interface]Week5:competitive analysis & midterm research & user story

Table of Content:

  • iPhone address book app
  • Samsung S8 built-in address book app
  • Linkedin address book
  • Facebook address book
  • Covve
  • Sync.me


1. How can we forget the very basic built-in address book apps?

iPhone address book



  • Search bar is always on the top of the screen
  • The phone number of THIS iPhone is showed first
  • Sorted in alphabetical order & a fixed navigation bar on the right with alphabetical characters.
  • If clicking the navigation bar on the right, it will jump to the character you clicked. (Click “Y”, the page will move to the contacts that begin with “Y”) (BTW, love the tactic feedback)
  • What appears on the screen is just names
  • No sorting feature
  • No filter feature
  • Group feature at the top-left corner and “add” feature at the top right corner


  • Suitable for having a big number of contacts, therefore only names on the list.
  • The context of use is simple. It is to find a contact when making a phone call, so “search” is important, and only names appear on the list.
  • Because there is no sort or filter (because the user may not want to sort, they just want to find the contact they want), “search” has to be on the very top
  • “My phone number” is positioned first. I think it makes sense b/c I have always forgotten my number and go back to check the number, although in the common use of address book apps, it doesn’t make much sense.


Samsung S8 built-in address book



  • Search bar is always on the top of the screen
  • Yellow Page feature (that goes to another Samsung app)
  • “My phone number” is shown first
  • A navigation bar fixed on the right, only showing the alphabetical characters that my contacts have. Also, the “Starred” contacts are listed first.
  • The sorting order is “my phone number” – my contacts’ updates – Recently AddedRecently Contacted – the Alphabetical order
  • Contact information: only profile avatar images(the last name will be the avatar if there is no profile image info)
  • Interestingly, has the social feature – contacts’ latest updates
  • “Add” feature as a floating button at the bottom right corner (makes me think of material design)
  • No sorting or filter feature


  • Suitable for having a big number of contacts, therefore only names(w/ avatar) on the list.
  • The context of use is more complex than that in iPhone. In addition to letting a user find a contact when making a phone call, it also adds wiki(yellow page) and social features.
  • Yellow page for making it accessible to call organizations or institutions. However, I doubt how many users in China are using this feature. But the yellow page is also a built-in app that is in Samsung’s system, so maybe it is good to put it here.
  • Social updates make it easy for users to know the change of profiles. (Sometimes, when my friend changed information and I didn’t know, I could never know who was who then.
  • Reasonable good design for an app that is under a big umbrella of Samsung.

Address book feature in an app

Linkedin address book




  • No search bar (but on the previous page, that is a global search bar)
  • More contact information: profile image, name, position & organization, last connect time
  • Sorted in the order of “recently added” by default. But can also be sorted by first name and last name.
  • No navigation bar


  • Why I want to go to the connections page? 1. I want to find a specific person in my network. – So that is the reason behind the default sorting order that is by “recently added”, because the recently added connections are more possible to be the connections that I (a user) want to find.
  • Maybe better if there is a navigation bar.
  • Why sort by either first name or last name? In which context this feature will be used?
  • Profile images matter; the company name and position matter.

Facebook address book



  • Top slider bar: Search – Request – Contacts – Friends
  • Sorted by active/inactive
  • I can message my friend directly.
  • No sort/filter feature.
  • No search bar, but there is a global search bar on the previous pages.


  • The context of use: Emphasize a lot on dealing with new people or suggesting new friends. I guess the general user flow is to use the feature for searching unfamiliar people or adding new friends.  Therefore, “search” is listed first, while the list of friends is actually listed at the end.
  • Because it is a social app, so if a friend is active/online matters more than that in a traditional address book.
  • Can bee better if intergrating the friends’ update here like Samsung does. So I know who has changed the profile image or user name when I am looking for a friend.

Address book apps in the market(I did it in class, so it’s in Sketch app, below are the screenshots of my notes.)

屏幕快照 2018-02-27 下午11.32.03.png

屏幕快照 2018-02-27 下午11.32.15.png

The user is not correct! It should be used in more social context. So not businessmen or career people.

My user stories

First, what the app will do according to the midterm requirements:

  • Display a list of 10 contacts with name, address, phone number, and email address.
  • Search the list by entering a search query into a text input
  • Sort the list ascending and descending based on names
  • Filter the list by country (Pressing “China” will show only contact living in China)

My Thinking:

  • Who will use the address book? For what? In which context? What is the user story?
  • Why the user needs filter feature that is by country?
  • Why the actual address is needed?

My User: Administrator/Registrar officers in big international university/colleges. 

They will need the features to see candidates’ and students’ address so that they know where to send important documents like offer letters. They face candidates or students from all over the world, so filter feature of “country” is important.  (However, I still could not figure out why sorting the list ascending and descending matters.)

The user stories:

  • As an officer in NYU Registrar Apartment, I can search a student name to find his/her address information so that I know where to send an official certificate.
  • As an officer in NYU Registrar Apartment, when I clicked “China” in the filter window, I can see all the Chinese students, so that I could know how many Chinese students are in NYU now. [filter page needed, show all the countries]
  • As an officer in NYU Registrar Apartment, when I clicked a certain alphabetical character on the right navigation bar, the app will jump to the students with the name that begins with the character I clicked.
  • As a user, when I clicked “sort” button, I can choose sort by the first name or by the last name.
  • As a user, when I clicked the little arrow beside the “sort” icon, I can see the list in ascending and descending order.
  • [Additional features below]
  • As an officer in NYU Registrar Apartment, when I want to delete all the candidates that the university refuses from the address book, I can click “manage”, and multi-select contacts, click “delete”.
  • As an officer in NYU Registrar Apartment, when I slide to left(iOS), or hold the contact component(Android), I can choose to email/call/see details/delete with the contact.
  • I probably want to know in which program a student is or in which program a candidate is applying.

[Reactive User Interfaces] Week4: IMA poster generator & threeJS!

Github repo:



  • Add threeJS object(animated) controlled by react to the poster as the background (code optimization needed & if statements for a little bug)
  • Pre-filled information
  • Next: give alert & instruction when the time or name is in a wrong format. (ex: the event name is too long; the time contains no number)
  • Next: responsive design. The camera’s position and the scene’s size will change according to the window size.

My Questions and Struggles:

  • z-index & position:absolute
  • lightening needed to show the color of the cube
  • send Geometry changes from App -> Poster -> Shape composition, wondering if I have too many compositions.
  • when I return this.state.value instead of e.target.value in onChange(e)function, the output will be delayed. For example, I chose “box” from “none”, then chose “sphere”. The shape appearing on the poster would be boxGeometry instead of sphereGeometry.

[Reactive User Interfaces] Week 3 HW – Button, State, Events

My Github Link to the homework

My Process

  1. Let App (the handle for all) knows a button is clicked by passing a function to Button.js
    1. When setting up the buttonHasClicked function in App.js, when binding the function to “this”, I added extra (), which will call the function and make the return value bind this. It will mess up everything actually. It should be like this.buttonHasClicked = this.buttonHasClicked.bind(this);, not this.buttonHasClicked() = this.buttonHasClicked().bind(this);
  2. Let App.js knows which button is clicked.
      1. In App.js, set up a state called “selectedLabel”
      2. ln Button.js, when clicked, returns this button’s label
      3. In App.js, update “selectedLabel” as the current clicked button’s label using setState function.
      4. In App.js
        buttonHasClicked(currentLabel) {
        selectedLabel: currentLabel

        In Button.js
        buttonClicked(e) {
        return this.props.onClick(this.props.label);

        when a button is clicked, call the buttonHasClicked function in App,js
  3. add boolean value called “isSelected” to the buttons,
  4. using if statements to switch the value of isSelected among the three btns
  5. Inside Button.js, apply different css values between isSelected and !isSelected
  6. Download the image and using PS to see all the CSS I need to apply, including the colors, border weight, width, height, etc. Also used flex.
    1. Accessibility: I didn’t set the default outline (the wired blue light border) as none. Instead, I made the border 0px. So that people with visual disabilities can still know which button is selected
    2. At first, the three buttons are not “space-between”ed, I figured it out later that I needed to apply “display:flex” again in BtnGroup

My Thinking:

  • Having the function with parameters is important to transfer information between components
  • Do I have too many if-statements? Now only have three btns so seems like it’s fine, what if I have a lot of buttons?

[Reactive User Interfaces]W1C1: As We May Think by Vannevar Bush

The homework is to answer the questions: Which similarities exist between what Bush describes and the computers that we use today? What did not come to fruition?

I answered the questions based on each section of the reading. So each section has its similarities and aspects that didn’t come to fruition.

New ways to extend the record

Speaking of recording, it is not surprising to see cameras’ automatically adjusting the colors, exposure, brightness, etc. It is also common that a lot of cameras or mobile phones feature fast speed, small size, and sensitive sensors. One example I would like to mention is Google’s Pixel 2. I have experienced the built-in camera in a Pixel 2. I was amazed by how it processed a photo. A photo took in really dark space could look like be taken during daytime and it felt natural!
In addition, technologies like Google glass(really like the heading image of the reading), Go Pro, and unmanned aerial vehicle further extends the using scenario of recording. 

What didn’t come to fruition:
Bush mentioned “stereoscopic” and record with two spaced glass eyes. Yes, today, we can scan an object using only one camera and have a 3D model generated. However, what I am thinking about is solely by taking one picture with one camera can do the same job (instead of taking photos with multiple cameras or moving around the object). What if everything is in a virtual space? Is it possible to record something in 3D and project it in the real world(AR)?

Reducing the written record

Size: Thanks to the technologies, we can store everything on the internet or in chips.
Low cost & no need to prepare for the original copy: the internet and computers today make it possible to share and publish information with even no cost. Every piece is the original copy.

Record thoughts by talking one’s thoughts to a machine:

Similarity: Now we can speak to our phone and let it type the words for us. Sound recognition is quite developed today and it’s getting better and better. We even have many voice user interfaces design now.

What didn’t come to fruition: Bush talked about a physical interaction which hasn’t come true today: the keyboard types itself based on what it hears. It can be a really delightful tangible interaction design today.

The future image Bush predicted (about the investigator’s recording photographs and comments):
I didn’t really get what Bush was discussing. But I think only by phone we can review what we saw before or wrote before. It is also really easy to edit the original photos/videos with our new thoughts. What I am further thinking about is actually a VR experience which records everything we have done or wrote down. Then we could review our work in a virtual world with all the types of information we may need.
Languages: I think it remains room to develop about languages and translations today, especially when it needs to translate accurately in real time.

Simple Repetitive Thought could be done by machine

Similarity: Nowadays, almost for everything we are doing, computers help us, either by doing the calculations or by executing repetitive actions. I believe all the software we are using now can be counted as computers’ doing repetitive thought. For example, with the help of Adobe creative suite, we could really explore the limit of imagination because it offers so many features for us to make our own design in mind into the real world. We now even have machine learning and artificial intelligence. They enable a computer to do creative things based on what human created before. Today, a computer can even create a master art piece by analyzing other great artists’ art styles.

The human brain files by association – The MEMEX could do this mechanically

Similarity: It rapidly exists in today’s life. When searching something on Amazon or Taobao.com, it will show things based on association. Another more advanced example is what Google has done on computer vision. By analyzing an image and other images in the library, a computer can tell what the image is about and give another related image with the same object. This way of processing data is exactly how human’s brain works.


[Nature of Code] Final Project Documentation – Constellation

CONSTELLATION is a creative coding artwork/tool which generates users’ personalized, unique constellations.

Through the analysis of a user’s identity with Chinese Taoism Bagua Symbol and the implementation of nature algorithm into the programming, the project enables a user to see his/her own constellation that represents his/her identity. At the same time, the constellation itself is a living object that changes over time with the user.

It is also my exploration of using programming language and algorithm to represent the beauty of nature.

Continue reading