Bookshop
University Project
Bookshop
One bookshop, designed to fit every screen.
The brief: design a web-based mobile experience for a bookshop and make it work beautifully across four device layouts — iPhone portrait, iPhone landscape, iPad portrait and iPad landscape. Our team of four took one layout each; I owned the iPhone portrait experience, the smallest and most-used canvas.
We named the team IreneAu, after the UX designer, and committed to a single idea: minimalism. Light, calm colours, recognisable icons, fast pages, and controls placed where a thumb can actually reach them — so browsing for a book never feels like work.
One design, wildly different screens — and a phone that's mostly held in one hand.
One experience, four very different canvases
Everything reachable by a single thumb
Minimal & calm, but still a full shop
One bookshop, four screens, one calm reading experience.
Designing for the thumb.
Most people hold a phone in one hand and drive it with one thumb — usually the right. So on the iPhone portrait layout I pushed search, scroll and key actions toward the right and bottom, where the thumb naturally lands, and kept the menu a single tap away.
The team's north star was a short manifesto we kept coming back to:
Minimalism is freedom from the urge to possess.
Minimalism is completely achievable.
In practice that meant light, calm colours, icons a reader instantly understands, and pages light enough to load fast on mobile data.
What a calm shop feels like.
The principles we held to.
Minimal
Only what a reader needs on screen — no clutter, no noise, light and calm colours.
Reachable
Search, scroll and actions sit where the thumb falls; the menu is always one tap.
Legible icons
Every icon reads instantly — a reader should never wonder what a control does.
Lightweight
Images and pages kept light so the shop loads fast on mobile connections.
Familiar
Patterns people already know, so nothing has to be learned.
Responsive
The same shop, re-flowed for each device instead of squeezed into one.
For readers who want…
+To browse one-handed
Flick through best-sellers on the train with a single thumb.
+To find a shop nearby
A map to the nearest bookstore, events and news in one place.
+A little delight
Seasonal promo codes and offers that make a visit feel rewarding.
+To buy in seconds
A short, calm path from book to basket to checkout.
+To stay in the loop
A simple newsletter for new releases and reading events.
+The same on any device
Phone on the go, tablet on the sofa — one consistent shop.
The on-the-go reader
Buys a few books a month, usually from a phone in spare moments — a commute, a queue, the sofa. Wants to browse and buy without friction, hates pinching and zooming, and switches between phone and tablet depending on where they are. Rewards a shop that feels calm, fast and effortless to thumb through.
Designed thumb-first, across every device.
iPhone Portrait
The smallest, most-used canvas — single column, thumb-first, ruthless minimalism.
my layoutiPhone Landscape
Wider hero and detail; hamburger moves left, search stays right.
iPad Portrait
Room for a top menu, larger banners and high-res imagery.
iPad Landscape
Most space — full nav, large hero, menus tuned for one-finger reach.
The same shop, re-flowed.
Switch device and orientation to watch BOOKSHOP adapt — same content, re-thought for each canvas.
Screen by screen.
A full bookshop — browse, product, basket, account and a store finder. Click any to view.
What I'd carry forward.
A coursework prototype, but the lessons were real ones.
Constraints sharpen design
The iPhone portrait canvas was the hardest and the most useful — designing for the smallest screen first forced real discipline about what matters.
Test on real hands
Reach is easy to assume and easy to get wrong. The honest next step is usability testing on actual devices, not just in the layout grid.
Responsive ≠ shrinking
Each device deserved its own flow, not the same page scaled down — that mindset shift is the thing I kept from this.
Designing as four
One layout each, one shared language. Holding a single minimal system across four people was its own UX problem to solve.