kizuna

Community Service Based Networking Mobile App

The Problem

Meeting new people is incredibly difficult, especially as adults. People are not only busy with the many responsibilities and stresses that come with adulthood, but a rapidly increasing population of adults struggle with loneliness. It is estimated that a staggering 61% of American adults deal with loneliness. In an effort to make new connections, people often turn to apps and websites to find events and opportunities to build relationships. However, while registration to these events are high, a large number of people do not actually attend. This gap between sign ups and attendance suggests that despite our craving for social interaction, we still find it difficult to follow through on our commitments to attend events.

The Solution

The kizuna app helps users meet new people and foster deeper connections through their attendance of volunteering events. Additionally, the app helps people not only find volunteering events that peak their interest, but follow through on their commitment to attend.

My Role

I was the UI/UX designer responsible for the entire process including:

Secondary and user research
Sketching, wireframing, and creating high fidelity prototypes
Conducting usability tests
Developing final mockups

Design Process

Due to time restraints and a quick turnaround, I first created a project plan based on the Discover, Design, and Validate framework.

Discover

I began the process by taking a close look at several industry leaders to understand how they were currently approaching this event discovery and attendance problem. My qualitative analysis of some of the most popular event discovery apps and websites, such as Eventbrite and Facebook Events, rewarded me with several seeds of ideas on how to design my solution. These ideas include:

Include post-event actions so that the app can track how many events the user attended vs. missed
Have a feature that will let users know if they are registering for an event that conflicts with a previous registration

To better identify the problems people deal with when finding events they want to attend and following through on their commitment to actually attend said event, I conducted a series of interviews with real people. I recruited 5 participants through email and social media to conduct 30-minute interviews.

Here are some specific questions I wanted to answer through the interview:

How do people find events in their local areas that are of interest?
How committed do people feel when they register for an event online?
Are people aware of how many events they commit to attend on online platforms?
Why do people decide not to attend events they previously committed to?
Are there certain types of events people feel more compelled to attend than others?

After conducting research interviews with my 5 participants, I have found several commonalities, trends, and insights into people’s event discovery and attendance behaviors.

1. The Importance of Making Connections

All of the participants noted that after having experienced the loneliness brought upon by the global pandemic, they had a greater motivation to consider and seek out social events to meet new people. This clearly indicates that online platforms that help people make new friends will be even more popular and valuable in our post-pandemic world.

2. Clear Intentions

”It was so much easier to meet people back when I was in school.” A lack of clarity in the intentions of event attendees have resulted in uncomfortable miscommunications and misunderstandings for many of the participants, which in turn has deterred them from seeking out social events. Therefore, it is critical to make users’ intentions clear and match people to events based on these intentions and expectations.

3. The Depth of Connections

Many of the participants noted that interest-based social gatherings only foster surface-level, shallow relationships and acquaintanceships. It is not merely about meeting a large number of people, but participants place a greater importance in forming deeper connections through shared values.

4. The Paradox of Choice

The endless offerings of events and opportunities, while initially exciting, overwhelms people and either cripples them from committing to a single option or overcommitting to too many options. Therefore, it is imperative to provide users with enough event options to build excitement and anticipation, but not too many that they feel too overwhelmed to follow through on their commitments.

5. Guilt and the Fear of Missing Out

While participants showed little to no guilt for missing events they have previously committed to, participants did experience a fear of missing out. However, many participants voiced a strong displeasure towards being forced to deal with FOMO, indicating that FOMO and shame, while effective, may not be a very pleasant method to convert registrants to attendees.

Initial Design

User Flows

Reflecting upon the user stories and early ideations that I created, I was able to identify several red routes that would help solve the problems for users. I created the user flows for these red routes:

Low Fidelity Designs

Once I created the user flows and understood the specific routes that a user would take in my app to achieve certain goals and outcomes, I designed low fidelity screens on Figma.

Validation

Check out the Low Fidelity Prototype Here

I conducted usability tests with 5 remote participants using the low fidelity prototype I created on Figma. My goal was to test if the functionality of the app was intuitive. Additionally, I wanted to test the terminology and iconography in the designs, as well as the ease of use, and thus, I asked the participants to complete tasks and answer questions such as:

Please use the app to search and register for an event.
How many spots are still available for this event. Can you still reserve a spot?
What do you expect to see when you tap on ‘Check Your Commitments’?
How many events have you currently committed to according to this screen?
Please tap on the “Home” button in the tab bar. What are your impressions of this screen? Is it what you were expecting? Is there anything missing?

Findings

Overall, the participants liked the look and feel of the app; they had no problem navigating through the experience and understanding the purpose of each function and feature. This testing method proved to be effective in validating several of my core concepts and features of the app while also shedding light on key shortcomings in my designs that needed to be iterated and improved upon.

High Fidelity Design

Company Name and Visual/UI Style

The project brief defined the company’s brand personality as “a trusted friend that cares about helping people and making a difference in the world.” With this in mind, I worked to create a visual/UI style for my app that would effectively convey this brand personality and the brand attributes of caring, familiar, humorous, and optimistic.

High Fidelity Mock-Up

After the first round of testing with the low fidelity designs, there were 3 main issues that were brought to light that I had to address and improve upon.

Problem 1: Joy of the Hunt

“I like how I can view the events one by one. It’s clean and decluttered. I don’t feel overloaded with information.”

— James F. (Participant)

This sentiment was consistent throughout the testing, but interestingly, users still expected to be able to browse through a list of events and casually go through events to find those that might interest them. As one participant noted, the app left him with a “yearning for that ‘irrational’ excitement of endless scrolling for the sake of discovery.”

To address this problem, I designed a user flow that would give the user the option to either indulge their adventurous side and check out an endless list of events, or take a look at a list of events the users have previously saved.

Additionally, I re-designed the “Browse Events” screen by taking a page out of the Tinder playbook. As Tinder is an incredibly popular app, I figured users would feel some familiarity with the act of endlessly swiping and liking/disliking events.

Problem 2: The Success State

Participants appreciated seeing a screen confirming their successful registration to an event. Furthermore, they liked how they can jump right to the Commitment feature from the success screen to check out the other events they are currently committed to and look at their upcoming schedule. However, several participants mentioned that it was unclear what event they were writing about since the app did not provide the necessary information. Therefore, I added the name of the event and the ability to add a star-rating to the “New Entry” screen.

Furthermore, users in my original round of testing were understandably confused when there was no success state present after they tapped the “Submit” button to confirm whether or not their new journal entry had successfully posted. To address this concern, I added a screen to notify users that their latest event review had successfully posted. In designing this screen, I wanted the notification message to invoke excitement and provide encouragement for the users to keep sharing their experiences. I wanted the users to feel a strong bond with the kizuna community.

Problem 3: Matching Expectations

For the most part, my designs, along with the terminology used, were intuitive and easy to understand; participants knew what to expect after tapping on certain buttons and entering certain screens. This was true except for the “Home” screen and the “Home” button on the tab bar. My original intention was to design a home screen where users who were logged into their account could view their next event and their event attendance metrics on a single screen along with their profile photo.

However, as one participant mentioned, “this feels much more like a Profile screen.” This user, along with many others, expected to see a scrollable list of events tailored to their preferences and previously attended events under “Home.” I renamed the screen from “Home” to “Profile” and changed the tab bar to be consistent with this change. I kept the original minimalist design and added colors so that the users can easily tell what their next event is and quickly recognize their attendance metrics. I wanted the “Events Missed” metric to really pop and catch the user’s attention and thus, I used the red color that stands out against the cooler brand colors of light blue and green.

Testing the High-Fidelity Designs

In my second round of testing, I was able to get validation that my new designs addressed the problems illuminated in the first round of testing. However, it is always incredibly powerful and helpful how a new round of testing with new participants provides even more insights and shed light on further areas for improvement.

Problem 1: Terminology Dissonance

Participants appreciated having the option between endless swiping on events searching for those that pique their interest and carefully choosing the ones they want to commit to and attend from a limited list. However, as one participant curiously noted, “I’m swiping right, right? I’m not really saving the event am I? I’m liking it.” This sentiment was consistent throughout the testing; the act of swiping right was not associated with “saving” an event for later viewing, but rather liking it. Therefore, I changed the screen from “Saved Events” to “Loved Events.”

Problem 2: Gestalt Principles

It was brought to my attention that having the ‘Previous’ and ‘Next’ buttons within the blue event card in the “Saved Events” screen goes against the Gestalt principle as elements enclosed within the same region are recognized and understood as part of a group. I took the ‘Previous’ and ‘Next’ buttons out of the event card as they do not have to do with the specific event in question. I placed the buttons below the card and in close proximity to the event card so that the users will intuitively understand, through the Gestalt principle of proximity, that the buttons allow them to navigate between events that they previously ‘loved.’

Problem 3: Accessibility - Indicating with Color

In my original iteration of the high fidelity screens, I over-relied solely on color to communicate error states (i.e. highlighting a box red to let the user know that they are trying to book more seats at an event than seats available) or convey a sense of shame such as in the example above where I try to emphasize the unfortunate number of “Events Missed” merely by highlighting the number in the harsh red color. This excessive dependence on color to provide information fails to create an accessible app experience as it does not take into account the issues that a color deficient individual may deal with in understanding the app. To make my app more accessible, I decided to include other indicators, such as the use of icons alongside colors in my final “Profile” screen design to explain what the numbers indicate.

I committed the same mistake in my “Event Registration” screen where, as previously noted, I simply highlighted the box green to indicate that the user was booking a number of spots that did not exceed the number of spots available. The original idea was that the user could type in a number and the color would change to display a success state or error state. I decided to change this element from an input box to a drop down menu where the app would only allow the user to choose a number of spots that were still available. Limiting the users’ options as such negates the need for an error state screen and greatly reduces the possibility for any confusion.

Reflections and Learnings

On Designing with Empathy

Through this project, I learned how to better put myself into the shoes of my target users and gain a deeper understanding of their behavior and choices through interviews and usability tests. It always amazes me how I can gain so many key insights that help significantly shape my design decisions by simply conducting interviews with only five or so participants. Furthermore, it is incredible how I can start noticing trends and patterns after just two interviews. Considering the time limitations for this project, I could only conduct two rounds of usability testing. However, I would like to revisit this project in the future and conduct more usability tests that focus on specific features and elements. For example, I would like to delve deeper into the “Search Event” screen and test the categories by which users can filter event options to see if users find value in the categories I have selected. Yet again, this project has reemphasized the importance of researching the users thoroughly in order to validate each design decision and ensure that each element serves a purpose for the users.

On Shame & Guilt

The biggest challenge I faced during this process was trying to find an appropriate way to include the elements of shame and guilt into my design without contradicting the positive brand attributes such as caring and friendliness. Through my user interviews, it was apparent that shame, guilt, and the fear of missing out were incredibly powerful emotions and particularly strong motivational factors when it came to event attendance. However, it was also evident that people had a prevalent distaste for these emotions and would consciously fight against such factors. As such, I knew that shamelessly using shame and guilt to convince users to follow through on their commitments may be effective to some extent, but would inevitably deter people from becoming consistent users of the app. Ultimately, I designed the shameful “Events Missed” metric below the much more positive “Events Attended” and “Friends Made” metrics on the “Profile” screen.

On Alternative Designs

While I was able to validate this design decision through testing, I would like to spend some more time exploring alternative designs. For example, I would like to try designing a scoring element (a kizuna score, perhaps) that would take into account the event you have attended and events you have missed along with other factors such as connections made, etc. and then use it to gamify the app experience. Perhaps, with this score, I would not need to display someone’s shame directly in front of their face and thus provide a more positive experience.