Pebbles Photography — Portfolio & E-Commerce Website

Pebbles Photography is a premium wildlife and landscape photography brand based in North Norfolk, showcasing dramatic coastal landscapes, wildlife, and exhibition-quality prints. The project involved a full redesign of their existing website, transforming it from an outdated, difficult-to-navigate platform into a modern, photography-led e-commerce experience.

The redesign focused on creating a premium, image-first layout that showcased the photography with maximum impact while streamlining the browsing and purchasing journey. I handled both the complete UX/UI design and all custom front-end development work, building responsive templates, gallery systems, category hierarchies, and the full e-commerce checkout flow using HTML, CSS, and JavaScript.

The new site introduced a modern responsive system optimized for mobile and tablet viewing, faster image loading, clearer navigation structures, and a simplified checkout process—all designed to reduce friction and increase online sales while maintaining the premium, artistic brand positioning.

Pebbles Photography had built a strong reputation for dramatic Norfolk landscapes, intimate wildlife photography, and regularly exhibited work. However, the existing website was no longer serving the business effectively. The visual design felt dated, lacking the premium quality that the photography itself deserved. More critically, the site wasn't mobile-friendly—a significant issue as more visitors were browsing on phones and tablets.

Navigation was confusing, with images lacking clear hierarchy or logical grouping. Potential buyers struggled to browse collections effectively, and the purchasing process was slow and unintuitive, requiring too many steps and offering unclear information about framing options and delivery. The category structure was poorly organized, making it difficult for visitors to discover related work or explore the full portfolio.

SEO performance was weak, limiting organic discovery, and the overall user experience failed to reflect the quality and professionalism of the photography being showcased. The business needed a complete digital transformation to convert more browsers into buyers and to position the brand appropriately in an increasingly competitive online photography market.

• Showcase photography with maximum visual impact and emotional resonance
• Improve discoverability through clearer category and subcategory structure
• Modernise visual hierarchy to reflect premium brand positioning
• Increase online print sales and average order value
• Reduce friction in browsing and purchasing workflows
• Introduce fully responsive layouts for mobile and tablet users
• Improve perceived brand quality and professionalism
• Enhance SEO performance for better organic discovery
• Streamline content management for ongoing updates
• Support exhibition promotion and photography tuition services

The website needed to serve multiple distinct audience segments, each with different needs and goals:

• Photography Enthusiasts: Visitors interested in appreciating the work, following the artist's journey, and staying updated on new collections
• Print Buyers & Art Collectors: Customers seeking high-quality prints for home or office display, often comparing options and researching framing choices
• Local Norfolk Customers: Regional visitors familiar with the landscapes depicted, often seeking locally relevant artwork
• Exhibition Visitors: People who had seen the work at exhibitions and wanted to explore the full portfolio or make purchases
• Photography Students: Individuals interested in tuition services or workshops offered by the photographer
• Blog Readers: Engaged followers interested in the stories behind the photographs and photography techniques

For this project, I handled both the complete UX/UI design and all custom front-end development work. This dual role allowed me to ensure design fidelity throughout implementation and optimize the technical execution based on design intent.

Design Responsibilities:

• Conducted UX research and comprehensive audit of the existing site
• Designed complete navigation and information architecture overhaul
• Created detailed sitemap defining all pages and navigation relationships
• Developed wireframes for all main page templates and user flows
• Designed high-fidelity UI for homepage, galleries, product pages, and checkout
• Established visual design system including typography, color, spacing, and components

Development Responsibilities:

• Built responsive HTML/CSS templates for all page types
• Coded custom gallery layouts and category page systems
• Implemented responsive image loading and optimization
• Developed e-commerce front-end flow including basket and checkout interfaces
• Created mobile-optimized navigation and touch-friendly interactions
• Optimized performance for fast loading with high-resolution photography

• Large high-resolution images: Balancing visual quality with performance, especially on mobile connections
• Premium black theme: Creating a dark design that felt sophisticated and premium rather than heavy or oppressive
• Portfolio vs. commerce balance: Maintaining artistic integrity while optimizing for sales conversions
• Category hierarchy clarity: Designing intuitive flows from category → subcategory → individual product without overwhelming users
• Mobile optimization: Adapting full-width cinematic layouts to work effectively on small screens
• Checkout clarity: Simplifying a multi-step purchasing process including framing options and customization
• SEO constraints: Improving discoverability while maintaining design aesthetics
• Content management: Creating systems flexible enough for ongoing portfolio updates

The information architecture was completely restructured to create clear, logical pathways through the content. The new sitemap organized the site into distinct sections:

• Homepage: Featured galleries, recent work, and clear calls-to-action directing visitors to key content
• About: Photographer biography, artistic approach, and brand story
• Gallery System: Multi-level hierarchy organizing work into Categories (e.g., "Norfolk Landscapes") → Subcategories (e.g., "Coastal Sunsets") → Individual Images with purchase options
• Framing: Detailed information about available framing options, materials, and customization
• Tuition: Photography workshops and one-on-one instruction services
• Exhibitions: Current and past exhibition information, locations, and dates
• Blog: Stories behind photographs, photography techniques, and location guides
• Contact: Inquiry forms, location information, and social media links
• Account System: User login, order history, saved favorites
• E-Commerce Flow: Basket, checkout, delivery information, payment processing

The sitemap flowchart document visually maps these relationships, showing how users can navigate between sections and how the category hierarchy supports both browsing and purchasing behaviors.

Wireframes established the foundational structure before visual design was applied. The homepage wireframe defined a hero section showcasing featured photography, followed by category tiles providing clear entry points into different collections. The layout prioritized visual content while maintaining clear navigation and calls-to-action.

Category page wireframes introduced a grid-based gallery system allowing users to scan multiple images quickly while providing context about each photograph. Filtering and sorting options were positioned prominently without cluttering the visual experience.

Mobile wireframes rethought the desktop layouts for vertical scrolling and thumb-friendly interactions. The navigation compressed into a mobile menu, while gallery grids adapted to single or two-column layouts depending on screen size. Touch targets were sized appropriately, and image loading was optimized for mobile data constraints.

The final visual design established a premium, sophisticated aesthetic centered on a black background that allowed the photography to command attention. This dark theme created a gallery-like atmosphere, mimicking the experience of viewing prints in a curated exhibition space.

The homepage featured cinematic, full-width photography immediately establishing visual impact. Featured galleries were presented as large tiles with overlay text, inviting exploration while maintaining clarity. Typography was clean and restrained, using white and light gray text to maintain readability against dark backgrounds without competing with the imagery.

Category pages employed a clean gallery grid system with consistent spacing and proportions. Each image preview was large enough to appreciate detail while allowing multiple photographs to be visible simultaneously, encouraging browsing and discovery. Hover states provided subtle feedback without disrupting the visual flow.

Product detail pages gave individual photographs generous space, with large, zoomable images and clear purchasing options. Supporting information—title, description, available sizes, framing options—was organized logically without overwhelming the core experience of appreciating the photography.

Throughout the design, brand consistency was maintained through repeated use of the black theme, consistent typography (elegant serif headings with clean sans-serif body text), and a limited color palette accenting calls-to-action and interactive elements in subtle earth tones that complemented the photography.

Responsive design was critical given the increasing proportion of mobile traffic to photography websites. The mobile experience was completely rethought rather than simply scaled down, with several key adaptations:

• Mobile navigation: Hamburger menu providing access to all sections without cluttering the interface, with smooth slide-in animation
• Touch-friendly gallery: Larger touch targets, swipe gestures for navigation, and optimized image loading preventing frustrating delays
• Scaled hero images: Full-width photography maintained visual impact while loading quickly through responsive image techniques
• Simplified checkout: Multi-step mobile checkout flow broken into digestible screens, with progress indicators and clear next-step actions
• Optimized typography: Font sizes and line heights adjusted for comfortable mobile reading
• Adaptive grids: Gallery layouts flowing from multi-column desktop grids to single-column mobile displays
• Fast loading: Aggressive image optimization and lazy loading ensuring performance on mobile connections

The e-commerce flow was designed to be as frictionless as possible while providing necessary customization options. Product detail pages clearly displayed available sizes, with visual references helping customers understand dimensions. Framing options were presented with photographs showing how different frame styles complemented the work.

Add-to-basket behavior provided immediate visual feedback—a confirmation message and updated basket count—without disrupting the browsing experience. The basket itself was accessible from any page, showing thumbnails, quantities, and pricing at a glance.

The checkout process was streamlined to three clear steps: delivery information, payment details, and order confirmation. Each step displayed progress indicators and allowed easy back-navigation if customers needed to make changes. Clear calls-to-action guided users through the flow, while security badges and clear delivery information built trust.

Account creation was optional but encouraged through benefits messaging (order tracking, saved favorites, faster future checkout). Login was simple and could be completed via email or social authentication. Order history provided easy reordering and print tracking.

Framing and delivery information was presented clearly throughout the journey, with expandable sections providing detailed specifications without cluttering the primary purchase path. Price transparency was maintained at every step, with no hidden costs or surprise charges at checkout.

Alongside designing the full UX/UI experience, I also carried out all custom front-end development for the Pebbles Photography website—building the gallery system, category hierarchy, responsive layouts, and complete e-commerce flow. The redesigned site delivered a strong commercial uplift, with sales increasing by more than 50% in the first three months after launch, driven by clearer navigation, improved browsing, and a more engaging image-led shopping journey.

Beyond sales metrics, the redesign achieved several qualitative improvements:

• Significantly improved mobile traffic conversion as the responsive design made browsing and purchasing viable on phones
• Reduced cart abandonment through streamlined checkout and clearer information about framing and delivery
• Increased average session duration as visitors spent more time exploring galleries
• Stronger brand perception with visitors commenting on the professional, gallery-quality presentation
• Improved SEO performance leading to increased organic discovery
• Easier content management allowing more frequent portfolio updates
• Better support for exhibition promotion through dedicated sections and blog integration
• Enhanced customer satisfaction reflected in positive feedback and repeat purchases

The project successfully transformed an outdated, underperforming website into a modern, effective platform that both showcased the photography appropriately and drove meaningful business results. You can view the live site at pebblesphotography.co.uk.