Book Depository, in your pocket.

Book Depository had no app. On a phone, customers got a mobile site laid out like a desktop page: a cookie banner, a promo strip and stacked banners before they reached a single book with a price.

Navigation sat behind a menu, and a third of the page was newsletter and footer links. The space a phone does offer was not being used for browsing.

⤢ Enlarge

More and more shopping happens on phones. Waterstones and other booksellers already had dedicated apps. Book Depository did not.

Readers who buy often and buy several books at a time: series, gifts, a paperback and a hardback of the same title. They want browsing that feels like a bookshop, a basket that copes with more than one book, and a checkout with no surprises.

1. 01The pitch. Book Depository’s marketing team brainstormed ideas to put to the development team at its hackathons. One idea I’ve included in the app build is the loyalty card: a way to retain customers and reward them for coming back. I pitched it in an earlier meeting, where it wasn’t taken forward, and planned to include it in the app pitch.
2. 02Audit. I recorded the mobile site screen by screen to see where space and attention went.
3. 03System first. Before screens, I set up colour and spacing as Figma variables, primitives then semantic tokens in light and dark modes, with type as text styles.
4. 04Screens. Onboarding, home, categories, search, product, wishlist, basket, a three-step checkout, order confirmation and account.
5. 05Prototype logic. I built the prototype on variables so it behaves like an app: prices change with format, totals add up, the wishlist stays in sync.

⤢ Enlarge

Decision

One stamp per order, not per book.

Trade-off

It rewards coming back rather than basket size, so it’s simpler to explain and harder to game. A big order earns no more than a small one.

Decision

A three-step checkout (address, payment, confirmation) instead of one-tap buying.

Trade-off

One more tap, but every step can be checked, and Pay now won’t go through without a billing address.

⤢ Enlarge

Decision

Paperback and hardback as separate basket lines.

Trade-off

More logic to build, but readers do buy both, and a basket that merges them would confuse.

Decision

Choose the format on the product page, not in the basket.

Trade-off

Changing format means going back a step. It keeps the basket simple, as Amazon and Waterstones do.

Decision

Account behind the profile picture, not a burger menu.

Trade-off

Settings are one tap further away, but the tab bar stays the only way to navigate.

Decision

Carry over what I shipped on the Book Depository website: labels above fields, contrast of 4.5:1 or more, and a tick box for the billing address.

Trade-off

Less room to try new form patterns, but these were already tested on the live site.

• —A working prototype: browse, wishlist, a multi-book basket with live totals, checkout with validation, and an order confirmation that fills in your next stamp.
• —A token-based design system in light and dark modes, with every screen built from it.
• —A book template driven by variables: one product page that shows any of the four books.
• —It never got its second pitch: Book Depository closed in April 2023, before the next hackathon. This prototype is the idea taken as far as I would have liked to take it.

Tap through it yourself: collect a stamp, mix formats in the basket, and try paying without a billing address.

▶ Play the prototype

Tip · Press R to restart

The next step would be testing it with readers. I’d put the checkout in front of five people and watch where they hesitate. Then I’d run the stamp card as a trial and measure whether customers who collect stamps order again more often than those who don’t.

See the website work: Book Depository checkout →