End-to-End iOs App Design

Anonymous Social Media iOS App Encouraging Real Connections

Year
2021
Role
Research & Design
Tools
Figma, Miro, Whimsical, Illustrator

knit is a social media platform that begins with anonymous connections, but opens up to the sharing of information as conversations progress. I created this application from ideation to prototype, researching the issues users had with existing social media platforms to find and fill the void that could lead to true connections. The end-to-end process involved ideation, research, information architecture, design, testing and iteration.

The Challenge

Unveiling a gap in the social media market, discovering user pain points and using those findings to create an app prototype from end-to-end.

63% of users tested said they would use this app if it were developed.

Play with the prototype below.

Background

With the pandemic looming over all of our heads, I realized that a lot of people I spoke to were surprisingly candid about being lonely. Social distancing was creating distances between the individual and the community. Particularly for people who lived alone or in a new place.

I was reading a book called "The Authenticity Project" by Claire Poole, in which an old man leaves a journal in a cafe with a story of who he was because he was feeling lonely. This led to other people responding in the journal and wove a connection between all of their lives.

I thought about this idea of being able to be honest about who you are and how that is such an important foundation to a real friendship.

The goal was to forge relationships based on common interest and remove some of the "toxic" aspects of existing social media platforms.

Research

I performed a competitive analysis, in which I took direct and indirect competitors and evaluated their strengths and weaknesses. Keeping them in mind as I made research plans.

I then conducted user interviews with 5 people aged 18-65 who had experienced loneliness during the pandemic.  I organized the findings with an affinity map and made all decisions based on what I had learned.

Understand

With the initial stage of research complete, I took multiple steps to further empathize with the user. Creating a user persona to help understand the user, which will help guide design decisions.

With these questions and this user in mind, I looked for patterns among the research and exemplified them in POV and HMW statements.  

I set brainstorming parameters in which I focused on each question for 10 minutes and came up with solutions for each.  With multiple solutions. I then created a feature priority affinity map and classified which features would be most important and easiest to execute using the Kano method.

Design

From Lo-Fi to Hi-Fi, I worked through sketches, wireframes and an initial prototype. I used annotations to explain each decision as it related to the research - I call these why-rframes.

Below is the initial prototype used in user testing.

Creating a friendly interface that felt welcoming and safe was high priority for the aesthetics of this project.

Test

I conducted usability tests with 5 new participants, all that fit within the parameters of our user persona. Each user was asked to complete four tasks while observed over Zoom.

I also created a usability test via Maze, in which 13 users completed and extracted insights from that study as well.

The objectives for testing were to discover context, pain points and insights about how users interact with the prototype.

Using the findings from each research method, I created yet another affinity map to search for patterns that provided insights as to what needed to be adjusted to make the experience as easy for the user as possible.

Iterate

Users found the flags on each message within the group tags to be confusing.  I chose to remove the flags and add a report feature to a menu represented by ellipsis on the top right corner.

On the profile page, users were unsure about the name and username forms.  I had chose to lock them so that once you connect with someone your name will not change, eliminating any confusion that could happen during a connection. I then removed the input form and labeled each category.

People were confused about "messages for approval". Now this could have occurred for two reasons: one being that this is a relatively new pattern and users are not used to approving each message connection, or the copy was confusing and led the user to overthink it's meaning.  Because I believe it is a combination of both issues, I changed the copy to something I believe to be more clear, "new message requests".

Next Steps

Complete and refine an onboarding process that displays how the app works, code of conduct and gathers user information through verified channels.

Conduct more user testing to ensure changes are the best possible options.

A/B testing will further validate what works and doesn’t work.

Reflection

What went wrong and why?

There was confusion when creating components for the UI. This occured because many things adjusted visually as the project ensued. I now know to start with a separate components tab and use those as building blocks, a la atomic design.

What could I have done better?

As this project went on, I learned about different companies with similar goals that I hadn't considered for the competitor analysis. Learning about them earlier could have had more of an influence on how this product turned out. I should have broadened my search with regards to competitors.

What did I learn?

I learned how to fully analyze and understand how to take raw qualitative data and organize it to create actionable results.