Profile Screen Design: Social, Marketplace and SaaS

This guide is for designers, PMs and founders designing the profile screen of a mobile app. Profile screen design changes a lot depending on what the profile is for: on a social app it is a stage, on a marketplace it is a trust document, and in a SaaS app it is mostly an account page. You will get the anatomy shared by all of them, three layouts with their priorities, the difference between your own profile and someone else's, and a spec table you can build from.

TL;DR: Decide what the profile must prove or enable — identity, trust or account control — and put that at the top. Separate viewing your own profile (edit, stats, settings shortcut) from viewing someone else's (follow, message, book). Keep the header compact, use real trust signals on marketplaces, and design empty and incomplete states, because most profiles start blank.

The three jobs a profile does

Most bad profile screens borrow the wrong layout: a SaaS app that copies Instagram's follower counts, or a marketplace that hides reviews below a giant cover photo. Start from the job.

Anatomy of a profile header

Almost every profile has a header with some of these parts, in roughly this order:

1. •Avatar — usually circular, with a fallback of initials on a coloured background.
2. •Name and handle — display name in a headline style, handle or role in secondary text.
3. •Key facts — location, member since, job title, verified badge.
4. •Stats — followers, posts, reviews, completed jobs. Three at most.
5. •Bio or description — two or three lines, truncated with "more".
6. •Primary action — Edit profile on your own; Follow, Message or Book on others'.
7. •Content tabs — posts, reviews, listings, activity.

Keep the header compact. On a phone, the user should see the beginning of the content (posts, reviews, listings) without scrolling, or at least a clear sign that it is there.

Own profile vs someone else's

These are two different screens that share a layout. Design both explicitly.

Instagram's own profile shows "Edit profile" and "Share profile" side by side; someone else's shows "Follow" and "Message" in the same position. That consistency means users learn the layout once.

Layout 1: Social and creator profiles

Examples: Instagram, TikTok, X, Strava.

• •Header: avatar on the left or centred, stats row beside or below it, name and bio below, then the primary action buttons.
• •Content: a tabbed area — a three-column grid for photo and video apps, a feed for text-first apps.
• •Highlights: a horizontal row of featured content (Instagram's story highlights) sits between bio and grid.
• •Social proof: "Followed by Alex and 12 others" builds relevance for other people's profiles.
• •Privacy states: private accounts show the header and a lock message instead of the content.

Design tips:

• •Abbreviate large numbers (12.4K, 1.2M) and use tabular figures so stats do not jump.
• •Make stats tappable when they lead to a list (followers, following).
• •Collapse the header into a compact top bar with the name as the user scrolls into content.

For a ready-made starting point, the floow social media app template includes a profile screen alongside the feed.

Layout 2: Marketplace and booking profiles

Examples: Airbnb host profiles, Etsy shops, Uber driver details, Fiverr sellers, Vinted.

The profile exists to answer one question: can I trust this person with my money or my home?

• •Header: photo, name, a verification badge (identity verified), member since, location.
• •Trust strip directly below: rating with review count, number of completed transactions, response rate or response time. These numbers carry more weight than any bio.
• •About: short description, languages, work or specialities.
• •Reviews: the most recent few, with a "See all" link. Show reviewer name, date and context ("Stayed in Lisbon, May").
• •Listings or services: a horizontal carousel or a grid.
• •Primary action: sticky at the bottom — Message, Book, View shop.

Design tips:

• •Show the review count next to the rating — "4.9 (312 reviews)" — so a perfect score from two reviews does not mislead.
• •Display verification as specific facts ("Identity verified", "Phone verified") rather than a generic badge.
• •Put safety actions (report, block) in an overflow menu, always reachable.
• •On booking apps, show availability or next free slot near the top.

Layout 3: SaaS and productivity profiles

Examples: Slack, Notion, Linear, banking and utility apps.

Here "profile" usually means account. Users come to change something.

• •Header: avatar, name, email or role, workspace or organisation.
• •Sections: personal details, workspace and team, plan and billing, security (password, two-factor, sessions), notifications, preferences.
• •Status: availability or status message for team apps like Slack.
• •Actions: sign out and delete account at the bottom.

In many SaaS apps, profile and settings are merged into one screen. That is fine — follow the grouping in our settings screen design guide and put the identity card at the top.

The edit profile screen

Edit profile is a form, so the usual form rules apply:

1. •Photo first: a large avatar with a "Change photo" label, opening a sheet with Take photo, Choose from library and Remove.
2. •Fields with labels above them, pre-filled with current values.
3. •Character counters on constrained fields like bio and handle.
4. •Handle validation in real time: "Available" or "Already taken".
5. •Explicit Save or Done, disabled until something changes, and a discard warning on back.
6. •Sensitive fields (email, phone, password) open separate verified flows instead of inline editing.
7. •Privacy controls next to the data they affect: "Show my location on my profile".

Empty and incomplete states

New users have no posts, no reviews and no bio. Design for that day one.

• •Own profile: a completion prompt with one clear next step — "Add a profile photo so people recognise you" — or a short checklist with progress. LinkedIn's profile strength meter is the well-known example of this pattern.
• •Other people's profiles: neutral messaging ("No reviews yet") without making the person look bad.
• •Content grid empty: an illustration-free, short message and, on your own profile, a button to create the first post.

Our onboarding screen design playbook covers when to collect profile details during onboarding versus later.

Profile screen specs

Keep spacing on an 8-point scale — the mobile app spacing system explains how to space header groups so they read as separate blocks.

Profile screen checklist

• •The profile's main job (identity, trust or account) is clear from the top section.
• •Own and other-person versions are both designed.
• •Primary action sits in the same place on both versions.
• •Stats are three or fewer, abbreviated and tappable where useful.
• •Marketplace profiles show rating with review count, verification facts and response time.
• •Report and block are reachable on other people's profiles.
• •Private data never appears on public views.
• •Avatar has an initials fallback.
• •Empty, incomplete and private states are designed.
• •Edit profile has validation, a disabled Save until changes, and a discard warning.

If you want to compare layouts quickly, you can generate own-profile and public-profile versions in floow and adjust the header hierarchy in chat.

FAQ

What should a profile screen include?

At minimum: avatar, name, a short line of context (handle, role or location) and the main action for that profile. Social apps add stats, bio and content; marketplaces add ratings, reviews and verification; SaaS apps add account details, plan and security settings.

Where should the edit profile button go?

On your own profile, place Edit profile where other people's profiles show their main action (such as Follow), usually below the name and bio. This keeps the layout consistent. Some apps also add a settings icon in the top bar for account-level options.

How big should a profile picture be in an app?

Header avatars are typically 72–96pt on iOS or dp on Android, with creator-focused apps at the larger end. Avatars in lists and comments are usually around 40pt. Always provide an initials fallback for users without a photo.

Should profile and settings be the same screen?

In SaaS and utility apps, combining them is common and works well, with the identity card on top and settings groups below. In social apps, keep the public profile separate and put settings behind an icon, because the profile is something other people see.

Design it with floow

Generate both versions of your profile — your own and a public one — and refine the hierarchy in chat. Try this prompt in floow: "Design two iOS profile screens for a home-cleaning marketplace: the cleaner's public profile with photo, verified badges, rating with review count, response time, reviews and a sticky Book button, and the cleaner's own profile with Edit profile and a completion checklist."