• clarify the currency

Users who have same painful experiences can work together. By working together to reduce their painful experience. Or we can call it memory.

  • the insensitive word
  • “about” first


User testing

Tester: Minator Yang who studies graphic design in SVA. / He is a friend of mine and provided some suggestions from aspects of the graphic design student and an unfamiliar user.Scanned Image

  • Exchange Page

More details should be included such as username, tags and prefer ways to communicate. Users should be given the option. And other creations should be shown as the reference.


Scanned Image 2


click “+” to see other creations by the same author.


  • Supervise

Supervising users won’t upload irrelevant creations by simplifying functions. We don’t need the second Tumblr. And this came up with another problem.


  • sign up information

Should users need double sign up? One for browsing and if users want to exchange and cooperate with others, then more details should be uploaded (name, mail, phone, etc) To make sure the authenticity.


  • prefer ways

Again, it will make people feel better when they realise they have the right to choosing something. Truly there are some traumas come from having no choices. Some people want to hear the voice and some people can only talk to people online with text. And some even don’t wanna talk.


  • canvas function

There are seven icons on the top of the canvas. I wish this cooperation could focus on upload imgs mainly, supplemented by online drawing and text.

Scanned Image 1

Scanned Image 3

Canvas Copy 4


Context research


Screen Shot 2017-12-13 at 16.45.18

This is an interview recording of family survivors from a firestorm including texts, photographies, video and images. Also some historical background. This menu bar shows all information in different chapter systematically.



Screen Shot 2017-12-14 at 00.40.35

Google Hangouts is a communication platform developed by Google which includes instant messaging, video chat, SMS and VOIP features with simple interface and function.



Video-Based interactive website:

Screen Shot 2017-12-14 at 00.41.23

Periscope is a live video streaming app for Android and iOS developed by Kayvon Beykpour and Joe Bernstein and acquired by Twitter before launch in 2015.

Screen Shot 2017-12-14 at 01.02.30

Screen Shot 2017-12-14 at 01.02.39

Betta TV is a web-based live video sharing website that provides users with live video and live broadcast services. Mainly to live games, covering entertainment, variety, sports, outdoor and other live content.

Operation mode:The anchor streams the game and the audiences express the support and affection to the anchor by sending gifts (bought by money). Gifts will be discounted to money again to the website and anchor. When the audience to watch a certain period of time, the chest in the lower left corner will come up with petty coins (virtual currency), the audience can also use these coins to buy gifts to the anchor.


Online collaborative platform:

Invision — freehand

Screen Shot 2017-12-14 at 01.25.27Screen Shot 2017-12-14 at 01.25.40Screen Shot 2017-12-14 at 01.29.25

A whole new way to collaborate and that’s really inspired me.



Connan Tant Hosford, better known by the stage name Connan Mockasin, is a psychedelic pop musician from Te Awanga, New Zealand.

#forever dolphin love



UX/UI design principles

For designing my interface and enhancing user experience better, I did some research about UX/UI design principles. We all know that web pages should not only good-looking, but also provide users with a better experience such as elemental symmetry, alignment, reinforcement, continuity. Also pay attention to the placement of elements, colour, font and so on. These are the most basic page design principles. Interface design is affected by designer’s aesthetic judgement and skill level. And the experience design is much more interesting for me. I like feeling people’s emotions and I’m good at it. I wish I can do some design that really let people live better. Interfaces exist to enable interaction.

  • Basically, the principle is less is more. All of the other principles are derived from this. Protecting and respect the user’s attention, so that the interface is under the control of the user. Do not let the secondary action overwhelming, distinguishing the focus and showing in order.
  • The zero state quite needs to be considered carefully. It determines the user’s first impression of the website and largely determines whether the user will use it again if it is positioned as an unnecessary pastime website. As the interface designer, I know what is the website for and all processes but the user doesn’t know. So it’s necessary that every page shows the clear function and operation. It should be able to provide users with directions and guidance to help users quickly adapt to the website.
  • Steve Jobs said that users don’t know what they need until you design something. And they found oh I need this or this exactly what I want. The designer’s job is to discover the potential needs of the user and visualize them, then transform them into entities presented to the user.
  • Build on other design disciplines: Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate?


Screen Shot 2017-12-18 at 23.34.52

When I start to design my prototype, I feel not sure about how to structure the information showing on the mouse hover behaviour on the thumbnail page. So I observe these four examples. They have different target users and functions. Behance is a professional online portfolio for designers and studios who want to find jobs. Dribbble is a little bit unprofessional compared with Behance, but it is for showing creations. Amateurs can find the latest trend of design on it too. When I want to find some new desktop wallpapers I will go to Unsplash. So there are three columns in total for users see the picture clearly (5 for Behance, 4 for Dribbble and 6 for Pinterest) And Pinterest is more commonly used in finding something so the number of columns is the most.




best interface and best CSS style. It’s really inspired me a lot!

drawings and sketching from psycho. Lots categories. You can check the profile of artists and leave a comment. There are some really beautiful drawing indeed, but there are also some phoney publicity seekers. There’s a question about how to supervise this situation and make sure the quality of creations uploaded.

Online tools for interactive art and drawing.

Research on [people] (potential users)

About Refugee:

There’s a documentary called Human Flow directed by Ai Weiwei. The documentary begins with a Greek smuggling boat and chronicles the development of Syrian refugee incidents in recent years, including the establishment of the border fence in Europe, the visa-free negotiation in Turkey and Europe, the establishment of border nodes in the southern United States, The treatment of refugees, the situation in the Middle East and the record of the living conditions of refugees in various countries. And he hoped to draw everyone’s attention to the severity of the refugee crisis.

Comparision score between rotten tomatoes and douban (Chinese version of rotten tomatoes). More than that, reviews on the guardian and telegraph conveyed the same central idea as the documentary. The majority of the audience’s comments are also gathered in which country should receive more refugees and what kind of infrastructure and assistance should be provided to them.

Screen Shot 2017-12-12 at 19.31.05

The unexpectedly low rating of the documentary in China after the release of the documentary shows both media coverage and netizens’ perceptions that people think his documentary is overly one-sided, the techniques and ideas are good though. What we talk about isn’t which country should receive refugees, but if we should receive them.

How to explain so many insurgencies, raping local women and news of social turmoil about refugees? Why do so many individual phenomena? Is this really an isolated phenomenon?

There is a scene in the documentary filming a German shelter, a teenage girl told journalist she felt very boring to stay here, no privacy, cannot easily go outside the world.

You permit them to cross the border, provide them with food and safe houses, provide jobs for them, and educate their children. And people will want more once they get it. Everyone will. Unbridled disasters can lead to hatred beyond suffering, not to mention the country accepted them may be behind a force for the civil war in their country.

There’s a migrant centre (which we all know what that means) in Hackney. I sent the email to ask if I can take a casual interview with them but they refused. So I went there to see if I can find something. People there are old and look like tramps. How likely is it for refugees like these to find a stable job? How likely is it that refugees like these express their trauma through creations rather than atrocities?



About the drag queen:

drag queen is a person, usually male, who dresses in the clothing of the opposite sex and often acts with exaggerated femininity and in feminine gender roles which is for the purpose of entertainment or fashion.

Fausto-Sterling’s studying of gender sexual and relationship diversity pointed out that from the perspective of modern medicine proves that gender is a cultural construct and “we are turning from the era of both sexes to an era of diversity that transcends the two sexes.”

Screen Shot 2017-12-12 at 23.26.15Screen Shot 2017-12-12 at 23.26.28

Only 25% possibility people could be satisfied with both their gender and sexual orientation, but most people automatically become a cisgender heterosexual without a serious consideration of the issue of sexual gender. When we talk about gender, there is not an essential thing, and gender and its derived order and system are constructed by the society. A man does not behave like a man because he is a man – it is precisely because of the daily routine of gender norms that his identity is established. (gender performativity theory from Judith Butler)

And the reality can be more complex. A lesbian could think herself as a boy. Or a female-to-male transgender wants to do sex surgery to remove her chest but keep her vagina. (Max in the L word) Or should we call her him? And again it’s hard to define. Even google doesn’t know how many genders in the world. There’s a wording that an infant cannot be identified gender by others, but only by him/herself.

Screen Shot 2017-12-12 at 23.47.15




And there are so many others.

Screen Shot 2017-12-13 at 00.05.14

Screen Shot 2017-12-13 at 00.08.06

My job is to be the bridge builder.
And we’re nothing the human beings if we don’t experience that connection.


p.s The musical everybody’s talking about Jamie is amazing!

Description of the idea and user diagram

A short description of digital currency project idea:

This is a platform for people who are suffering trauma want to share their experience to those who have the same experience via creations. Not everyone makes things in a happy mood. The user can upload their creations and find someone else and exchange their stories by chatting as well as collaborating create work together on the online canvas. After that upload and tag the creation together and wait for the third person come to the exchange. Finally, form a group.


User interface flow diagram:

Screen Shot 2017-12-12 at 17.57.29

User cases:

A Syria refugee who has a job for now (consider that a real refugee might not own a computer) — browse and contact — find others from Syria who do different jobs — chat and work together — form a group

A drag queen — distress about the sexual orientation and gender cognition — found some other LGBTQIA, etc — offline workshop

An autistic teenager — can’t talk about himself well but has talent on drawing — create a lot of drawings —  healed by others