← Back to Archive
Project · 02 · Website & iOS App

Sitescape

A social feed for personal websites. Claim your domain, post the pages you're proud of as "highlights", and let people like, save and talk about them. Every card links out to the real site — the app is the layer of attention that personal sites never had.

Year2026
MediumWebsite + iOS App · One Prototype
DisciplineProduct · Interaction · UI/UX
Seed30 real personal sites
Try the app ↓
sitescape.app / feed
Cover · the website, live · Mara's For You feed
Concept

Everyone has a personal site. Almost no one visits them.

Two Versions · Website & App

One product, two surfaces — a website for browsing, an app for the pocket

The same prototype renders both. On the web, a left sidebar and wide two-column cards make Sitescape a place to read and discover — where you land from a shared link. On the phone, bottom tabs and a single column make it the place you check comments, post a highlight and sign a guestbook. Resize the full-screen prototype across 900px to watch it switch.

sitescape.app / feed
WebsiteSidebar navigation · two-column feed · wide highlight detail
iOS AppBottom tabs · one column · same data, same account
01 · Market Research · The Gap

Portfolios are built to be seen once — by a recruiter

Thirty real personal sites were collected as seed data: PMs, engineers, designers, students. Their pages range from a Notion workspace with a custom domain to a portfolio that opens as a chat window. The pattern: enormous care, almost no audience. Traffic arrives from one link in a bio, and leaves.

30

Real personal sites seeded into the prototype — Webflow, Framer, Squarespace, Notion, GitHub Pages, Astro, vanilla HTML.

Sitescape seed set · 2026
6 kinds

Every page fits one of six sections — Blog, Project, Portfolio, Resume, About, Playground. That taxonomy became the feed's filter.

Card sort of the seed set
1 link

Most sites are reached from a single bio link. There is no place where personal sites are browsed the way products are on Product Hunt or shots on Dribbble.

Observation
0

Comments, likes or guestbooks on the typical personal site. Feedback happens — but in DMs, where it disappears.

Observation
01 · Market Research · Adjacent Products

Where the neighbours stop

ProductObjectWho postsGap
DribbbleA shotDesignersImages, not pages; the site behind the shot is invisible
Product HuntA launchMakersOne day of attention, then the archive; not for people
Read.cv / BentoA profileEveryoneReplaces your site with theirs — you don't get to keep your domain
Are.na / PinterestA saved linkCuratorsCollecting others' work; no identity for the maker
SitescapeA page on your own domainSite owners—

Positioning. Not a website builder and not a portfolio host. Sitescape sits on top of the site you already have: you can only post pages from a domain you've verified, and every card is an outbound link.

What we watch. Outbound clicks per highlight, and the share of highlights that receive a comment within a week. Both are shown to the owner on a stats page — the app's value is measurable by the traffic it sends away.

02 · Interaction Model · The Loop

Claim a domain, post a highlight, get visited

A highlight is one page on your site with a screenshot cover, a section tag, a tech stack and a one-line note in your voice. The feed shows highlights; tapping one opens the real page. Attention flows out, comments flow back.

01

Claim

Paste your URL. The app fetches title, favicon and a homepage screenshot; you pick role tags.

Onboarding
02

Post

Paste a page on your domain. Choose the section, write the note, tag the stack.

New highlight
03

Browse

For You / Following feed, filterable by role. Every card links out.

Feed
04

React

Like, save to a collection, comment. Owners can pin a comment.

Highlight detail
05

Visit

A profile shows highlights, a guestbook, and the domain itself as the header.

Profile
06 ↺

Measure

Owners see views, likes and outbound clicks per highlight — and reply from one inbox.

Stats · Inbox
02 · Interaction Model · Three Objects

Site, highlight, comment

Three objects carry the product. Identity is the domain, not a username; content is a page you already made; conversation lives on the page and in the owner's guestbook.

Site

One verified domain per person. Role tags (PM, SWE, Designer, Student…) make the feed filterable without a follow graph.

Highlight

URL + section tag + note + tech stack + cover. The cover is generated from the page kind — article, gallery, app — so the feed stays typographic even before screenshots load.

Comment

Threaded, pinnable, and mirrored into one inbox for the owner. Guestbook comments live on the profile, highlight comments on the page.

Try it · Clickable Prototype

Sign in as Mara and browse thirty real sites

Scroll the feed, filter by role, open a highlight, like it, save it to a collection, leave a comment. Visit a profile and sign the guestbook. Open "New highlight" to post a page. This phone runs the app version; the website version is in the browser frame above and full screen via the button.

Open full screen →
03 · UI / UX Design · Key Screens

Feed → highlight → profile → inbox

Broadsheet design system: a serif for headings, halftone covers tinted per person, whitespace instead of dividers. Cards are deliberately quiet so the sites themselves are the colour.

SearchPeople, highlights, tags and tech in one field
SavedCollections — "Inspiration", "Resumes to steal"
InboxEvery comment on your pages and guestbook, newest first
03 · UI / UX Design · Owner Tools

The number that matters is the one that leaves

Stats show views, likes and outbound clicks per highlight. Outbound clicks come first: the app succeeds when it sends people to your site. Onboarding is two steps — paste a URL, confirm the fetched title and screenshot — because the site already exists.

Covers

Generated placeholder covers keyed to page kind (article / gallery / app) with three tints, so a feed of thirty strangers still reads as one publication.

Responsive

One prototype, two layouts: bottom tabs on the phone, a left sidebar and wider cards on desktop.

Reflection

Your site stays yours.
Sitescape is just
where people find it.

Thirty seeded sites, one verified domain each, every card an exit. The product is measured by the traffic it gives away.

— 2026 · Zhang Yichi

Next Project

Footprints

→