Social Garden

OVERVIEW

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 to keep these friendships .

PROJECT TYPE

End-to-End App (Student Project)

MY ROLE

UX Designer, UI Designer, Brand Developer

TIMELINE

2 Weeks

Maintaining connections with friends can become progressively difficult as people grow older and get busier with their lives. Given time, people tend to drift apart without the intent to do so.

THE PROBLEM

THE COMPETITORS

Connecting people in an organic way is quite difficult to integrate into an app, so apps that attempted at a solution for this problem were considered. Although these apps were not direct competitors, they assist in generating a unique solution for maintaining connections.

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.

KEY OPPORTUNITIES

  • 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.

USER RESEARCH

The Interviewees were made up of 5 participants (3 males and 2 females) ranging from their Mid-20’s to Late-30’s. All participants are currently living away from their hometown and 9 months to 12 years removed from their university degree.

The Nature of the Interview included a remote meeting using Google Meet for 45 minutes between the hours of 5 P.M. to 8 P.M.

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

MEET THE USER PERSONAS

From the user interviews, two personas were created as a basis for any design decisions moving forward. Chris is an extrovert who loves meeting new people to gain fresh perspectives, while Laura is an introvert who just wants to be comfortable around a consistent group of people.

THE PRODUCT REQUIREMENTS

Affinity mapping was used to synthesize ideas from the the user interviews. From this exercise, I learned that people are quite selective with their newer friends and most people value their childhood friends more. This discovery put the maintenance of existing friendships in the forefront. There was consideration for facilitating events to prompt new connections, but as most interviewees have expressed, the development of new connections are better left in its organic nature.

THE MAIN QUESTION

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.

LET’S VISUALIZE THE SOLUTION

The wireframes were created based on the key sketches in the previous section. Here’s a few key changes from the sketches:

General: In sketches of this solution, the purpose was to determine the information to provide in this app and progressing into wireframes, a plant metaphor was developed to represent the status of a connection. 

App Dashboard: The app dashboard was originally sketched as a conventional dashboard seen in many apps, but was then reimagined as a free scrolling dashboard map. This change still conveys the same information as a conventional dashboard but in a visually unique way. 

Contact Connection: Suggestive actions were added to give users an action item to not let their connection drift. As well, a memory collection section was added to allow users to view all photos of them and their connection.

Drifting Contacts: Originally, this screen was mainly text and lacked visual appeal. The drifting contact images were added and the text was reduced to increase usability. 

WIREFRAMES

VISUAL DESIGN

Social Garden intends on promoting a healthy environment of growth and maintenance. Your social connections closely resemble plants and with proper maintenance, both flourish. To promote the theme of growth, I drew inspiration from the photos below and utilized green as the main color. Yellow was chosen as the secondary color in two different tones to signify the gradual deterioration of a connection. A few visual design components are shown below.

HIGH FIDELITY SCREENS

By combining the wireframes with the visual design components, high fidelity screens were created to give users a real sense of the app. Three key screens are shown and described below.

Dashboard: This screen is intended to make users feel welcome by greeting them. Users have multiple connections and the different ring colors, visibility, and distance from the user (located in the center) represent how well the connection is faring. The greener, more visible, and closer to the user the contact is, the better the maintenance of the connection.

Contact Connection: This screen gives the user more detailed information on a connection along with an option to maintain their connection or let it drift away. Analytics, most active apps, suggestive actions, and a memory collection are also included in this screen.

Drifting Contacts: This screen allows users to see the contacts that are potentially drifting away if they do not interact with them. Suggested actions for each contact are based on the contact’s most recent post or most active social media app.

USABILITY TEST RESULTS

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

SUCCESSES

  1. Users enjoyed Social Garden’s simplistic designs.

  2. Users valued the additional memory collection concept.

  3. The connection analytics were simple yet effective.

REQUIRES REVISION

  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.

DESIGN ITERATIONS

  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.

  7. The “Drifting Contacts” header was replaced by “Withering Contacts” to stay consistent with the plant metaphor.

  8. The background color was darkened along with the removal of color gradients to present a more modern look.

BEFORE

AFTER

UI COMPONENT LIBRARY

The Social Garden UI component library includes visual design items and all the components that will be utilized multiple times on different screens.

The Logo includes a large, medium, and small version. The large version of the logo was used in the app; however, the medium and small versions could be used in further updates.

Both Connection Statuses and Most Active Apps directly apply the plant illustrations (taken from PlantMouthed and altered to fit the Social Garden concept).

The Withering Contact card was colored yellow to represent the deterioration of the connection as it was represented for Withering Contacts in the dashboard.

THE FINAL DESIGN

Social Garden is an app that strives to maintain connections between people by collecting and analyzing social media data. Similar to plants, your Social Garden will be maintained if you take the time to care for desired connections.

THE SCREENS

  • Screens (Left to Right): User Dashboard, Contact Connection, Withering Contacts

  • Screens (Left to Right): App Permissions, User Profile, User Memory

THE PROTOTYPE

REFLECTION/NEXT STEPS

This project began with a broad scope of bringing people together, but was ultimately narrowed down to maintaining existing friendships in the research phase. This was also my first attempt at incorporating artificial intelligence (AI) in an app through data collection/analysis and I hope to continue to use AI in other projects.

The concept behind Social Garden seems to be valuable in today’s world and while the high priority items were addressed in the design iterations, considerations in the next design update will include:

  1. Reviewing scientific research regarding the time it takes for people to begin drifting apart.

  2. Determining how group chats will factor into the analysis of drift time.

  3. Giving a user the ability to add personal notes to each contact connection (e.g., favourite foods, games, etc,).

  4. Incorporating more AI to give more data.