Pocket website for saving and discovering articles

Pocket is a service for saving articles and videos from around the web to read or watch later. Techcelerant built the Pocket explore website, the public side of the product, where people discover stories, save them to their own library, browse curated collections and get recommendations based on what they read. Saved items stay available offline.

The client

Pocket serves people who find more good reading than they have time for. They save a long article from a news site, a video from a blog or a guide from a forum, and come back to it on the train or at night. Pocket's editors also pick standout stories from across the web every day, which gives new readers a reason to visit before they have saved anything.

The problem

Pocket's core feature is simple: save it now, read it later. The explore website had a harder job. It had to show new visitors what is worth reading, turn them into people who save, and give existing users a reason to come back and find more.

That meant mixing editorial picks, topic browsing and personal recommendations on one site, without the pages turning into an endless feed. Every story also needed an obvious way to save it, because saving is what brings a reader into the product.

What we built

• An explore homepage that opens with "Build a home for everything that interests you" and a button to sign up.
• A "Discover the best of the web" section with a "Today's essential reads" grid of editor-picked stories.
• A "Fascinating stories" list, with a thumbnail, headline, source and save button on every row.
• A "Discover more topics" panel beside the list, with links to topics such as technology, science, health and travel.
• A newsletter block, "Get ready to fuel your mind," with an email signup.
• A clean reader view for saved articles, with the headline, lead image and body text, and recommended stories beside the article.
• A "Collections for Your Pocket" page of curated guides, including a Best of the year series with separate collections for different themes.
• Personalized recommendations for signed-in readers, based on what they save and read.
• Offline access, so saved articles and videos are there without a connection.

Design decisions

The site lets the stories set the color. Pages are white, with black type and one coral accent for buttons and the logo. Article thumbnails bring their own art, from game screenshots to photos and illustrations. A plain frame keeps a page of very different sources looking like one product.

We gave every story the same parts in the same order: image, headline, source, save. Readers learn the pattern on the first row and can scan the rest quickly. The save button is always in the same corner, so it is easy to find without hunting.

The homepage mixes two layouts. Essential reads use a grid with large images, because those are the day's top picks. Fascinating stories use a compact list, because readers scan them for headlines. Switching between the two breaks up a long page and tells readers which stories the editors want them to see first.

The reader view strips away everything except the article. Wide margins, a large headline and a comfortable line length make long pieces easier to finish. Recommended stories sit at the side, so a reader can find their next article without leaving the page.

Collections get colorful cover tiles. They stand apart from regular stories and signal that someone curated them.

The result

Pocket now has an explore website that brings new readers in with daily picks and turns them into savers. Readers can browse by topic, save any story with one click, read it in a clean view, and find more through collections and personal recommendations. The client's editors can publish essential reads and new collections, and readers can come back to their saved library online or off.

Content sites like this depend on a clear content model. Our explainer on headless CMS covers how that works.

Building a content or publishing platform? See our web design and development service or get in touch.