The Branch

User Interface Design | Branding

Company

Challenge

Design an app that sets a mood and makes people feel at home to encourage users to connect.

Tools

The Branch

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.

UX wireframes

2017

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.

Wireframes provided by the UX team.

Competitive ANalysis

2017

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.

In-Category
  • Family Caregiver Alliance felt dated due to the lack of whitespace, tight spacing, frequent use of blue in text and inconsistent type sizes. The use of photographs are used resulted in a more serious tone. Additionally, the nautilus logo felt educational and scientific.
  • Inspire's minimal color color palette combined with its photography and the layout of elements cast it with a plain professional and somber tone.
  • 7Cups created a relaxing and cheerful feeling through a morning theme/aesthetic and illustrative imagery. There was some disconnect between color palettes due to the distinct difference in saturation. It also employed straightforward and easily understood icons.
  • Talkspace had a cool color palette that made the app seem more calming and approachable. Its bold use of color with minimal accents made it stand out more from the other competitors.
  • Hello Mamas had a feminine and sweet vibe through the use of a soft color palette and use of script font. It utilized imagery in a simple layout that made it appear warm and welcoming.
Out-of-Category
  • Caring.com's photography was haphazard because the photos are unrelated and differ greatly in content and stylization (all were bad stock photos). It had an outdated color scheme due to the desaturated orange and forest green. Also, the location and layout of the cards at the bottom of the screen make it feel overcrowded and unplanned.
  • Pacifica's nature imagery made the app seem relaxing because of their dark and hazy overlay. It also had a modern feel due to its sharp corners, whitespace, and use of black sans serif type.
  • OkCupid's design was simple because of card layout, whitespace, and use of sans serif type. Large photos made it up close and personal. It was fun and friendly because of colorful illustrations and round icons.
  • Nextdoor looked simple because of its layout and whitespace. It had a friendly tone from user photos and round icons. Though it was a bit basic due to the monochromatic color scheme.

Design principles

2017

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.

We're all in this together

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.

This must be the place

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.

Symbolize my life

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.

Key Screens (Individual Iteration)

2017

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.

Home

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.

Topics

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.

Conversations

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.

Connections + contacts

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.

Empty states

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.

Other deliverables

2017

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.