mbrace is a mobile application that allows user to post their feeling and get interactions with others. Unlike other social media products, Embrace isn’t purposed to be used as a “chat tool”. It helps people who are struggling with mental health issues to cope with their personal challenges. When other users are browsing the posts, they can use stickers and comfort words to reply and decorate the post-board so that to make users who posted feel better.
My Involvement
Team
Client
Duration
User Research, A/B Testing,
Lo-fi Prototype, Presentation
Qiana, Wenli, Wang,
Callie, Pan, Yuexiao
Passion Project
Iphone X
Summer 2020
(3 weeks)
We wanted to help our users to pour out their negative emotions and make them feel better.
Anger, frustration, fear, and other “negative emotions” are all part of the human experience. They can all lead to stress and are often seen as emotions to be avoided, ignored, or otherwise disavowed. A better approach is to manage them without denying them. The negative emotion will create more stress in your body and your mind. People will feel uncomfortable and it can also lead to health issues if the stress becomes overwhelming. Nobody likes negative emotions and everyone wants to escape them but it is actually a big problem. However, there is a feeling that people sometimes have that these emotions will last forever or that the feelings themselves are the problem.
There are over 60% reported disruptions to mental health for vulnerable people, including children and adolescents (72%), older adults (70%), and women requiring antenatal or postnatal services (61%).
Initial Concept
While brainstorming any ideas cope with mental health, I remembered that I have went to an exhibition called “Wonderspace”. My favorite part of this show is confession board, it gives me the interaction with strangers. I was deeply moved and have the empathy with them. I seems feel like they said, “same, buddy.” or “l’m always with you”. l never perceived that strong entanglements with the stranger who lived in the same city as me.  Meanwhile, in the VR area, l actually can hear those sounds to tell their story, it reinforced my emotions into a climax. I was totally trapped into these stories and cried long time by myself.
So l proposed my idea which builds a similar design as
l saw in the exhibition with all of our members, they all loved my idea of “card flip”. And they also proposed other ideas to combine with mine. We all agreed on the color style will be warm(maybe linear color) and design style is kind of lovely. I am extremely happy to gain the affirmation and start to design this new app with my team.
Research
Firstly, we had conversation with 15 interviewees to ask for their pain points and needs.
They offered us a detailed overview of what it like when people are suffering from negative emotions. We also read some online articles on Verywell mind, Emotion Researcher, Zhihu.com to find key points of what are people’s problems and needs. Following our research, we created an affinity diagram to develop some potential features that may solve our users’ problems.
Next, we drew the 2*2 matrix to prioritize the functions we got from affinity map.
Following our research, we found our respondents wanted a platform where they can post their feeling without judgments but positive interactions. Also, they want to find people who have similar experiences with themselves and comfort, accompany each other.We chose to design the features which have higher user values and less development efforts.
Finally, we decided to include these four main functions:
  • Post it: Allow users to post their feeling online and get replies from others.
  • Decorate post board: Enable others to decorate the post as a doodle wall with positive elements(stickers, short terms.)
  • Browse posts: Provide users to find people with similar experiences.
  • Anonymous: Allow users to use nicknames so that they can post and reply without concerns.
Comparative Analyze
App
First Impression
Product feature
Navigation
Pros
Cons
Vent
4.5/5
4997 comments
-- Very bright
-- Colorful
-- Logo is creative
-- Interesting
-- Express yourself  with broad range of emotions and colors
-- React to other people’s vents using the response buttons
--Provide support 24/7-- Make friends and chat privately in real-time
-- Add button in the middle, and showed the emotion first (how do you feel), a lot of more interesting emojis are locked for vip user
-- There’re long list of adjective which express your inner feelings
-- You can only register with your mobile phone number, and do not support email and third-party account registration/login
Tell
4.6/5
2003 comments
-- Concise and fresh
--The homepage
simulates the style
of letters in real life,
using postmarked
cards to display
strangers’ messages, like
real letters
-- Anonymous
-- The user can be a talker, who can express his worries in words, or a listener, who can help other users answer questions
-- The user has expectations for replying the letter
--Few categories, simple functions
-- Classification:
① Anxiety Hall (homepage)
② Small bonfire
(multi-person chat room)
③ Systematic messages
-- No extra elements, less interference
-- The core functions are simple, users are easy to use, and can quickly enter the core process
-- There are too few real-time messages from other users on the homepage
-- After filling in the answer letter, it cannot be modified or withdrawn
Lyf
4.4/5
172 comments
-- Clear and live
-- Nice Illustration
-- Comforting UI color
-- Post your experiences (known as “beats”)
-- You can choose to share your beat with select people, everyone, or wear a mask to be completely anonymous.
-- At the rate of $10/hr, psychologists are there for you on demand 24/7.
-- Very normal, easy to use
-- Homepage, search, post button in the middle, message and profile
--Positive quote and slogan in the middle, invite friend CTA button in the bottom
-- Mint Green is caring
-- There are too many contents showed on the first homepage
Secret Planet
4.4/5
312 comments
-- Science, technology, very refreshing
-- Immersive animation experience
-- The user can be a talker, and pay to choose to chat with other users online; you can also apply to become a talker and earn money by chatting with other users
--Use different planets instead of different emotional problem categories (Roast star, love star, story star, regret star, music star, goddess star, wishing star)
--The registration process is simple, one-click login with mobile phone number
-- Onboarding is an animation with music that tells the story of a secret planet.
-- In some scenarios, the background music is a kind of interference
--After clicking the icon in the tab bar at the bottom, the back and forth changes are not obvious
Little Crystal
4.4/5
646 comments
-- Simple and easy to use
-- The product positioning is a "diary", and users can record their current thoughts
--Encourage users to be anonymous, users are more willing to express their true thoughts under anonymity
--Use different planets instead of different emotional problem categories (Roast star, love star, story star, regret star, music star, goddess star, wishing star)
-- No extra elements, less interference
-- Users can quickly enter the core process
--Only one user message is displayed on one single page
--The blue and black background looks dull
How might we design a unique product that allows users to post
their feeling
without afraid of being judged but getting positive feedbacks?”
Design Goal
Information Architecture
Lo-fi Wireframe
Home Page
Single post overlapping?
Swipe right -- left
Four grids
One button switch or
slide down?
Multiple posts Vertically
Slide down
Change view and fliter icon button on the left?
Adding post is floating or not?
Icon or icon + text?
My Page/ Post Page
Search posts
function
Choose the
catergory
Edit the post
contents
Single post overlapping?
Final Design
Onboarding
Using carousal to tell the user four main features with attracting illustration. And the user can use anonymous name and non-portrait photo.
Post Detailed Page
Tap post can bring users to post’s detail page. And when you look the post details, you can choose to flip the post and see this post decoration.
Interaction
On this page, users can check updated replies to their posts to understand how many people are caring about them. The user can see details about the which people interact which interaction with him.
Write Post Page
It’s very easy to post with less steps and very clear feedback (like clear feedback of post success).Allow users to post their feeling, choose a category.
Interaction
On this page, users can check updated replies to their posts to understand how many people are caring about them. The user can see details about the which people interact which interaction with him.
Write Post Page
It’s very easy to post with less steps and very clear feedback (like clear feedback of post success).Allow users to post their feeling, choose a category.
My Profile
Users can also check the status of previous posts and set if they are done or still a “problem”. On Myaccount page, users can also change their avatar and their preferences of categories to make their experience better.
Visual Guide
Reflection
Made in Webflow