UX Final Documentation by Kefan Xu

I put my stuff all together and design a website to show my idea.

Here is the link: https://kefanxu.github.io/tapto/tapto

Here are some screenshot of this site:

On this site, I tried to put all my idea in a clear order, from the start of the idea to the final demonstration. I divided the content into two parts: the early research & framework design and the design (including the interface design and the interaction design).

I also added some new content. I made a video which shows the meaning of each operation on this app, also stressed its advantages over the traditional social apps.

This site was built with the software Hype3. It a website editor which requires no programming skills. The layout of the website content can be easily designed on it. And it can export the website layout as a HTML file, which I later uploaded to the GitHub so it can be accessed by anyone.


Week 5: User Interaction Design | User Testing

This week I was focusing on designing the user interaction and user testing. I designed the interaction mode first in order to give the user a clearer understanding of how to use this app when doing testing. This video shows how it works:


I also uploaded it to YouTube:

I designed this user interaction with InVision Studio, a digital UX design software. Compared to Marvel we used in class, InVision Studio allows the user to design a more complex animation and transition. It’s very user-friendly, in which user can easily design the connection between different views and edit them in an intuitive way. The image below shows how I drew the connections between different views. And it allows the user to directly import files from Sketch, which saved me a lot of effort.

The transitional animation can be easily designed with the InVision Studio. Similar to the magic transition function in Apple’s Keynote, the animation building process in the InVision Studio requires the user to set a starting and ending point between two views and it will automatically calculate the transition for you. This also requires the object to remain the same between two views, which also requires a lost of copy-and-paste work. Once the animation has been set up, the user can edit the timeline to polish the transition process.

My basic idea of designing this animation is that I wanted to build a so-called leading object between different views in order to integrate them together, in other words, no matter how the user switch between different views, there will be some objects they are familiar remain on the screen with a smooth animation. For instance, when the user switches from the main screen to the short-video screen by swiping up, all those bubbles represent different people will automatically change their size and move to the top of the screen. And it’s similar to the ME bubble which exists almost in every screen. Through this way, I am hoping to design an integrated and elegant experience, and the leading object will serve as a guide to lead the user go through different views and encourage them to try new things.

The user testing gave me some positive feedbacks. It showed that most of the users were able to tell what they are doing in each step. The controversy was among two views, the homepage and the friend list. Some users were wondering what if they have hundreds of friends who are using this app, the homepage will become too crowded. The same concern applies to the friend list view, users were confused about searching for certain friends and cared about how to find the person among hundreds of friends. Also, some user raised the concern that will they be able to see their friends in a far distance. During the testing, some users proposed some quite useful using scenario such as finding nearby friends to go to eat together and using it for dating, which were quite inspiring and I might document those thoughts in my later posts.

To deal with those feedbacks, I will focus on redesigning those views and adding new views in my later work. A testing user suggested me to change the friend list view to clusters of bubbles, which are categorized by their names, which I thought is very inspiring. I will also add a map of large scale for the user to see where their friends are regardless of the distance. And different places, such as theaters and restaurants will be added to this view, so the user can easily plan their activities with friends. And I am also working on the business model of this app.

And I also designed the logo using Sketch:



UX Design Week 4 | WireFrame / Interface Design

I directly jumped to the interface design. Those different views below were designed using Sketch. The relation between different views is shown in the last picture.

Based on the feedback from the survey and focus group, I added two functions to this App. The first one is the texting function. I abandoned this function at the beginning but the feedback from the focus group showed that the texting function was still very important for people to make things clear. And another one is the short-video function which provides a user experience like the Tik Tok. So the mission of this App changes a little bit, now it’s an app which stresses on the quick interaction feature, such as sending vibration and images, but also keep a lot of functions of the traditional social app.

When designing this interface, I tried to make both the logic of interaction and graphic design as simple as possible. The basic logic of interaction are just short click, long click, and scrolling. When those interactions are applied in different views, it will trigger different functions. I chose back as the background color and use high-contrast gradient color as a way to attract user’s attention. There are some consistency in the color schema, for instance, the blue color normally refers to the user and the red color refers to the user’s friend. And when a friend request is sent to a stranger, the color of its bubble will turn to a gradient color between red and blue.


1. Mainpage: This page shows the people who are using this app around the user. The user’s friends are colored as red and strangers are colored as green. Those bubbles suggest their locations and the user is represented as the blue bubble in the button. Those pink circles indicates the distance.

When the user turns left or right, this view will change regarding to the direction that the user faces to show more people.

Long click the user’s bubble, its filling color will fade out to indicate that the user has entered the invisible mode. In this mode, the user can’t be seen on other’s phone. User can use this mode to avoid being disturbed or play with his friends.

User can send vibration to strangers by short clicking their bubble. Long click stranger’s bubble will send them a friend request. Their bubble will change to this half-red-half-blue color with a check icon on it. Once the request is approved, the color will change to red, same as friends’ bubble.

Scroll up on the mainpage, user will go to the short-video section where show short videos shot by all the people around the user. The user can also shoot his own on this section by clicking the orange bubble. Tap on the screen will send a vibration to the owner of the video.

3. Log in page: on this page, the user can choose to sign in or register a new account.

3. Chat: Long clicking the friends’ bubble to go to the chat section with this friend. Apart from the texting, the user can choose to send other forms of massages such as image, sound and videos by changing the mode on the right button.

5. Friend list: All the user’s friends will be shown no this page no matter the distance. The interaction logic is the same as the mainpage.

6. Friend list: All the user’s friends will be shown in this view no matter the distance. The interaction logic is the same as the mainpage


The status user added to his profile will appear as bubbles on the button of the page. User can click those bubbles to change their sizes to indicates the degree of their feelings.



UX Design Week 3 | TapTo : Persona/Survey/Focus group/User Flow/ Site Map/The State Transition Diagram/Sequential Storyboard/The Branching Storyboard

I kept polishing my idea of designing this social app with a multi-model interaction. Above is the user persona. It gives an overview the target group. There are some key features of those target users:

1). Most of them are collage students who study and live in campus, and most of their social activities are based on the campus which is relatively a limited space;

2).Then put their social relationship in an important space, them are outgoing but sentimental and want to avoid any social awkward.

Based on those characteristic, I proposed the following functions of this App and depicted them on the storyboard above:

1). It can send vibrations to the user’s friends to make his friends notice him.

2). On this App, the user will be able to check out other people near him.

3). It can show user which of his friends is most available.

4). It enables user to user different ways to interact with his friends.

5). It can show user which people share most of the interest with him.

6). User can use this App to make new friends.

7). User can make himself invisible to play with his friends.

8). User will be able to switch his status in order to prevent being disturbed.

Here shows my first draft of user flow:

Then I made a survey using Tencent Survey to collect some feedbacks from potential users.This survey was written in both Chinese and English and had 14 questions in total. Those 14 questions were divided into three sections. The first section contained some general questions like the age and job. The second section contains questions regarding to the existing social Apps, including:

1). Which types of social interaction do you prefer?

2). How often do you use social apps in your daily life?

3). Have you ever felt unconfortable when using social apps (inefficient communication, peer pressur, etc.)?

4). Do you think the existing social apps make your social life more efficient?

5). Have you ever met any awkward situations on text-based social apps (things weren’t made clear, etc.)?

6). Do you prefer social apps which is text-based (QQ, Wechat) or others (Instagram, Pinterest)?

The second section gives a general description and using scenario of the prospective app TapTo and asked to complete the survey considering the description text, the questions includes:

1). Do you think this indirect way of interaction makes you feel more comfortable?

2). Do you think this way of interaction (sending sound, vibration to friends based on location) is interesting?

3). Which age do you think this app fit in?

4). Will you use this app as the primary way to interact with your friends?

5). How often will you use this app?

6). Do you think this app will benefit you social relationship?

I sent this survey mostly to my classmates. Since I posted it on my wechat moment, I also received some feedbacks from my parents and relatives.

The feedbacks suggested some very useful points:

Most of people are having social interaction with their social apps. But compared to having face-to-face conversation, the social apps don’t have much advantage. And people all experienced some degree of socially-awkward situation when using their social apps while social apps did make their social life more efficient. Still, most of the users prefer text-based social apps though sometimes it’s difficult to make a clear state on those apps.

As for the new app I proposed, the result shows that almost half of people think this new way of interaction makes them feel more comfortable and it’s an interesting way of interaction. 60.6% of people though this app fit with people who aged 15-20, 48.5% of people thought this app fit with people who aged 20-30. However, most of people didn’t they will use this app as their primary way of interacting with their friends and their attitude towards this app was quite neutral.

Generally the result shows that:

1). The existing social apps do have some drawbacks

2). People are interested in this new form of interaction

3). People want to stick to their old habits.

This suggests that the best way to improve this app is to add more function of the traditional social apps or just integrate its function into traditional social apps.

So I redesigned the user flow chart:

By redesigning this user flow, I want to build a constant using experience. Every step the user choose will eventually lead him back to the main page.

The interface is designed to be simple. Most of the screen will be occupied by large graphic elements which will be designed later in Adobe Illustrator or Sketch.

Generally there are only 4 levels of this interaction. User can scroll all the way down from the first level to the last one.

There is almost no menu in this app, most of the interaction will be achieved simply with user’s hand movement.

Each function is triggered by different modes of interaction. The difference between modes is simple. Basically the long click and the short click will trigger different function and scrolling up and down will lead the user to different levels.

Then I held a focus group between me and five of my best friends. Here shows the questions I prepared for them to discuss.

And here is the note I took during the discussion:

It shows that the awkward caused by social apps is a big problem. But because the texting function can also fit into different using scenarios, people still use this types of social apps a lot. That’s to say, though the multi-model interaction might be a good idea, it can not replace the current social apps. And this type of interaction might be more effective in a very intimate relationship such as families and lovers. They suggested me to consider the tradeoff between the cost of information and content to better evaluate an app, which I think it’s really useful.

My future works will focus on adding more function to this app based on those feedbacks and keep polishing the user flow.

TapTo – A New Way to Interact with Friends

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

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

This storyboard describes one of the using scenarios:

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

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


Animation Final Project — Life of Butterflies By Kefan Xu




After one month’s working, I have finally finished my animation final project — Life of Butterflies.

In this animation, I want to show the life circle of butterflies and from their perspectives to view our human society. I decided to draw most of the figures in this animation by myself at the very beginning. To achieve this, I borrowed an iPad Pro with Apple Pencil from ATS. Most of the still figures were drew in the iOS App Procreate, this App is very useful since it has so many different brushes and has layer function as well. I also download another App called Duet, it allows to use the iPad screen as a second screen of the laptop. This makes things much more convenient since I can drag the window of Adobe Animate to the iPad screen and directly draw things with Apple Pencil. This animation was designed to use only three colors, black, white and red, to provide a high contrast and concise experience. And it can also make the audience focus more on things that I want to show. The main figure of this animation is that butterfly, I drew those two parts of its wings on Procreate and import them into the Aftereffect. In order to achieve its motion, I added an expression to both sides of the wing, so I can manipulate its speed and the angle. Then I imported this composition into other compositions to design its routine. One thing to mention about this is that the 3D layer should be turned on or its motion won’t be that realistic. I used Rotoscoping to catch the growing of those flowers. In order to provide a view of moving forward, I have to design the routine of each of them from appearing on the top of the screen to their disappearance on the button of the screen and it took me a lot of time doing this. The snowing effect is from another Youtube video, I made some changes of its color and remove its background, I forgot to site it in my animation and I will give the URL of it at the end of this documentation. In total, I have created 20 compositions to make this animation and my asset file almost reached 1G. I can’t believe I really did it.

As for the narrative itself, some of my classmates told me that they didn’t really understand what I want to say when I showed my rough cut in the last class. Here I just do a simple summarize of the story. The first scene starts with a lamp and two butterflies in a huge shadow of a missile. And the sound of a gun shot in the background also suggests that it’s in a war field. And then a grenade came in and exploded. It almost destroyed everything and those two butterflies flew away. Then you can see the change of the shadows of pieces of the lamp, which suggests the passing of time. And following the butterfly, you can see those things we used from a kid to adult passing through. And there are children laughing and birds singing in the background. They all suggest that the war in the first scene ended a long time ago and this place is back to life. Then it’s the thunder and storm scene, suggests that something becomes worse. Also, you can hear people shouting and quarreling in the background, suggests that new conflicts are coming. At the same time, the lives of those two butterflies are coming to the end, their wings become weaker and weaker and finally land on earth, die. And new flowers are stilling growing, from one flower a bug becomes a cocoon and one day it breaks with a new butterfly coming out. Also, the noise of shouting becomes bigger and bigger in the background, then with the screaming of a woman, someone shot the gun, its sound shocks the butterfly and it flies way with blood drops on the leaves. The world becomes silent again. A new war probably has taken place.

When I started thinking about this final project, the first thing that came to my mind it that it will be good if I can make things happen in a loop. And for this loop, it doesn’t mean the last scene of this film I made will be the same as the first scene but a consistency of the story. Audience can see that the story doesn’t end and thing might happen next might be the same as the story that have been shown to them. So through this story, I want to make the audience realize that though time has passed, but there is something that didn’t change at all in human’s history, either war comes after the peace or war comes after war. The desire of conflict might root deeply into our nature. It’s like a loop and never has its end. I consider this as an antiwar animation because I want the audience to think about why those bad things will happen again and again, why we can have so many beautiful things but keep destroying them. Is there any way to stop this infinite loop or we can just face the bad side of our nature. Those butterflies are also a reflection of human ourselves, we born and die through generation, we pass through this world with our happiness and sorrows. Life is simple like this but why we will keep fighting with others, we are just a small part of the loop of nature and this loop never ends.

The process of making this film is both excited and meaningful. I quite enjoyed the experience of making the things in me mind come true. And I found it’s not as simple as I expected. Since I use so many compositions when I was making this animation, you really have to figure out the logic behind the software and manipulate those objects accordingly. And when you have a basic outline of the story, new ideas keep coming to my mind and I just keep adding things on it to make the whole animation be as perfect as I expect. This process real makes me have a deeper understanding of the job of an animator. It’s truly a field that involves so many different things. To make the figures in the animation, one have to know how to draw them and Photoshop them, and to catch their motion, one have to observe those details in our life vividly such as how butterfly flies, and how to manage the audio as well. Almost of the time when I an making this animation, I have to keep so many Abode software at the same time, like PS, AE, AI, AU, it’s so amazing. Since my project rely much on AE, I really learn that it will be much better if you have a overview of how to use different compositions and the relation between different compositions. One problem I met during making this animation is that once I wanted to make some change, I have to change some many things altogether since there are so many compositions mixed with each other. In all, the process of making this animation is quite enjoyable and help me learn so many new things about using different softwares and developing my own ideas. Through this course, I found that animation is about making people’s dreams come true. All the things that we encounter in our life,  whether they are ridiculous or not, can be made in into animation in different ways. It extends the board of our imagination and can make the most impossible things come true.





The music is from Mike Strickland, – The Dream Waltz sound resourses

And here are the sound recourses I used from freesound.org :

http://www.freesound.org/people/SmartWentCody/sounds/179011/ http://www.freesound.org/people/tcrocker68/sounds/235591/ http://www.freesound.org/people/dobroide/sounds/44709/ http://www.freesound.org/people/FillMat/sounds/384401/ http://www.freesound.org/people/TheNikonProductions/sounds/337696/ http://www.freesound.org/people/metrostock99/sounds/141624/ http://www.freesound.org/people/stormpetrel/sounds/173096/ http://www.freesound.org/people/Corsica_S/sounds/253899/ http://www.freesound.org/people/Dave%20Welsh/sounds/194364/ http://www.freesound.org/people/Yoyodaman234/sounds/267549/ http://www.freesound.org/people/Joao_Santos/sounds/316653/ http://www.freesound.org/people/Mafon2/sounds/274175/ http://www.freesound.org/people/JohnnyBeCrafty/sounds/253403/ http://www.freesound.org/people/ceich93/sounds/263864/ http://www.freesound.org/people/samararaine/sounds/186316/ http://www.freesound.org/people/nebulousflynn/sounds/269062/ http://www.freesound.org/people/sandyrb/sounds/110413/ http://www.freesound.org/people/unfa/sounds/259300/ http://www.freesound.org/people/gkillhour/sounds/267222/ http://www.freesound.org/people/alanmcki/sounds/326442/ http://www.freesound.org/people/mitchelk/sounds/136765/ http://www.freesound.org/people/FoolBoyMedia/sounds/264498/ http://www.freesound.org/people/Toybox/sounds/262692/

And here is the storm effect I found:


Background video – red particle animation


And here is the link to Tumblr:




Rough Cut by Kefan Xu

Here is my rough cut, so there are only two scene in my animation. I have already added audio to the first one, and the second have no sounds now but I will add later. There still lacks an end for the second scene and it’s also the work for this week.

Mood Board Animatic 2 By Kefan Xu

This time I used figures that drew by myself instead of using others’ pictures. In the last assignment, I have ready test several functions of Aftereffects, and it worked pretty well. This time I also used composition as one of my recourses to add into the main composition. Though it lower down the speed when the software manipulated it, it appears to be smooth and perfect when I export it. For this scene, I put few objects and used the timing function, though it appeared that they are zoomed out together, actually they just fellow their own path. And I also added sound to it. So this might be my first scene, and the style will keep the same in the fellowing scenes.


Animatic Moodboard by Kefan Xu

Here is my animatic moodboard made by using After effects. Part of the reason to make this is that I want to test the Aftereffects to see whether it could give the effect that I want. Those images of the butterflies are the one that I used on my mood board. First I insert those images into the Animate then changed their shape frame by frame to make them seemed to be flying. And then I exported those animations into Aftereffects in order to make them fly according to a certain route. And it works pretty well. And I also post this on Tumblr.

Mood Board for Final Project Kefan Xu


Here is my mood board for my final project. For the final project, I decided to make an animation which is about the whole life for a butterfly, from its birth to its death. And this will also include the process that its body become dirt after its death. And from this dirt, new butterfly born, so it’s like a loop.

In my plan, this animation will not include only the life of butterflies but also the changes of its surroundings. For instance, the change of the color of grass or the movements of people’s foots. I want to tell a story of the how the world is changing from a butterfly’s perspective.

To achieve this, I would use some images of hand drawing of butterflies to make the animation in a kind of old style which can often be seen on some natural science magazines in 18 or 19 century. I might also draw some of the figures by myself, but it all depends on whether it’s hard to manipulate those moments frame by frame. If the amount of work is huge if I all draw it by myself, I might just use images on the Internet and make it like a cut out animation.