More Information
Coming Soon...
3
They put their social relationship in an important space, them are outgoing but sentimental and want to avoid any social awkward.
1). It can send vibrations to the user’s friends to make his friends notice him.
3). It can show user which of his friends is most available.
5). It can show user which people share most of the interest with him.
7). User can make himself invisible to play with his friends.
Storyboard
8
Survey
Design
2 Sections
6 questions each
In both Chinese and English
Section I1). 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)?
Section II1). 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?
6
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.
2). On this App, the user will be able to check out other people near him.
4). It enables user to user different ways to interact with his friends.
6). User can use this App to make new friends.
8). User will be able to switch his status in order to prevent being disturbed.
Homepage: 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.
User can send vibration to strangers by short clicking their bubbles. 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.
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.
Result
Branching Storyboard
7
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.
5
Let’s take a close look
4
1
11
2
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.
Recieved 33 feedbacks
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.
User Flow
There is almost no menu in this app, most of the interaction will be achieved simply with user’s hand movement.
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.
Interaction Design
A mobile phone App which can build an indirect and gentle way of interaction between friends as a way to solve social anxiety.
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.
The State Transition Diagram
Prototype Developing
Generally the result shows that:
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.
Generally there are only 4 levels of this interaction. User can scroll all the way down from the first level to the last one.
All the user’s friends will be shown in this view no matter the distance. The interaction logic is the same as the mainpage
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.
Start of Idea
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.
10
Site Map
Questions I prepared
Functions
9
Sequential Storyboard
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.
by Kefan Xu
Persona
Conclusion
User Testing
Focus Group
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.
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.
Most of users 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;
Early Research & Framework Design
Imagine 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.
Feedbacks I got