J. Fletcher Art is a fine-art photography studio selling limited and open-edition prints. The project was a full redesign, replacing the old layout with a modern, editorial storefront that puts the photographic work first and guides shoppers naturally toward purchase.
The client brief set clear goals, a sleek, contemporary look centered on product showcase, a more e-commerce-friendly structure with intuitive navigation, a simplified offering, subtle animation and smart use of white space, fully responsive behavior, and a reusable style guide so the in-house team could extend the design later.
Overview
The redesign covers the complete storefront journey, unified by one comprehensive design system. The previous site diluted the work with configuration complexity and dated layouts. The new experience is stripped back to a focused, gallery-like storefront where the imagery leads and the path to purchase stays effortless throughout.
Challenge
Turning a photographic archive into a focused, high-converting storefront
Print stores live and die on the imagery, but a large body of photographic work can easily overwhelm navigation and bury the path to purchase. The challenge was to let the work breathe editorially while keeping the experience intuitive and conversion-focused, and to do it across a deliberately simplified catalogue, so buying felt effortless rather than transactional.
Design direction
Editorial gallery, warm and quiet
The visual direction treats the storefront like a printed gallery catalogue. A warm off-white ground and near-black ink keep attention on the photography, hierarchy is carried by scale and restraint rather than color or ornament, and generous white space gives the work room to breathe. The result feels calm and high-end, an interface that flatters the imagery instead of competing with it.
Key sections
Homepage & Discovery - A gallery entrance, not a shop window
The homepage was designed to work like the entrance to a gallery rather than a shop window. It invites visitors to explore by subject and mood, building emotional connection with the work before any ask, so discovery feels like browsing a collection rather than scanning a store.
Product Grid & Navigation - Browsing that stays out of the way
The catalogue was structured for calm, low-effort browsing. Navigation was kept deliberately light so shoppers can move through the archive without friction, letting the photography carry the experience.
Product Detail - A single, confident buying decision
The offering was intentionally simplified, one flat price across all three sizes and a single archival stock, replacing the configuration complexity of the old site. Framing each print as a signed, numbered edition reinforces its value, keeping the decision to buy simple and the sense of collectability high.
Cart & Checkout - A single page, no detours
The purchase flow was condensed to prioritize clarity and trust over multi-step complexity. Reassurance is built into the moment of payment, keeping the shopper confident and the distance to completion as short as possible.
Design system
A handoff the in-house team can build on
A dedicated style guide documents the full system using the live project tokens and components, serving as a single source of truth for developers and designers. It covers color tokens, the full type scale, button and input states, badges and pills, the product-card hover pattern, the gallery grid, spacing and radius tokens, motion specs, and responsive breakpoints. This was a core deliverable, the reusable reference that lets the studio extend the storefront without redesigning from scratch.
Design decisions
- Image-first, everywhere: Every page was built to keep the photography the loudest element, with the interface receding into a quiet supporting role.
- Simplify the offering into the UI: Removing paper choices and unifying price across sizes turned a fiddly configuration step into a single, confident decision.
- Consistent, fully rounded control language: One consistent visual language runs from discovery to checkout, keeping the storefront calm and unmistakably editorial throughout.
- Motion as polish, not decoration: Subtle, restrained movement adds life and quality without pulling attention away from the work.
- Condense the funnel: The journey from discovering a print to owning it was shortened at every step, reducing friction between intent and purchase.
Outcome
The final result is a comprehensive design system and multi-page storefront specification that reframes the studio's site as an editorial publication rather than a generic e-commerce template. By letting the photographic work lead and simplifying the offering to its essentials, the design makes the buying path feel effortless and the collection feel considered. The reusable style guide provides a complete handoff, giving the in-house team a clear blueprint for implementation and future growth as the catalogue expands.
Reflection
The redesign succeeds in making a photographic catalogue feel like a considered gallery rather than a generic shop. Reducing the interface to a warm paper-and-ink system, simplifying the offering into a single price across three sizes, and condensing the funnel into a one-page checkout produced a storefront that is elegant to browse and effortless to buy from, with the transactional pages performing exceptionally well.
Future iterations could expand the motion language with more sophisticated scroll and parallax effects on the hero and gallery sections, introduce richer filtering and sorting on the product grid to help shoppers navigate as the catalogue grows, and explore interactive elements like image comparison or zoom-on-hover across the product detail view.
Designing for a visual product is a balancing act between showcase and structure. The imagery has to lead, but the interface must stay intentional and scalable, so restraint in the design system, discipline in the component library, and clarity in the handoff documentation matter as much as the aesthetic that makes the work worth buying in the first place.