All screens

Walkthroughs to click through, then 76 live previews in the order a person meets them. Each one is the real page; open it to click through. The landing page is always light, as designed.

Walkthroughs

Click through these on the real pages, in order. Profile edits stay in this browser; nothing is sent.

Sign up and publish

Aisha, a student, new to Folio

1Sign upAny sign-up button continues to step 1.
21 · Verify phoneAny phone number with its country code, then any six digits.
32 · About youThe preview on the right fills in as you type.
43 · Goals and focus areasUp to 3 of the 8 goals.
54 · Bring your peopleImports show a preview notice.
65 · My agent draftsPick the drafts to keep, then Approve.
76 · Review and publishPublish opens Aisha’s profile.
8Aisha’s new profileEvery section shows its note until it has content.

Find someone and ask for an intro

Sam visits Paola (2nd degree, via Priya)

1Brief viewPayments is marked as shared with Sam. Try the focus areas and Filter posts.
2ChooseUnder How you’re connected: Who should introduce you?
3Full profileFocus areas filter proof of work. Filter Inspired by picks several types.
4Sam asks PriyaMy agent drafted the intro request.
5Paola receives the introReply to Sam opens a chat and connects them.

Edit your profile and publish

Paola, the owner

1Owner edit viewEvery action is a small pill on the right: + Add, Edit, Edit header.
2Edit headerGoals (up to 3), links and who sees them.
3MilestonesAdd one with the form and Done, e.g. a Venture.
4Inspired byRead a link or fill in the form, then Done.
5Publish changesIn the dark edit bar. Discard changes undoes the draft.
6See it as a 1st-degree visitorLinks show as icons for 1st degree.

Add from a link, manually or by asking My agent

Sanjeev, on his real profile

1Add proof of work from a linkPaste a Substack, repo or paper link and Read link.
2Add a book to Inspired byAmazon, Indigo and Goodreads links bring the cover.
3Ask My agent“Add this to my proof of work: <link>” or “post an update: …”, then Approve and publish.
4See it liveWhat’s published in this browser shows on the profile.

A day in the app

Paola, signed in

1HomeApprove My agent’s changes one by one, or Approve all.
2MessagesIntros, requests and My agent in one inbox.
3NetworkThen Network map (desktop).
4DiscoverThen Jobs.
5SettingsProfile and visibility, including Show how we’re connected.

Public

What anyone sees before signing in. The home page is the website handoff's 1a Editorial (product name VouchUp on that page). Every page with a footer links back here (All screens, preview only).

1aHome pageOpen

9aSign upOpen

9aSign inOpen

Onboarding · 6 steps

After sign-up, for Aisha, the sample student. Web has a step rail and a live preview; phone has a progress bar. Goals come from the one list of 8.

7a1 · Verify phoneOpen

7b1 · Verify phoneOpen

7a2 · About youOpen

7b2 · About youOpen

7a3 · Goals and focus areasOpen

7b3 · Goals and focus areasOpen

7a4 · Bring your peopleOpen

7b4 · Bring your peopleOpen

7a5 · My agent draftsOpen

7b5 · My agent draftsOpen

7a6 · Review and publishOpen

7b6 · Review and publishOpen

Profiles · Brief view

Paola as Sam sees her (2nd degree via Priya). Sanjeev as Aisha sees him (3rd degree: Omar → Paola → Sanjeev). Links show as icons only to the audience the owner picked (default 1st degree). Preview other states with ?connection=first, second, none, signedout or hidden.

4aBrief view · PaolaOpen

4aBrief view · Sanjeev, seen by AishaOpen

4aBrief view · Paola, 1st degree (links shown)Open

Profiles · Full profile

Focus areas filter proof of work only. Inspired by has a type filter: chips for three options or fewer, a multi-select menu for more. Aisha has just published, so every section shows its note.

5aFull profile · PaolaOpen

5aFull profile · Sanjeev, seen by AishaOpen

5aFull profile · Aisha, emptyOpen

5aHow you’re connected · 1st degreeOpen

5aHow you’re connected · not connectedOpen

5aHow you’re connected · signed outOpen

5aHow you’re connected · turned off by PaolaOpen

Signed in · daily

Paola's own app. Approvals reset on reload.

05HomeOpen

Signed in · profile

8a replaces 07–10 and 16; 10a replaces 15. Edits save in this browser and stay private until Publish changes. Every action sits on the right in a small pill.

8aOwner edit viewOpen

8aSanjeev edits his profile (saved in this browser)Open

10aSettingsOpen

10aSettings listOpen

10aProfile and visibilityOpen

Signed in · editor panels

Each panel opens from its URL (/app/profile?panel=…), on Paola’s profile. Panels open on top of the page, so nothing covers them.

8aEdit headerOpen

8aMy updateOpen

8aFocus areasOpen

8aAdd from a link · Proof of workOpen

8aProof of work listOpen

8aAdd from a link · PostsOpen

8aPosts listOpen

8aMilestonesOpen

8aHow I work with AIOpen

8aInspired byOpen

8aAdd peopleOpen

Messages

6a / 6b replace 14 and 06. Paola's inbox by default; ?as=sam, ?as=aisha and ?as=new show the design's other inboxes. My agent adds links to Posts, Proof of work and Inspired by, and posts My update, each for approval.

6bIntro received · PaolaOpen

6aMessages list · PaolaOpen

6aMy agent · SamOpen

6aIntro chat · SamOpen

6bConnection request · AishaOpen

6bEmpty inboxOpen

6aMy agent adds links · SanjeevOpen

6aMy agent · PaolaOpen

Signed in · people

Sanjeev is in Paola's 1st degree.

11NetworkOpen

17Network mapOpen

12DiscoverOpen

13JobsOpen

Components

Tokens, controls, the proposed-change card and link cards.

—Style guideOpen