Social Garden

Social Garden is an end-to-end app that helps users maintain meaningful connections through a collection of their social media data, monitoring their behavior, and suggesting actions.

Overview

End-to-End App

(Student Project)

Project Type

UX Designer, UI Designer, Researcher, Brand Developer

My Role

Timeline

2 weeks


Maintaining connections with friends can progressively become more difficult as people grow older and get busier with their lives. Given time, people tend to drift apart without intending on doing so.

The Problem


To get a better idea of what similar companies offer, I looked into the top competitors.

The Competitors

Meetup - A facilitating platform where people with similar interests connect through locally organized events.

Bumble BFF - A dating app that includes a feature to make friends through swiping on profiles locally.

Yubo - A social media platform that connects you to people with similar interests across the world.

  • Some apps prioritize physical appearances over similar interests when trying to connect people together

  • It is nearly impossible to account for every persons’ interests

  • There is a lack of casual/impromptu event facilitation.

Key Opportunities


User Research

The Interviewees

  • 5 participants

  • Young age group (Mid-20s and one late-30s)

  • Mix of males (3) and female (2)

  • Living away from hometown

  • 9 months to 12 years removed from school

Nature of the Interview

  • Remote (Google Meet)

  • After work hours (5pm - 8pm)

  • 45 minutes long

Key Findings

  • There needs to be an improvement in maintaining existing relationships

  • Newer friendships require more effort and are more intentional

  • People want a natural connection which apps simply cannot provide


I’ve created these personas based on the information I’ve gathered through my user interviews. These user personas quickly became a guide to help me make good design decisions.

Meet The User Personas


The Product Direction

How might we help people improve the maintenance of their relationships?

The Solution

An app that collects social media data, tracks messaging patterns, and provides a suggestion to contact a person when a connection with them is beginning to drift away.


Wireframes were created based on the above sketches. Notable changes include reimagining the dashboard to become an interactive map and the use of a plant metaphor to represent the status of a connection.

Let’s Visualize The solution

Wireframes


Social Garden intends on promoting a healthy environment of growth and maintenance. Your social connections closely resemble plants and with proper maintenance, both flourish. A few visual design components are shown below.

Visual Design


The high fidelity screens were created using the wireframes alongside the UI design created for Social Garden.

High Fidelity Screens


Usability Test Results

Successes

  1. Users enjoyed Social Garden’s simplistic designs.

  2. Users valued the concept of having a memory collection.

  3. The connection analytics were simple yet effective.

A set of usability tests were conducted on the same five users from the interview phase of this project. Several key task flows were tested, which yielded the following results:

Requires Revisions

  1. Users found redundancy with the user profile in the bottom navigation bar and the dashboard map.

  2. Users found redundancy with suggested actions in the notifications button and in the withering contact cards.

  3. Users could not identify the filter icon.

  4. Users seemed to believe the “Dehydrating” and “Withering” connection statuses were very similar.

  5. The meaning of “Last Contacted” analytic sparked confusion as users were unsure who contacted last.

  6. The message to alert users the duration before a contact drifts away was unnecessary for the healthy connections but useful for withering connections.


  1. The bottom navigation bar was removed.

  2. The notification button was removed and replaced with a withering plant icon to indicate withering contacts.

  3. The filter icon was replaced with a more recognizable icon.

  4. The “Dehydrating” connection status was removed while “Healthy”, “Withering”, and “Detritus” remained.

  5. The “Last Contacted” analytic was relabeled “Last Interaction” for more clarity.

  6. The alert message was removed from the healthy connections and redefined as a dismissible message.

Design Iterations

Before

After


UI Component Library


The Final Design

The Screens

The Prototype

  1. talk more about narrowing down such a broad topic with a creative idea similar to CRM (customer relationship management)

  2. determine the duration of when people start to drift apart

  3. determine how the app will analyze drift time and how it will take into account group chats

  4. give plantmouth credit

Next Steps