Tend

Skills used: Personas, User Interviews, Illustrator, Adobe XD, Motion Design, Hifi Wireframes, Gamification, Mobile Design, and Prototyping

This was a very small project that I worked on in the spring of 2018. I consider it a valuable addition to my portfolio as it highlights my skills in mobile interaction design, user research, gamification, and prototyping.

Task I was given

To design a solution that will improve the user's relationship with others.

Research

During the creation of Tend, I was still at college, living in the apartments by campus. Having my own group of friends there, my own place, and work to keep me busy, rarely did I reach out to family and friends outside of this bubble to check up on them. Whenever I did, it was usually a quick "Happy Birthday" text or a small question I had to ask them. I had trouble pulling myself out of my own world and putting that energy into having meaningful conversations with those I care about the most in my life.

Upon discovering this, I immediately begun to interview other colleagues to see if I was not the only one that was struggling with this issue. I was not alone; far from it. Like myself, whenever most of colleagues would reach to family members and old friends, they were usually just brief interactions and simple messages; rarely did they dive into deep conversations. As I was asking, "What made you pull back from diving deeper?", I found a very interesting insight. Not only was their main focus solely what was going on for them at the time, my colleagues struggled to reach out to old friends and distant family members in a more meaningful way because they didn't know what to talk to them about. They needed context. 

Context was the difference between meaningful conversations and forgettable messages. Taking the time to reach out to someone is only half the battle. In order to have a conversation that has substance, there needs to be meaning behind the initiation of the conversation in order for the conversation to blossom. Talking just for the sake of talking to someone without a specific reason (i.e asking "How have things been" or "What have you been up to lately") can help in rekindling a connection with someone you haven't talked to in awhile. But like a plant or a tree, in order to keep the connection strong, the conversations need to have context and substance to really keep the connection going. 

With all the insight I gathered through my discussions with others, I immediately begun to build the persona of who the core audience of this project is.

Busy Brian

Brian is a 21 year old junior who is in the full swing of what college has to offer. Having a 15 credit semester, a part time internship, and an active social life, Brian cannot afford to take his mind off of everything going on in his life. Though Brian is perfectly content with his life right now, he keeps finding himself feeling more and more nostalgic. He finds himself reminiscing his best friend from high school and how close they were back then. Sure, they try to keep in touch every once in awhile through quick messages and likes on instagram. But these interactions pale in comparison to the connection they had in the past. Whenever he finds himself wanting to see how things have been with him, he doesn't take action as he finds himself either being distracted by what is going on with him at the moment, or because he couldn't think of anything meaningful to talk to him about. He needs a solution that encourages him to talk time out of his day to reach out to his old friend and help him think of things to talk about with him.

Solution 

Tend, a mobile app that incentives users to reach out to friends and family through lite gamification and context assistance.

Process

As I was sketching the initial layout and ideas for this app, I needed figure out how exactly I could encourage the user to use the app to reach out to someone, without making it a chore or a nuisance. Originally having an interest in Game Design entering college, I knew the benefits gamification brings when implemented into a non-game application. At the same time, I kept looking back at the tree analogy I said during my research, and how I thought it was a perfect representation of strong relationship.

So then it hit me; maintaining the tree should be the game. Users will plant a visual representation of a tree when selecting someone they wish to remain close with. As the user communicates with that person via text or call, the tree will grow and remain strong. If the user holds off on talking to that person for a long period of time, the tree will wither and decay. This component was the perfect combination of incentivizing the user through a fun visual and sense of accomplishment, and keeping the focus on the purpose of the app: to reach out to close ones in a meaningful way. It had to complement the app, not steal the show.

When thinking about how the app would be able to give the user context for what they talk to someone about, I begun to look through other relationship focused apps in order for inspiration. Tinder was the one that gave me the big "Aha" moment, through it's integration of Instagram. This was the perfect social media platform for creating context, as it highlights someone's specific moment that happened to them recently. It gave the user a topic to discuss that was specific, but light enough for the conversation to evolve beyond. 

HiFi Wireframe

When I was finished with sketching and thinking how Tend would function, I transitioned to Illustrator and built a hifi wireframe that would showcase layout of the Tend and it's button design. Omitted from this is the other primary color that would accompany white, the images for instagram and the visuals of tree and acorn. The 3 screens atop the first row showcases user checking in on the tree that they have planted for another person, and seeing what they have been up to on instagram before calling or texting them. The bottom row shows the process of creating a new tree for a new person.

Mockup/Prototype 

I delivered a mockup built in Adobe XD and an interaction prototype video showing Tend in motion. Here is where I refined the hifi wireframe, added the images, and applied the second primary color. Because of the idea of growing and maintaining a tree, I thought green should be the primary color along with white. The components on the screen would alternate between the two based on what which one was the background color. The layout stayed relatively the same with the addition of the person's picture by their name, and the ability to choose what kind of tree the user would want to plant.