tend: self-care for those who care for others

A branding and UX/UI case study

Heather Marshall
Dec 7, 2020 · 13 min read
Image for post
Image for post
sample screens from the final prototype
a user adds a journal entry after a shift
Image for post
Image for post
volunteers pack groceries to distribute to their community

The Problem

This summer I volunteered at the James Talib Dean encampment on the Benjamin Franklin Parkway known as “Camp JTD” for short (named after a resident who passed away from an overdose during the first week) nearly every day. The experience was incredibly life-changing and rewarding, but I realized that other volunteers and I would push ourselves past the physical limits of our bodies and work long hours in the heat with little breaks or days off. The stress and exhaustion would build-up, and disagreements could get heated fast.

Research

I spent many weeks researching competitor apps and users to determine the function of the app itself.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
notes I took from observations I made while volunteering
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
data visualization of the responses from the survey I sent out

User Personas

I wanted to narrow in on my demographic and create user personas who would help me create the user journeys for the user experience. I created three personas to emulate a variety of users who would try my app. I based these archetypes on my data findings and combinations of personality traits I had seen while volunteering and organizing in my clubs.

There were three general types of users:

Caretakers: Someone takes care of friends or relatives who are unable to take care of themselves due to medical (mental or physical) reasons.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
user personas I based off of my research

Branding

Branding is a huge part of designing for a company because it shows how a product or brand wants to be perceived by its users.

Image for post
Image for post
Image for post
Image for post
a name word map and beginning logo sketches that began the branding
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
logo research divided into categories related to caretaking and volunteering
Image for post
Image for post
Image for post
Image for post
competitor app research I used to see what features and style I wanted tend to have
Image for post
Image for post
tend’s final logo

Brand Attributes

Figuring out the brand attributes or the mood and atmosphere of the brand is important when figuring out what direction to head in for the style. I found that I wanted the brand to be motivating, reassuring, welcoming, approachable, calming, fun, with a focus on taking care of yourself.

Style

To match the brand attributes, I wanted the colors to be soothing yet playful with the designs to be visually simple and elegant, with clean typography, a soft drop shadow to add depth, and fun textured illustrations.

Image for post
Image for post
a style tyle condenses the branding elements into one visual spread for style reference

Brand Assets

Brand assets are important to show how a brand will be realized in the real world through collateral such as business cards, letterheads, packaging and so much more.

Image for post
Image for post
Image for post
Image for post
business cards supplement the branding
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
the instagram campaign that would work alongside tend
a user inputs their preferences during the onboarding section of the app

UX/UI

User experience and user interface design is an integral part of app design. Designers must thoroughly plan the app before prototyping to make sure that the user takes the easiest journey through the app and has a positive, memorable experience, and wants to use the app again. Planning and testing prototypes repeatedly will improve the app by making the experience better after each test. UX/UI design is a cyclical journey of testing an idea, trying the idea out, determining if the theory was successful, and going back to and coming up with new ideas until the user interface and experience is the best it can be. This system mirrors the scientific method in academic and clinical studies.

App Function

After my weeks of research, I found that users most wanted an app that could remind them to take water, snack, and mood breaks, and days off. From personal experience and testing competitive apps, I found that journaling organizing, caretaking, or volunteering “shift” would help the user notice various trends and adjust their behavior accordingly. Journaling also helps bring users into the present and let them express their feelings in a positive manner. A section for statistics would also help the user track their moods and behaviors even further.

User Flow and Card sorting

After deciding on the functions of the app, the designer needs to figure out the location these features will fall under in the app. I began to first jot down all aspects of the app I wanted to include and thought about the experience I wanted the user to have. I used my user personas to inform these choices. I wrote out a preliminary user flow to see what journey a specific user might take through tend. I also devised a beginning site map to see where each section in the app would go where. On the Miro site, I typed each feature into a digital sticky note and organized them based on my site map and user flow in the way that I thought was most logical. I then shared the miro link with classmates, family, and friends and to card sort thee sections in the way they thought fit best.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
classmates and family members used miro to card sort features of the app into sections based on where they thought the information would fit best
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
I synthesized their responses and devised a user flow

Wireframing

After the card sorting phase, the next step is wireframing. Wireframing helps the designer chose the best structural interface and steps for the user to take for the app. I began wireframing the journey and sketched each hypothetical screen.

a user starts a shift and tend reminds them to take breaks
Image for post
Image for post
Image for post
Image for post
preliminary wireframes of my original user flow

Prototyping

After sketching the wireframes, I then started to move the sketches into Adobe XD for the low fidelity prototype. I used simple colors, fonts, and shapes to focus on the structure of the app and the user journey.

Image for post
Image for post
low fidelity xd screens

High Fidelity

Finally, I filled in the brand style on every page. I proceeded to work on the prototype and make small changes based on critiques in class.

Image for post
Image for post
Image for post
Image for post
high fidelity xd screens
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Final App Design

Finally, we have the finished result! After months of research, planning, prototyping, and designing, we have a high fidelity prototype for tend!

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
final tend walkthrough

Enjoy! :)

Credits

Design: Heather Marshall
Art Direction:
Abby Guido
Categories: Design, Interactive, Research
Creative Timeframe: August to December 2020
School: Tyler School of Art and Architecture; Graphic and Interactive Design

Image for post
Image for post

TylerGAID

Writing from the Graphic & Interactive Design Program at…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store