6. Social Media Profile Redesign
Final UI for social media profile page
2023
Individual Project
UX/UI; Product Design; Case Study
The goal of this case study was reimagining the general “social media” profile page in a way to create a more genuine experience and provide the user more value for their time. I specifically wanted the service to appeal to Gen Z, as they have become much more attuned to social media and its flaws.
Before doing any sketching I began with an ideation and research session. I analyzed several other social media apps to understand the features commonly provided. During this entire session I added to my brain dump with ideas sparked by potential opportunities. From there, I assessed what potential features to include and remove from the experience.
Brainstorming map to kick off this case study
In-profile feature chart
Once I had a sense of the general experience I wanted to invoke and the features I wished to include, I sketched out a rough wireframe of the profile.
Rough wireframe sketch
I began to build a series of wireframes of the profile based on the sketch. Key features include user information, a profile picture, badges, a messaging and call button, a follow button, a series of video collections, and a content feed. I made a second iteration aligned to the left, and included a third badge and a calendar button.
Low-fidelity Figma wireframe A; centered info
Low-fidelity Figma wireframe B; left aligned info
I started fleshing out my wireframes by adding content from a chef I follow on Tik Tok, Jonathan Kung. I removed two of the badges after thinking about the specific system I wanted to implement. I chose to instead promote funds raised by the creator from their video in order to give a metric for impact made. I also added a statistic for the number of videos the creator has posted. I expanded my idea for a calendar / in-person, creator-driven community service aspect to the app by adding a specific component for an event hosted by the creator.
I also added a second screen with a leaderboard displaying the amount of funds raised by various creators each week. My hope with this feature was to encourage competition towards a shared goal of positive contribution to the world (an thus a coalition), as well as promote the involvement of the creators’ fans in the competition.
Mid-fidelity Figma wireframe; profile with media feed
Mid-fidelity Figma wireframe; profile leaderboard
Mid-fidelity Figma wireframe; updated buttons
I further refined my prototypes until I felt they were representative of my goals. I adjusted colors and spacing, changed the coalition icons, and made a more interesting event component for the profile. I also added a hero cause button to the profile to showcase the main cause the user supports. Below, you will find a user story for the two screens on the right.
High-fidelity Figma UI of re-designed social media profile
High-fidelity Figma UI of coalition leaderboard
User Story Overview:
Jonathan is a Detroit based chef with a love of creating unique dining experiences while sharing culture through food. He hopes to empower his viewers to tackle new cooking challenges, explore unfamiliar flavors, and work to make the world a better place.
User Story Overview, Main Profile:
Every week Jonathan posts multiple cooking videos (and occasionally one of his dogs) - other viewers like to visit his page to check out what new content he’s made. On this page, the user has followed Jonathan. Jonathan is supporting climate change as his main cause within the app; currently he has raised $12,000 since making his first post. We can also see that Jonathon is a part of the “Gold Coalition” (more on that in the next page).
Jonathan has set his privacy settings to allow both direct messages and video calls with his followers - he has set a 3 minute limit for calls, and loves to help people while they’re struggling to cook dinner. For his close friends, he’s removed the time limit for impromptu conversations.
While Jonathan has several public events scheduled on his calendar, he’s decided to highlight his “Cooking for Community” event, where he’ll be volunteering to cook a four course meal for local firefighters at the Venice Beach Veterans Hall. He’s hoping to have other app users volunteer some time with setup, cooking, and clean up, while promoting in-person connection.
Above his posted videos, he also has several video playlists of his favorite content.
Other Supported User Stories:
-
Users hoping to stay more closely connected with friends through genuine face to face chats and transparency for conversation expectations
- Users wanting to organize grassroots movements in their local communities by hosting local events open to the public
- Influencers organizing large public events centered around positively impacting the world
- Users hoping to gain deeper knowledge on their favorite creators, as well as access to their links, curated playlists, and direct messages
User Story Overview, Coalition Section of Profile:
Like every content creator on the app, Jonathan is a part of the weekly “Coalition” competitions. Currently, he’s second place in the “Gold Coalition” of the “Chef’s League” (the self selected category for creators interested in making cooking content). He’s already raised $4,000, but with three days remaining, will he manage to catch up to @sara_ke? Maybe the user will be a little more generous when donating on Jonathan’s videos this week.
Other Supported User Stories:
-
Shared interest groups competing with each other while working to raise money for great causes
- Encouragement for creators to make and post videos through gamification
- Users finding the most influential creators by clicking on them directly in the coalition section
- Users finding curated videos from multiple creators by clicking on the “Chef’s League” button
User Feedback:
After creating the high-fidelity prototype and user stories, I collected feedback from social media users. While the implemented features resonated with users, the general consensus was that the profile felt too similar to other social media apps. I took on redesigning a more original, vibrant, social media profile page.
Redesigned social media profile UI
Social media profile pop-up
Key Changes:
-
Full bio accessed by clicking on profile picture
-
Event component displayed when creator organizes an event; external link to map; friends attending
-
Video collections/playlists
-
Media Feed; the size of content is determined by the impact of posts; videos with more money raised, views, etc. will be larger and contain more information
-
Less impactful content is made smaller; the smallest components contain no added information
-
Other media, like websites, call to action buttons, etc. can be added directly to the feed
- User bio information is kept tidy in a pop-up component; access to additional links and socials here
Final high-fidelity UI