The Problem

A luxury brand trapped in Instagram DMs

A luxury artisan chocolatier was operating entirely through Instagram DMs and phone calls. No website. No checkout. No trust signals. Manual order processing was creating bottlenecks, losing customers, and making international expansion impossible.

Cultural skepticism compounded the challenge: 30% of potential Kazakh and Russian customers wouldn't purchase without a professional, dedicated e-commerce presence. Cart abandonment on existing informal channels was 78%. The brand had a premium product and zero digital infrastructure to support it.

Before · Instagram DMs

DMs and phone calls only — high friction, no scale

No payment flow, no trust indicators, no analytics

78% cart abandonment on informal channels

After · E-Commerce Platform

Trilingual UI — English, Russian, Kazakh with locale switching

Localized payments — Kaspi, QIWI, Visa, Mastercard

$200K/mo revenue, 89% checkout, 4.8/5 trust score

Design Screens

Real Figma Designs — Full Platform

Every screen below is from the final high-fidelity Figma prototype, tested with 15 users across Kazakhstan, Russia, and English-speaking markets before a single line of production code was written.

almaty-cocoa.kz

Homepage hero · Shopping cart flyout — "Almaty's Finest Artisan Chocolate" with persistent order summary

almaty-cocoa.kz/shop

All Chocolates · Advanced filtering sidebar — category, origin, price range, cocoa %, certifications (Organic, Fair Trade, Bean to Bar)

almaty-cocoa.kz/collections

Chocolate Collections · 9 curated collections, 200+ products, 25+ countries — "Can't Decide" taste quiz CTA

almaty-cocoa.kz · Search

Search feature · Instant modal results with product image, maker, category, and price — "View All Results" CTA

almaty-cocoa.kz/cart

Shopping cart · 2 items, persistent order summary, secure checkout + fast shipping trust badges — quantity controls

almaty-cocoa.kz/checkout/payment

Checkout · Step 3 Payment — 9 payment methods including Kaspi Pay & QIWI for Kazakh/Russian markets, persistent order summary

almaty-cocoa.kz/account

Buyer account · Order history with delivery status, tracking numbers, reorder and track_order actions — 24 orders, $1,247.89 total spent

almaty-cocoa.kz/seller-dashboard

Seller (Artisan) dashboard · Total revenue $15,847.23, 12 active products, 4.9★ store rating — top performing products with revenue breakdown

Process Breakdown

Five phases. Eight weeks. One launch.

Every phase was tightly scoped and evidence-gated — no phase began until the previous one produced a clear decision or artefact. Here's how the project actually ran, step by step.

01 · Research 02 · Design System 03 · Validation 04 · Implementation 05 · Optimization

Phase 01 · 2 Weeks

Understanding three cultures simultaneously

I conducted 24 in-depth user interviews across English, Russian, and Kazakh — not through a research agency but directly, with a live interpreter for the Kazakh sessions. The goal wasn't satisfaction scores — it was surfacing the unspoken mental models that decide whether someone trusts a checkout form enough to enter their card number.

Parallel to the interviews, I ran a competitive audit of 5 e-commerce platforms operating in the CIS region — Wildberries, Kaspi.kz, Ozon, a Kazakh artisan platform, and a European Almaty Cocoa — documenting how each handled trust signals, payment UX, and multilingual copy.

24

Interviews conducted

Across 3 languages, 3 markets. Sessions ranged from 35–55 min, covering trust, payment habits, and luxury purchase psychology.

5

Competitors audited

Wildberries, Kaspi.kz, Ozon, a local Kazakh platform, and a European Almaty Cocoa — documenting trust signals and payment flows.

3

Journey maps created

One per market, documenting cultural drop-off triggers at each checkout step — from product discovery to payment confirmation.

Critical finding: Trust signals are culturally loaded. Kazakh users required visible Kaspi bank logos before feeling confident enough to proceed. Russian users needed Russian-language security messaging — "SSL Secured" in English was read as suspicious, not reassuring. This single insight reshaped the entire checkout architecture.

Phase 02 · 4 Weeks

45+ components. 3 languages. One system.

Before drawing a single screen, I built the design system. This wasn't decoration — it was the infrastructure decision that made a 10-week timeline possible for a 3-language, 3-market product. Every component was designed with multilingual constraints baked in: 30% text expansion buffers for Cyrillic, RTL-ready spacing tokens, and locale-aware number/currency formatting.

The component library shipped to Storybook in sync with Figma design tokens, meaning every style update in Figma propagated automatically to the engineering codebase. This eliminated the most common cause of design drift in fast-moving projects.

1

Token architecture — color, type, spacing, motion

Defined semantic tokens rather than raw values: color.action.primary not #0F6E56. This meant swapping the entire palette for a market variant required changing one token file, not hunting through 200 components.

Figma Variables + CSS Custom Properties

2

Primitive components — buttons, inputs, badges, icons

Built 28 atomic components with Figma Auto Layout and component properties — enabling designers to configure state, size, and locale from the properties panel without creating new frames.

Figma Components · Auto Layout

3

Composed patterns — product cards, checkout, trust badges

17 composed patterns assembled from primitives. The checkout flow existed as a single nested component with 3-step / 1-page variants, locale toggle, and Kaspi/QIWI/Visa payment configurations built in.

Pattern Library · Locale-aware

4

Storybook token sync — design → code, zero drift

Worked with the lead engineer to export Figma token JSON directly into the CSS custom property layer. After this setup, updating a button radius in Figma updated it in production within one CI cycle — no manual specification required.

Storybook · Design Tokens · CI/CD

45+

Components Built

40%

Dev Time Saved

30%

Text Expansion Buffer

3

Locale Configurations

Phase 03 · 2 Weeks

Testing across markets before writing a line of production code

I ran 15 moderated usability tests on a high-fidelity Figma prototype simulating the complete purchase journey across all three locales. Participants were recruited through local Facebook groups and an existing customer list — not a panel service, which would have introduced unrepresentative tech-savvy users.

A/B testing covered two high-stakes decisions: CTA copy ("Pay Now" vs "Complete Order" vs "Confirm Purchase" — each tested per locale) and security messaging placement (above the fold vs. inline with payment fields vs. below the CTA).

Validation Phase Outcomes

"Confirm & Pay" outperformed "Pay Now" by 27 percentage points — became the global default CTA across all three locales

Security messaging placed inline with payment fields drove +23% trust perception vs. above-the-fold placement

Localized payment flows (Kaspi for KZ, QIWI for RU) increased conversion by 23% and 18% vs. generic flow

Session replay on prototypes identified 3 hesitation points before the final payment click — all resolved before production

Phase 04 · Weeks 7–8

Rolling out across three time zones

Implementation ran across 3 time zones — Kazakhstan (UTC+6), Russia (UTC+3), and my own. I structured developer collaboration around daily async Slack updates and biweekly live handoff calls to review complex components. Rather than a big-bang launch, we used a staged rollout: internal → 10% → 50% → 100%, with PagerDuty monitoring at each gate.

Deliverable	Format	Outcome	Impact
Component specs	Figma Dev Mode + annotations	Zero redline clarification requests	−40% back-and-forth
Locale handoff	JSON string tables per locale	Cyrillic text overflow resolved pre-build	30% buffer applied
Staged rollout	Internal → 10% → 50% → 100%	Zero critical bugs at full launch	0 rollbacks
Analytics setup	GA4 + conversion events	Data available from day 1	Immediate optimization
Payment integration	Kaspi API + QIWI + Stripe	−42% payment errors post-launch	Trust score 2.1 → 4.8

Key learning: The component library cut engineering estimates by ~35% and freed the team to focus on polishing complex interactions — particularly the smooth integration of the Kaspi payment redirect and return flow, which required 6 edge-case states to handle gracefully.

Phase 05 · Ongoing post-launch

Post-launch monitoring → compounding improvements

The first 30 days post-launch were treated as an extension of the design process, not a handoff point. I monitored GA4 dashboards daily, reviewed Hotjar session recordings every 48 hours, and ran weekly feedback synthesis sessions with the PM. Three significant optimizations shipped in the first month alone.

+15%

Additional conversion lift

Post-launch A/B tests on the product page CTA placement and product photography aspect ratio drove an additional 15% conversion lift on top of the launch baseline.

−30%

Support tickets reduced

Order status emails redesigned based on support ticket analysis — "Where is my order?" was the #1 query. Redesigned the confirmation and tracking flow, eliminating the root cause.

$200K

Monthly revenue at month 2

B2B bulk ordering portal — identified from session recordings showing business buyers struggling with single-unit checkout — launched at week 6 post-launch and immediately attracted corporate accounts.

What I Learned

Lessons that shape every project since

User Feedback

What users said

The Problem

"Feels like hacking a system from 1995"

Craigslist, while iconic, was hemorrhaging users to modern marketplace apps. Anonymous listings, no credibility signals, buried filters, and desktop-centric layouts created a friction-filled experience that rewarded patience over trust.

18 user interviews surfaced a consistent theme. Buyers were doing 20+ minutes of external research before messaging a seller — cross-referencing phone numbers, searching reverse lookups, checking Reddit. The product had forced users to build trust infrastructure outside the product.

Before · Legacy Craigslist

Anonymous text-only listings, no credibility signals

Filters buried, no image previews in browse

Desktop-only, lost postings, no auto-save

After · Craigslist Evolved

Image-forward grid with Trust Score, badges, response rate

Modal filters on mobile (+25%), persistent sidebar desktop

6-step posting flow, auto-save, mobile-first 44px targets

Design Screens

Trust, filtering, and listing at a glance

craigslist.org / furniture

Visual browsing experience with advanced filters for faster product discovery.

craigslist.org / post / new

Verified seller profile showcasing trust signals, ratings, and activity history.

craigslist.org / fuo / 7429821

Powerful search controls helping users quickly find relevant listings.

Comprehensive listing view with protected buyer-seller communication.

craigslist.org / furniture

Image-first catalog layout designed for effortless comparison and browsing.

craigslist.org / post / new

Streamlined negotiation flow for offers, messaging, and transaction tracking.

craigslist.org / fuo / 7429821

Filtered results view that reduces clutter and improves decision-making.

Integrated seller credibility and communication tools for safer exchanges.

Process Breakdown

Discovery → System → Validate → Ship → Listen

Eight weeks, five phases, one mandate: make Craigslist feel trustworthy without making it feel corporate. Every design decision had to pass the "would a power user still recognize this?" test.

01 · Discovery 02 · Design System 03 · Validation 04 · Implementation 05 · Launch

Phase 01 · 2 Weeks

Mapping frustration to specific interaction failures

I ran 18 user interviews with a mix of casual buyers, power sellers, and first-time users in the San Francisco Bay Area — Craigslist's most active market. Sessions included a contextual task: participants shared their screens and walked me through a real Craigslist session while thinking aloud. This produced specific failure moments, not generalized dissatisfaction.

I also ran a competitive audit across 5 marketplaces: Facebook Marketplace, OfferUp, eBay Local, Mercari, and Depop — analyzing exactly which trust mechanisms each used and how they handled the buyer-seller verification problem differently.

Key discovery: Users weren't afraid of Craigslist per se — they were afraid of the specific information gap. When a seller profile included a name, photo, review count, and response time, user willingness to initiate contact jumped 3x in session simulations. Trust is about information density, not badge design.

18

Interviews + diary studies

Mix of buyers, sellers, and first-time users. Diary studies ran over 5 days — participants logged every Craigslist interaction with friction ratings.

5

Marketplaces audited

FB Marketplace, OfferUp, eBay Local, Mercari, Depop — mapped trust mechanisms, filter UX, mobile posting, and verification flows.

94%

Cited trust as primary barrier

The overwhelming majority of users named seller credibility — not price, not distance — as the primary reason they hesitated or abandoned a potential transaction.

Phase 02 · Design System

"Calm and competent" — not flashy

The design philosophy for Craigslist Evolved was deliberately restrained: neutral fonts, controlled palette, trust-first layout hierarchy. The system needed to feel like a public utility — something the community already owned — not a startup rebrand.

Type stack: Open Sans for UI labels (high readability at small sizes), Inter for body content, SF Pro on Apple devices. Palette: charcoal (#2A2A27), warm off-white (#F7F5F0), teal accent (#0D7A5F). Every color decision was tested against WCAG AA contrast ratios.

1

Listing card component — the most-used element in the system

Designed 4 card variants: grid (browse), list (search results), featured (pinned ads), and compact (saved items). Each variant shared the same data model but adapted density for context. Trust score and verification badges surfaced at the card level — not buried in the profile.

4 variants · 2 breakpoints · Figma

2

Filter system — desktop persistent sidebar + mobile modal

Desktop: persistent left sidebar, always visible, state persists across search. Mobile: full-screen modal with apply/clear actions — no incremental hiding. The mobile modal was the A/B test winner vs. a bottom drawer, improving task completion by 25%.

A/B tested · +25% completion

3

Seller profile hierarchy — evidence stacked, not declared

Profile design deliberately led with social proof (reviews, repeat buyers, response rate) before showing any self-declared information. The Trust Score (98/100) was positioned above the seller's self-written bio — making verifiable signals the first thing buyers saw.

Trust architecture · Social proof first

4

6-step posting flow with draft auto-save at each stage

Category → Details → Photos → Location → Preview → Publish. Draft saved after each step. A stacked progress indicator (not a linear bar) showed all 6 steps at once — reducing anxiety about total effort. Confirmation screen animated the listing going "live" to reinforce completion.

6 steps · Auto-save · Completion psychology

Phase 03 · 2 Weeks

Three methods, one truth: evidence beats opinion

Validation ran concurrently across three methods — each answering a different type of question. Usability tests answered "can users accomplish the task?". A/B tests answered "which design decision performs better?". Trust signal research answered "what actually changes buyer behavior?"

Method	Sample	Key Question	Result
Moderated usability tests	22 participants	Can users find a trusted seller and initiate contact?	89% completion (target: 85%) · SUS 84 "Excellent"
A/B: Filter interaction	Split test prototype	Drawer vs. modal — which completes faster?	Modal: +25% over drawer — shipped as default
Trust signal research	22 participants	Which signals most increase contact intent?	Name + rating + reviews > generic badges
Session replay on prototype	Heat map analysis	Where do users hesitate before messaging?	3 hesitation zones identified, all resolved pre-dev

89%

Task completion rate

84

SUS score (Excellent)

4.4/5

Trust rating in tests

+25%

Modal vs. drawer lift

Phase 04 · Weeks 5–7

Component handoff · Dev syncs · Structured content

Implementation was structured around a single principle: zero ambiguity in the handoff. Every component in Storybook matched its Figma counterpart at the token level. Bi-weekly live calls reviewed complex components — filter logic, trust score calculations, offer flow edge cases. Slack async covered daily QA notes.

1

Component-centric handoff — Figma Dev Mode + Storybook

Every component exported from Figma Dev Mode with pixel-perfect specs, spacing annotations, and interaction notes. Storybook served as the live source of truth — engineers pulled tokens directly, no redlines needed.

−40% frontend build time

2

Bi-weekly design-dev syncs — complex components first

Focused on the 5 most complex components: filter modal with state persistence, trust score calculation display, offer negotiation flow, message relay system, and the 6-step posting wizard. Zero inconsistencies shipped in the final build.

Zero inconsistencies in final build

3

Structured content strategy — listing data model

Moved listings from free-text descriptions to structured fields: condition (enum), dimensions (number+unit), material (taxonomy), and description (free text). This enabled filtering, comparison, and search — and drove the 88% filter adoption rate.

88% filter usage post-launch

Phase 05 · 4-Week Rollout

Bay Area first → listening on Reddit → full launch

The rollout was phased by design — not as a risk mitigation checkbox, but as a genuine data-gathering opportunity. The Bay Area was chosen as the canary market because it had the highest Craigslist activity density, meaning engagement signals would surface quickly.

Week	Scope	Key Signal	Action
Week 1	Bay Area · internal users	All KPIs exceeded targets from day 1	Stable — proceed to 10%
Week 2	10% traffic · Reddit monitoring	"Make Offer" flow praised, clarity gap noted in copy	Iterated copy — "Make Offer" → "Propose Price"
Week 3	50% · vs legacy A/B	+78% engagement vs legacy baseline	+34% offer rate from single copy change
Week 4	100% · full launch	−52% suspicious reports · 88% filter usage	Optimization backlog opened for month 2

Final Launch Outcomes

+78% engagement (time on page) across all user sessions — desktop and mobile

−52% suspicious listing reports — trust infrastructure working as designed

88% of all sessions used filters — structured data model enabling new behavior

+34% offer rate from a single post-launch copy iteration — community feedback → shipped fix in 4 days

Lessons

What this project proved

User Feedback

From post-launch community monitoring

The Problem

This is not a user problem. It's a product problem.

LinkedIn's Save feature is used by millions daily. Yet fewer than 30% of saved items are ever revisited. The conventional interpretation was that users forget. But that's the wrong diagnosis.

The real problem was that the product gave users no reason to return. A flat chronological list with no organization, no recall cues, no privacy clarity, and no mobile-equivalent experience. Saving was easy. Finding what you saved — weeks later, when it mattered — was nearly impossible.

Before · LinkedIn Saves (existing)

Flat chronological list — no organization, no context

No privacy signals — 61% feared saving triggered notifications

Desktop-only, no reminders, 70% of saves never revisited

After · Redesigned Save System

Smart Collections with auto-grouping — 85% folder adoption

Explicit "Only Me" privacy default — +47% saving frequency

Reminders + deadlines + Apply Now — +64% revisit rate

Design Screens

From archive to action system

linkedin.com/my-items/saved

Create New Category: Pop-up for adding a new category. Includes text input, color picker, and confirmation buttons for streamlined organization.

linkedin.com/my-items/saved

Category Selection Grid: Nine categories displayed with save counts. Selected category highlighted with a blue checkmark for clarity.

linkedin.com/my-items/saved

Saved Post Detail: Individual saved item view. Shows author, role, hashtags, and dropdown for assigning categories.

Tag Filter Dropdown:Tag-based filtering menu. Options include Product Management, UX Design, Remote Work, AI & ML, and more.

linkedin.com/my-items/saved

Save Activity Stats:Weekly and monthly save counts visualized with progress bars. Highlights top category of the week.

linkedin.com/my-items/saved

Smart Collections: Auto-grouped saved posts by theme. Collections include Career Insights and #Product Management.

linkedin.com/my-items/saved

Quick-Access Panels: Curated list of pinned and recent resources. Includes articles, job posts, and industry reports.

Generate Folders from Profile: Auto-created folders based on profile data. Categories include past employers, skills, and volunteer experience.

Process Breakdown

Diagnosing three root causes. Designing one system.

As the sole designer, I owned the entire arc — research, IA, interaction design, visual design, and testing. No handoff between phases, no lost rationale. Every decision traced directly back to a user insight.

01 · Research 02 · IA & Concepts 03 · Design 04 · Testing 05 · Impact

Phase 01 · Research

Why do users save but never return?

I started with a deliberate research question: what happens between the moment someone saves an item and the next time they open LinkedIn? Not "why don't you use the save feature" — which produces rationalized answers — but observation-based session research that revealed the real broken loop.

I conducted diary studies over 14 days with 22 LinkedIn users (product managers, designers, engineers, job seekers). Participants logged every save action and every time they attempted to revisit saved content — including failed attempts. Failed attempts were the signal that mattered.

61%

Feared saving = notification

The majority believed saving someone's post would notify them — leading users to self-censor saves entirely, especially for competitor content or sensitive job leads.

78%

Couldn't recall why they saved

When revisiting saves weeks later, users had lost the context for why they saved an item. Without a note or category, the item was meaningless — and was ignored again.

0%

Mobile users could organize saves

The existing save feature had zero organizational tools on mobile. Users who primarily browsed LinkedIn on their phone had no way to manage, filter, or revisit saved items.

The reframe that changed everything: The problem wasn't that users "forgot" — it's that the product gave them nothing to remember with. No folder, no tag, no reminder. Forgetting was the only rational response to a system with zero recall infrastructure. Fixing memory was a product problem, not a user education problem.

Phase 02 · Information Architecture

Three root causes → three design solutions

I mapped the three root causes to three specific solution spaces, then explored 2–3 concept directions per space before committing to a direction. The constraint: all three solutions had to ship together — fixing two out of three would still leave the loop broken.

Root Cause	Concepts Explored	Chosen Direction	Rationale
No organization system	Manual folders, AI auto-tags, hybrid Smart Collections	Smart Collections (auto + manual)	Auto-grouping reduced effort to zero. Manual override kept power users in control.
Privacy ambiguity	Hide feature entirely, passive notice, explicit 3-state control	Explicit "Who can see" control	Hiding caused distrust. Passive notice wasn't read. Explicit = immediate behavior change.
Zero recall infrastructure	Push notifications, time-based nudges, inline reminders + deadlines	Inline reminders + deadline badges	Push notifications felt intrusive. Inline reminders surfaced at point of intent, not interruption.
Mobile feature gap	Simplified mobile view, progressive disclosure, full parity	100% feature parity	Simplified view was patronizing. Power users needed the same tools regardless of device.

IA decision: Smart Collections sit above individual items in the hierarchy — users see their folders first, then items within. This single structural choice transformed the experience from "a list of things" to "a personal knowledge system". The destination has to exist before the journey makes sense.

Phase 03 · Design

From flat list to professional action system

As sole designer, I moved fast from structure to high-fidelity. The key constraint was LinkedIn's existing design system — I had to work within existing components where possible and introduce new patterns only where the existing system couldn't support the interaction model.

1

Smart Collections — auto-grouping by inferred tag

Collections use LinkedIn's existing topic taxonomy to auto-group saves: #ProductManagement, #CareerGrowth, #AI, #Leadership. Users can rename, merge, and create custom collections. The system learns — items saved to a custom collection influence future auto-grouping for that user.

85% folder adoption at launch

2

Privacy control — three explicit states, one setting

"Who can see your saves": Only Me / Connections / Public. The control lives in a persistent banner above the saves list — not buried in settings. The default changed from implied-public to Only Me. Saving frequency jumped 47% within the first week of launch.

+47% saving frequency

3

Reminders + deadline badges — intent at the right moment

Any saved item can receive a reminder (in X days/weeks) or a deadline date. Job leads show a red "Deadline" badge when the application closes within 7 days, with a one-tap "Apply Now" CTA surfaced directly on the saved item — eliminating the need to find the original posting.

+64% revisit rate in 7 days

4

Mobile parity — same features, adaptive layout

The mobile layout adapts density: horizontal folder scroll replaces the grid, filter chips replace the sidebar, and items stack in single-column with full interaction parity. Every feature available on desktop — reminders, deadlines, collections, privacy — works identically on mobile. First time in LinkedIn's save history.

100% mobile parity achieved

Phase 04 · Testing

Validating the three-solution system as a whole

Testing focused on two questions: does each solution work in isolation, and does the combined system create the behavior change we designed for? I ran moderated sessions where participants used the prototype for a simulated 2-week work scenario — saving, organizing, and acting on content over time.

92%

Task completion rate

Participants could find, organize, and act on saved items within the simulated scenario. The previous rate on the same scenario was 31% — a near-tripling of task success.

100%

Privacy anxiety resolved

Every participant who had previously reported privacy concerns said the explicit control "completely resolved" their hesitation to save. Zero residual anxiety in post-session interviews.

4.6/5

Mobile experience rating

Mobile-primary users rated the new experience 4.6/5 vs. 1.8/5 for the existing mobile save feature. The comment that appeared most: "I can finally actually use this on my phone."

Key Testing Refinements

Reminder flow simplified from 3 taps to 1 — users found the date picker cognitive overload; presets (2 days / 1 week / 1 month) shipped instead

Job deadline badge color changed from orange to red — orange tested as "informational" not "urgent"; red triggered the right action behavior

Privacy banner placement moved from Settings page to top of saves list — users missed it in Settings; top placement drove 3x higher awareness

Smart Collections added manual ordering — auto-grouping was loved but users wanted control over which folder appeared first

Phase 05 · Outcomes

Metrics that map directly to product health

Every metric below traces to a specific design decision — not to general "product improvement". This is what end-to-end ownership looks like: the designer who ran the research also shipped the screens also owned the outcome.

+64%

Revisit rate (7-day)

+47%

Saving frequency

85%

Folder adoption

−70%

Lost item complaints

Design Decision	Metric it Drove	Result
Privacy control default changed to "Only Me"	Saving frequency	+47% week-1 post-launch
Smart Collections with auto-grouping	Folder adoption rate	85% of users created ≥1 collection
Inline reminders + deadline badges	7-day revisit rate	+64% vs. baseline
Full mobile parity	Mobile session depth	4.2 items acted on per session (was 0.3)
100% solo ownership across phases	Decision consistency	Zero design drift from research insight to shipped screen

Impact

Outcomes that map to business metrics