Context
Around early June, I also began directing our Seen Pre-Internship which was a 3 week program for applicants to learn about Seen and pitch a marketing campaign themselves. Over 1.5 months, we were able to test the app with over 500 users and their friends.
Feedback
With three to five 30-minute user interviews a day, it became much easier to categorize pain points in our app UX. Specifically, I heard the following at high frequency.
☹︎ "15 seconds to film a message was too short"—often time users are cut off
☹︎ There is no feedback for when a message is sent, so users are left not knowing whether they need to re-record or not
☹︎ User’s friends have trouble understanding how to use the app and what the purpose of the app is for
☹︎ The app reminds people of BeReal
☹︎ Friends of users are not responding/reacting to messages
☹︎ Users don't swipe back to look at video reactions
☹︎ "15 seconds to film a message was too short"—often time users are cut off
☹︎ There is no feedback for when a message is sent, so users are left not knowing whether they need to re-record or not
☹︎ User’s friends have trouble understanding how to use the app and what the purpose of the app is for
☹︎ The app reminds people of BeReal
☹︎ Friends of users are not responding/reacting to messages
☹︎ Users don't swipe back to look at video reactions
Original Homepage
While some user difficulties could be addressed with changes to the app's system (increasing the message lengths, for example), there were specific UX issues that were discouraging users from returning to the app. In this case study, I focus on the home page concept, which failed to engage the user unless they received a message.
The image to the left depicts the original home screen. The top pill is a feedback notification. The large square is a video message that has not been seen from Karen Gillan. The following chats are collapsed, indicating that there are no new messages. This is the same for if the last message was sent by you or if you opened the last message, but had not responded.
Specifically, we'd hear about a situation where a pre-intern who'd send a message would not receive a response, leading them to lose interest in using the app. To address this issue, I proposed the introduction of a "Send" button for users, as opposed to messages automatically closing and fading into the contacts.
Note: at the time, we were certain that we'd want reactions on the homepage, it was just a matter of where we'd want it.
The image to the left depicts the original home screen. The top pill is a feedback notification. The large square is a video message that has not been seen from Karen Gillan. The following chats are collapsed, indicating that there are no new messages. This is the same for if the last message was sent by you or if you opened the last message, but had not responded.
Specifically, we'd hear about a situation where a pre-intern who'd send a message would not receive a response, leading them to lose interest in using the app. To address this issue, I proposed the introduction of a "Send" button for users, as opposed to messages automatically closing and fading into the contacts.
Note: at the time, we were certain that we'd want reactions on the homepage, it was just a matter of where we'd want it.
Mockup One
HOME PAGE
The app opens to the home page which has two tabs at the top--one for group chats and one for individual chats. Group chats and individual chats are separated since they typically create different interactions in the app (one-on-one chats feel intimate while group chats feel much more like group FaceTimes). Group chats are made with the pink "Create" button at the top of the page which replaces the star button we originally had.
CLICKING FRIENDS WHEN YOU DO NOT HAVE CHATS
When you have no chats, you are invited to start a conversation with the "Start" button. This was one of my focuses since originally
CLICKING FRIENDS WHEN YOU HAVE CHATS
The third screen shows two chats, both with different conditions. In chat with Sean Lee, you have sent the last two messages and have a button inviting you to send another. In the chat with Mary, you have multiple messages yet to read.
The app opens to the home page which has two tabs at the top--one for group chats and one for individual chats. Group chats and individual chats are separated since they typically create different interactions in the app (one-on-one chats feel intimate while group chats feel much more like group FaceTimes). Group chats are made with the pink "Create" button at the top of the page which replaces the star button we originally had.
CLICKING FRIENDS WHEN YOU DO NOT HAVE CHATS
When you have no chats, you are invited to start a conversation with the "Start" button. This was one of my focuses since originally
CLICKING FRIENDS WHEN YOU HAVE CHATS
The third screen shows two chats, both with different conditions. In chat with Sean Lee, you have sent the last two messages and have a button inviting you to send another. In the chat with Mary, you have multiple messages yet to read.
Mockup Two
In this mockup, the app opens to a screen with individual rooms for each conversation. As anticipated contacts per user would be between 2-20, it makes for a more intimate feeling. The "individual rooms" also makes room for exploring more unique ideas for contact-to-contact interactions. A downside is that it take out the potential for other screens (like group chats, possible content pages, and the app's focus on reactions).
The chat is also structured similarly to a text messaging platform, where new messages come in from the bottom and old messages come from the top. With this structure, there is the option of opening old messages as some users reported wanting context when watching a response.
The chat is also structured similarly to a text messaging platform, where new messages come in from the bottom and old messages come from the top. With this structure, there is the option of opening old messages as some users reported wanting context when watching a response.
Mockup Three
In this mockup, the general UI placement is still recognizably the same as the current app. The differences lies in reactions at the top and the new placement of UI elements (chat name, notifications, and time stamp). In these mock ups, the colors, icons, shapes, and fonts are meant evoke a more youthful, exciting app.
The UX relies on a similar system to the original layout, but introduces needed elements identified during our feedback period. For example, we have a start button for contacts where you have not started a chat, and a plus sign for chats where there has not been a new message. Both these elements encourage a user to send a chat, even when they have not received a message. In addition, reactions shown in the homepage rather than the chat history create more content for a user to come back to.
The UX relies on a similar system to the original layout, but introduces needed elements identified during our feedback period. For example, we have a start button for contacts where you have not started a chat, and a plus sign for chats where there has not been a new message. Both these elements encourage a user to send a chat, even when they have not received a message. In addition, reactions shown in the homepage rather than the chat history create more content for a user to come back to.
Mockup Four
In this mockup, smaller boxes are explored to indicate different conditions for the chats.
Again, there are different tabs at the top of the screen, however these are created by the user (Friends, Fam, etc...) Since we'd found many pre-interns invited their family members to join, I wanted to give them the option of separating the chat, as from a marketing perspective we did not want to begin advertising Seen as a "family app."
In both screens, the right-most box indicates a new message and the left box indicates the previous message. Each chat is reminiscent of a flip book--new content is on the right and older content is on the left. This is meant to allow ease of creating a new message and accessing old messages for context before viewing a new one. It also allows you to see that a reaction has been left on the old message. Given that chat boxes are shorter regardless of if it is a new message or an old message, more chats can be on one screen as a user scrolls. Finally, taking inspiration from FaceTime's home screen, I explored having the camera visible at the home page (since it was already active here) to invite users to click on the camera button.
Again, there are different tabs at the top of the screen, however these are created by the user (Friends, Fam, etc...) Since we'd found many pre-interns invited their family members to join, I wanted to give them the option of separating the chat, as from a marketing perspective we did not want to begin advertising Seen as a "family app."
In both screens, the right-most box indicates a new message and the left box indicates the previous message. Each chat is reminiscent of a flip book--new content is on the right and older content is on the left. This is meant to allow ease of creating a new message and accessing old messages for context before viewing a new one. It also allows you to see that a reaction has been left on the old message. Given that chat boxes are shorter regardless of if it is a new message or an old message, more chats can be on one screen as a user scrolls. Finally, taking inspiration from FaceTime's home screen, I explored having the camera visible at the home page (since it was already active here) to invite users to click on the camera button.
Final Design
For the final design, I iterated off my fourth mockup.
PROPOSED SCREEN
The design indicates three different conditions for a chat:
TOP - you sent the last message, and are invited to send another to Seen Group
MIDDLE - you have an unread message from Cameron
BOTTOM - you have not send a message to Faheem
In this design, I received feedback to declutter the page and have contacts displace on the left hand-side. In this iteration, negative space is meant to invite a user to click the camera button rather than an active camera. Reactions are also brighter on top of messages to indicate "new" content for a user to click on.
The third screen is additional UI to create a sense of a style guide for the rest of the app. This is a popup that appears after you film a Seen and are selecting who to send it to.
PROPOSED SCREEN
The design indicates three different conditions for a chat:
TOP - you sent the last message, and are invited to send another to Seen Group
MIDDLE - you have an unread message from Cameron
BOTTOM - you have not send a message to Faheem
In this design, I received feedback to declutter the page and have contacts displace on the left hand-side. In this iteration, negative space is meant to invite a user to click the camera button rather than an active camera. Reactions are also brighter on top of messages to indicate "new" content for a user to click on.
The third screen is additional UI to create a sense of a style guide for the rest of the app. This is a popup that appears after you film a Seen and are selecting who to send it to.
