REACTIVE UI | Final Documentation | Habitree

Project Title: Habitree

Link to my Competitor Research: 

Habitree is a mobile habit tracker app with a clear and useful categorization of habits and a creative stimulation system, realized by a combination of p5 and React. The main reason why I would like to build this app is that I found the lack of considerations for habit classification in existing habit tracker apps. Also, there’s a lack of stimulation system that can motivate the user to go on. Therefore, my app has two unique features to solve these problems. First, it divides habits into two categories, “daily seeds” and “long-term goals”. The user can even further specify their needs and target for different habits. Second, I embedded trees that visualize the progress of each habit. Every habit has its own tree!

For the design aspect, I chose a clean and clear layout, thinking that’s what productivity app should be like, efficiency 🙂




Final Project Proposal: Dream Death Dress-up (Krom) & Documentation


Project Title: Dream Death Dress-up

Goal and Purpose:

My final project Dream Death Dress-up is a parody of Dream Date Dress-up, as I described in the Game Art analysis. Or, it is designed to be a parody of the traditional dress-up game genre. By altering the game scene from “date” to “death”, I aim at exploring three topics that intersect with one another: the societal pressure and standard on women connotated in dress-up games, the contemplation on death through a game experience, and the distortion of the common figurative meaning of death in video games.

In traditional dress up games, the player is expected to fulfill the requirement of some external forces. Sometimes, the force is a solid male figure, such as in Dream Date Dress-up. A male gives a standard look of a female, his “dream girl”, and the player has to dress up the same as the “dream girl” to win the game. Sometimes, the force is present in a more hidden way, in the expected style of the dressing like “lovely”, “sexy” or “sweet”. Either way, women are not supposed to decide for themselves what to wear and what to appear like. They can only follow the rules defined by the male society. This particular game genre shows women’s lack of control of their own bodies. By removing the male figure, the date occasion, and the compulsive requirements from these games, I intend to simulate the regaining of women’s rights of manipulating themselves.

When considering which occasion would be suitable to replace date, I thought of death. I noticed that besides the male-centered requirement for dressing, the occasion is also a problem in dress-up games. Only events like dates, balls, and weddings are included as if they are the most important events worth dressing up in women’s lives. In contrast to the male-related events, death is something that everyone has to experience and consider. The bias in occasion is removed. Besides, the process of manipulating one’s own death is a metaphor for manipulating one’s own life. Because the decisions related to death are the biggest decisions in life among all, dressing up for death is the most powerful protest against the societal oppression. The contemplation of death represents an independent and thoughtful behavior of an individual.

Moreover, I find it interesting to think about the use of death in video games. In most games, when the player loses, the character will “die”, as a metaphor. But what will happen when the actual death is included in video games? I would like the player to experience this shift in meaning.

As a parody, the basic game set will follow the traditional online dress-up games. I would like the player to feel surprised when first entering the game. On the one hand, the game procedure is so familiar with their childhood memory, on the other, the entire core changes. The game will put forward the topic of death in the intro part, and the decisions the player makes throughout the process require imagination and consideration. How old am I gonna be when I die? What am I going to wear, a dress or pants? Am I going to do makeup or not? Through these decision-making process, the player will probably fall into deeper contemplation on death itself. They will definitely participate more than in traditional dress-up games, for they are making decisions for themselves. The thinking process itself is a metaphor for women taking charge of their own lives. However, the author’s standpoint will not be shown distinctly, and it’s totally up to the player to decide how she feels.

As for the aesthetic style of the game, since I do not want to impose my own understanding and feeling about death on the players, I would choose a minimalist style. Meanwhile, all the options for dressing, facial emotions and makeups will be provided with symbolic images instead of pictorial images. For example, the option of a one-piece dress will be a simple outline of a one-piece dress, without any texture or detail. By doing so, the options will not be so limited and biased. The details can be supplemented by the player’s imagination because the focus of this game is to offer a space, detached from real life, where the player is able to think about death, and how she’s gonna dominate herself when facing death.

Project Design and Production:


(The final product would be in a simpler style than this)

The gameplay would be similar to the original dress-up games. At the beginning of the game, there will be an intro stating the purpose of this dressing up. Then, the player would have to go through the procedure of choosing the hairstyle, facial emotion, makeup, clothes, and background. The thing the player does is basically clicking to choose. I’m also thinking about letting the player change the body posture of the character by dragging the arms and the legs.

Regarding the art assets, I think I’ll probably gather some from free resources, and alter some existing ones. I’m still not sure whether to use Unity2D or to make it a web game.

At the end of this game, the character with all the dressing decided by the player will lie in the background that the player chooses. The player will be able to save this picture.


Link to the files: 


In the final version of my game, I took the “contemplation on death” approach rather than the parody one. The main reason is that I could not think of a practical gameplay to carry out the parody properly, and I’m still not sure about my standpoint on the gender topic. On the death contemplation topic, my emphasis shift from the broad “contemplation on death” into a more specific one, which is “the probable romantic characteristic and the inevitable cruel essence of death”. Correspondingly, I changed my gameplay from dress-up to scene construction.
When I was doing user-testing, I found that many people would think of beautiful scenes when imagining death. Many people used words like “quiet”, “stars”, “beautiful”. Compared to the traditional view that considers death dark and horrible, there’s definitely space to interpret death in a romantic way. However, the beauty can only last a moment. Everything, however beautiful it used to be, vanishes from the word when death comes. Does this cruel essence of death add to its beauty, or are people natively ignore the fact that death is actually “nothing”? I would like to explore this topic by letting people play with romantic sceneries in the death scene, and then watch everything disappear when death comes. The concept comes from a Chinese idiom “烟消云散“, which literally means “the smoke fades away, and the cloud vanishes”.
When I updated the proposal, I thought that I would offer a wide and empty landscape and many tags on a web page. The user can click and choose tags to build up their death scene, which includes dressings, sceneries, items, ages, etc. Some of them will be generative (the sea, the mountain, the forest) to provide an immersive experience. The aesthetic style will be kind of romantic and imaginary. When the player clicks “complete”, the scene will remain for some seconds, and then starts to collapse. All visuals gradually disappear into a smoke and finally, there’s nothing but blank white in the scene. Then the game ends.
In the final version of my game, I realized most of the ideas and made some more design choices to build the dreamy atmosphere. I used John Keats’ Ode to a Nightingale as an intro. The poet talks about imaginary scenes in his mind triggered by a nightingale’s song while he was suffering from pain and illness. I think it speaks to my topic in many ways. The motion of the title is not a random choice. In fact, it aims at revealing the topic: decorating “vanish” represents decorating death, while later, “vanish” along with its decoration vanishes, showing the “void” essence of death.
In the main game page, I kept a slow pace of all the motions in order to create the quiet and unique atmosphere. I carefully picked items that could build romantic scenes and make the subtle movements using p5. The gameplay of this game is quite simple, and there are not so many game mechanics. The player simply chooses from the tags and see the scene changes. Since the feeling I would like to express is very poetic, I don’t want cold texts to ruin it. Therefore, I made all opacity of the texts keep changing a bit like there are fogs. Also, I altered the locations of the texts so that they are more related to their meanings.
The way to end the game is simple. If the player clicks on the “complete” button, the scene will remain some seconds, then the character vanishes into a smoke, flying away. Then, every other thing gradually disappears. Ideally, I intend to make other things break into particles and drift away as well, I tried several times but failed.
The main challenge I met in making this game is the coding part. There is a lot of coding to generate every item, and the hardest thing is to make the style and the movement consistent. Besides, because of the text button and animations, I have to combine pure javascript with p5, which caused a lot of problems. Even now, the game would only work if opened by p5. If I open it by HTML, I cannot get access to my images because of the CORS policy.
I feel that I accomplished most of the parts that I want in my updated proposal, but there are still a lot of space to improve. There are not enough tags for the player to choose, the player may get bored the game experience won’t be long. If I have time, I would make it into 3D, so that the player can walk in the scene and explore.

Final Project Competitor Research & User Stories (Renewed)

My thinking

For my final project, the new idea is to make a productivity app that can track habits and goals. I would always like to keep healthy and beneficial habits in busy college life, but I often fail to do so. I think a simple and organized app could help people like me. I’ve tried existing habit/goal tracker apps before, and I think there are three main problems with them:

  • The lack of simplicity. Many habit tracker apps contain unnecessary elements such as icons and complex statistics, which rather than improve users’ productivity.
  • The lack of consideration for different kinds of habits. Habits differ in many ways: some of them can be categorized to “daily checkers”, for example, sleep and wake up early, clean up the room, only eat vegetables. Some habits need to be counted in times or in minutes, for example, reading, working out, drink 8 cups of water. Existing apps often mix up these types and makes it hard to keep track of habits.
  • The lack of stimulation system. The existing apps often use statistics to show the user’s performance in carrying out the planned habits. However, statistics take time to understand, and it’s easy to be frustrated by one’s bad performance. The data is cold and doesn’t offer enough stimulation.

Corresponding, I decided that my app should have these features:

  • Clean and organized in layout,  simple and useful functionalities.
  • Design specially for different types of habits.
  • Offer a stimulation system that visualizes the user’s progress and gives them the motive to go on.

Competitor Research

  • iHabit



  1. Only two main entries in the navigation bar: Habit and Settings. Every other page (the detail page of a habit, the statistics of a habit, add a habit) has to be reached by more than one clicks.
  2. When setting up a habit, no detail information is provided. In other words, all habits are considered as one kind: the “daily checker” habit that I mentioned above. The user’s input is limited: only check/uncheck a habit one time a day, not considering whether the habit has to be a daily habit or whether the time spent on this habit matters. (2nd pic)
  3. The statistics page offers unnecessary and not specific information. It only shows the statistic of the year. Why does the user have to see future months with blank progress?  (4th pic)
  4. Every time the user check on one habit, there will be a pop-up window saying “Well done”. This stimulation method is too straightforward and sometimes distractive and annoying (The user has to click “ok” to close the pop-up).
  • Tiny Routines


  1. The habits are organized in the order of time (wake up, morning, noon, etc). (the 1st pic). And the way to check a habit is easy: simply clicking on the icon.
  2. Interesting stimulation method: Today’s card. The user has to complete every habit in order to collect the card of today. (the 2nd pic)
  3. When setting up a new habit, the user can choose the repeat time, which considers the difference between habits a bit. However, the user still only can check/uncheck a habit, there’s no quantitative data collected.
  4. The general style is simple and clear, but there’s one problem: too many icons. Also, the way the system use icon to represent habits can cause some problems: The user has to spend time looking for a suitable icon when customizing a habit. If there are no suitable ones, the icon loses its meaning.
  5. The “Habit Records” contains too much information that is unnecessary to be placed on the main page of a habit. It would only distract the user. (the 4th pic)
  • Habitify


  1. Too many blocks on the main page, it would take quite some time for the user to understand every functionality. Some of them are not necessary.
  2. This might be the feature of this app: many many statistics. The user may get interested and study it closely when first downloading the app. However, since the progress is not straightforward enough, it’s easy to give up using it.
  • Continuous


Interesting feature: Opposite to all the apps above, this app only cares about the habit where count matters.

User Stories:

  1. As a user, when I enter the app, I am on the “Today” page. I can see a list of daily habits waiting for me to complete.
  2. As a user, when I click on the habit, if it only needs to be done one time, it will be completed. If it needs to be done for several times, the count will decrease accordingly.
  3. As a user, when I click on the add button below the daily habits, I can see options that include all my long-term habits. When I select one, I can type in the time I spend on it and save it.
  4. As a user, when I enter the “Habits” page through the navigation bar, I can see the listing of all my daily habits and long-term habits.
  5. As a user, when I click on the add button in the “Habits” page, I can add a habit, and specify its type and other information.
  6. As a user, when I click on one habit in the “Habits” page, I can see the progress I made, visualized by the growth of a flower, a tree or something else (still considering). I can also see quantitive information below.

Analysis of my own Game Art Piece (Krom)

My own game art piece is a combination of the two prompts. On the one hand, it can fulfill the “Sol Lewitt Game Rules”, on the other, it can be viewed as a hypothetical Game Art mod based on a readymade. 

To put my game art piece in the form of Game Art mod based on a readymade, it would look like this:

The original game is Dream Date Dress-upa classic dress-up game. The rules and objectives are simple: remember the dream-girl look according to the girl’s date, and help the girl dress up exactly like that. The whole dress-up process includes the hairstyle, the headwear, the clothes, the bag, and the shoes. The system will give scores to how well the final appearance matches the dream-girl look on each category, and if the similarity is greater than 50%, the player can enter next level.

My Game Art Mod of Dream Date Dress-up is called Dress-up for My Death. Entering the game, the player needs to answer these two questions with only a single word: 1. Where do you wanna die one day? 2. What age do you wanna die at? Then the player will enter the same interfaces as the original game’s, where various hairstyles and clothes are offered. I would also like to add choices in make-ups. One difference is that the face and figure of the girl will change to match the age that the player types in. When the whole dressing process is done, the interface changes to a picture of the girl with all the dress-up lying in the scene that the player types in. The player can save this picture.

Comparing with the original game, it’s easy to notice the main changes I made and how I pushed the boundary of games. I removed the scoring system so that the game does not have a winning or losing ending, and I removed the level system so that the game only has one layer. The objectives are different from player to player since everyone has a different ideal dying scene.

More importantly, I changed the scene from the date to the death and removed an important character, the girl’s date. By doing so, the objective of the game shift from meeting the standard of the boy to discovering the inner standard of the player.

Actually, Dream Date Dress-up is only a typical example of the big readymade category on which my game art mod is based. Almost every girl I asked played this kind of game a lot during their childhood. This kind of dress-up game has a lot of variations targeting at different groups of players. There are small and quick online games with low visual qualities, while there are also exquisite mobile games with complex game systems. However, the majority of them share a common feature: the goal of the player is to dress the girl up in order to meet others’ standard. Some games have a required style to wear on given occasions, which are often dates or balls. (The core of the required style is always “Beautiful”, “Sexy”, “Lovely”, “Fashionable”, etc.) Some games, like the one I mentioned above, offer only one “perfect model” and ask the player to dress exactly the same as it. On the one hand, this goal system indicates the power relationship between men and women, about how women are supposed to live up to the standards defined by men. On the other hand, it imposes a single aesthetic mode on the player, ignoring all the other possible diverse meanings of beauty.

According to John Sharp, game art happens when “a game maker wants to create a game with artistic intentions” and “uses the language and idiom of games and their play as a medium for expression”. That’s exactly what I want to do with the Dress-up for Death. In my game art mod, I aim at letting women regain controls over their body and their life. I chose the event “death” because it’s a very special and personal moment. For me, women’s control over the way they die and how they dress up to greet death can be considered as a provocation against traditional perceptions. Under the domination of men, the society often forces women to die for her family, her husband, and children, instead of dying for herself. In many places in the world, women are not allowed to decide what they wear and how they look when death comes. In my mind, death is not only a farewell but also a sacred celebration, where one can look back on his or her life and wind up all valuable moments. If women should have rights in governing themselves, their control over death would be one of the best ways to show it.

The reason why the medium “game” is so important here is its unique feature of interactivity and participation. Here the artistic expression through the medium of game cannot be replaced by any other technique. Because no other art form can be this inclusive. Every single process of dress-up for death by a player can be seen as a sole and complete art piece, while the whole game played by thousands of players can also be seen as a single art piece in another hierarchy. Different from traditional views from art institutions, the demarcation line between artwork creators and appreciators is broken. I found that my game art mod also speaks to the Fluxus movement in the ways it pushes the boundary of art. First, there’s “no single unifying style”, and the core of the mod is for the players to make their own decisions. Second, everyone participating in this game contributes to the art production. Third, the distinction between life and art is cut down here. The act of dressing up for death is both a natural process in life and a deliberate art behavior. The relationship between game, art, and life here is very delicate here.

I also found it interesting to put my game art piece in the form of the “Sol Lewitt Game Rules”, here are the two rules:

  1. Think of how you are gonna die and how you’re gonna prepare yourself for your death or funeral.
  2. Express it in any form.

Here my focus is shifted from that of the Dress-up Game, but the main theme remains to be the preparation for death. I intend to provide the player with a game space that’s separated from the real life but raises questions about the real life. Death seems to be something far away, but thinking about death often leads to relevant thoughts about the present. It almost always stimulates romantic imaginations, while at the same time these imaginations may reveal what the player really cares.

I tried to experiment the definitions of conceptual arts by Sol Lewitt with these two rules. According to him, “the idea itself could be the work of art”. Therefore, I provided vague rules that focus on the idea. “How you are gonna die” can have many interpretations, for example, when, where, and why you are gonna die?. “How you’re gonna prepare yourself for death or funeral” offers even more space for exploration: What you are going to bring with you? What are you going to wear? What feelings are you going to have? Many boundaries of arts are touched: The final production takes in any form, the craft doesn’t matter much, and the creator can be anyone. Many boundaries of games are touched as well: There are barely formal elements of games. No scores, no winning or losing, no specific goal. The game experience & art-making process is a mixture of meditation and expression.


(Here are some really interesting results of this game art piece that I collected from my friends!!

Grace: I’d like to die when I’m old, in bed, in slight makeup, in a one-piece dress, in peace.

Carol: When I’m old and near death, I’ll going on a vacation near the sea, I’ll die in a little wooden house, under the sunset, in peace.

Myself: Float in space and drift in time.

Phyllis: I’m gonna die when climbing the Mt. Everest. I’ll be dressing mountaineering suit, with an alpenstock in my hand. I encountered a snow slide when I am about to reach the top.

Margaret: I want to die on a grass, watching the starlight, until I get too cold, and unconscious. I will carry a camera to record the nature, wear a dress that has the same pattern of random starlight, do not wear any make-up and be myself. For the funeral, I just want several intimate people to attend. There will be no portrait or dead body, but just the photographs that I have recorded throughout my life.


(Translation: I’m 20 years old, and every day, I’m thinking whether I’ll die all of a sudden and what reactions others will have if I die. I might have depression. I took up my phone and intended to record a video, and put it down afterward. I might slinkingly die somewhere easy to be found, accidentally. This book contains all my despair, happiness, anger and hope)









Final Project Competitor Research & User Stories

My Thinking

For my final project, I had the idea of building a PC wordbook. However, during the prototyping workshop, I didn’t feel sure about this idea and doubted whether there’s need to make another PC wordbook application besides all the existing ones. After class, I dug into the reason why I came up with this idea. Here’s the retrospect process to answer the why question:

  1. Why do I want to build another PC wordbook? I didn’t have a good experience with the wordbook app during my freshman year. As someone that first entered a foreign language environment with many online readings, I often found it hard to get access to meanings of words and remember them.
  2. Why did I find it hard to get access to meanings of words and remember them? Several reasons. First, the dictionary app I used only offers simple Chinese translation of a word in the obvious place. Though it concludes more detailed explanations and example sentences below, they are less readable and are often ignored. Second, sometimes the explanations of a word offered by the word book don’t suit the context I see it. When I understand a word well given the context in a reading, I would like to keep it but I can’t. Third, many wordbooks have the “favorite” and “collection” functionality that intends helping the user remember the words. However, due to some design problems, it’s often not convenient to customize word collections. Therefore this functionality is not utilized well as it should be. Fourth, the word collection functionality often requires too much user input rather than serving the user. To be more specific, a simple “check” functionality can help the user keep track of their familiarity with words better. Flashcard, which is often seen on mobile dictionary apps, also serves the user better.
  3. Why did I feel that there are possible improvements that should be carried out in existing PC wordbook apps? I had better experience learning new words with mobile wordbook apps and CASIO electronic dictionary. However, there are problems with these two devices: Mobile is not suitable for working environment, using mobile apps bring distractions. CASIO electronic dictionary is not that portable and it’s impossible to always carry it when working. An application on the computer is the ideal workspace for language learning while working.

Competitor Research

The common dictionaries on the PC port:

  • mac os’ default dictionary app


  • search: on the top right
  • clicking on any word can jump to the corresponding detailed page
  • click to go forward/backward
  • offers a table of related words and phrases on the left.
  • offers detailed explanations and example sentences.
  • offers options to adjust the font size.


  • Benefits the user’s learning of a word by offering a lot of information and examples, just like old paper-made dictionaries.
  • Benefits and extends the user’s learning by making it easy to jump other words’ meanings.
  • Limited functionalities: The one and only thing the user can do is looking up words.


  • YoudaoDict


  • Multi-functionalities: Dictionary, Wiki, example sentences, translate, and wordbook.
  • Navigation Bar: top. Seach: top.
  • Predictive word list.
  • Word Explanation: simple Chinese translation on the top, details in smaller size below.
  • Collect a word: one click, no categorizing.
  • Needs several clicks to customize word collections.


  • The predictive word list disappears when the user clicks Enter to see the detail page for one word, preventing the user from viewing related words.
  • It actually offers a lot, but the user can get quick access to only a few functionalities. It requires too much work to discover detailed meanings and external example sentences for words and too much thinking to arrange one’s own word collections.

The mobile wordbook app:

  • BingDictionary




  • Predictive word list (works better on mobile)
  • Offers options to select or create new collections (word lists) when collecting a word.
  • Offers various sorting methods in word collections.
  • Offers options to show/hide definitions in word collections.
  • Can test user’s learning situation with the collections


  • Obviously, the functionality of this mobile wordbook app is more complex and organized than the PC ones.
  • The user can conveniently create, keep, adjust and organize their own word collections.
  • The user can test their familiarity with words in collections easily by scanning through them and see if he or she knows the definitions.
  • The user can actively learn and review words by using the testing system shown in the last pic.

The CASIO electronic dictionary (by memory…):


  • Jumps to the detail page of any word on the current page.
  • Allows the user to create their own word collections.
  • Allows the user to take notes on any page!!!


  • The note-taking functionality is very valuable to me. However, the operating system on CASIO makes it not that convenient.

User Stories

Taking all those factors into account, I would like my PC wordbook app to offer an all-in-one word learning workspace for second language learners. It could offer:

  1. Convenient word search and clear and understandable explanations.
  2. Customized explanations, example sentences, and notes for word collectors like me.
  3. Customized word collections and checking systems.
  4. Flashcards that help the user remember words.
  5. The progress visualization to motivate the user.
  • As a second language learner, when I open this wordbook app, I can see a navigation bar on the left side of the app that shows these functionalities: progress, flashcards, search, all words, collections.
  • As a second language learner, when I click on the search button, I can see a bar of word cards just next to the navigation bar in A-Z order. I can type in words in the search bar which is on the top of the word cards to search for a word.
  • As a second language learner, when I click on the word card that I want to see, I can see the detail page on the right of the word card bar that shows the explanations of the word.
  • As a second language learner, when I click on the add button next to the explanations/example sentences/notes on the detail page of a word, I can add my own things to them.
  • As a second language learner, when I click on the collect button on the detail page of a word, I can choose to put it in any collections I created, or create a new collection to put it into.
  • As a second language learner, when I click on the all words button, I can see all the words that I collected on the word card bar with various sorting and viewing methods.
  • As a second language learner, when I click on the collections button, I can see all my customized collections.
  • TBC.



Reactive UI | Final Project Idea

For my final project in Reactive User Interfaces, I would like to build a PC dictionary/word book app. In this app, the user can search for words and (maybe) translate paragraphs. Useful functions such as adding words into word book will be added. I’m building it for people who frequently encounter their second language while using the computer, just like Chinese students in our school. Consider the dictionary apps that currently exist, some of them are messy in layout and inconvenient because of the lack of detailed consideration. My dictionary is going to be clean and clear in style and offer the user a practical workspace that makes their language learning experience better.

REACTIVE UI | Midterm Project | myContact

Project Title: myContact

Link to Github

Functionalities: My midterm project is a simple mobile contact app. It basically contains a homepage with a list of contacts and a detail page for any selected contact. In the home page, the user can get access to particular contacts by searching or jumping to initials. Using the Tag button, the user can do filtering by selecting the tags they want from all tags. Also, the user can easily deselect the filters without opening the filter menu again. Using the Options button, the user can choose the preview mode and sorting method of the contact list, and also the color style of the whole app. Using the Add button, the user can see a page where a new contact is supposed to be added (actually it is not functional now). By clicking on a contact, the user can enter the detail page. In the detail page, full information about the contact is shown.

the Detail Page

Features: I call the app myContact because one main thing I want to elaborate here is the user’s control over this app. When I use mobile apps at ordinary times, I always like to play with the buttons that can change the look of the app. Therefore, I would like to offer my users some choices about what content and what style they would like to see. In the meantime, I realize it is equally important not to give users too much work so that they get confused. That’s why I hide the “options” menu in a button. I use a clean, clear, and pretty traditional layout to enhance affordance and accessibility of the functionalities.


different color styles: clean, warm, and night

Target Users: The target of myContact is the general public. It would be suitable for different groups of people since the user can choose whether to display email, address or phone number in the preview. In the ideal situation, the user would be able to add other properties (birthdays, companies, etc) to the contacts. Also, the user would be able to add tags to group the contacts.


1. Learning & Research: As a beginner of the mobile app design, it’s important to know where to start. Besides the instructions that we were given on the class site, I also found this article to be useful: 10 do’s and don’ts of mobile UX design. I got to know the importance of the procedure: research – target – functionality – visual design. I downloaded quite a few mobile contact apps and looked into how they are constructed. This list includes Simpler, SimpleContact, and FullContact. In my competitor analysis, I compared their pros and cons, and gradually got the shape of what I would like to make. For example, according to my observation, many contact apps can do sorting/preview/styling in different ways, but the buttons for these function are dispersed are hard to find. Therefore I decided to make these options all on one options page within different columns.

All Display Options in One Menu

2. User Stories & Functionality Design: I prioritize the functionalities of my contact book and listed them into several user stories, as can be seen in my User Stories post.

3. Visual Design & Mock-Up: Many people say that they like to do coding for the functionalities first, and then the styling. For me, it just feels right to do pure visual design before any coding. Designing the layout helps me understand the structure of the app and the order of each component. It has also been a great learning opportunity for me. I spent half an hour learning how to use Adobe Experience Design, and found it super convenient. Deciding the color and layout and getting accurate color and pixel values by simply picking colors and moving elements spares the efforts for me to adjust everything bit by bit in CSS. I have to thank my friend who gave tons of feedback about the visual design. Thank you, Carol, Leah, and Demi!

One edition of the mock-ups that I did in Xd

4. Coding: Coding is the main task of this project so it’s very complex in detail. Therefore, I’ll just talk about the essential things I did, and some challenges for me.

Essential Things:

  • Component! Make every repetitive part a component, in order to keep the structure efficient and organized. My components include the contact card, the option in the options menu, the tag in the filter menu, the little filter button on the top, the letter button in the sidebar, etc.
  • Route and Link! Since I don’t want the page to render every detail page every time, I link every contact to their detail page using Route and Link.
  • CSS! I implemented the CSS part according to my design in Xd after all the React part is done. I would like to say it again that it’s super convenient to just copy and paste the values I got in Xd to the CSS.


  • Jump to contacts beginning with a certain initial letter: I wanted to realize the effect that the user can jump to contacts with certain initials when a letter button is clicked. To achieve this, I give each contact an id that equals to its initial letter when the contacts are mapped out in the render. I make the letter button to be: <a href = “#{that letter}”>{that letter} </a>. When clicked, the first element with the corresponding id will go to the top of the page. Then, a question aroused. Since the top bar of the whole page is fixed, how can the first element with that initial letter lie below the top bar? I googled for the solution and found this article helpful: Anchor Links with a Fixed Header. The solution is quite simple, it’s to add an invisible div above the element.
  • Add different color styles: This task was a little bit time-consuming (just a little bit). The method I chose is to hold a state called this.state.colorStyle in App.js, and pass it to every component. Then, I add the corresponding class to every element. In CSS, I use “.ClassName.ColorStyle” to change the color style of every class. A tricky thing here is that when I use a picture of the icon, I cannot change the color directly. I learned how to use “filter: hue-rotate()” to change the hue.
  • Choose multiple filters: In my app, the user is able to select multiple filters. The relation between every filter is “or” but not “and”. This thing is a little bit tricky since I have to filter out every contact that can match any one of the filters. To achieve this, I made an empty array to hold the selected filters in the state. I add the filter to the array when the filter is selected, and remove it when it is deselected. Then, I loop through all the filters in that array and return the contact when it matches one of them.














Choose Multiple Filters

  • Change the background color of the Body: I found it quite hard to change the background color of the whole body, which will be seen when scrolling up or down. I found this article useful: Change Body Class React

Looking back on the user stories I wrote now after I finished the project, I think I accomplished most of my imaginations. I tidied up some of them and added some new thoughts. I have to admit that I was a little bit too ambitious at the beginning, thinking I could even sort the contact by contact frequency. Also, three color styles are a huge amount of work… Anyway, I’m quite satisfied with the efforts I put into this project and the effects I have achieved. If I have more time, I’ll implement the functionality to add new contacts.

Midterm Artgame Proposal Update & Documentation (Krom)

Proposal (Updated One)
Project Title: the 3S
Brief Description
The 3S is a game that wants to show how a student manages to handle the balance between Study, Social, and Sleep, the three main parts of college life. It takes the form of a 2D platformer, with a student as the main character whose movement can be controlled by the player. The study, social, and sleep parts of the student’s life are represented by different activities on different platforms. The student can jump between those platforms. The results of experiencing the three activities are inter-related. Each activity has an advantage that triggers the student to do it while spending unequal time on the three leads to bad results. The objective for the player is to help the student maintain a balanced life through a semester.
I got the inspiration for this game from my daily life, which is a living example of the 3S dilemma. I thought the 3S was some cliche before I came to college, but things turned out exactly like that. The needs for the 3S are equally important and inter-related. If I’m not aware of the decisions I’m making about which type of activities I should do, it’s easy for me to stick to one thing and forget the others. For me, the most important goal in student life is to get good grades and produce good works. I often underestimate the need for social and sleep, but in the meantime unconsciously spending much time on them. Once I break the balance between the 3S, it takes quite a while to get my feet back on the ground. The strategies I’ve been taking is to remind myself to be aware of the decisions I’m making, stick to the plan, and forget about my previous fault (otherwise the anxiety keeps me from doing things).
Goal & Purpose
Besides letting the player experience the typical life of college student and its hardness in choice-making and balance-maintaining, this game is also a work full of self-expression and emotion-outlet. I would like the player to feel the inner needs of the student to do the study, social, and sleep, and how the student lives cautiously to fulfill these needs. Besides, I would show the feeling of anxiety and depression caused by the disorder in life, and the urge to right the wrong. To provide such experience, I will make it easy to keep doing one activity and hard to transform from one to another, which is to simulate real life, it’s easy to stay up late and wake up late. I will focus on showing the interrelation between these three activities, about how they influence each other. The rules will be put in an implicit way, left for the player to experience and explore. I choose the form of the 2D platformer to serve several intentions. First, different platforms can represent different activities, and the student’s jump between them represents the switch in the state. Also, the three kinds of platforms will be vertically distributed, with Sleep at the bottom, Social in the Middle and Study at the top. The order corresponds to the hierarchy of needs: from the basic to the ultimate. The platforms provide various possibilities for the variables in the game. For example, the accessibility of one activity can be adjusted by the number and distance of the platform. I would like to integrate my strategy to do the balance into this game. I would also let the player explore the strategies and find their own patterns. Concerning aesthetic approaches, I will choose the comic-like style that can show the facial emotion of the student and the functionality of every platform.
Design & Production
There is a “deadline” on the right of the game interface, that’s slowly moving leftwards. The deadline has different names each time, indicating different tasks and different periods of the semester.
The three kinds of platforms:
  • The student can collect books on the Study Platform
  • The student can collect friends on the Social Platform
  • The student can collect pillows on the Sleep Platform
The interrelations:
  • Collecting books can gradually break the deadline. Otherwise, when the deadline reaches the student’s position, the student will be dead.
  • The student needs some social life to maintain the mood and gain the sense of existence. If the player does not collect friends for a long time, the frame will become dimmer and the student will gradually disappear.
  • The student needs rest to keep functioning. The pillows can help the student gain energy and makes the student move faster. If the player does not collect pillows for a long time, the student will stop and fall.


Some other possible thoughts: To highlight the difficulty to gain back the balance once it is broken. The distance between platforms can be changed. For example, if the student stays too long on the Study Platform, and keeps going higher and higher, the player will find it difficult to go back into the ground again.


Game Art Assets: I will look for some free artworks online, and create some of my own.


  • If the player manages to survive final deadline, it’s the winning ending.
  • If the player does not let the student sleep, the student will move slower and fall.
  • If the player does not let the student social, the student will become transparent and disappear.
  • If the player does not let the student study, the deadline will kill the student.

Documentation After Finishing the Game

the general layout of the game scene


Generally, the final outcome of this game meets my previous expectations. There are some aspects that particularly work well. The main intention that I’ve been trying to convey through this game is proven to be accessible and understandable by the active exploration of the player. There is no instruction offered, leaving the player freedom to do experiments, just like what we do in real life. The importance of the balance between the 3S and the difficulty in maintaining it is expressed in a rhetorical but not arbitrary way. When first entering the game, it’s easier for the player to mainly focus on collecting books, since there are only indicators that urge them to care about the book (the timing and the count). After some time, Social and Sleep’s impact on the character gradually become visible.

During playtesting, I was happy to see how my friends got panicked upset when they found that they can’t keep the character from disappearing/walking slower because of the previous choices they made. The dark and intense background music as well as the bloody losing scene also increase the feeling of anxiety, which I would like to build. It is designed for the player to learn from failures and develop their own strategy to solve the 3S dilemma. The proportion of the 3S’s influences are delicately arranged so that they are equal.

If I have more time, I will adjust the color and size of the text a bit, right now it’s sometimes not very clear. Also, I would complete the background image.

one miserable & funny losing scene

Changes that I made

Compared to my proposal, there are two main changes about the gameplay that I made after Sarah’s critique. First, I changed the platform distribution. I previously wanted the three kinds of platforms to be vertically distributed, with Study at the top and Sleep at the bottom. There are some problems with this layout setting: the character will have to go through the Social platform when transferring from Study to Sleep. Also, collecting books will become very easy. Sarah suggested that I make them randomly distributed in a fixed space, which turns out to work well. In this setting, the user has to find the nearby platform they need and manage to reach there. Second, I changed the way the deadline approaches. This change also makes the gameplay clearer, by simply suggesting the remaining time by text. (I kept the physical deadline just for fun).

While playtesting, my friend Shiny suggests that I change the collectible items of Social to cocktails instead of teacups or friends, and I listened to her advice.


  1. Build the Gameplay & Logic
  2. Draw/Adjust the Art Assets: I drew the main character on the paper and added color to it using PS. I collected some open source assets from the Internet and managed to give them the same style using PS.
  3. Animation: I watched some tutorial videos of making the simple animation in Unity. I drew this sequence and it works quite well.
  4. Creating platforms & using Sprites. The sample 2D platformer game only has one type of platforms. I created three types of platforms and managed to arrange their positions correctly so that the space between every platform would be okay to jump across. In the script, I let the system randomly decide which type of platform to produce every time (within the maximum number).
  5. Creating prefabs as the collectible items. Each collectible item is an instance (clone) from a prefab. The prefab clings to the corresponding platform.
  6. The UI system. Display the number of the books collected and the remaining time on the canvas.
  7. Navigate the change of values (the character’s energy and transparency). Relate the values to the behavior of picking up items.
  8. Different Results/Endings. Determine what will happen when one side of the balance falls. Specify different ending scenes in different functions (loseEnergy(), loseTime(), etc).
  9. Add Levels. Add scenes that tell the level, and initialize all the values and behaviors when switching to another level. Change some values (platform number, total time, etc) according to the level number.
  10. Playtesting. Adjust details bit by bit through the long process of playtesting.


  1. Creating art assets. I spent some time searching for an ideal character before I decided to draw it on my own. I don’t draw very much and that’s pretty challenging. I enjoyed the process and I’m happy that my drawing integrates to the overall style and concept of the game.
  2. C#. Since I have to handle a lot of values and scenes in the script, I did quite a lot of coding. I was very unfamiliar with the syntax of C#, and I made many mistakes. Thanks to Google and Unity Answers, now I know a lot better.
  3. Platform distribution: At every platform position, the probabilities of producing a Study, Social and Sleep platform are the same. The distance between every platform and every layer of platforms should be just right. It required some little skills in coding. The random distribution of the platform and the random number of the collectible items represents the changes and uncontrollability of life.
  4. Add levels. I always forget to change some settings back to the initial in the Init() function. Also, many problems were caused because that I choose to code the transition in levels. One thing that kept bothering me is that the uncollected items from the last scene remain on the page. I had tried various ways to destroy them but failed. Dave helped me out this evening, we did many testing and experiments and finally figured out the reason. Suppose I have an array that holds all the platforms, when I destroy the platforms in the last scene, I actually do not remove that thing in this array. Therefore, when I later reproduce collective items on platforms, some will appear out of nowhere (out of the destroyed platforms). We used some tricks to fix that.

Lessons Learned

  1. Never focus on the visual parts or the animation too much before the basic gameplay is complete. I spent too much time on creating and remaking art assets. Therefore, I had to stay up late afterward. It seems ironic to me that I frequently jump into the dilemma in this game when I was making it.
  2. Don’t hardcode the levels. Actually, I could use Scenes to differentiate the levels, but I just chronically started to code it… I should take advantage of what Unity can do, and look up some example first!
  3. 90-90 rule. The last 10% of work will take another 90% of time… Always think ahead and don’t be too optimistic about the time I have.


REACTIVE UI | Week 5 | Competitor Analysis and User Stories

Competitor Analysis:

  • FullContact:   This contact book offers both PC and mobile apps. It features in combining and syncing all your contact information from different accounts (Google, Microsoft, Mac Address Book, 360, etc). Its functionalities are rich, allowing the user can add profiles, photos, and tags to the contacts. The layout is quite organized. For the contact list, it provides different sorting methods (first name, last name, date added or updated) and views (first name first or last name first). One thing that could be improved is that detailed information page of a contact is not clean enough. For every contact, it has empty columns such jobs, phone number, googleTalk, homepage, address and even birthday to be filled. These empty columns only make the important information unclear. It would be better is these specific columns can be chosen and added by an add button manually when needed. In addition, the interface contains three big columns in total, it would be better if the user can hide the column on the left when needed.


  • Google Contacts:  The interface of Google Contacts is similar to Gmail. The contact name and some brief information (including email address, phone number, and address) go in one line, making it look like an old telephone book. This design makes it easy for eye-searching and quickly grabbing a piece of information. It also offers additional functions such as groups and circles, which are closely connected to other Google apps such as Gmail. One shortcoming is that some contacts have phone number and address, while some have not. Therefore, the interface looks a bit messy. It would be better if the user can choose whether to display the phone number and address or not.


  • Mac Built-in Contact Book: This contact book doesn’t have the problem I mentioned in FullContact, the columns on the right information page can be modified manually. The listing of contacts follows the alphabet in a clear way, but there’s no way to change the sorting order. Another thing problematic is that there’s too much empty space in the information page on the right, while the contact list on the left is very tight. It would be better if the contact list column is made larger, and includes some basic information. That way, there’s more balance in the distribution of space. It would also be great if the user can change the font size (zooming in or out), in order to make the list more readable.

  • Simpler Contacts: This contact book is an IOS app. Some of its features different from IOS built-in contact include merging duplicates, grouping, filter options and photo display on the contact list. The thing that falls short is that it doesn’t have functions like adding tags and social account integration. Also, there are no alternative sorting methods. Another thing is that, as can be seen in the screenshot, I don’t add photos to most of my contacts. The substituting letter looks dumb and unnecessary. It would be better if the user can choose whether to display the photo or not.

User Stories:

  • As a user, when I open this address book interface, I see a list of contacts with their names and email address.
  • As a user, when I clicked into a contact, I see the full information about him or her, including the email address, the address, the phone number, and any other thing that I put there.
  • As a user, when I type into the search bar, I find the contact I want quickly.
  • As a user, when I click on the a-z/z-a button, I can switch the order the contacts are listed.
  • As a user, when I click on the “All Contacts V” button above the contact list, I see the country options. I select one country option, and I see only the contacts from that country.
  • As a user, when I click on the view-option button, I see some options for me to change the view of the interface.
  • As a user, when I click on the option to show the address, I see the address instead of the email address in the contact list, and the rest in the same manner.