UX Design, UI Design
BC (Breast Cancer) Healthline is a Health App empowered by Healthline Networks, Inc. It connects Breast Cancer patients together by providing a messaging system and discussion groups, and meanwhile shares the latest news and research information.
I came across this App when I was scanning the newly released Apps in App Store. The idea of helping the people who are bravely struggling and fighting against cancer to stick together and support each other immediately caught my eyes. Since I know exactly how it feels as a family member of the cancer patient. I was eager to check it out and see how it can benefit my mom.
After looked into the App in detail, I felt that this App can be significantly improved from user experience perspective to better serve its noble purpose. As a UX designer, I had such intense motivation to check it even more closely and planned to give expertise suggestions as much as I can.
The app is structured as follow:
Sign up/Sign in process
As illustrated in the flow chart above, the registered user can log into the App with his credentials (email address and password). The new user has to answer lots of questions to provide personal information before creating an account.
BC Healthline App hierarchy
The App has 5 tabs on the bottom which are also 5 well-grouped feature sets.
First one is Members, the user will be provided the best match each day based on his personal information. The user can immediately chat with this person and build a connection. Then the section below is a list of all the activated users in the system. The user can freely view their profiles and send requests to connect with them if he is interested.
Secondly, Messages, which I suppose is the most frequently used tab. This is the feature which highly matches the core value of BC – connect with and support each other. The user will be able to see all his previous matches and conversations here. Then he can either pick up a previous conversation or start a new one.
Thirdly, Groups, the secondary hero here. The user will see six discussion groups here with different topics, he can join the group of his favorite topic and chat with all the people with the same interests in that group.
Fourthly, Discover. Here is the news and article feed. Latest news and research information is provided here. They are grouped by topic and featured.
Last but not least, Profile. The user can view and edit his personal profile here (change the information which was provided during the registration process). Additionally, the user can adjust App settings, such as notification and match frequency here.
Requirements and Issues
From UX perspective, I identified some goals that I wish to achieve in redesign and some issues that will negatively impact how the current design serves its users. I also noticed that some features which will make the experience fluent are missing.
- Reduce cognitive, memory and physical work of the users, this is especially true when the target users are patients suffered from Cancer;
- There should be enough flexibility while using the App, to meet different users’ needs in different scenarios;
- The app should display sufficient relevant information that a user cares about most;
- The information provided should be easily discoverable and accessible;
- The App should be stable, reliable and secure to use;
- The status/feedback of the system should be visible and clear, so the user can feel confident while using the App;
- There are abundant ways that a user can connect to others;
Issues in existing product
- The interface should be warm and friendly, which matches the core value of the product: connect and support the Cancer patients, and will simultaneously comfort the patients;
- The primary color should be kept rose pink and green, which is consistent with the existing color palette.
- Information overload, too much text on this page immediately makes the first time users overwhelmed;
- Infinity questions (>10) make people frustrated;
- User cannot skip questions;
- User cannot enter some personalized answer to certain questions;
- Important info: gender is not visible;
- The rationale of matching is not clear, which makes the match not that credible;
- User cannot block persons on the list;
- User cannot invite friends from other social networks/contacts;
- User cannot add a person to friend;
- User cannot see the real time status;
- User cannot search for a specific person;
- Space for the profile picture is wasted and chatting bubbles look too narrow and too long to read;
- Plus button next to the input box does not match its real functionality (Send images);
- User cannot search for a specific keyword in a conversation;
- There is no such a place for the user to keep the people he wants to stay in touch (Friends);
- User cannot search for a specific person;
- Notification is not working properly and cannot indicate whether it’s on or off;
- User cannot reply to one’s message with so many members talking in the chatting room;
- People cannot figure out whether an article worth reading by just title and photo;
- User cannot share articles with his contacts;
- The user may care about a certain keyword/topic but not able to be aware of what related to the keyword is happening in the sea of information;
- The user may care about a certain keyword/topic but not able to be aware of what is happening in the sea of information.
To make the page less overwhelming, I reduced the explanatory text to release cognitive burden. Then I made the background more stylish, the color palette more refreshing and harmonious.
Meanwhile, I changed the CTA text to ‘Connect with Others’, which helps to explain what this App can bring to the user.
First of all, I added a progress bar on the top which shows how many questions has been answered and how many are left. This gives the user a clear idea of where he is in the progress and encourage him to keep going to complete the task.
I also added a ‘Skip’ button next to the progress bar, which give the user the flexibility to jump to create an account directly and come back to fill the information later. This helps the user to lower the physical effort.
Last but not least, the redesign has an input fox for the user to enter an answer that is not on the list, just to add more flexibility. At the same time, the product team can also leverage this user-produced data to inform next iteration.
I changed the look and feel of profile card to make them visually more interactive and warm. I also made the primary CTA button highlighted to encourage the user to start a conversation comfortably.
Besides that, I made the gender info visible here because it is widely known as a critical factor while choosing a person to talk to. And I also make the online status visible here, which will definitely help the user to make a decision.
I folded features such as Add to Friends and Dismiss behind a ‘More’ button on the profile card to enable users make a quick move, meanwhile lowers physical efforts.
A refresh button will help the user quickly explore the up-to-date possibilities and a search button helps to connect to a certain person or a group of people that share certain attributes easily.
I added a new section for ‘Friends’ here, where the user can build and maintenance a long-term friendship with another patient. In this way, their connection is more stable and the ‘Friends’ label will definitely help the user to feel better.I also added green dots on the profile picture to indicate new messages coming in. An ‘Invite’ button can be a good channel of bringing other patients onto the platform.
On conversation page, I shift the profile picture up above the text bubble, so the text bubble is wider and therefore easier to read. I also added 4 handy features –View Profile, Search, Delete and Remove Friend - in the top right corner. All of them have very popular use cases.
I change the button of sending picture from Plus to an Image icon to make it match to its real functionality.
The biggest change I made here is the notification button. By clicking on the button on the top right corner, the user can turn on/off notification for each individual group. And the notification status will be reflected on the list clearly. So the user will stay informed. I also added green dots on the group picture to indicate new messages coming in.
Since friend recommendation and likes are both crucial reasons for a user to read an article, I added those to each posted articles.
I also added Sharing feature and Bookmark feature on the top right corner, which is widely acknowledged needs for a news feed page. In addition, s refresh button can help the user easily get the latest posts in this Discover section.
I left most of the parts on this page as it is, except for the notification settings. Let’s imagine, if a user is highly interested in a new therapy named ‘Therapy X’ and badly wants to be informed wherever (Groups or Discover) something relates to it arises. I think it will be extremely helpful if the user can set it as the keyword on setting page and get notified.
Since I feel so emotionally close to the target users of this App, I am strongly motivated to provide as many suggestions as I can to make this App better. All the requirements and insights I proposed come from widely known usability principles and my previous experience of talking with Breast Cancer patients in ward/on social network platform such as Facebook groups and Cancer forums. Once fully polished and the entire interactive prototype is done, it can be easily tested among the patients. In this way I can validate my assumptions and solutions, and eventually improves my redesign.
I sincerely wish this App would grow better and better, because I deeply understand how important it is to be companied with others while taking this challenging and uncertain journey.
Want to know more? Please drop a line. My contact info is listed in the floating footer；D