End-to-End iOs App Design

knit

Anonymous social media iOS app encouraging real connections

Year
2021
Role
Product Designer
Constraints
1 month
knit visual overview

For lonely people, knit is the social media platform that delivers safe, meaningful interactions that account for their mental health because it allows people to connect anonymously based on interests before revealing personal details about themselves.

The Challenge

To connect people through common interests by decreasing the social dilemma and allowing users to create anonymous connections based before sharing their personal information (ie. name, age, gender, etc.).

Play with the final prototype here.

App Inspiration

With the pandemic looming over all of our heads, a lot of people I spoke to were surprisingly candid about being lonely.

I was inspired by a book called "The Authenticity Project" by Claire Pooley to explore the factors of anonymity and honesty in a social media application.

Research

I performed a competitive analysis, in which I took direct and indirect competitors and evaluated their strengths and weaknesses. I chose these competitors because they connected people in different ways that I was interested in exploring.

From this information I discovered a gap in the market for a mobile application that connected people while reducing the noise.

I used this information to reform my problem statement and write a user interview script.

I then conducted user interviews with 5 people aged 18-65 who had experienced loneliness during the pandemic.  

Key Findings

All participants use social media to access new information and interesting things

All participants dislike negative interactions and harassment on social media

4/5 participants are anxious about how they are perceived on social media

Empathize with Lettie

Using the research findings, I personified my findings to create empathy for people who would want to use this platform.

Key Findings

Lettie has been experiencing loneliness.

She wants honest conversation in a small group.

She hates negative interactions, like trolls and hateful content.

I used these questions to set brainstorming parameters in which I focused on each question for 10 minutes and came up with multiple solutions.  I then created a feature priority affinity map.

Keeping user goals, effort, business goals and technical restrictions in mind, I prioritized my ideas from the brainstorming session using the KANO method.

Key Findings

Threshold features are expected by default. These are features that are important and included in the design.

  • Allow posts to have responses
  • Allow access to groups based on interest
  • Present conversations chronologically, not by likes or algorithms

Performance features ensure ease of use and are typically generated and evaluated by the user.

  • Allow users to start their own groups
  • Make sharing demographics optional
  • Allow users to flag inappropriate comments

Excitement features are nice to have, but not necessary for the application to function.

  • Chat screen customization
  • Profile customization

Design

With pencil, I drew out multiple options for layouts of each page. Actualized each feature in a way that prioritizes connection and safety.

  • Connection requests allow users to share information after they've connected.
  • Messages and notifications so each user can continue to foster friendships with people they've connected with.
  • Groups by interest to facilitate connection based on common interests.
  • Add a group option to allow for the vast interests that people have.
  • I used sketches to try out many ideas before deciding on one layout to digitize.
  • I kept in mind the Gestalt principles, which helped organize the features to best help users connect.
  1. The user would be welcomed by a message inviting them to make connections.
  2. Then they would check their messages to stay in maintain conversations with current friends.
  3. The user then can note the time they received their last message and see a preview of it.
  4. Following the scroll, the user checks the message request card and will decide whether or not they'd like to start a private conversation with this person.
  5. The user can see the groups they are in, how many members are in each and message notifications. That way they can keep up with with people who have the same interests.
  6. The user can add their own group if they haven't been able to find a topic they are looking for.
  7. If they are looking for something new they can check out the suggested groups.
  8. When the user is looking for new conversations they can also browse.
  9. They can use the bottom navigation to quickly access their groups and messages. They also can edit their profile and choose what information to make available.

The wireframes allowed me to move things around before adding colors and images. I used them as a basis to make the initial prototype.

You can check out more of my process through annotated wireframes in the carousel below.

Check out 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 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, which 13 users completed and extracted insights from that study as well.

  • Accept StuLittle's message request (pictured left)
  • Send a message to the hiking group
  • Locate Maria's profile
  • Change your gender so that it is available for viewing on your profile

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".

Play with the prototype below.

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 what doesn't.