The Branch’s mobile app connects unpaid caregivers to a support community who have had similar experiences. The client tasked us to create a platform that was colorful and bright while also comforting and inviting. She believed caregivers deserved more attention and they were the people who kept families together. She valued authenticity, reciprocation, and altruism. Over the span of three weeks I designed a platform that catered to the users—unpaid caregivers.
The Branch had a placeholder website and the client said it would be adapted to the design of the app. During our kickoff meeting, we delved into our client’s expectations for the app as well as her preferences. After learning our client’s vision for the app we were able to become more engrossed in the app’s history and her passion behind it. It was important to us to make sure we met her expectations and proceeded with users’ expectations and experiences in mind. We needed to make sure our design decisions met with their goals.
Based on our research, my team and I decided we needed to use bright and friendly colors in order to create and environment which encouraged users to connect with others. We also learned creative UI techniques to accomplish this, such as forgoing imagery and using icons instead.
Following our research, my team synthesized three initial design principles centered around our client’s brand aspirations and the needs of their users to apply to our design decisions. My teammates and I spent several hours brainstorming what kind of community we were trying to build—and what we needed to focus on to accomplish this.
Since caregiving can be a stressful or lonely experience, we wanted to lift users’ spirits. The overall design needed to foster a sense of community that was supportive and communicative. Being a part of this community means having the ability to connect with people who are or have been in similar situations, have common interests, and ideals. This camaraderie was accomplished through easy access to interactions with other users as well as a positive and encouraging environment.
We wanted to set the mood through the creation of an experience and environment that caregivers want to be in through color and other environmental elements. All designs were created to set a home-like atmosphere. Bright colors were needed to make users feel at home and exude positive vibes so they felt more comfortable sharing personal stories and more willing to interact with members of the community.
Icons and/or illustrations were used as metaphors. This enabled the app to appear more approachable so caregivers were comfortable and able to relate to what they are representing.
I took all the feedback provided by the client and created a user-centered app that allowed for easy communication and a stress-free environment.
More screens, including active states and pop-ups can be seen in the prototype.
Based on our design principles and user interviews, I wanted to make the daily inspiration the key feature on this screen to make it a calming environment.
I sorted these cards into one column to help users visually identify where they are in the selection process. Users liked that they were able to access all of the topics information within the tabs and that the search bar was more easily accessible.
I applied the same colored detail to the category icon at the top of this screen that is used in the empty states. I also moved the search bar to the top of the screen so that the information wouldn't be as broken up.
Users liked the change from my circle to connections because the language was unfamiliar to them and they were unsure of what to expect when selecting this tab. They also liked the break up of messages and contacts into tabs.
I made the choice to put private conversations first because messages would be the most important for them to access since contacts could be added within a message.
I took inspiration for the empty states from the design principle "this must be the place". I wanted these designs to create a place instead of just showing a sad face, etc.
As part of my final deliverables, I created a style guide to help The Branch with future design decisions and to help cultivate the brand. I also created a Proto.io prototype with the final screen designs. Since we didn’t have a complete flow, the prototype ran through the screens in chronological order to provide a better idea of how the end product looked. The flow was incomplete because we chose to only do a few screens from the onboarding process due to the similarity between the screens. Also, we aimed to mockup a diverse amount of key screens, focusing mainly on those differing in layout and elements.