Prosocial
A web app creating a safe space for people to connect online.
At a Glance
My Role
This was a solo project, other than some brainstorming with the founder.
Tools
Figma, Miro, Balsamiq
Timeframe
January 2024 - February 2024 (4 weeks)
Deliverables
User flows, wireframes, high-fidelity mockups, style guide and components
Background
Prosocial is a startup web app that curates a safe space for people to form connections online by requiring a careful nomination and approval process for new members. It also emphasizes the facilitation of meaningful connections based on users’ interests.
Scope
The concept for the app was already set. I was hired by the founder to design high-fidelity mockups for the following MVP flows:
Creating a profile
Viewing your own profile
Editing your profile
Viewing someone else’s profile
Nominating a friend
Profile sharing using QR Code (mobile only)
User Flows
My first step was to think through the user flows. Though I ended up iterating on these flows many times, it was an important starting point.
I used Miro to create my flows. The mobile version of the “Create Profile” user flow is pictured below.
Wireframes
While designing my wireframes, I grappled with how to display users’ interests on their profiles. I did not want to overwhelm users but also wanted to make sure there was an option to easily view all of someone’s interests. At first, I considered using chips or icons to display the interests but I ultimately settled on cards. My reasoning for these design decisions is in the Product Psychology section below.
I went through several iterations of wireframes for the profile pages before I felt the designs were ready for high fidelity. Five of my final wireframes are pictured here.
Product Psychology
Some key product psychology principles were on my mind while designing the flows and wireframes.
Prevent users from feeling overwhelmed.
Hick's Law (also known as decision paralysis or the paradox of choice) states that the more stimuli or options a user faces, the longer it takes to make a decision or action. Therefore, I made a consistent effort to minimize the user’s cognitive load.
On the profile screen (pictured right) one large interest card covers the whole screen. This helps users immediately engage with the profile without having to think too much or decide which interest to click. Mutual interests are always shown first! Users can scroll left to see the additional cards.
Note: Due to Fitt’s Law, I also felt it was important to include a “View all [#] interests” feature so the user can see a list of all the person’s interests without having to scroll (pictured right.) Fitt’s Law states that making everything visible on one screen improves movement time to target and makes it easier to see everything/compare options.
Encourage engagement by piquing curiosity.
The curiosity gap principle states that people will want to satisfy their curiosity. I designed the “View Profile” flow to make people curious about the person whose profile they are viewing. For example, when viewing the profile of a user that has mutual interests (pictured left), there is a prompt at the bottom of the screen that says: “You share [insert number] interests with Name.” This makes the user curious to keep exploring the profile. Additionally, since only one interest card is shown at a time, users are curious to scroll through the other interest cards.
Increase engagement by splitting steps.
Getting users to make a small commitment and follow up on it can increase engagement up to 271%. So, another way I reduced cognitive load was by splitting steps. I utilize this method in the “Create Profile” and “Nomination” flows. For example, instead of just taking users to the blank profile screen and telling them to fill it out, the flow walks them through each requirement step by step, screen by screen.
Reusing existing patterns can facilitate overall interpretation and improve the user experience.
Since it is best to reuse existing patterns, I designed the flows to mirror each other. Because the “Create Profile” flow looks and feels similar to the other flows, once the user completes the “Create Profile” flow they will understand how to edit their profile, view their profile, and view other users’ profiles.
For example, when I decided to display interests in horizontally scrolling cards, I realized it would be ideal to incorporate this pattern into all the profile-related flows. After several iterations, I designed an “Edit Profile” flow allowing the user to edit the interest photo and description directly from the cards. In the “Create Profile” flow, once the user selects a minimum of 3 interests, previews of the interest cards appear and they can scroll through them to fill them out. This graphic illustrates how the interest cards are used in each flow.
Visual Design
The stakeholder requested a minimalist visual aesthetic that was trustworthy, friendly, and easy to visually process.
I chose a geometrically constructed sans-serif font called “Sen” which is approachable, friendly, and easy to read. I also occasionally used a serif font (Quando) to convey firmness and authority.
The UI elements are flat, use as few lines as possible, and have subtle effects. All corners are rounded to help users feel at ease. Rounded corners also require less cognitive load to process.
For my two-tone color palette, I chose a bright blue for my primary color and a light purple for my secondary color. The blue is friendly, eye-catching, and communicates trust and reliability. The purple is light-hearted, soothing, and communicates compassion and kindness.
High-Fidelity Mockups
I created high-fidelity mockups for each flow. Some are pictured below.
The Profile Page
The stakeholder and I decided to discourage mindless, continuous scrolling like is present on other social platforms. Since our attention is captured by the unexpected, I chose a less traditional interaction to engage users. Rather than allowing continuous scrolling, I designed the profile page to have three set screens the user can scroll between. You can view this interaction in the accompanying gif.
It was also important that the app successfully communicate someone’s personality and interests rather than highlight their appearance. Despite this, I knew a profile photo was crucial for establishing trust and empathy. I tailored the visual hierarchy so the tagline is viewed first and used blue for the scores so they are not overpowered by the photo.
The Interest Cards
I used large pictures on the cards to help users visually process the information and create a more engaging experience. However, requiring the user to upload a photo for each interest would be tedious since they might not have access to one during profile creation. So, I decided a stock photo should be used as a default with the option to change it. This decision inspired me to incorporate the cards in the “Create Profile” flow - if stock photos are used by default, users should not be able to see them before their profile is published.
I decided interest descriptions should be required because they make the cards valuable in every use case. If the user neither changes the default stock photo nor writes a description, the card feels bland and impersonal. Also, since the tagline is so short, the interest descriptions are crucial for finding common ground and starting conversations.
Desktop: High-Fidelity
I wanted the transition from mobile to desktop to feel comfortable and have a minimal learning curve. Thus, the desktop UI is strongly influenced by the mobile UI. Some desktop mockups are pictured below.
Designing for Desktop
I sought to make the mobile and web interactions similar but took advantage of the larger screen real estate. When creating the desktop designs, I split the screen into two sections. The left side contains the primary content, and the right side contains either conditional elements that change based on the user’s selection or interactive, editable components.
The below graphic illustrates an example of conditional elements on the right side of the screen. It is the desktop design for the “view all interests” feature. When the user clicks on one of the interests, the card on the right changes to reflect their selection.
The below graphic shows an example of editable or interactive elements on the right side of the screen. If the user selects “Add Interests,” the element used to add interests is visible. If the user selects the edit icon next to one of the interests, an editable card for that interest is visible.
Next Steps
The app is currently being developed. At that point, I can conduct user testing and iterate on the designs.