Init

An end-to-end iOS app for meeting people nearby.
A cover image showcasing this project's best features.
Social networking apps are meant to help users connect with others, yet users are finding themselves more disconnected from each other than ever. Increased feelings of loneliness and low self esteem are a few examples of problems with current platforms. Init seeks to offer a solution to those looking to form more positive relationships with people in their community.
timeline
2 Weeks
(80 Hours)
Role
UI/UX Designer
(Solo)
Tools
Figma / FigJam
Maze / Marvel
Tasks
UI / UX Design
Strategy

How might we help
people form genuine connections
with people nearby?

The solution

An intuitive app that connects users to nearby people and upcoming local events

Created during the pandemic, Init sympathizes with those who are finding it difficult to branch out of their inner circle in a fun and safe way. The app helps users connect naturally to people nearby through video chatting and local events. Designed around our target user's goals, needs and frustrations, Init offers a valuable solution to our complicated problem.
Feature Overview
Browse profiles and events by popular interests
An image of our solution for Init.
An image of our solution for Init.
Create and join events
Quickly find fun in-person events based on your interests. Events can be made by anyone which adds a sense of excitement and community to Init.

Starting with research

Structuring our approach

Before jumping into designing, I created a document outlining the project's research goals, questions, assumptions, and methodologies. This document helps guide the research process in a focused direction which will help us understand our potential user's needs, goals, motivations, and frustrations.
View Plan →

Outlining our research objectives

Identify our target users.
Discover key trends for social networking apps.
Evaluate the strengths and weaknesses of social networking apps.
Understand how users form connections with people nearby.
Understand user goals, needs, frustrations and motivations.

Choosing research methods

Market Research
Competitive Analysis
User Interviews

Market Research

Conducting market research helped me identify the app's target users and general trends of social apps.
View Full Research →
1
Tinder & Bumble's primary age group is 18-29.
2
In 2021, Meetup’s top searched word was friends.
3
Knowing only 6 neighbors reduces loneliness.

Competitor Analysis

Looking at current solutions & noting opportunities

Upon identifying industry demographics and competitors, I began analyzing the strengths and weaknesses of direct and indirect competitors to establish a starting point for Init's app. This analysis offers a look into what users expect social networking apps to offer.
View Full Analysis →
Meetup's logo.
Meetup
A platform to create and attend events.
Strengths
• Find events by specific interests.
• Search upcoming events.
• RSVP to events.
‍
Weaknesses
• Costs $24/month to start group.
• Managing interests is unclear.
• Online events appear under local.
Nextdoor's logo.
Nextdoor
A platform to connect with neighbors.
Strengths
• Join groups in your local area.
• Free to create groups.
• View a list of all your neighbors.
‍
Weaknesses
• A lot of sponsored content.
• Inconsistent font for some posts.
• Features hidden in the more tab.
Bumble's logo.
Bumble BFF
A platform to find friends nearby.
Strengths
• Swipe through nearby people.
• Sort profiles by age, distance, etc.
• Connect to third party platforms.
‍
Weaknesses
• Users constantly enable location.
• Can't search users by home town.
• Requires payment to undo swipe.

Provisional personas

Defining potential users to prepare for interviews

With our secondary research, I created three provisional personas that acted as a guide for finding people to interview. The Newcomer is someone who wants to explore a new area and make friends with similar interests. The Zoomer wants to experience their city more deeply and the Busy Professional is interested in networking and expanding their skills.
An image of our provisional persona.
The Newcomer
25-34 years old
Female
Goals
• Get to know people in their area.
• Find friends with similar interests.
• Explore nearby locations.
‍
Pains
• Not having people to hang out with.
• Finding people that are vaccinated.
An image of our provisional persona.
The Zoomer
18-24 years old
Male
Goals
• Explore the city.
• Have fun with new people.
• Enjoy free time.
‍
Pains
• Knowing what to message people.
• Conversations that go nowhere.
An image of our provisional persona.
The Busy Professional
30-49 years old
Female
Goals
• Network with people nearby.
• Learn something new.
• Get out of comfort zone.
‍
Pains
• Keeping track of get-togethers.
• Finding time to go to events.

user interviews

Understanding our users through open conversation

After defining who I'll be targeting for interviews, I spoke to six participants who matched the profiles of our provisional personas. In preparation for these interviews, I created an interview guide that provided an introduction to participants and outlined any screener, interview, and demographic questions that were to be asked.
View Interview Guide→

Synthesizing interview data visually

Upon transcribing my interviews, I organized all of my observations into individual notes and grouped them into categories. Organizing observations in this way helped highlight key patterns between participants. These patterns were then translated into insights and used to define the needs of Init's primary persona.
View Empathy Map→
An image of our empathy map. This was created to synthesize our interviews.

Key TAkeaways

1. Cater to quick meetups

After talking to participants, it was discovered that users who went to a new area to move or travel really wanted to meet new people there. Three out of six participants wanted to make friends while at a new location. From this it was concluded that users need to be able to quickly meet locals.

2. Avoid false first impressions

Users also found that talking to people online wasn't always a good indicator of how they would be like in real life. Four out of six participants were frustrated by experiences that didn't meet up to their expectations. From this it was concluded that users need to be able to better understand who other users are before meeting them.

3. Show people based on similar interests

Our last discovery was that users found joy in meeting people that liked similar things as them. Five out of the six participants factored in similar interests when choosing who to connect with. From this it was concluded that users need to know what other users are interested in.
Primary Persona

Introducing our user
The data accumulated from secondary and primary research was then used to create the project's primary persona, Carmen. Carmen wants to find friends with similar interests in her area so that she can enjoy her free time and explore the city.

How might we...

Carmen's needs were then framed into actionable problem statements to prepare for brainstorming.
View Statements→
1
How might we help Carmen be able to quickly meet locals?
2
How might we help Carmen understand users pre meetup?
3
How might we help Carmen know what users' interests are?

Brainstorms

Problem solving

I used the problem statements to create mind maps of potential solutions. This was done by focusing on each question three times and in three minute intervals.
An image of our mind map created during brainstorming.

Product Strategy

Creating an app that supports business & user goals

With potential solutions gathered, I identified Init's business and user goals to narrow down the direction that the app should go in. These goals will be used to help prioritize the brainstormed features. Focusing on the goals that serve the business and its users helps us ensure that all developed ideas serve a clear purpose.
An image of our business and user goals.

Prioritizing brainstormed solutions

Each idea that was thought of was then put into a table to be prioritized. Features that satisfied more goals were placed higher than the rest. From here, I evaluated the amount of implementation effort each feature would require and my confidence level for the feature's placement. Since we're developing an MVP, I decided to tackle all P1s and only some P2s.
View Airtable→
An image of my product roadmap.

App Map

Defining hierarchy

Once I decided on the app's features, I moved my focus to outlining the structure of the app using an app map. The app map allows me to see how the different screens and features of the app will interact with one another.
An image of Init's app map.

UI Requirements

Tasks to be completed during usability tests were then chosen. These tasks highlight important features and determine the screens to be designed.
View UI Requirements Doc →
1
Complete the sign up process for Init.
2
Talk to a girl that fits the given directions.
3
Join a free event located in the park.

outlining flows

Visualizing interactions through flows

With the tasks defined, I created three task flows and a user flow to illustrate how Carmen would run through the tasks. These paths show Carmen's journey through Init and provide insight into the individual actions and decisions she will come across. Having the different screens and actions clearly laid out provides a guide that will help when sketching out ideas.
View Task Flows →
An image of Init's task flow.

Stepping into our user's shoes

To further empathize with how our user will be navigating Init, I created a user flow that accounts for the different decisions that a user would make as they go about completing the set tasks. This helps to highlight the different interactions, screens, and entry or exit points that a user may run into while using the product.
View User Flow →
An image of Init's user flow. This was created to empathize with our user.

Sketches

Low-Fi Wireframes

Utilizing the UI requirements document and flows as a guide, I sketched out multiple iterations of screens for the tasks. This highlighted where elements would be located and how they would look.
An image of Init's app sketches.

Branding

Developing a brand identity

With the structure of the app sorted out, I moved on to defining Init's core brand attributes. After thinking through the problem the app was trying to solve, I chose the words natural, infinite, friendly, adventurous, fun, simple, and modern to represent Init. Using these words, I created a moodboard to guide the app's font, color, logo and image choice.
View Moodboard→

Naming our creation

Init's simplicity came from the desire to create a memorable and catchy name that would grab people's attention. Whether people are using the app to talk to others or go to events, our users are always in the center of the action. Since users are not just observers but active participants, I thought a name that highlighted this central role would be best. Hence Init!

Logo Design

Sketching out logos

Init's name could mean a lot of things and coming up with a logo wasn't easy. After some experimentation, I landed on a design that best represented Init's brand attributes. The character, Macaroni, is an "i" of sorts that features an inviting smile in the shape of a piece of macaroni.
An image of logo iterations for Init.

UI Kit

Designing a system

Following the creation of the logo, I created a style guide and UI kit to make sure that the app's design remained consistent across elements and screens. This is a fluid document that other designers can add and refer to during future iterations.
An image of the UI kit created for Init.

hi-fi wireframes

Putting the puzzle together

By utilizing our sketches and applying the established styles to the screens, I created Init's high-fidelity wireframes. I chose to conduct usability testing with high-fidelity wireframes instead of mid-fidelity wireframes because I wanted to test out our new design system with our users. Since everything was created from scratch, it was important for me to see how users would interact with Init's color palette, typography, images, cards, and buttons.

It's moving, it's alive!

Digitizing our screens was the first step to conducting usability testing but now it's time to create a prototype that users will be able to interact with. The prototype I created includes all the interactions needed to complete the pre-defined tasks. Upon completion of the prototype, I moved from Figma to Maze where I created three missions for users to test.
View Prototype →
A cover image showcasing this project's best features.

Usability Testing

So...how did it go?

Moderated usability testing was conducted with eight participants utilizing the think-aloud method. This method enabled me to ask clarifying questions to users. I put together a usability test plan which assumed a 100% completion rate and a 90% error-free rate. This meant that I expected all users to complete the tasks with minimal mistakes and slips.
View Testing Plan →

Synthesizing our test results

Out of the eight participants, 100% were able to complete the tasks with a 99% average error-free rate. Just like before, participant observations were organized into categories to help identify areas of improvement. These patterns were then translated into design recommendations. From here, I created a prioritization matrix to guide my focus.
View Affinity Map →
Insights
Users expected optional fields to be labelled.
‍
Users wanted the interest screen to look more minimal.
‍
Users want to know why certain people are recommended to them.
‍
Users expect headings to clearly describe what a section does.
‍
Users were confused on the meaning before profile borders.
→


→


→


→


→
Recommendations
Properly label fields that are optional.
‍
Minimize categories to two lines of interests without scrolling.
‍
Add a subheading stating why people are displayed.
‍
Change headings to better fit functionality.
‍
Add a notification stating what the border means.

Final solution

Updating wireframes to account for feedback

All that was left was updating Init's wireframes based on the feedback gathered from testing. This helped the app become a more usable product for our users. The following screens showcase a few of the changes as well as some notable features of the app. Once this step was complete, our app was ready to move on to development.

Choosing interests

Minimizing horizontal scrolling and adding context

An image of our solution for Init.
An image of our solution for Init.

Similar interests

A notification explaining why certain profiles are highlighted was added. Highlighted profiles help users find people with similar interests.

Genuine connection

Video chatting provides our users with a reliable way to avoid false first impressions. It also adds a bit of spontaneous fun to our user's experience.
An image of our solution for Init.

Relevant Feed

Adding insightful headings and modernizing event cards

An image of our solution for Init.

working prototype

Testing out the prototype yourself

Wireframes were then moved into Marvel to create the clickable prototype below. Please feel free to explore the app. In case you forgot, users were asked to complete the sign up process, talk to a 24 year old girl that rock climbs, goes to the same school and has similar interests, and join a free park event.

final thoughts

What's next for Init?

With the most recent revisions, Init is finally ready to be handed off to a developer using Figma. Once developed, it's crucial to keep an eye out for how users are utilizing video chat. For our MVP we opted out of adding instant messaging. This surprised our users during testing since messaging is fairly common in social networking apps. Therefore, it's important to see if users need to be incentivized to get started making video calls. After that, I would tackle more of our nice to have features like verified profiles.

Reflecting on important lessons

Keep features to a minimum

I came across two challenges that caused me to completely re-evaluate what I was doing. The first challenge came in the form of surplus features. In case you haven't noticed, fully fleshed out social networking apps come with a ton of features. Since our product is an MVP, it was important to minimize these. The process of simplifying required many hours of thoughtful consideration into what made Init different than other apps. In the end, I believe I created an app that keeps connections genuine and exciting.

Prioritize moderated usability tests

The second challenge popped up during usability tests. Almost all of my participants were taken back by the lack of messaging. If tests weren't moderated, I wouldn't have seen each participant's expression when asked to call a user. Even though users said it was weird, their expressions showed emotions of nervous excitement. Their positive facial expressions solidified my decision to use video calling as the app's main form of communication.

Thank you for reading

Next Steps
View previous project
Explore my LinkedIn
Contact Me
🤖 Built in Silicon Valley