Role
UX/UI Designer
Timeline
2024–2025
Team
2 Designers + PM
Platform
Web · iOS / Android
01 / About the project
19 years offline. Time to go digital.
Coffee Street Service is a holding group of 11+ companies serving the HoReCa market in North Caucasus for over 19 years. They supply coffee beans, equipment, and consumables to cafes, restaurants, and hotels across Dagestan and the wider region.
Before this project, all orders were placed through WhatsApp messages to managers — no order history, no delivery tracking, no price transparency. The business was growing, but the process couldn't scale.
19+
Years on market
11
Companies in the holding
100+
Full-time employees
7 000+
B2B clients
02 / The problem
Orders via WhatsApp. At Midnight.
"I place an order at midnight — and only find out the next morning that the item is out of stock. By then, it's already too late."
— Cafe owner, Makhachkala
No Order History
WhatsApp threads with no search, no dates, no receipts. Every re-order means scrolling through months of chat.
Zero Delivery Visibility
No status updates. Order placed at night — silence until morning. Impossible to plan kitchen operations.
Price Surprises
Prices change without notice. Invoice arrives different from what was agreed. Disputes and manual reconciliation.
03 / Research
18 Interviews. 7 Discovery Vectors.
18 in-depth interviews conducted by 20/80 consulting with café managers, owners, baristas, and head baristas across the region.
18 Respondents · 4 Roles
Café managers
7 · Day-to-day ordering decisions
Café owners
5 · Budget, supplier relationships
Head baristas
4 · Product quality, stock urgency
Baristas
2 · End-users, shift realities
10 / 18
Users said delivery delays were critical — late delivery means guests leave and revenue is lost.
6 / 18
Needed express delivery (within 1 hour) for emergency restocking of milk and beans.
3 / 18
Felt uncomfortable texting managers after midnight — but cafes work until 2–3 AM.
Key finding
Competitors' apps showed out-of-stock items without warning. Real-time stock with alternative suggestions was the #1 discovery requirement.
Key themes from interviews
Delivery reliability
10
Stock visibility
8
Order history & repeat
5
After-hours ordering
3
Express restocking
6
Loyalty & access levels
4
Key hypotheses from research
→
Express delivery as a first-class feature, not an afterthought
→
Async ordering — submit at 2 AM, managers process in the morning
→
Real-time stock with automatic alternative suggestions
→
Preferred delivery time slots (users want morning delivery, not midday)
→
Order history with repeat functionality and date/time stamps
→
Loyalty program with access levels: barista (order only) vs manager (payment terms)
04 / Wireframes & process
Structure Before Visual.
Information architecture and lo-fi wireframes for 20+ pages across 4 breakpoints. Benchmarking of 8 B2B platforms done directly in Figma alongside the wireframes.
Hero anchors the value prop above the fold. Reorder and Recent orders are the primary actions for returning B2B buyers, so they appear without scrolling.
SKU attributes in a sticky sidebar; the "Add to cart" CTA stays in view regardless of scroll depth — critical for large product catalogs.
Progressive accordion hides inactive steps — wholesale orders with multiple delivery addresses stay manageable without overwhelming the buyer.
05 / Design system
Brand Tokens.
Coffee Street Service had a strong existing brand identity (by agency Packer, 2021) with 211K Instagram followers and a branded mascot — an animated coffee cup character "Bodryashchy Buddy" used across corporate materials. The design challenge: bridge bold offline branding with mobile UX that scales to 7,000+ B2B users.
The brand uses a bold black/yellow print-first visual system built around a graphic coffee tree pattern. Adapting this to Material Design 3's semantic token system — while keeping the brand recognizable on a small mobile screen — required careful decisions about which brand elements to preserve and which to simplify.
80+
Components
4
Breakpoints
20+
Pages
MD3
Token system
Color palette
primary
#FFD230
on-primary
#000000
aux/overlay
40% #000000
stroke
#D9D9D9
secondary
#272727
on-secondary
#FFFFFF
disabled/surface
#ADADAD
disabled/on-surface
#656565
surface
#FFFFFF
on-surface
#272727
surface-variant
#F0F0F0
on-surface
#272727
add-ons/subscriptions
N-87
add-ons/rating
#FAAA32
success
#008D05
error
#CD0000
warning
#E88700
waiting
#0043ED
Typography
Bebas Neue · Display
Coffee Street Service
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Formular / Inter · Interface
Headline Bold — кофе для вашего бизнеса
Subheadline Medium — доставка за 2 часа
Body Regular — Поставляем кофе, оборудование и расходники для кофеен. 7 000 B2B-клиентов.
Label · Caption
Component's
Primary
Secondary
Tertiary
Quaternary
Danger
Disabled
06 / Adaptive design
One Design. Any Screen.
The same catalogue page — built for 1440px desktop and 360px mobile. Every layout decision had to work across 4 breakpoints with the same component library.
07 / Final UI
20+ pages · 4 breakpoints · 80+ components
08 / Outcome
Delivered. Ready to Ship.
—
Full site: catalogue, product, cart, checkout, personal account, blog, contacts, auth
—
UI-kit built from zero: buttons, inputs, cards, modals, headers, all state variants
From a company that ran entirely on WhatsApp and phone calls — to a fully designed B2B e-commerce platform ready for development handoff. First digital channel for 7,000+ B2B clients across North Caucasus.
Next case
Product Design · Hackathon
Zusia — Civic Tech AI