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.
“ 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
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.
Strengths
Weaknesses
Strengths
Weaknesses
Strengths
Weaknesses
Strengths
Weaknesses
Strengths
Weaknesses
Strengths
Weaknesses
Insights I gained by asking friends, work colleagues, joining discussions on Facebook groups, Reddit and Quora.
Through mutual friends
Join local activity groups
Join local activity groups
Attend meetup events
Professional working environment
Too many steps to complete when onboarding onto the platform
Planning to attend the event is
time consuming
Not knowning the people attending, creates a feeling of uncertainty
Interacting with fake profiles
and spam
Interacting with fake profiles
and spam
Persona development helped me build empathy for the user and outline their motivations, goals and painpoints.
Motivations
Goals
Pain Points
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.
Meeting people with similar interests using a popular socialising and networking app.
Create a faster onboarding process
Create a faster onboarding process
Create matches between people based on activities they are interested in doing
Create matches between people based on activities they are interested in doing
Create matches within locality of the user
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.
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.
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
Onboarding screen flow
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
Matching users screen flow
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
Activities selection screen
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
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
Instant messaging
For easy free flowing communication between users.
Messaging archive and chat screens
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
Favouriting on the user's profile
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
Screens of blocking and reporting a user
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
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
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
Null state with non-matched results
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
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
Filters without the distance selector
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
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.
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.
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.