Lactography

Concept and creation UX/UI Design Solution Implementation Lactography e-commerce a cheese specialty store for Mexico City, providing local products to B2B and B2C clients.

Year
2021

Client
Lactography

The Design Process

  • Research

    The project began with an in-depth exploration of the artisanal cheese industry, focusing on the unique narrative behind Lactography’s mission to bring high-quality, handcrafted cheeses to consumers. User research identified the core target audience—cheese enthusiasts and culinary professionals—along with their key needs for product transparency and a seamless shopping experience.

  • Concept

    The concept was built around showcasing the authenticity and craft of artisanal cheeses. The website’s layout and features were designed to highlight the story behind each cheese, emphasizing visual storytelling to connect users emotionally with the product.

  • Wireframe Information

    The information architecture was carefully structured to provide a logical flow from browsing products to learning about their origins. Wireframes were developed to ensure a simple, intuitive shopping experience while maintaining focus on the brand's rich visual content.

  • Visual Design

    The visual design captured the rustic and artisanal feel of the brand, with earthy tones and high-quality imagery of the cheeses. Each page was designed to evoke the sensory experience of cheese tasting while keeping navigation clean and user-friendly.

  • Development & Testing

    The website was developed with a mobile-first approach, ensuring that the user experience was consistent across all devices. After rigorous testing for functionality, responsiveness, and user experience, the site was launched, providing users with an engaging platform to explore and purchase Lactography's unique cheese offerings.

  • Launch & Ongoing Improvements

    Following launch, analytics and user feedback were monitored to continuously optimize the website’s performance and user engagement, making small adjustments where necessary to improve the user experience.

Moodboard

Cheese specialist, cheesemongers; multiple international award winners.

Client
Lactography

Year
November, 2020

UX/UI Design Strategy: Lactography

The UX/UI design strategy for Lactography’s website focused on creating an engaging and informative user experience while maintaining the artisanal essence of the brand. By combining intuitive navigation with detailed product information and catalog functionality, the design aimed to enhance both user satisfaction and conversion rates.

Catalog Design & Structure:

The product catalog was designed to be visually driven, presenting high-quality images of artisanal cheeses accompanied by essential product information such as name, a brief description, and price per gram or kilogram. The catalog’s layout enables easy browsing and comparison, with key filters allowing users to refine their search based on:

  • Cheese type

  • Milk type

  • Origin (national or international)

  • Price range

  • Non-downloadable images to protect the visual content

The visual guide accompanying the design ensures consistency in image presentation and product descriptions, reinforcing the brand.

Visual Consistency & Brand Alignment:

The interface design aligns with the Lactography brand identity, using earthy tones and high-quality images to convey the artisanal and premium nature of the products. Text elements were styled to be functional yet elegant, with specific CSS programming that highlights key details, such as the blue-colored milk type information.

User-Centric Solution:

Having deep knowledge of Lactography’s clientele, I recognized the need for a catalog that not only displayed the cheeses but also educated the consumer. The design offers a seamless experience for both browsing and buying, with an emphasis on clarity and accessibility. Drawing from extensive experience in web design, e-commerce, and programming, the entire user journey was optimized to ensure a fluid interaction—from initial exploration to purchase.

UI Customization Guidelines (User Manual for the Catalog):

A user-friendly system was developed to enable Lactography’s team to manage and update the catalog autonomously. A visual guide with step-by-step instructions allows users to easily add or remove products from the catalog:

  • Adding New Elements: Users are guided through selecting the appropriate columns, adding image and text blocks, using the design tab to format visuals, and ensuring product consistency by cropping images to a 1:1 ratio and applying specific text formatting (e.g., bold for titles, italic blue for milk type).

  • Removing Elements: The process is similarly intuitive, with a focus on preserving the layout’s order through a structured approach that involves removing text before images and using spacer elements to maintain alignment.

Filter System for Enhanced Usability:

To aid users in quickly finding their desired products, a set of filters was implemented. These filters allow users to browse by cheese type, milk type, origin, and price. This functionality speeds up product discovery and enables users to tailor their experience based on their preferences. The filters were placed prominently and designed to be easy to interact with on both desktop and mobile.

Ongoing Maintenance & Optimization:

The catalog system was built with scalability in mind, enabling Lactography to easily expand its offerings over time. Regular testing ensures that the website continues to meet the expectations of its user base, while periodic updates are made to improve usability and performance based on user feedback.

Website visualisation

  • Homepage

  • Cheeses

  • Drinks

  • Dairies

  • Sheep Cheeses

  • About Us

  • Newsletter Subscription

  • Terms and conditions

  • User Manual

  • User Manual

  • User Manual

  • User Manual

  • User Manual