From vibrant packaging to a complete digital brand system. I designed a website that preserves Coffee Lui’s distinctive character, structures its complex B2B offering, and guides clients from discovering the product to requesting samples, wholesale pricing, or private-label coffee production.
Role
Web / UI/UX Designer & Tilda Developer
Scope
Information architecture, grayscale wireframes, visual direction, 3D mascot, UI design, responsive layouts, full Tilda build, domain setup, and SEO configuration
Year / Market / Status
2026 / Russia / Launched
Visit the website:
https://coffeelui.com
Сoffee Lui
The visual concept builds on Coffee Lui’s existing identity: simple geometry, saturated colours, and references to the aesthetics of the avant-garde and Bauhaus.
I translated this visual language into a digital environment through large colour fields, contrasting typography, asymmetrical compositions, and recurring geometric elements. Blue forms the website’s main visual foundation, while red, yellow, and warm cream are used to highlight key information and separate content sections.
The main challenge was to preserve the brand’s expressive character without turning the website into a purely decorative promotional piece. Bold visual sections therefore alternate with calmer, business-focused content covering the product range, partnership terms, workflow, and enquiry forms. As a result, the interface remains bright and recognisable while clearly explaining the offer and supporting key business scenarios.
I translated this visual language into a digital environment through large colour fields, contrasting typography, asymmetrical compositions, and recurring geometric elements. Blue forms the website’s main visual foundation, while red, yellow, and warm cream are used to highlight key information and separate content sections.
The main challenge was to preserve the brand’s expressive character without turning the website into a purely decorative promotional piece. Bold visual sections therefore alternate with calmer, business-focused content covering the product range, partnership terms, workflow, and enquiry forms. As a result, the interface remains bright and recognisable while clearly explaining the offer and supporting key business scenarios.
Visual direction
A bold brand character within a functional B2B website
Before the project, the character existed only as a flat illustration within the logo. For the website, I developed it into a standalone 3D mascot using AI tools while preserving its most recognisable features.
A series of poses was created to represent different areas of the business, including coffee, logistics, quality control, geographical reach, and private-label production.
The mascot serves several purposes:
The character is used selectively in key benefit sections, CTA blocks, and communication materials. This maintains a balance between a playful brand identity and the company’s professional positioning as a coffee supplier.
A series of poses was created to represent different areas of the business, including coffee, logistics, quality control, geographical reach, and private-label production.
The mascot serves several purposes:
- makes complex B2B content feel more approachable;
- creates continuity across different pages;
- strengthens brand recognition;
- provides a foundation for future advertising materials;
- adds emotion without changing the existing logo.
The character is used selectively in key benefit sections, CTA blocks, and communication materials. This maintains a balance between a playful brand identity and the company’s professional positioning as a coffee supplier.
Mascot
Developing a logo character into a fully fledged brand asset
Coffee Lui offers several distinct services: roasted coffee sales, supplies for businesses, custom blends, and private-label production. The website also needed to present the brand, its supply processes, and its product range for different types of businesses.
The main challenge was not simply presenting a large amount of information, but dividing it into clear directions. Clients approach the company with different needs: a coffee shop requires a consistent blend, a distributor needs wholesale terms, while a company with an established audience may want to launch a product under its own brand.
I developed the complete information architecture, created grayscale wireframes, and defined the order of the key sections:
Home / Coffee Beans / Coffee for Business / Private Label / About / Supply / Blog / Contact
The wireframes first established the product logic and content priorities. The brand’s visual language was then applied to this structure.
The main challenge was not simply presenting a large amount of information, but dividing it into clear directions. Clients approach the company with different needs: a coffee shop requires a consistent blend, a distributor needs wholesale terms, while a company with an established audience may want to launch a product under its own brand.
I developed the complete information architecture, created grayscale wireframes, and defined the order of the key sections:
Home / Coffee Beans / Coffee for Business / Private Label / About / Supply / Blog / Contact
The wireframes first established the product logic and content priorities. The brand’s visual language was then applied to this structure.
Challenge and information architecture
Making a complex product range clear for a B2B audience
The catalogue was organised as a system of cards with a clear hierarchy. The information that directly influences the client’s decision is shown first. By opening a card, users can explore the wholesale terms and full coffee specifications.
Visually, the cards continue the brand’s signature geometry and character system. Lui also appears in monochrome variations associated with different sourcing countries. Colour is used for navigation and grouping rather than as a purely decorative element.
As a result, the range is presented not as a technical price list, but as a clear product-selection tool designed around specific business needs.
Visually, the cards continue the brand’s signature geometry and character system. Lui also appears in monochrome variations associated with different sourcing countries. Colour is used for navigation and grouping rather than as a purely decorative element.
As a result, the range is presented not as a technical price list, but as a clear product-selection tool designed around specific business needs.
Product range and presentation
Bringing several business lines together in one clear website
The website architecture is structured around the needs of different clients rather than a conventional product catalogue. Separate entry points were created for the main audience groups:
Each journey answers the user’s main questions step by step: which product suits their business format, what the commercial benefits are, how supply works, and what they need to do to begin working with the company.
Key user journeys
Coffee for Business Business format → Suitable solution → Benefits → Process → Enquiry
Private-Label Production Production capabilities → Launch stages → Finished product → Discussion of terms
Product Range Catalogue → Variety or blend → Flavour profile and terms → Sample or price-list request
Key actions—requesting samples, obtaining wholesale prices, and contacting the company—are repeated at relevant points throughout the user journey rather than appearing only at the bottom of each page.
- coffee shops and chains;
- restaurants and cafés;
- vending companies;
- offices and catering services;
- wholesale distributors;
- brands looking for private-label production.
Each journey answers the user’s main questions step by step: which product suits their business format, what the commercial benefits are, how supply works, and what they need to do to begin working with the company.
Key user journeys
Coffee for Business Business format → Suitable solution → Benefits → Process → Enquiry
Private-Label Production Production capabilities → Launch stages → Finished product → Discussion of terms
Product Range Catalogue → Variety or blend → Flavour profile and terms → Sample or price-list request
Key actions—requesting samples, obtaining wholesale prices, and contacting the company—are repeated at relevant points throughout the user journey rather than appearing only at the bottom of each page.
User journeys
From a business need to a specific offer
After the information architecture and grayscale wireframes were approved, I designed every page and its responsive versions before independently building the website on Tilda.
To maintain a consistent visual language across a large number of pages, I created a reusable system of:
I also handled the technical implementation, including responsive development, form configuration, domain connection, and basic SEO optimisation.
To maintain a consistent visual language across a large number of pages, I created a reusable system of:
- typographic hierarchy;
- colour roles;
- product and benefit cards;
- CTA blocks;
- enquiry forms;
- workflow sections;
- catalogue elements;
- mascot compositions.
I also handled the technical implementation, including responsive development, form configuration, domain connection, and basic SEO optimisation.
Final interface and implementation
A complete cycle—from structure to a launched website
The final outcome is a launched multi-page website that combines the brand’s presentation, product catalogue, and commercial functions.
The existing identity received a complete digital extension: its signature geometry and colour palette evolved into a system of interface solutions, while the logo character became a 3D mascot capable of developing across different communication channels.
The website architecture divides a complex B2B offering into clear user journeys and helps visitors quickly access the product range, partnership terms, samples, or private-label production services.
I completed the entire project—from information architecture and wireframes to visual design, Tilda development, domain setup, and SEO configuration.
The existing identity received a complete digital extension: its signature geometry and colour palette evolved into a system of interface solutions, while the logo character became a 3D mascot capable of developing across different communication channels.
The website architecture divides a complex B2B offering into clear user journeys and helps visitors quickly access the product range, partnership terms, samples, or private-label production services.
I completed the entire project—from information architecture and wireframes to visual design, Tilda development, domain setup, and SEO configuration.
Result
Result
