[Capstone] Final Writing Assignment with video and presentation slides

Final Writing Assignment: (Snapshot to the new media company)

My. Constellation is a website that generates a personalized constellation for you based on Chinese Taoism Bagua interpreting your voice and birthday. The project aims to link generative arts, personalized design, and voice recognition together. It questions how the twelve zodiac constellations in Greek culture and the twelve animal constellations in Chinese culture represent the masses. It tries to redefine the relationship between individuals and the vast universe by generating a unique constellation for a user. With a simple but well-designed user journey, a user will experience delightful moments on how his information builds his own constellation in a real-time. The project is fully designed and developed by Nan Zhao, showing case her strong UX discipline and programming skills. With the goal of designing for everyone and conveying an immersive feeling, Nan applied WebGL and react.js to building a website. Voice recognition API is implemented for using voice as a representation of individual identities.

   The project applies Chinese Taoism interpretation for a meaningful as well as a systematic design system. The Taoism at the same time enables the project to have a stronger connection between individuals and constellations. Nan used Bagua graph (a motif incorporating the eight trigrams used in Taoist cosmology to represent the fundamental principles of reality) as the base to map personal information into the design. Users’ birthday is interpreted by Chinese Sexagenary Cycle to be mapped on the Bagua as the initial positions of the constellations. Then the voice data is analyzed and transformed into physical forces applying to the stars with Chinese twelve semantic scales. What’s more, the 3D visual outputs and the interactive interface will leave a strong impression on the users, distinguishing itself from the mainstream 2D static designs.

   The project is motivated by the designer’s observations on people’s eager to have their own representations in the universe. It echoes the increasing importance of generative art pieces, personalized design representations, and the application of voice. It is also Nan’s journey of exploring the computational expression of the beauty of nature and meaningful design system for personal information.

Project Video:

Presentation Slides:

the pdf version (Google Drive)

the keynote original file with notes (Google Drive)

[Reactive User Interfaces]Competitive Analysis & User Stories

Target User:

Graduate Program (Design focused) Administrator

UE/UX/UI Designers in the industry


For me: need an online portfolio for 

  1. Show my UX/UI professionalism (problem-solving, design thinking, visual capabilities)
  2. Show my competitive advantages: coding, interaction design, installation/tangible interactions

For Graduate Program Administrators:

  1. Through the portfolio, they can know if the candidate(me) is qualified to the program.
  2. Do I have the skills, thinkings, and do I benefit the program itself.

For designers/recruiters in design industry:

  1. If this designer(me) is a good UXUI designer?
  2. Does she have the qualification they are looking for?
  3. Do I have the skillsets or do I know the software they are using currently?
  4. How can I get to know her if we want her resume or
  5. How can I know more about her?


Portfolio Competitive Analysis Summary:

My focus is on the project-based portfolios.


  1. Photography/Image focused
  2. Blog-like, text-focused
  3. Project-based


  1. Grid
  2. List
  3. Nav on the left
  4. Nav on the top
  5. Hamburger menu
  6. Landing page

Information Architecture:

  1. Work/Personal/About
  2. Selected/ All / About
  3. Global footer, nav bar

Click to read more!

Continue reading

[Reactive User Interfaces] Idea for final project

For the final project, I will redesign and build my personal portfolio.

The project will be an interface which showcases my professionalism and skillsets. At the same time, it showcases me as a creative/interesting individual.

My goal:

  1. [Career] Showcase my professionalism on UX/UI Design
  2. [Graduate School] Use this portfolio for applying for Graduate School

The target users:

  1. Graduate School Registrators/ Professors
  2. People in my industry (UX/UI Design)

The characteristics that distinguish my UI from what currently exists are:

  1. Will be completely coded and developed by myself
  2. Use react.js for module design that showcases my web development skills
  3. Better organization on different categories (Work/Experimental/About Me)
  4. Will show my other skillsets as experimental projects
  5. Interesting interactions when people navigate my website

Monday’s paper prototyping Session:

[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.