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.



Leave a Reply