Socible

Socible

An app for creating new friendships between people who share the same interests.

An app for creating new friendships between people who share the same interests.

intro-socible-v5

Role

Founder / UX UI Designer

Time

Mar 2016 - Jul 2017

Platforms

iOS and Android

Tasks

User Interviews
Competitor and Comparator Analysis
User Personas
User Journey Mapping
Task Flows
Wireframing
Content Strategy
Styleguides
User Interface Design
Interaction Design
Usability Testing

Project Overview

In market full of social media, dating and event applications where the digital persona can be easily exaggerated from one's true self.

I wanted to create a space where users could be honest and not feel the social stigma of competing for likes and followers.

Introducting Socible, an app for making friends nearby, with people who share the same interests.

This is my journey of shaping the user experience for Socible.

My journey began by trying to solve a problem for myself

me-v2

“ I want to experience cool new things and meet awesome people that like the same things I do. As an adult somtimes it can be difficult to make new friends.”

Stats

- A Millenial
- Works sporadic hours
- Relies heavily on the Internet
- Going through lifestyle changes

Needs

- Meet like-minded people
- Experience new activities
- Locality is key

Motivations

- The pursuit of happiness
- Learning new things
- Self improvement
- Venturing into the unknown

Pain points

- Do not know many people who share similar interests
- Friends do not easily partake in new activities
- Lack of self-confidence to go solo

I looked into existing products on the App and Play stores

In a market where there is "an app for everything", I searched into existing solutions. I discovered a plethora of apps that allowed me to connect with people.

Social

social-networks-v1-bw

Strengths

  • Access to millions of users
  • Easy to contact other users
  • Free to use
  • Highly interactive

Weaknesses

  • Results for users are not locality based
  • Unlikely to make a connection with users who you do not have a common connection with or users that are not within a particular circle
  • Focus is being social online more than offline

Media Sharing

media-sharing-v3-bw

Strengths

  • Access to millions of users
  • Easy to contact other users
  • Free to use
  • Highly interactive

Weaknesses

  • Results for users are not locality based
  • Focus is more on content
  • Profile credibility is dependant the amount of users follow you in addition to the engagement other users have with your content

Interest Based 

interest-based-v1-bw

Strengths

  • Users are based on locally
  • Events to meet other users based on interests
  • Free to use

Weaknesses

  • Repetitive profile creation when joining groups
  • Going to a meet up event requires a lot of planning upfront
  • No option to meet users one-on-one scenario
  • Repetitive profile creation when joining groups
  • Going to a meet up event requires a lot of planning upfront
  • No option to meet users one-on-one scenario

Chat

Chat

chat-v2-bw

Strengths

  • Profile is quick to setup.
  • Fast interaction with users through chat.
  • Very inuitive

Weaknesses

  • No filtering or sorting criteria to find new users
  • Only connects with people you know.

Dating

dating-based-v2-bw

Strengths

  • Fast interaction with users through chat
  • Utilises microinteractions for an enjoyable experience
  • Great for getting people to meet in the real world

Weaknesses

  • Only focuses on relationship building
  • Vunerable to fake accounts and spam

Discussion

discussion-v1-bw

Strengths

  • Specialised groups for almost any subject matter
  • Good for sharing knowledge as a group
  • Access to millions of users

Weaknesses

  • Meeting is not the core focus of these platforms
  • Speaking to users on a one-on-one basis is difficult

It was easy to connect with users, however it was difficult to connect with people for sharing new experiences and developing real friendships.

It was easy to connect with users, however it was difficult to connect with people for sharing new experiences and developing real friendships.

How do others make new friends and partake in new interesting activities?

Insights I gained by asking friends, work colleagues, joining discussions on Facebook groups, Reddit and Quora.

Ways people make new friends and experience new things

Ways people make new friends and experience new things

friends-icon-v3

Through mutual friends

hobbies-icon-v4

Join local activity groups

Join local activity groups

meetup-icon-v3

Attend meetup events

professional-icon-v3

Professional working environment

openquote-v1

"I usually make friends with people I have met through mutual friends, or with people I have met when out and about."

openquote-v1

"I have made new friends by taking part in group classes at my local gym."

openquote-v1

"When I want to experience new activities and meet new people I go to meetup.com and attend a meetup."

openquote-v1

"I Google new things I'm interested in doing near me and try to meet new people by participating in them."

Difficulties encountered by people when trying to meet like-minded folk through the use of the internet

signup-icon-v1

Too many steps to complete when onboarding onto the platform

clock-icon-v2

Planning to attend the event is
time consuming

uncertain-icon-v1

Not knowning the people attending, creates a feeling of uncertainty

caution

Interacting with fake profiles
and spam

Interacting with fake profiles
and spam

openquote-v1

"Setting up a profile requires a lot of effort. There are too many questions, fields and photos I need to have in order to make my profile look presentable."

openquote-v1

"I like the idea of a meetup but it needs upfront planning. I start really excited and as the day nears I might not make it to the event because my everyday routine gets the better of me."

Shaping the user persona with insights

Persona development helped me build empathy for the user and outline their motivations, goals and painpoints.

openquote-v2

"In this ever expanding internet there must be something that will help me meet new people who share many commonalities with me?"

"In this ever expanding internet there must be something that will help me meet new people who share many commonalities with me?"

persona-v2

Name: Ethan Marks
Age: 28
Job: Copywriter
Location: London

Motivations

  • Experience new things in life
  • Make new friends
  • Feel less lonely

Goals

  • Meet like-minded people
  • Meet in locality
  • Participate in activities of interest

Pain Points

  • Filling out too much information on profile
  • Spending a lot of time pre-planning to attend events
  • Interacting with spam and fake profiles

Day in the Life

My morning begins with a quick get ready routine and I'm out the door. Followed by a cycle to work through the hustle of the city roads diverting the occasional near death experience.

Before work commences, a fresh brew of coffee is a must. My work day can range from manic mode to fairly busy. Creativity is intertwined throughout my work and personal life. 

Throughout the day I'll explore the web for new things to try out or events that will let me meet new people. I'll ask my friends if they would be interested in attending but a lot of the times they are unavailable or out of it's out of their confort zone.

Balancing between my current lifestyle and trying new things is always a juggling act and my current state gets the the better of me. When I do make it the experience can be out of this world amazing or a complete blow out.

I wish there are an easier and faster way to get to know people who like the same things I do. I eagerly wait for the internet to work it's magic and make my life easier.  

Visualising the current journey

Meeting people with similar interests using a popular socialising and networking app.

andrews_journey_dark-v1

Opportunities for creating a better experience

fast-onboarding

Create a faster onboarding process

Create a faster onboarding process

match-people-v7

Create matches between people based on activities they are interested in doing

Create matches between people based on activities they are interested in doing

location-v4

Create matches within locality of the user

Let's create an app that helps users make friends with
like-minded individuals nearby, with ease.

Let's create an app that helps users make friends with like-minded individuals nearby, with ease.

Let's create an app that helps users make friends with like-minded individuals nearby, with ease.

Optimising the journey

I wanted to create a smoother experience that focused on removing the pain points and put users in contact with like-minded individuals almost instantly.

simplified_flow-v7

Designing within constraints

When scoping with the developers, I learned some features would take us significantly over budget and cause delay in bringing the app to market. This led me to refine the functionality.

simplified_flow_refined-v2

A flow closer towards creating new friendships

I wanted to create a smoother experience that focused on removing the pain points and put users in contact with like-minded individuals almost instantly.

User flow

mvp_user_flow-v5
fast-onboarding

Creating a faster onboarding process

Onboarding screen flow

onboarding_wf-v1

The one tap account creation and automated verification
Creating a profile with minimal effort using just a tap of a button. To make this achieveable, we only allowed users to login using an existing social media account limited to Facebook and Google. The method removed the steps of filling out various fields and identity verification.

Pre-populating the profile
By default the users main profile photo from their social media account would be used as the main profile photo on the app. Users would have the ability to replace the default photo. The 'About' field would be optional leaving the user to agree to the terms and conditions in order to proceed to the next steps.

Selecting activities
An A-Z list of activities with a search bar would provide users with vast range of activities to select from. The list made it easy to match user's based on their interests.

Onboarding prototype

Onboarding prototype

Onboarding screen flow

match-people-v7

Matching with the user's interests

Matching users screen flow

matching_wf-v1

Creating engagement with the use of iconography
I used icons for each activity as a visual aid and to make the experience of browsing the list more interesting and engaging.

Iconography for activities

activites-list-longer-v2

Activities selection screen

selected-activities-v1

Highlighting the matched activities on the user profile
When a user went visited a matched profile the activities both users had in common would be highlighted. 

Highlighting activities on the matched profile

matching-ui-v3
location-v4

Matching within the user's locality

Using GPS location we matched the user with like-minded others nearby. The results were sorted by the closest distance. I limited the minimum distance a user would see to 0.1mi to keep a sense of anonymity. 

The distance away from the user

Conversations and connections

Instant messaging
For easy free flowing communication between users.

Messaging archive and chat screens

messaging-screens-v7

Favouriting
Favouriting allows users to add each other to their 'Favourites' list. By tapping on the 'Favourited You' tab the list also let's the user see others users who have added them as a favourite. The feature allows users to build a connection with each other and maintain that connection via favouriting each other. 

When a user decides they no longer want to keep in contact with another, they can simply unfavourite them through the favourites list or by visiting the user's profile and tapping the favourite button.

Favourites tabs within user's account

favourite-screens-v1

Favouriting on the user's profile

Blocking and reporting users

With social networks there is always a risk of spamming, scams and abusive behaviour. I wanted to provide a quick and easy way for users if they had suffered from one of these experiences.

Blocking and reporting flow

blocking-flow-v3

Screens of blocking and reporting a user

blocking-screens-v3

Managing blocked users
If the user has the ability to block other users, should also have the ability to unblock them on the basis the action was conducted by accident or the user had changed their mind. Through settings menu the user could manage their list of blocked users.

Managing blocked users

Managing blocked users

Bringing it all together through the global navigation

The hamburger menu to give users a familiar navigation pattern when using the app. The notification dot indicated a user had received a message or had been favourited by another user.

Slide out menu

Accessibility through the navigation menu

navconnect-v3

Beta release on iOS and encountering the first batch of usability and experiental issues

Beta release on iOS and encountering the first batch of usability and experiental issues

No matches found / the null state

My mind had invisioned thousands of users signed up on the app and all active, in reality it was very different. Initially we had a varied range of users sign up, many within London and about 20% all dotted throughout the world. Due to the small amount of the userbase the chances of finding a match were a lot less and the screen showed up with a standard 'No users found' message. 

How can we make the null state more engaging?
To make the null state more engaging additional users around the area were listed to keep the flow of the page going and not make it look so empty.

Default null state

nouserfound-original-v1

 Null state with non-matched results

nouserfound-iteration-v1

Encouraging conversations between non-matched users
I wanted to encourage converstations between users who did not match. Reading 0 matches would make a user feel they had hit a dead end so I inserted a prompt to message the user even if they didn't have anything in common. Tapping the link would start a chat with the user.

Prompting conversations with non-matched profiles

user-nomatches-v4

Disabling the distance filter
To reduce the probabilty of users not finding any matches within a close proximity, I disabled the distance filter within the setting and set it the results to be listed by the nearest first.

Default filter options

filter-default-v1

Filters without the distance selector

filter-revised-v1

After the iterations, Socible was pushed
for live on the iOS app store

After the iterations, Socible was pushed for live on the iOS app store

After the iterations, Socible was pushed for live on the iOS app store

🎉 🥳

openquote-v2

"The app is a great idea, is it available on Android?"

"The app is a great idea, is it available on Android?"

Increasing the reach and accessibility by launching on Android

Weeks into going live the biggest problem Socible encountered is that a lot of the interest came from people who used Android devices. To increase the userbase and make the app more accessible a version for the Android Play Store was placed into development. 

Material design vs human interface design guidelines 
Native UI patterns provided on both platforms were used where possible for ease and fast product development. Design changes were kept to a bare minimum keep the the design consistent accross both platforms.

Differences in iOS and Android UI

iosandandroid-differences-v1

Socible was sucessfully launched globally
on iOS and Android

Socible was sucessfully launched globally on iOS and Android

Socible was sucessfully launched globally
on iOS and Android

🎉 🥳 🍺 🎊

outro-socible-v5

Retrospective

Focus on usability testing and user feedback earlier on in the design process 

Last minute changes and panic situations could have been avoided if we had tested the design prototype rather than waiting till we reached to the beta stages of the app development cycle.

Take baby steps for faster and smoother development

The initial approach towards the project delivery was very waterfall based. As we got into making amends and fixing bugs during the test releases we naturally switched to focusing on fixing or amending small components, testing and then releasing. Splitting the app development into smaller components made it easier to manage development and increased the speed of the product delivery.

There is more than the app, to make the app successful

When starting the project my naivety led to me think it was all about the creation of the product that would make the app a success, however as I went further down the rabbit there were many factors like growing the userbase, marketing, product roadmappinh, funding, legal and financial implications that crept into the scope. At this point I realised I would need to seek funding if I was to continue to grow socible.  

Next steps

After the launch on Android, Socible was starting to get a good organic growth. The next stage of the project was to introduce an event creation feature. We had users matching, now we wanted to get the matched users meeting each. The event creation feature would allow single and multiple users to partake in events hosted by each other bringing the users a step closer towards creating new friendships.  

Project wins

Launched native app on iOS

Launched native app on Android

Review in the Metro Newspaper

ROI by getting hired for perm UX roles

Launched native app on iOS

Launched native app on Android

Review in the Metro Newspaper

ROI from getting hired for UX roles

Launched native app on iOS

Launched native app on Android

Review in the Metro Newspaper

ROI by getting hired for perm UX roles

Launched native app on iOS

Launched native app on Android

Review in the Metro Newspaper

ROI by getting hired for perm UX roles

© 2019 Salim Rupawala. All rights reserved.