Portfolio / The Flying Squirrel Coffee
E-Commerce UX Research 0→1 Storefront

Helping an artisan coffee brand sell its story online.

The Flying Squirrel had built a beautiful single-estate coffee brand and a loyal in-store following, but the online store wasn't converting. As lead designer and founder of my own practice, I ran a research-led redesign of the storefront that taught visitors how to choose, customize, and trust a bag of specialty coffee. Online sales grew 80% in under six months.

80% growth Online sales, under 6 months
Lead Designer Research → IA → UI → prototype
2016 Bangalore, India · 6 months
The Flying Squirrel Coffee redesigned homepage shown on a laptop — 'We are the farmers' hero

A great product that wasn't selling online.

The Flying Squirrel was a single-estate specialty coffee brand with real depth — grown, roasted, and known among people who already loved good coffee. In person, the product sold itself. Online, it didn't. The storefront looked nice but left first-time visitors unsure what to buy, how it was different, or why it was worth the price.

I led a research-led redesign of the e-commerce experience end to end — heuristic evaluation, user research, information architecture, interaction design, and prototyping. The goal wasn't a prettier site; it was a storefront that could do what a knowledgeable shop assistant does: educate, differentiate, and build enough confidence to convert.

Selling specialty coffee online means recreating the in-store moment — the smell, the conversation, the “try this one” — for someone who can only see a screen.

The online store couldn't simulate the shelf.

In a café or a store, choosing coffee is sensory and guided — you read the shelf, you smell the beans, someone walks you through roast levels and brew methods. The original website flattened all of that into a generic product grid. Visitors landed, didn't understand the range, and left.

  • No education. Nothing taught a newcomer the difference between origins, roasts, or grind sizes — so the catalog felt like noise.
  • No differentiation. The brand's single-estate story and quality weren't visible at the moment of choosing.
  • Confusing navigation. Products weren't categorized in a way that matched how people actually shop for coffee.
  • Friction for repeat buyers. People who knew exactly what they wanted still had to wade through a slow path to checkout.
Specialty coffee bags arranged on in-store shelves — the in-person browsing experience the site needed to recreate
The in-store reference: a guided, sensory shelf. The redesign's job was to recreate this confidence on a screen.

Design the coffee buyer's journey, not just the pages.

Rather than restyle pages, I framed the work around the journey a coffee buyer actually moves through — from curiosity to a confident purchase. Every design decision had to move someone one step further down this funnel.

Hand-drawn coffee buyer's journey funnel — educate, differentiate, sensory, convert
The coffee buyer's journey funnel I used to anchor the redesign: educate → differentiate → engage the senses → convert.

Evaluate, research, structure, design, test.

Process flow — heuristic evaluation, user research, brainstorm, design / prototype / test, deliver
The five-stage process, from heuristic evaluation through delivery.
01 · Evaluate
Heuristic evaluation of the existing site
I audited the live store against usability heuristics. It scored poorly — roughly 2 / 5 on core flows and 2.5 / 5 overall — confirming the issues were structural, not cosmetic. This gave me an objective baseline and a prioritized list of what to fix.
02 · Research
Interviews, surveys, and in-store observation
I ran 15 user interviews and gathered 31 survey responses, plus in-store observation of how people actually browse and choose coffee. The signal was consistent: people wanted to learn before they bought, and trusted brands that taught them something.
03 · Synthesize
Affinity mapping & personas
I clustered findings across behavior, knowledge, online-shopping experience, and learning — then distilled them into two primary personas that anchored every later decision.
04 · Structure
Card sorting → a new sitemap
Using hybrid card sorts, I rebuilt the information architecture so the catalog matched how people group and look for coffee — origin, roast, and use — instead of an arbitrary product dump.
05 · Design & test
Storyboards, wireframes, prototype, usability testing
I storyboarded each persona's journey, wireframed the key screens, built an interactive prototype in Sketch + InVision, and tested it. Testing is where the quick-checkout path for repeat buyers emerged as a must-have.

What research told us — three signals.

70% wanted to understand a coffee's origin and character before buying.
75% trusted brands more when the site taught them something about the product.
35% were repeat buyers who wanted to reorder fast, without re-learning the catalog.

Figures from the 2016 research round (15 interviews · 31 survey responses · in-store observation).

Two people I designed for.

Persona — Ashish Chowdary, marketing consultant, 33, curious newcomer to specialty coffee
The curious newcomer — needs to be taught before he'll commit.
Persona — Meesha Mathew, businesswoman, 35, knowledgeable repeat buyer
The knowing regular — wants to reorder her favorite fast.

Synthesis & structure.

Affinity / brainwriting clusters — behavior, knowledge, online shopping experience, learning
Affinity clusters from research synthesis.
Redesigned sitemap — home, shop, about, how-to, roastery, B2B, events
The rebuilt sitemap, derived from card sorting.

Storyboards — each persona's path to purchase.

Low-fidelity storyboard of the newcomer's journey from hero to confirmation
The newcomer's journey — hero → browse → details → cart → confirm.
Low-fidelity storyboard of the repeat buyer's journey including brewing guides and mobile reorder
The regular's journey — brewing guides → fast mobile reorder → checkout.

Wireframes — the three screens that mattered most.

I focused the design effort on the three screens that carried the journey: the homepage (set the story), the coffees listing (make the range navigable), and the product details page (educate and convert).

Mid-fidelity wireframe of the homepage
Homepage wireframe.
Mid-fidelity wireframe of the coffees listing page
Coffees listing wireframe.
Mid-fidelity wireframe of the coffee details page with reviews and recommendations
Product details wireframe — reviews, characteristics, and “you may also like.”

Iterating the product card.

The product card did a lot of work, so it earned its own iteration loop — from a rough Sketch block to a final card that balanced imagery, name, character, and a clear path to add to cart.

Four-step iteration of the Deep Bliss product card, from sketch to final
Product-card iteration: sketch → v1 → v2 → final.

A storefront that teaches, then sells.

The redesigned, fully responsive store does three jobs the old one couldn't: it structures the catalog the way people shop, it lets buyers reorder fast, and it gives every coffee a rich, educational details page.

Beat 01 Structured, shoppable catalog Coffees grouped and filterable the way people actually choose — so the range reads as a guided shelf, not a dump.
Beat 02 Quick checkout for regulars A fast reorder path for the 35% of repeat buyers who already know what they want — surfaced directly from testing.
Beat 03 Rich coffee details page Origin, character, brew guidance, and customizable grind size — the education that turns a curious visitor into a buyer.
Beat 04 Responsive by default Designed mobile-first for browse, customize, and reorder — the screen most buyers actually used.
Redesigned coffees listing page shown on a laptop — dark theme product grid
The coffees listing — a navigable, story-forward catalog.
Redesigned coffee details page for Aromatique — dark desktop layout with characteristics and customization
The product details page — education and customization at the moment of choosing.

On mobile — browse, customize, reorder.

Mobile coffees page, gold-on-black
Mobile catalog.
Mobile product page with grind-size dropdown open
Customizing grind size on mobile.

The store started selling.

80% growth in online sales within six months of launch
3 key screens carried the journey — homepage, listing, and details
2 personas, validated through interviews, surveys, and usability testing

The research-led redesign turned a good-looking-but-quiet store into one that taught people why the coffee was worth buying — and made buying it easy. The biggest lift came from pairing education (details pages, brewing guidance) with a fast path for the people who already knew what they wanted.

Collaborate with engineering early. Designing with a clear view of what was buildable — and bringing developers in before final UI — kept the redesign realistic and shippable on a small-business timeline.

Design for the code's capability. Constraints weren't a compromise; they sharpened the work. Knowing the platform's limits up front meant every screen I designed could actually ship.

Cross-functional teamwork wins. Owning research, IA, design, and prototyping while staying close to the founder and developers is what let one designer move a business metric this far, this fast.

Where the brand is today

The online store was a genuine success. Since then, the business has realigned around on-the-ground experiences — and the brand has evolved into a specialty coffee venture focused on coffee shops across India. The depth of thinking from this era now lives in those physical spaces rather than the original storefront.

© 2026 · aditya yellamraju · handcrafted, then robot-polished no designers were replaced in the making of this site
Vibe coded · Claude