The Branch

Client: The Branch
Timeframe: 3 weeks
Role: UI design
Tools: Sketch, InVision, Proto.io

image-screens.png
 
 

Challenge overview

Caregivers are unpaid individuals who assist family members, partners, neighbors, or friends with activities of daily living and/or medical tasks. In 2015, there were 43.5 million unpaid caregivers in the US. On average, they spend 24.4 hours a week caring for their loved ones; 56% of them work full-time. Janna Jackson, herself a caregiver, originally established The Branch four years ago after writing a business plan for an in-person coworking space for family caregivers. But her research indicated a coworking environment wouldn’t help with the physical and mental health issues affecting caregivers today. Instead, she switched gears to develop a mobile app that connects caregivers to each other.

 
 
Taylor.png

Janna brought in a Designation UX team to determine a solution. They discovered that caregivers often experienced loneliness, and liked being connected to fellow caregivers in order to share their stories and build an emotional support system.

They identified a primary persona: Taylor, a married iPhone user who worked full-time and cared for her mom. While she wanted to provide her mom with the best care every day, she also wanted to be able to balance all her obligations and feel comforted and supported. Taylor was frustrated by the fact that her family rarely helped out and friends didn’t understand her situation; she constantly felt overwhelmed and stressed.

 
 

Their final product allowed users to be greeted daily with inspirational quotes, subscribe to topics related to the caregiving journey, join group conversations, and exchange private messages. Their deliverables were handed off to my team to develop the app's visual style and branding.

At our kickoff meeting with Janna, we learned that the app needed to bring joy to the community, and instantly make users comfortable. The design should be positive yet practical, with the understanding that life for caregivers is rough but it gets better. She asked us to look to OkCupid and its playful balance between the color palette and illustrations for inspiration. Janna also urged us to use icons to represent topics instead of photography. The images she came across looked fake and she had a hunch that users wouldn’t want to see real depictions and be reminded of their situation. Because there are a fair amount of male caregivers, the client also stressed the importance of making the design gender-neutral. She was open to exploring darker palettes, but didn’t want anything too sleek or modern.

 

Understanding the product

To define our direction, our team looked at five direct and five indirect competitors, ranging from Family Caregiver Alliance to OkCupid.

 
 
7 Cups.PNG

7 Cups, an app that provides online therapy and counseling, uses colors of a sunrise to put users at ease and encourage them to open up to active listeners.

OkCupid.png

Online dating app OkCupid uses bold colors for its illustrations which are playful, easily understood, and relatable. The app has a casual vibe similar to chatting with a friend.

 
 
Pacifica.png

Pacifica helps users manage stress and anxiety with meditation, relaxation, and mood tracking. Dark overlays make the app feel serious and depressing—the opposite of The Branch’s goal.

Family Caregiver Alliance.png

The Family Caregiver Alliance website looks clinical and impersonal due to the traditional typeface header and color combination. Non-stock photography is used for authenticity but may hit too close to home for users.

 
 

From the competition, my teammates and I realized we needed to use welcoming colors to create an atmosphere that encouraged users to share their own experiences. We also learned to avoid potentially distressing or clinical imagery to form a positive, fun space for users to come together.

This research led us into our design principles. The first iteration wasn’t specific enough to The Branch and how we wanted the design and experience to feel to users—we had to focus less on what it was and focus more on what it needed to do. My teammates and I spent several hours brainstorming the kind of community we wanted 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 want to lift users’ spirits. The overall design fosters a sense of community that is 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 share similar ideals. This camaraderie is accomplished through easy access to interactions with other users as well as a positive and encouraging environment.

This must be the place
We want 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 are created to set a home-like atmosphere. Colors should make users feel at home and exude positive vibes so they feel more comfortable sharing personal stories and more willing to interact with members of the community.

Let’s symbolize our lives
Icons and/or illustrations are used as metaphors. This enables the app to appear more approachable so caregivers are comfortable and able to relate to what they represent.

 
 
Logo bg.png

Janna came to us with her logo already designed. This tree of life represented the balance, learning, growth, and relationships users would find in the app. One of her future-state goals for The Branch is to animate the leaves of the logo, which would grow in as users receive support.

 
 
 

Style directions

 
 

For the first style tile, I started out with bright purple and orange for an upbeat, energetic feeling. It was too sporty, so I toned down the colors and added green to balance them out. The lines and curves were slightly reminiscent of a sports brand, which evoked teamwork and dedication.

Style tile 1.jpg

Janna didn’t like all the white in the background but she really loved the color palette, saying it was bright, happy, and not too feminine. She also thought the chat could be simplified further for familiarity.

 
 

This second style tile originally started out with blue, beige, and red; I wanted to establish a warm, community environment similar to support groups at libraries. However, it looked like a government website so I made it more sophisticated.

The Branch_styletile2_sl.2.1.png

The client thought there were too many sharp angles in this design. She liked the icons, and indicated the chat interface was most recognizable, but the text wouldn’t be legible enough to users.

 
 

The third style tile was intended to suggest a community spending time outdoors in a park together. This direction expressed the whimsy the client envisioned for the interface, and was achieved through the leaf shape and multicolored icons.

The Branch_styletile3_sl.2.1.png

The client responded that this was a good representation of where The Branch wanted to go, and not too sweet. She also mentioned that the dusty pink came off feminine, so it was necessary to find a different shade or another color entirely.

 
 

Janna emphasized that she was open to different colors, and more importantly, wanted to know what users thought. She understood that users had their own opinions, and as long as there were no viscerally negative reactions to the palette, we were encouraged to experiment. She reiterated the majority of users aren’t particularly tech-inclined so keeping steps clear and accessible through high contrast and large text were key.

 

Iterations and testing

 
 
Home.png

1. Favorite topics was removed from the home screen because it also appeared in the topics screen.

2. I tried carrying over the leaf shape to the headings, but they looked too much like buttons.

3. Since saved conversations would appear in a list view within each topic, I changed the cards into a list to prevent confusion.

4. The daily inspiration quote didn’t stand out enough, so I stylized it with color and multiple typefaces.

 
 
Topics.png

1. The white background was too stark, so I changed it to a warmer gray to help make the design more personal.

2. I shrunk the topic cards as they were unnecessarily long and took up too much space.

3. I replaced the pink with a much brighter one, making it more noticeable.

 
 
My Circle.png

1. On the my circle screen, we added a search bar to decrease the time it takes to find a conversation or contact.

2. We split the sections into tabs to follow iOS best practices and because it didn’t make sense to keep them on the same screen.

3. Private conversations was changed to messages to avoid confusion with topic conversations with groups.

 
 
Aging Parent Topic.png

1. We placed the star within the header image, and moved the bell back to the top right to maintain consistency.

2. The search bar moved to the top of the screen in keeping with iOS convention.

3. The aging parent topic header banner looked separate from the general chat; I combined them to strengthen their association.

4. The left-alignment of the start a conversation button was awkward and was moved to the center.

 
 

My second iteration was tested with five users during the first round of testing. Our general goals were to see if users successfully picked up on the mood we sought to achieve, if the look and feel aligned with The Branch’s goals and values, if they understood the icons and text, and if information was organized clearly.

Overall, they commented that I needed higher contrast and larger icons in the bottom navigation, as well as larger text size throughout the design. Two out of five users thought it was too plain and would benefit from another color. There was some confusion about the illustrated icons used for activities and recreation and caregiver burnout—they wanted them to be more relatable and literal. Users also wanted to see larger photos to be able to connect directly and quickly to others participating in conversations.

UX considerations also came up during testing. Four out of five users were confused about what my circle meant and mentioned that contacts was more familiar to them. Changing the bottom navigation label to connections also tested well and pertained to both messages and contacts. Two out of five users interviewed thought having subtopics under each topic would further organize information. In addition, users expressed a preference for scrolling down, instead of sideways, through topics. Two out of five users wanted to see more information about the care recipients to help determine if others were in a similar situation.

Janna liked the styling of the daily inspiration quote, and thought my multicolor icons were most easily recognizable. She also pointed out the importance of large headers and body copy to accommodate older users, as well as profile photo thumbnails to solidify that personal connection and leave more of an impression.

To get more feedback on my work so far, I talked to my team and creative director. I heard that the pink was too intense for the daily inspiration and bottom navigation, and that the pastel green used for the title bar was too washed out. And something was still missing from the daily inspiration—maybe illustration. In order to make it feel more on brand, they recommended looking at community apps to see what they do for their onboarding and marketing. It was also suggested that I keep the script typeface but try one that was easier to read. My drop shadows and lines seemed harsh so a lighter gray was proposed to make it friendlier.

For our testing goals the second week, we were looking to see if our designs evoked feelings of community and being welcomed, if potential users felt comfortable sharing personal information and stories, if users were able to understand and relate to the icons, and if users were able to read all of the text on every screen.

 

Final designs

 
 
Home final.png

I changed the daily inspiration to be more cohesive with the brand. The typefaces added a personal touch, and the background illustration’s organic shapes were meant to comfort users. They liked the size of this section and said that it stood out.

Saved Topics final.png

Topic view options were put into tabs for better organization and iOS convention—this setup allowed users to scroll vertically. We also added a search bar for efficiency. In general, the icons were well-received; users thought they were colorful, fun, and bright.

 
 
All Topics final.png

Originally a list view, all topics was converted into into a card view utilizing the existing categories to help further break down the information architecture.

General chat final.gif

My style tile’s original leaf shaped chat bubbles didn’t work for long messages; their shape changed too much and no longer looked cohesive. I placed the settings icon into the input bar for easy access.

 
 
Member Profile final.gif

For the member profile, I grouped the sections in cards to sort information more clearly. I also center-aligned user’s information at the top so that it’s front and center and clearly visible to other users. The users we tested really liked the large profile photo, as well as the fact that it showed both the caregiver and care recipient.

Empty State.gif

For the empty state for a topic’s general chat, I kept it whimsical with a quiet night of twinkling stars.

 
 

As part of the final deliverables, I created a prototype to demonstrate functionality and a style guide to ensure style cohesion.

 
 
 

Future considerations

If there weren’t any time constraints, I would have liked to continue to test the order of the messages and contacts tabs on the connections screen. Users we tested were split down the middle: some scrolled down in messages to find a contact without realizing, while some quickly navigated to contacts. When asked, however, users preferred to see messages first.

Additionally, it isn’t clear if the name displayed on a conversation is that of the original poster or the most recent. It’d be helpful to poll users to see what they’d expect and adjust accordingly.

These organizational changes would ensure that users know exactly where they’re going and what they might find as they navigate the app. With already hectic lifestyles, users don't need any additional stress.

 

Reflections

Going from four weeks to three for a project was a huge difference. But it was gratifying to know that I could work even faster and still produce quality designs. My teammates and I sometimes found it hard to set aside enough time to rehearse our presentations. We learned the importance of timeboxing and scheduling time in our calendars specifically for practice—our presentations improved and our talking points became more fluid.

This was our first time conducting usability testing with real users. Since the majority of them were older, it was trickier to get them to verbalize how a design was making them feel. It was an incredibly valuable experience to put together a testing script and see our work in action and the potential it has to better people’s lives.