Visva's New 'Reactions' Feature
Role: Product Designer
OVERVIEW
The design process behind Visva’s Vibes as reactions to support Visva's mission to connect with people in a meaningful way, without the usual pressures of social media.
RESPONSIBILITIES
User research → Problem definition → Scoping & Prioritization → Design → Prototyping interactions and Conducting usability tests → Handoff
TIMELINE
April 2020 → July 2020
THE PROBLEM
Using in-app anchors, we learned that, sadly, new users do very little interactions with the content on the platform. It affects the relevance and quality of the content provided by AI of the platform because it has almost nothing to analyze to learn. Gen Z is the generation with the shortest attention span. It's unrealistic to expect them to stick around while AI learns more about them.
I conducted a session with the algorithm team. We used the Effort and Impact matrix to decide what kind of change we are better off doing.
GOAL
Improve engagement* rate with posts via reactions
* Engagement — the percentage of people who leave a reaction after reading a post
15% of the increase can cause significant positive change for the business
Visva's mission is to create meaningful connections. Vibes were born during a conversation about how the Visva app should be a safe space where users can talk about the things they love - without fear or social pressure. The team and I wanted people to be able to engage with content in a new way, and Vibes is the driving force behind that.
New users do not interact with the content
We found out that only 18% of users react to a post after reading it and that improving these metrics by 15% could significantly shorten the learning curve and lead to a positive change for the business overall.
The percentage of people who leave a reaction after reading a post was the primary success metric I was relying. Also, it's easy to track, it's measurable, and precise.
TARGET AUDIENCE
Gen Z is teenagers and young adults who grow up using social media.
They need a way to express themself through digital products because social media is the main channel of their communications.
You can read more in my another project here:
My assumption was that simple kudos button doesn’t represent emotional connection we need to provide to young generation just because of the nature how they are using other social apps.
USER STORY
To prove my assumption, I thought it would be exciting to give our users the ability to react with a broader range of emotions and see how it improves the engagement.
“As a person for whom social media is the main channel of communication, I want to reveal my feelings through the product's interface to express myself openly and make meaningful connections with people.”
USER PROBLEM
“👏” doesn’t represent emotional connection
Post cell with Kudos
FIRST CONCEPT
First, I decided not to reinvent the wheel and see how users would react to Facebook-like reactions. I did a simple clickable prototype using native iOS emoji and evaluated it in a usability session. I used the company logo as the default button because it represents neutral emotions.
During the session, I saw the high interest in the Vibe button and tried to react. It was enough at this stage to prove my assumption and move forward to develop something relevant for the new generation.
TEAM WORK
Developing a new reaction concept relevant to Gen-Z was challenging for me.
I felt stuck. So I asked for help from my team. As a team, we did a few brainstorms and came up with the idea of using Gen Z slang as the platform reactions.
Because what can be more relevant to them than the language they invented, right?
Having the list of the most popular slang words and phrases using by teenagers, I worked with our illustrator to create a set of images for these reactions.
We started to call them Vibes.
A glossary of Gen Z slang
UNIQUE VIBES
Having the list of the most popular slang words and phrases using by teenagers, I worked with our illustrator to create a set of images for these reactions.
We started to call them Vibes.
Custom illustrations for Vibe in the process
CARD SORTING SESSION
I did a card sorting session to find out what vibes are essential and speak with the audience.
I made these cards and printed them out. I sat with teens in the same room and observed their behavior. I asked session participants to describe each Vibe by the illustration on the front side. Then they could read the description we come up with as a team on the backside.
I was interested in users' reactions to design, their comments on images and terminology used, their opinions on their experience, and so on.
I established favorites based on the insides from that session. These six illustrations went further in the process to become Visva vibes.
Vibes are not a new type of feature used in social media. Vibes are a less universal version of Facebook reactions because they were built for a very specific audience. But, I was surprised to notice that the top 6 chosen vibes were relevant to the reactions used but Facebook. This finding was very positive for me as I didn't have so many resources for the research.
MID-STAGE REVIEW
To evaluate the proposed solution, I tested an interactive prototype. My biggest surprise was how this layout affected users' understanding of the platform.
People started comparing it with other popular social media and, more critically, expecting to see the same features.
Visva lost its uniqueness. I had to step back to the ideation process and develop a different solution for the layout.
New users gave the wrong description of what the Visva app can do for them.
The solution doesn't explain why people should use Visva over other popular apps.
Visva's unique value proposition isn't obvious at first glance.
IDEATION
There were a lot of experiments. My goal was to make it Unique, Useful, and Playful.
And I found a middle ground: Inside the post sells, the three most commonly selected vibes will appear beside the default vibe button.
With that layout, the app is easy to scan and visually illustrates the platform concept that values users' emotions. As somebody who is just scanning the feed at a glance, you could understand the general sentiment of how people are vibing to the story.
The layout was approved for further polish.
Make Visva's unique value proposition obvious at first glance.
Make the feature look on brand: Vibrant, Playful, Friendly.
Users must be interested in trying that feature.
DESIGN DELIVERABLES
I did a few design tradeoffs to make this layout work for each post type supported by the platform.
To display the top 3 vibes, I need a minimum fixed post cell height.
It affected the second tradeoff - the aspect ratio of a landscape image. We hide about 11% of the image on the sides to fit the post layout.
And the third one is dedicated to small text post cell design. I call it a design tradeoff because it causes more developers time to implement new requirements.
Each tradeoff was discussed with the PM and Developers for approval.
USABILITY TESTING
After the design was implemented, we launched it for our 200 internal TestFlight users and ran a survey. Overall feedback was very positive and the team decided to push it to production for end customers.
Based on Internal TestFlight users
Users can distinguish the Visva app from competitors.
UI design is on-brand and resonates with the target audience.
The implementation is robust enough to accommodate all users.
THE RESULT
My initial goal was to improve post-reactions retention by 15%. Four months after the new design was released, we saw an increase in people leaving reactions from 18% to 45%. That means almost half of users leave a reaction after reading a post. That is almost twice better than my initial goal required by the business. So I call this change very successful.
Engagement increased by 27%
* from 18% to 45%
Upcoming improvements:
Adapt the left alignment of the app for left-handed people.
Make a higher contrast ratio of the colors for low-vision people.
Support voice-over.
Add supportive animation to vibes.