top of page
AdobeStock_98009284.jpeg

JOINSY

Social event app to discover events, buy tickets and make connections with other Joinsy users in your city.

The Solution

My solution to the problem of isolation involved creating an app that tailored events

to the users interests, encouraged and gave incentives for the user to attend events and made it easy to connect with other users around shared interests. Joinsy helps people meet new friends by creating a social user experience that will help users get out and

do activities in person.

My Role

Project Lead
UX/UI Designer

Sector

Social, Event
Design

Tools

Adobe XD
Adobe Photoshop
Miro, POP by Mural

The Problem

Wikipedia defines loneliness as “an unpleasant emotional response to perceived isolation, a social pain and psychological mechanism which motivates individuals to seek social connections.”

​

Perceived loneliness and/or lacking a social connection can lead to anxiety, depression and/or serious health issues. Being social is often not as easy as it sounds, many times individuals have to overcome various barriers in order to be social at the desired level. 

​

​

JoinsyWixPic.png
TimelineDots.png

Project Goals

Goals1.png
Goals2.png
Goals3.png
Goals4.png

Create a highly effective, engaging platform for newly transplanted people seeking friendship

Create a platform where users can find events that interest them and connect with others around shared interests

Create a fun, vibrant visual design

Create a seamless, easy to navigate user experience

Design Challenge

How might we create a social user experience that will help users attend activities in person and meet new people?

research.png

I created the following research plan to answer the design challenge question. My goal was to identify themes and areas of focus.

Research Questions:

SpeechBubble.png
SpeechBubble.png

What hinders newly transplanted people

from attending events and making friends?

Why do people mark they are attending events then don’t go?

SpeechBubble.png
SpeechBubble.png

What would effective communication about upcoming events look like to a user of an event app?

What app features would increase the likelihood of a user attending an upcoming event?

Methods:

Recruit through word of mouth, among friends and family, and post on Slack 

Interviews and research to understand pain points and potential solutions 

question.png
facebook.png

Research on psychological and social issues that affect making social connections.

Usability testing of both low fidelity and high fidelity prototypes.

Participants:

man (1).png

Newly transplanted people (within the last two years)

Introverts and/or people with social anxiety

woman.png
man.png

Adults (over the age of 21)

 Experience stress/fear at attending events where they don’t know anyone.

recruitment.png
prototype.png
woman (1).png

Secondary Research & Statistics

Social connections are defined as having relationships with the people in your life. These relationships can be close or casual, and occur between individuals or with a group of people. Social connections can create a feeling of closeness and belonging and are a form of support. This relational support aids in your ability to be resilient, boosts happiness and helps life feel meaningful. Forming solid connections can also decrease depression, anxiety and feelings of loneliness. In order to have meaningful connections you should seek individuals who are genuine, and share commonalities.

StatJoinsy1.png
StatJoinsy2.png
StatJoinsy3.png
StatJoinsy4.png

Research Synthesis

To synthesize the information obtained from the secondary research and better understand the motivations of the user, I utilized the Jobs to be Done (JTBD) framework. The Jobs to be Done framework helps to keep the focus on the user by examining both the functional and emotional motivations behind why people behave the way that they do. I used the Jobs to be Done to determine the underlying task the users are trying to accomplish. The tasks include the main job, related jobs, emotional jobs, social jobs, needs and circumstances. The identified Jobs to be Done for this project were as follows:

HDStickyNote.png
HDStickyNote.png

Job Performer (Who):

Individuals who have relocated to a new city

Emotional Jobs:

Feel comfortable and motivated to attend events

(Feel moved to action)

HDStickyNote.png

Needs (Why):

Incentive to attend events

HDStickyNote.png
HDStickyNote.png
HDStickyNote.png
HDStickyNote.png
HDStickyNote.png
HDStickyNote.png

Main Job:

Actually attend events, not just RSVP

(Commitment ,
follow through)

Related Jobs:

Find events of interest

(Engagement)

Related Jobs:

Make friends

(Connection)

Social Jobs:

Form relationships, connections with new people

(Open up to others)

Needs (Why):

Motivation to engage with the app

Needs (Why):

Reminders and notifications about upcoming events

HDStickyNote.png

Needs (Why):

Decrease anxiety and stress caused by attending

HDStickyNote.png

Circumstances

(When/Where)

On the app, at events found through the app

User Flows

In order to create a low fidelity prototype I first had to identify the major red routes the user would want to take while using the app. I created these red routes from the Job to be Done synthesis. The 3 red routes were:

Joinsy User Flow.jpg
Joinsy User Flow (1).jpg
Joinsy User Flow (2).jpg

Sketches

Once user flows had been developed it was time for some initial sketches showing an overview of what the concept might look like in app form.

JoinsySketch1A.jpg
JoinsySketch1B.jpg
JoinsySketch1C.jpg
JoinsySketch2A.jpg
JoinsySketch1D.jpg
JoinsySketch2B.jpg

Guerilla Usability Testing

Now we were ready for some initial testing. For this I used a Guerilla Usability Test I created with a Marvel interactive prototype using the above sketches. The prototype covered the 3 identified red routes for users. The test was created to examine if users can figure out how to easily navigate the app and accomplish set tasks with the concept as is, or would the concept need to to be modified before designing the high fidelity mockup. The testing occurred over Zoom. Participants were given an overview/context then asked to complete various tasks (speaking out loud their thoughts and observations). The goal was to identify any areas that need clarity and hear suggestions on how to improve the app.  

joinsy1GT.png
Joiinsy2GT.png
Joinsy3GT.png
Marvel.png

Main Tasks:

The main task included in this round of testing was registering, selecting the city of Atlanta, selecting activities, choosing the 80’s dance party, see who is attending, buy tickets, check the silent disco, check the art exhibit, check user profile, check user notifications, check user rewards, see user’s upcoming events, connect with others, check user inbox, see connection suggestions, browse profiles, select imaginary user Thad, chat with Thad.

Findings:

Features that the participants rated high included:

 

  • The rewards program, they felt like it was a good incentive

  • The ability to connect directly through the app with other users

  • Liked the upsell notifications aka “How are your dance moves?”

  • Liked the suggested connections screen

  • Registration screen pretty straight forward

 

 The following issues were identified and were addressed in the high fidelity design:

ScreenGTRV.png

Branding

The focus now shifted to creating a company name, logo and visual style. I started with the company name. I wanted a word that meant going to an event and that could be used as its own verb (like how Google has become its own word). After trying out many different words I settled on the word “Joinsy.” People automatically know the meaning of the word join so the context is there and I could see it becoming a catchphrase such as “ I don’t have anything going on tonight, I think I”ll Joinsy.”

Logo

Next I began sketching out concepts for a logo. I knew I wanted it to be a simple design made up of letters from the name where the “j” and the “i” are representative of people connecting in a shared space.

JoinsyWhiteLogo.jpg

Color Scheme

For the color scheme I decided to use a bright, almost neon palette.  I wanted to design this app in dark mode and therefore wanted the colors to pop. The background stayed neutral and gray with Licorice being the main background color. A combination of red wagon and egg yolk was used for the buttons. Gradients were used throughout the app to create a vibrant visual effect.

JoinColorScheme.png
2ColoorAddOn.png

Font:

For the font I decided to use Monserrat. The look I was going for with this app was a bit out of the box. I wanted a funky, vibrant look and Monserrat fit that bill while still remaining legible.

Font.png
JoinsyPurple.png

Branding

To create my high fidelity mockups I used my sketches and a basic UI events app as a guide. Working in Adobe XD I begin designing screen by screen, modifying the template and creating new screens as needed. As I designed each screen I paid close attention to alignment, balance and visual hierarchy of the elements. Always keeping my vision, the user and the design challenge in mind. Here is a sampling of key screens: 

  • Joinsy Registration Screen

  • Tagline “Your event and social experience”

  • Enter name, email and password

  • Agree to terms of service

  • Link to terms of service

  • Create Account button

  • Link if already have account

JoinsyCS2.jpg
JoinsyCS1.jpg
  • Joinsy Select City Screen 

  • Search bar for direct search

  • Pics of popular cities

  • Scroll menu

  • Touch selection/Highlight with check

  • Next Button

  • Joinsy Hashtag Screen

  • Back arrow to city screen

  • Pics of popular interests

  • Scroll menu

  • Touch selection

  • Highlight with check

  • Let’s go button

JoinsyCS3.jpg
JoinsyCS4.jpg
  • Joinsy Events Screen

  • For You or Trending Tabs

  • See all events around you

  • Countdown until event

  • Can favorite events

  • Information about events including hashtags, ratings, location, how far away, who and how many attending

  • Filter options

  • Bottom menu bar

  • Joinsy Hashtag Screen

  • Back arrow to city screen

  • Pics of popular interests

  • Scroll menu

  • Touch selection

  • Highlight with check

  • Let’s go button

JoinsyCS6.jpg
JoinsyCS5.jpg
  • Joinsy Attending Screen

  • Picture (initials if no pic)

  • Name or username

  • How many followers

  • Red with check if you follow

  • Gray with check if you don’t

  • Click plus to connect

  • Scroll menu

  • Joinsy Purchase Ticket Screen

  • Back arrow to event page

  • Clear to reset screen

  • Select desired date

  • Select desired ticket

  • Select desired number of tickets

  • Purchase ticket button

JoinsyCS8.jpg
JoinsyCS7.jpg
  • Joinsy Purchase Details

  • Date and location

  • Purchase price

  • QR code to get in event

  • Notification sent to email 

  • Social media links to invite friends

  • Joinsy Notification Screen

  • Shows messages

  • Shows what you favorited

  • Shows tickets bought

  • Shows event notifications

  • Lighter unseen notifications

  • Bottom menu bar

JoinsyCS10.jpg
JoinsyCS9.jpg
  • Joinsy Rewards Screen

  • Back arrow to user profile

  • Displays credit balance

  • Can enter and use code toward purchase

  • Can copy and paste code

  • Description of how program works

  • Joinsy Encouragement Screen

  • Can close and return to themed events

  • Asks “How are your dance moves?”

  • Tagline “Let’s show them off….”

  • Button goes to dance-related events

JoinsyCS12.jpg
JoinsyCS11.jpg
  • Joinsy User Profile Screen

  • App settings

  • Inbox

  • Rewards

  • Followers/Following

  • Activity/Tickets/Saved

  • Bottom menu bar

  • Joinsy Make Connections Screen

  • See Event and Hashtag related chats

  • See themed events

  • See connection suggestions

  • See who wants to connect

  • Search people/Check out profiles

  • Bottom menu bar

JoinsyCS14.jpg
JoinsyCS13.jpg
  • Joinsy Other User Profile Screen

  • Back to browse people screen

  • Report user button

  • Online indicator

  • Chat now function

  • Follow function

  • followers/Following

  • Activity

Usability Testing

​

JoinsyXMOCKUP.jpg

The usability testing for the app was conducted over Zoom with 3 females and 2 males. These participants all fit the demographics of my research plan by identifying as being recently relocated, being introverted and/or are socially anxious, are an adult over age 21 and/or are someone who experiences stress or fear at attending events where they do not know anyone.

Main Testing Tasks:

  1. As a user, find events that interest you

  2. As a user, connect with other users/people

  3. As a user, examine the rewards program

  4. As a user, see notifications and reminders

​

​

AdamTesting.png
JordanTestiing.png
NajTessting.png
ShelbyTesting.png
Users testing the app
Users quotes about app

“Like the design and look of it but am 
wondering how to make functionality
of the filter screen more versatile.”

“How do you decline or swipe left if you do not want to connect with the person the app has suggested in Connections screen?

“On the Inbox Screen, how do I know if I read

something and did not delete it?

“Invite to join feature?”

 “This is cool”

“The color choices are fabulous.”

“Need a report button!”

“I’d use this to travel!”

“This looks really professional.”

JoinsyRedSM.png

Findings/Usability Issues by Priority

JoinsyUT.png

I corrected all of the above issues. Even though fixing these issues improved usability dramatically it did not have a dramatic impact on the visual design therefore I do not feel that it warrants before and after screens. Most of the screens were simple rewordings, slight color changes, or the adding or removing of a small element.

​

For future iterations I would like to expand on features as suggested by some of the users who tested the app. Possible features could include the ability to invite others to download/join the app, expand on features to use the app when traveling, and add an “at a view” calendar.

TITLE OF THE CALLOUT BLOCK

Conclusion & Reflection

JoinsyThemedmockup.jpg

Four years ago I moved from a small town in Tennessee to one of the largest cities in America.

I moved there for work and I was leaving the bulk of my friends and family behind. Trying to make friends as an adult in a new city, especially as an introvert was quite tough! I joined Meetup but never went to any events. I talked to my coworkers at work, but never hung out with them outside of work. If it weren’t for my mom pushing me to join the singles ministry at a local mega church I might still be friend-less! So this problem was personal for me. I wanted to tackle this problem and believe the goal was accomplished. Joinsy helps users:

​

​

  • Easily find events that interest them. They can browse events, use hashtags, apply filters and even see what's trending. They can view ratings and read reviews.

  • RSVP and buy tickets. Users can favorite events they are interested in. They can buy their tickets through the app and the app stores the ticket for them so it is easy to find. The app also sends them a reminder and even has an embedded countdown so the event does not sneak up on the user.

  • With incentives through a rewards program. Users can earn monetary credits by referring friends to the app, by attending events, and by buying tickets. The credit you earn can be applied toward the purchase of the cost of future tickets. 

  • Through encouragement and themed events. Joinsy encourages users to join events with themes they will like like Brunch-a-thons, Singles events, dance-related events, fitness events, etc. Joinsy uses fun ads and statistics to get users revved up.

  • Joinsy has a Follow feature so users can stay connected. This encourages users with similar interests to connect.

  • By having a Make Connections Screen dedicated to helping their users connect. From this screen there are multiple ways to get involved. Some are very low key, like group chats around similar interests. You can also connect with others over upcoming events, or connect with others who have chosen the same hashtags as you, or those who have moved to the area from the same city you moved from.

  • By having safety features where you can turn off what other users see. You do not have to show your activity or what events you are attending and can make your profile private. You can block and report users. You can also decline connection requests.

Working on this project was a great experience for multiple reasons. It was the first time I got to decide what deliverables were needed based on the project I chose instead of being told what to deliver. It was interesting to analyze what was needed to gather the correct information for the specific problem in the amount of time given. The 90 hour time frame  pushed me, but I actually enjoyed working inside a structured project plan. 

​

The response to the Joinsy app was very positive. I feel like I learned a lot watching the users interact with my prototype. The value of usability testing definitely came to light seeing issues surface that I never imagined could be a problem (some very obvious after the fact). 

​

In conclusion, people are social creatures by nature, even introverts. Any tool that can make it easier to engage in the activities that we enjoy while enabling us to connect with others and form friendships is of value to most people. Joisny has a multitude of ways to do just that and it does it with a fresh, fun and visually appealing design.

JoinsyMockup2.png
bottom of page