Context
SEEN
is a video messaging app that focuses on quick interactions and reactions which are filmed when a user opens a message.
The following case studies will go through multiple stages in my UX internship which are collapsed below:
TEAM
As Seen is a startup, I worked within the smaller full-time team consisting of
Faheem Kajee (Cofounder)
Karen Gillan (Cofounder)
Bruno Teodosio
David Cruz (Engineer)
Herman Kwan (Engineer)
ROLE
Marketing and Design Intern
DURATION
May 2023 - Aug 2023
The Unique Problem
Seen was founded by Karen Gillan, renowned actress from Avengers, Guardians of the Galaxy, and Jumanji, along with serial entrepreneur Faheem Kajee.
At the time I joined the company, Seen’s core functions were still under development. However, as investors and the company’s 50K+ followers (on Instagram and Tiktok) pressed for updates, I was able to see the company grow from its first fifteen users to over 3,000 users in the beta app.
Through multiple marketing campaigns I directed, we were able to maintain a close relationship with our testers. For each user, we onboarded them by walking them through downloading the app, sending their first "Seen," and providing different use cases (vlogging, sending funny videos to watch reactions, reconnect with long distance friends and partners). We'd then prompt them to invite 3-5 close friends to use the app with.
When users came back for a follow-up call, core issues with the app came up when talking about their friends first reactions. These friends were users who had not been onboarded by our team and were reported to enter the app not understanding what the app did, how to use the app, and why they should use it. Then, because these friends did not understand the app, they would not open it, leaving our users with no one to talk to. This occurrence was the leading cause in our dipped retention rates after a week.
Conducting User Testing
Around early June, I 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
Identifying the Design Problem
Seen's onboarding flow at the time
1. Onboarding
Our app's onboarding process involves one screen where users accept all permissions. We found that users felt surprised that their reactions were recorded when joining the app. Likely, when they were accepting the permissions for the app, they did not read through the text and entered the app without understanding the implications or purpose of the app.
PROBLEMS
☹︎ Users do not understand how to use the app or what the use case is
☹︎ Users do not know who to invite to the app
☹︎ Users feel too much pressure sending a video message
☹︎ Users feel like they should not send another message when they have sent the last message
☹︎ Users do not know who to invite to the app
☹︎ Users feel too much pressure sending a video message
☹︎ Users feel like they should not send another message when they have sent the last message
Retro's onboarding flow
Looking through the onboarding flows of the most notable social apps (Snapchat, Instagram, and Titkok), I noticed a straightforward method of "giving the user a use case/instruction" while onboarding.
But looking at more emerging social media apps (Retro and Bereal, for example) there is a more intentional onboarding flow--one that convinces you to use the app in a more psychological, anti-social media way. As Seen is more aligned with these ideas and battling in a smaller fish pond, I opted in for a more immersive experience while onboarding. As we had trouble with our users actually reading through permissions, I design screens to set Seen as an app with 'new social norms' which are read while you enter the app.
The process for these designs involved the following brainstorming slidedeck.
But looking at more emerging social media apps (Retro and Bereal, for example) there is a more intentional onboarding flow--one that convinces you to use the app in a more psychological, anti-social media way. As Seen is more aligned with these ideas and battling in a smaller fish pond, I opted in for a more immersive experience while onboarding. As we had trouble with our users actually reading through permissions, I design screens to set Seen as an app with 'new social norms' which are read while you enter the app.
The process for these designs involved the following brainstorming slidedeck.
BeReals from my friends which fit the "vibe" Seen was going for
Brainstorm & Prototype
Design Breakdown
The goal of this onboarding flow was to introduce the app's use case and a unique "vibe." General goals included decreasing the pressure of sending a message (especially, sending a second video message after you have not received a response) and introducing the social use case for the app: something for you and your close friends.
START SCREEN
The app opens up to a casual seen in the background along with reactions which bounce on the screen when you shake the app. Both the bouncing reactions and the button which says "let's play" build on the app's playfulness. The background video is meant to show a user what type of content they should see on the app (low effort and frequent). Rather than an drawn icon, I felt it was most important to have real people, as that is the main purpose of the app, seeing your friends.
1. GET COMFORTABLE
I chose to replace the permissions section for the app into rules which used visuals and interactive features to get users prepared to enter the app. The first rule is to "get comfortable," which is paired with the camera permission. Since users often felt surprised by the camera when entering the app, I felt it would be best to have users to register a front-facing camera in a low-commitment setting.
START SCREEN
The app opens up to a casual seen in the background along with reactions which bounce on the screen when you shake the app. Both the bouncing reactions and the button which says "let's play" build on the app's playfulness. The background video is meant to show a user what type of content they should see on the app (low effort and frequent). Rather than an drawn icon, I felt it was most important to have real people, as that is the main purpose of the app, seeing your friends.
1. GET COMFORTABLE
I chose to replace the permissions section for the app into rules which used visuals and interactive features to get users prepared to enter the app. The first rule is to "get comfortable," which is paired with the camera permission. Since users often felt surprised by the camera when entering the app, I felt it would be best to have users to register a front-facing camera in a low-commitment setting.
2. CLOSE FRIENDS, ONLY
Often, we'd hear worries from invited users about who is on the receiving end of the message they're recording (ie. "is it like a public post? or is it something that is send to all your contacts in your app?") To clarify this, I added the rule "Close friends, only" as users allowed access to their contacts.
When you compare this screen to the previous "1. Get Comfortable," you will notice that the action buttons are on different areas of the screen. This is so that it becomes more difficult for a user to skip through reading the instructions by spamming the buttons.
Also, the idea of "close friends, only" draws from BeReal's initial marketing. As a general trend we found users who stopped using Instagram and BeReal left because too many people they followed were people they didn't actually care about (ie. acquaintances and content creators). This is especially important for our branding as it decreases the pressure of filming a video as you no longer need to worry about the way you look when sending a video to a close friend.
Often, we'd hear worries from invited users about who is on the receiving end of the message they're recording (ie. "is it like a public post? or is it something that is send to all your contacts in your app?") To clarify this, I added the rule "Close friends, only" as users allowed access to their contacts.
When you compare this screen to the previous "1. Get Comfortable," you will notice that the action buttons are on different areas of the screen. This is so that it becomes more difficult for a user to skip through reading the instructions by spamming the buttons.
Also, the idea of "close friends, only" draws from BeReal's initial marketing. As a general trend we found users who stopped using Instagram and BeReal left because too many people they followed were people they didn't actually care about (ie. acquaintances and content creators). This is especially important for our branding as it decreases the pressure of filming a video as you no longer need to worry about the way you look when sending a video to a close friend.
.png)
3. SEND A MESSAGE TO SEE YOUR FRIENDS
The final rule before users create a username and profile is "3. Send a message to see your friends." This introduces a "why" for sending a message as well as why for enabling notifications. As users felt like they shouldn't send a message unless they received one, I wanted to reframe it as a way to see your friend regardless of whether they respond (since, their reaction is sent when they open your message).
Especially since this permission requested users to enable notifications, I wanted them to draw a direct connection between enabling notifications and seeing their friends. In both this screen and the previous, we'd get the photos of friends from their contact photos.
The final rule before users create a username and profile is "3. Send a message to see your friends." This introduces a "why" for sending a message as well as why for enabling notifications. As users felt like they shouldn't send a message unless they received one, I wanted to reframe it as a way to see your friend regardless of whether they respond (since, their reaction is sent when they open your message).
Especially since this permission requested users to enable notifications, I wanted them to draw a direct connection between enabling notifications and seeing their friends. In both this screen and the previous, we'd get the photos of friends from their contact photos.
2. The Main App Screen
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 section, 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.
Reflection
Marketing and designing at Seen gave me the opportunity to immerse myself in various aspects of UX design (user testing, UX research, wireframing, and Figma to name a few). But, what I felt has been most valuable to me was learning to communicate with the rest of the team. For the first few months of my internship, I worked closely with my direct boss, Faheem. I’d present my designs to him, and he’d present them to the engineers. But, I felt hindered by this system because I could not receive proper feedback on my designs. After expressing my concerns to Faheem, my design process underwent a transformation. The introduction of bonding events and group meetings provided a platform for me to present to the core team.
From more frequent messages to pitching ideas over calls, I learned about design restrictions I had not originally considered. Specifically I can recall after one meeting where my proposal was shot down, I had followed up with an engineer over Slack. Over a few messages I better understood their perspective: the engineer team’s priority was improving core mechanics of the app (loading times, reported bug fixes, and cleaning up the code). And, given that Seen is a startup, the engineers were all stakeholders in the company. Their vision for the app sometimes did not align with my own which had been built off using the app myself and listening to our user’s suggestions and frustrations. Other times, the engineering team aligned with my goals, but there was a disagreement on execution. This open dialogue with the team significantly informed my design process, both when talking to users again and when considering other designs.
From more frequent messages to pitching ideas over calls, I learned about design restrictions I had not originally considered. Specifically I can recall after one meeting where my proposal was shot down, I had followed up with an engineer over Slack. Over a few messages I better understood their perspective: the engineer team’s priority was improving core mechanics of the app (loading times, reported bug fixes, and cleaning up the code). And, given that Seen is a startup, the engineers were all stakeholders in the company. Their vision for the app sometimes did not align with my own which had been built off using the app myself and listening to our user’s suggestions and frustrations. Other times, the engineering team aligned with my goals, but there was a disagreement on execution. This open dialogue with the team significantly informed my design process, both when talking to users again and when considering other designs.
.png)