Collidasphere
Authenticity. Privacy. Control.
Designing a social media app that values ownership and customizability.
Role
Product Designer
Timeline
October to December 2022
Team
2 Project Managers
4 Product Designers
Tools/Skills
Figma
User Testing
Prototyping
Overview
Our client, Collidasphere, is a premium social media platform that wanted users to represent themselves authentically with versatile content mediums. Their mission is to “implement real-life interactivity in a digital space.” As a Product Designer in Design Consulting at Cornell, I worked with our client to ideate the platform’s MVP and design a profile feature that encourages authenticity.
Social media encourages authenticity conformity.
Ever have that looming thought when making a post online that “I won’t get enough likes” or “I don’t look good enough”? There’s a reason for this—numerous social media platforms push creators into uniform content styles and put pressure on having successful metrics to compete with others. This can make users feel constrained in posting content they truly want to put out.
Final Prototype
Below navigates the final prototype of the profile section that I designed.
The Problem
What do social media users think?
We had to work around the constraints of limited time and resources when it came to conducting user research. Our interviews suggested that current users of social media are frustrated by passive engagement in online content.
We aimed to make our features highly customizable and give users the opportunity to represent themselves in as many ways possible. This led us to the question:
How might we design a customizable social media app that centers on user privacy, authenticity, and control?
Ideation
The Flow
Our client wanted a main home page as opposed to a traditional navigation bar to scale out more pages as the platform grows. We decided to follow this information architecture and split up its core features below.
Brainstorming Features
Given the nature of the application being an early-stage product to “reimagine social media,” I created low-fidelity sketches of what features could look like. Here are preliminary ideas of the app’s core sections: Home (originally Private), Flow, Create, and Profile.
My concept sketches addressed the original “How Might We” question in the following ways:
Allowing for privacy: Users can control the visibility of their posts within their profile and within groups (communities).
Posting authentically: Enabling images, writing, drawings, and stickers in posts encourages a creative medium that is centralized and diverse. Users can post to groups to reach a targeted audience of common interests.
Controlling your experience: Customize your own timeline to curate certain content from groups you want to see.
The Profile Feature
A more complex design challenge emerges…
I moved on to the creation of the profile feature, which would allow users to categorize their posts into folders, view the groups they are a part of, and see their collisions (followers). Considering user needs for privacy, authenticity, and control, I landed on another question that would guide my creation of the profile:
How might we design a profile feature that resonates authentically with users and
allows for high customizability to represent who they are?
Folders
Here are a few designs created for the Folders section:
I went with the third option because users can customize the size of their folders, thereby enabling them to highlight folders of greater personal significance. The smaller name and profile picture de-emphasizes the person posting and shifts the focus to the actual content. The first option contrasted this and took up too much space towards the top of the profile which would cause unnecessary scrolling if a user had many folders on their profile. While the second option resolved this issue, it was too uniform in the actual size of their folders, which was not conducive to a personalized user experience. I decided to not have the collision count shown to de-emphasize follower metrics on a user’s profile. I also created customizable “badges” that users can display on their profiles to represent identity markers that are important to them.
Groups
Next are a few designs created for the Groups section:
I decided to go with the third option to account for the amount of scrolling that users would go through if they joined many groups. Also, it may be more familiar for users to recognize a group based on the consistency of its name rather than a thumbnail image. The first option contrasted this by prioritizing images over text. Although the second option emphasized text and image to similar degrees, it took up space that could tire users from incessant scrolling.
Collisions
Finally, here are a few designs created for the Collisions section:
While it seems that the list view would be familiar to users, I received feedback that it may feel too “roster-like” in traditional social media. I went with the three-column grid because it allowed for optimal use of space while breaking the “roster-like” feeling of traditional social media follower lists. Although the two-column grid allowed for a larger user preview, including profile banners, it took up too much space per profile.
Visual Design Explorations
My next task was to explore the visual design for the app, using the Flow (feed) feature as a general template to work from. I created around 20 different explorations, and we collectively deduced it down to five screens.
Refining The Look
We were close to choosing Exploration D as our final iteration, but the top space was unnecessary, and we realized the scrolling functionality would be awkward since we wanted the heading “Flow” to stick to the top of the screen while scrolling. We went with Exploration E for the following reasons:
Hidden Interaction Count: Users click on each post in order to like or comment, breaking the pattern of mindless scrolling.
Strong Visual Hierarchy: The heading “Recents” indicates new posts; Groups are shown by the plus icon and “New Groups.”
Visual Branding: Our client wanted a cohesive blue and gold color scheme. This was most aligned with our client’s vision.
Visuals of the Profile Section
After this, I went in and created our high-fidelity screens for the profile feature.
Design System
We used our final exploration and developed a design system to work from.
The Final Prototype
Navigating User Profiles
After prototyping the final screens, I conducted user testing to identify pain points in the feature’s usability. There were two main issues that users had when it came to navigating the feature:
🚨 Problem 1: The term “Collisions” was confusing and not intuitive when users want to find their friends.
💡 Solution: Added into the onboarding process an explanation of unfamiliar terminology for new users.
🚨 Problem 2: The interaction to go back to the landing page was not intuitive (the bottom-left profile button).
💡 Solution: Due to client demands we kept the button, but implemented a long-hold option to improve accessibility.
Outcomes and Takeaways
The final design I worked on allows for high levels of customizability on a user’s profile. With personalized banners, badges, and folders, users are able to represent themselves in a way that they have complete control over. Using the design system and my own design thinking allowed me to create clean and brandable designs that aligned with the app’s mission.
Working with a design team on Collidasphere has helped me grow and understand design as a language to communicate with other designers. Since others were responsible for separate features of the app, we had to frequently communicate ideas about our designs with one another. In terms of design thinking, I also expanded my understanding of how principles such as alignment, proximity, hierarchy, and unity play a vital role in an app’s usability; I weighed each iteration of the designs I created with those principles in mind. However, one of my most prominent takeaways is how to effectively design around user research and user needs. Going through the design process allowed me to ground my design philosophy in centering human needs and behavior by thinking critically about each design choice I made.