.svg){kind=small}
Marigold App is a tool to complement patients’ treatment with a small, anonymous support group of peers in recovery. I led the UI refresh of the whole app.
Time:
Jan 2020 to Apr 2020
Role:
UX/UI Designer
This is the first project I worked on when I joined Marigold Health as the first UX/UI design hire. At that time, our mobile app needed a whole UI refresh. I went through the entire app and identified these following problems.
Given this is a big task that included several different features redesign and admins have a different version from patients, I only chose patient's view of Home Page and Chat Page to showcase.
I decided to do an app critique and some competitor analysis first. I checked several messaging apps as well as anonymous community apps. Here are what I found:
1) Use profile images for groups,
2) Show group names in bigger font size,
3) Add notification counts,
4) Separate group messages and direct messages by using different style,
5) Anonymous apps usually use dark theme.
I created the initial version by applying those findings.
I tested these designs with some of my colleagues internally. All of them preferred V2 with circle images. For the default page, they preferred V1 because people have already confused about group messages and Direct Messages, it's not good to move things around by having a 'Getting Started' section.
But I received some comments on the visual style:
" I feel it's too spartan/clinical in style. No soft shades, shapes."
" It would be good to have more colors even though I know this is for minimalism style. It's a little bare."
" I like rounded boxes instead of hard rectangles."
According to the feedback, I created some new versions.
I tested these six versions and people preferred the one with yellow header and the doodle background image. So I used V5 as the base of new Home Page.
I also added a Dark Mode switch to Home Page. Here is the final design:
The biggest challenge we had when redesigning the Chat Page was how we could differentiate users without risks of leaking personal information. Since this is an anonymous group chat platform, we can't allow users to upload their own images as the profile picture.
We had the feature that can allow users to change the color of their username from the bottom tab bar. But we should do more than that. I decided to keep the feature and add more variables.
After did some competitor analysis, I drafted the initial version to get user's feedback. The idea was to add a circle before the username and use different colored circles to distinguish them.
Based on the feedback, I decided to keep the plus icon for actions and continued exploring different color options.
Here are more versions:
I tested these three versions, and V1 got the most votes. People love gradient color but it's too much for the chat bubble background and it'll cause readability issues. So we decided to use gradient outlines and circles but plain background color.
Based on V1, I create final designs for Chat Page. Here are some sample screens:
After we launched the new UI, we got a lot of positive feedback from users. The engagement rate also grew. We held Live Events via Marigold App and we noticed people really like customizing the color. A member even sent a message in the group chat to let other members know that they could update the app in order to customize the chat bubble color.
Since we had a tight timeline, I couldn't find users who matched our persona. I only tested the designs with my colleagues and other people who shared the same workspace with us. If I had more resources, I would like to have the opportunity to test my designs with real users.
We also noticed some issues after launching the initial version. At first, we didn't include the typing indicator because of the timeline. But we found users had a problem about not knowing other people were typing, especially when they shared their personal experiences during the Live Event. So we added the typing indicator and a draft section in the next built.