SocialWize 

A meetup app designed to decrease social anxiety.

At a Glance

My Role

This was a solo project. I received mentorship from a senior UX designer.

Tools

Figma, Miro, Google Suite

Timeframe

SocialWize was completed over 3.5 weeks, from May 30 - June 21, 2023.

Deliverables

Competitor Analysis, User Interviews, Affinity Map, Research Synthesis Report, User Flows, Sketches, Wireframes, Low-Fidelity Prototype, Style Guide, High-Fidelity Mockups, High-Fidelity Prototype, Usability Testing (two rounds), Usability Testing Reports

The Problem

I was tasked with helping an existing social meetup app increase the conversion rate between accepted invites to event attendees. The app’s location data showed that only 20% of people who RSVP as going actually attend events.

Project Brief

  • The app’s user base is middle-class people who range from 32 - 55 years old and have recently relocated to a new city.

  • Users are equally split between men and women.

  • Users are struggling with social anxiety.

  • Users may not be getting effective communication about upcoming events.

  • Users may need an incentive to attend events but this incentive must be cost-effective for the company. 

Competitor Analysis

For inspiration, I studied competitor apps (Facebook, Meetup, and Eventbrite) to see how they encouraged event attendance.

I found Facebook and MeetUp quite inspiring since, like SocialWize, their events are typically free with the main purpose of fostering social interaction. Eventbrite was not very useful, since it is less focused on meeting new people and more on events that require purchasing tickets.

Here are some inspiring features from Facebook and MeetUp:

  • View the number of profiles and number of people attending/interested in events

  • See when friends are interested in or attending an event

  • Share events and groups with friends

  • Interact with attendees via messaging or discussion board

  • Receive reminders when an event is approaching

  • See which friends have similar interests

  • Learn more about the group hosting the event

  • Add an event to the phone calendar

  • Receive badges for being a top contributor, new group member, etc.

Primary Research

First, I created a screener survey and posted it in three Facebook groups that host social meetups and help people make new friends. The survey’s purpose was to identify potential interview candidates who: 1) attend social events with the purpose of making new friends, 2) have social anxiety, and 3) RSVP for events by then decide not to go.

After receiving over 50 survey responses, I identified five ideal candidates and interviewed them over Zoom to identify what may be causing the low conversion rate between RSVPs and attendance.

User Interviews

Affinity Mapping

I transferred major points from the interviews onto sticky notes and categorized them using the affinity mapping process, pictured here.

Research Findings

1) Emotions around last-minute canceling

People feel guilty canceling when they have a rapport with people who are expecting them. They also have FOMO (fear of missing out on a good time) which leads to internal conflict. Lastly, people feel regretful when they don’t go but later find out it was a fun.

2) Reasons people attend events

People attend events if they are in a good mood, the event is geographically convenient for them and fits their schedule, they know people going or are going with a friend, the people going look cool and around their age, and if there is hype surrounding the event.

3) Reasons people do not attend events

People decide not to attend events if they are tired or in a bad mood, think it is not worth the time or effort, forget, have a last-minute schedule conflict, or are struggling with social anxiety.

4) Causes of social anxiety

People feel overwhelmed by large groups, are concerned about large age differences, struggle to start/maintain conversations, and are worried no one will talk to them and they will feel awkward/isolated. Some people are uncomfortable around alcohol.

5) Ways to decrease social anxiety

People feel less anxious when they know other attendees, go with someone, know there will be people who share their interests, and when there are smaller group sizes.

6) Incentives to attend events

People are incentivized by reward programs, freebies, and a desire to be social and make new friends.

Ideation

People expressed a genuine desire to get out there and make friends, so I decided it was best to focus on this intrinsic motivation rather than potentially crush it with extrinsic motivators.

Since the brief stated that users might need an incentive, I considered a gift-card based rewards program for attending events. However, I ultimately realized there were several problems with using financial gifts as extrinsic motivation:

1) Users could gain the system in order to get credits

2) Due to the overjustification effect, offering excessive rewards leads to increased pressure and kills genuine motivation and passion by decreasing levels of serotonin and dopamine in the brain

3) Extrinsic rewards can become devalued over time.

Solution

SocialWize encourages event attendance and mitigates social anxiety by increasing users’ comfort and interest levels.

Has various filters to help users find events they will find comfortable, convenient, and socially rewarding.

Users can filter events based on interests, age range, event size, alcohol use, day of the week, and distance. Event hosts are encouraged to set an event size cap and a suggested age range for every event.

Encourages attendance by piquing users’ interest in event attendees.

Users can view a breakdown of attendees’ ages and common interests, as well as view their profiles.

Encourages users to attend events with friends and creates rapport between attendees before the event.

Users can easily share events and are encouraged to go to events with someone they know since this leads to mutual accountability and guilt when canceling. The app fosters familiarity between attendees before events using a discussion board, icebreaker prompts, and Facebook friend activity.

Allows for creation of a custom reminder schedule and the ability to save events to the phone calendar.

Uses badges to encourage users to check in at events and engage in discussions.

Capitalizes on users’ feelings of regret and FOMO (fear of missing out) by encouraging users to share photos on the discussion board before, during, and after events.

This graphic highlights features on the Event Screen designed to decrease social anxiety and maximize event attendance.

User Flows

I developed six red routes that would allow users to complete the most critical tasks.

  1. Deciding whether to join a group or RSVP for an event (see graphic)

  2. Joining a group or RSVPing for an event for the first time, which requires the creating an account and a profile (see graphic)

  3. Posting on the event discussion board

  4. Creating a custom reminder schedule

  5. Browsing events (see graphic)

  6. Checking into an event

Sketches

I started designing by sketching out five of the six user flows. The sixth user flow was added on later in the design process.

Navigation

SocialWize uses a four-icon tab bar with icons representing “Home,” “Explore,” “Messages,” and “Notifications.”

A button on the Home Screen links to the Profile Screen, through which users can edit their profile, access account settings, host an event, and view their saved events.

While sketching, I used a five-icon tab bar that included a “Profile” icon. However, I chose to switch to a four-icon tab bar and add a profile button to the Home Screen. I hypothesized this method would be just as effective, and I tested this in my first round of usability testing.

Wireframing

After sketching and solidifying the information architecture, I got to work on creating low-fidelity wireframes, which are pictured below. I also used Figma to create a low-fidelity prototype with these wireframes for my first round of usability testing.

Low-Fidelity Usability Testing

Five participants were asked to complete the following tasks:

  1. Search for an event based on certain criteria

  2. Join a group for the first time, which requires account and profile creation

  3. RSVP for an event

  4. Create custom reminders for the event

  5. Post on the event’s discussion board

  6. Update information on their profile

This round of testing revealed four usability issues. Each is outlined below and accompanied by a graphic illustrating the solution.

Users struggled to find the event check-in link. 

Solution:  I replaced the primary “Edit RSVP” button with a bright red “Check in” button, and made the edit RSVP option a black secondary button.

Reasoning: On the day of the event the ideal action is to check in, not to change the RSVP. I used principles of visual hierarchy to increase the prominence of the event check-in feature and deemphasize the edit RSVP option.

When trying to edit their profiles, users clicked on the settings icon rather than the edit icon.

Solution:  I swapped out the edit icon with a different edit icon that may be more recognizable.

Reasoning: Users were not immediately sure what the edit icon meant so their first instinct was to hit the settings icon. If the meaning of the edit icon were clearer, maybe this would not be an issue.

The search feature was not immediately apparent.

Solution:  I put the search bar in a container and made the icon teal.

Reasoning: Adding color and a search bar increased the visual weight of the search feature.

The user was expecting some profile information to be auto-populated after signing in with Facebook. Additionally, the required steps felt too lengthy.

Solution: I changed the profile creation process so the user’s profile picture, name, birthday, and location are automatically pulled from Facebook. Additionally, I made the bio and additional photos optional and added a red asterisk to indicate the required fields. If the user does not complete the optional fields, they will be prompted to do so whenever they open the app.

Reasoning: It should be as easy as possible to create an account and a profile so users do not give up. Pulling information from Facebook and making the bio and profile photos optional decreases the amount of time it will take to complete.

User Interface Design

I began the user interface design process by reviewing the project manager’s brief. It stated the following:

Brand Attributes

Caring, Familiar, Humorous, Optimistic

Brand Personality

A trusted friend that cares about helping people and making a difference in the world.

Visual Design Decisions

I used a color palette reminiscent of a rainbow to convey optimism and familiarity. The primary and secondary colors (red-orange and teal) are used for elements with the highest visual hierarchy, such as headlines and buttons. A variety of accent colors are used for chips, subheadings, and other graphical elements to create the rainbow effect.

I used this UI Kit for inspiration and chose the Montserrat font due to its high legibility, variety of weights, and its geometric simplicity.

High-Fidelity Mockups

As illustrated by the graphics in the “Usability Testing: Round 1” sections above, I incorporated the feedback from my first round of usability testing into my high-fidelity wireframes.

High-Fidelity Usability Testing

The second round of usability testing was also done with five participants. Participants were asked to complete the same tasks as in the first round of testing. The results from this round revealed six easily fixed usability issues related to wording, consistency, and clarification. These findings are outlined below and several are accompanied by a graphic illustrating the implemented solution.

One user felt the term “age demographic” was not clear.

Solution: I changed “age demographic” to “age range.”

Reasoning: “Range” is a more common word than “demographic” so this change will increase accessibility to all users and prevent any confusion.

Users were confused about the custom reminder feature since they did not understand it was for in-app notifications and not associated with their phone calendars.

Solution: I added this sentence on the custom reminder screen to clarify: “Schedule in-app reminder notifications.”

A user thought the “Answer Icebreaker” button should have different wording since she initially found it confusing.

Solution:  I changed the button to say: “Introduce Yourself.”

Reasoning: “Introduce Yourself” is an umbrella term since introducing yourself can include answering the icebreaker. It is also a more commonly seen phrase so it should avoid confusion.

A user was thrown off by the inconsistency of the filter cards. One was a full screen, whereas another was a slide-up card.

Solution: I created consistency by making the date filter card a full screen to match with the other filter screen. However, I liked the existing slide-up effect so I made the filter screens slide up and down from the bottom. I also changed the custom reminder slide-up card to full screen.

Reasoning: Creating consistency removes distractions and allows the user to focus on the content. This change also allowed for more white space and led to a cleaner appearance.

The gallery icon on the QR code screen is confusing to some users since they that it was the button used to take a photo.

Solution: I removed the gallery button from the check-in screen.

Reasoning: The button’s purpose was to allow people to use a QR code from their photo gallery. I realized that contradicted the project’s goal since it would allow people to check in to events they did not actually attend. So, it made the most sense to just remove the button.

A user asks how she is supposed to know to check in for events and why she would even bother to do so.

Solution: All users will receive a notification several hours before the event starts reminding them to check in and explaining why they should. Additionally, if users allowed background location services, they will receive a reminder to check in upon arriving at the event. 

Final Protoype

For the best experience, follow along with this usability testing script.

Below is a recording of the full prototype. For the best experience, follow along with the usability testing script.

Conclusion

The final iteration of SocialWize has minimal usability issues and, according to usability testing participants, would possibly have the intended effect of decreasing social anxiety and encouraging event attendance. 

Should I conduct another round of usability tests, would be sure to test the new flow I added, which is the ability to click on a reminder notification to check in for an event.

Key Takeaways

  • I learned about intrinsic vs extrinsic motivation.

  • I noticed my UI skills improved since my previous project.

  • I became more comfortable with prototyping and added more advanced prototyping effects.

Flow Recordings

Here are recordings of the app’s primary flows, in case you would like to check them out!

Full Prototype

Search for events

Edit your profile

Post on the discussion board

Check notifications and check in to an event

RSVP for an event and set custom reminders

Check in to an event

Join your first group and create an account