SOULLYLUSH
D2C E-Commerce Product Design 4-Platform Design System Solo Designer Case Study 2026

01 - Portfolio Project

Designing trust
from farm
to checkout

A comprehensive end-to-end product design for Soullylush - India's organic D2C health & wellness brand. As sole designer on the project, I built one design system across four platforms: the web storefront, the native mobile app, a Farmer Operations dashboard, and an in-progress BI dashboard for business managers. This case study documents the full design rationale: every decision, every tradeoff, every iteration.

soullylush.com
Supercharge Your
Health & Wealth
SHOP NOW
Soullyland / Overview
Crop Health
94%
Moisture
21.4%
Alerts
2
App
Home

One design system, three very different platforms

Role
Sole UI/UX Designer
Platform
Web · Android · Farmer Dashboard · BI Dashboard
Screens
Core Flows + 2 Dashboards
Category
D2C + Agri-Ops + Enterprise BI
Year
2026
Scroll to explore

02 - Overview

What is
Soullylush?

Soullylush is a farm-to-home organic brand selling protein shakes, diapers, gummy vitamins, snacks, and skin care - certified by NPOP, FSSAI, ECOCERT, and Earth Seer.

The design challenge: make organic grocery feel as intuitive and emotionally resonant as walking into a trusted neighbourhood store - while one design system flexes across four completely different interaction paradigms: impulse-driven D2C shopping, native mobile commerce, field-operations monitoring for farmers, and executive decision-making for business managers.

I designed and built all four platforms solo - same colour system, same typography roles, same component logic - adapted to radically different users and stakes each time.

Design Mandate

"Organic grocery shoppers are high-trust, low-impulse buyers. Every design decision must reduce anxiety and build confidence - not just look good."

Authentic & Organic
Products sourced from certified farms. No artificial additives. Transparent from soil to shelf.
Sustainably Grown
Eco-friendly cultivation, biodiversity preservation, farmer-first supply chain.
Committed to Wellness
Every SKU curated to actively support the customer's health and lifestyle - not just sell product.
Fairly Priced
Premium organic shouldn't be inaccessible. Best quality at harvest prices, always.
7
Core Screens Designed
4
Platforms · 1 Design System
6+
Product Categories
D2C
Business Model
03

03 - Problem Statement

The trust-discovery
gap in organic
D2C commerce

India's organic grocery market is growing rapidly, but faces a persistent credibility problem. Customers are willing to pay a premium - but they drop off at two critical moments.

Awareness Drop

"Is this brand actually organic - or just marketing?" Users leave before they reach certifications buried at the bottom of the page.

Conversion Drop

"Can I find what I need quickly and trust this checkout?" Ambiguous UX patterns in cart and checkout lose buyers at the final step.

Three Core Design Challenges
01
Trust-building at scale
Communicating authenticity and certifications without overwhelming visual hierarchy or burying them below the fold.
02
Multi-platform cohesion
Delivering a seamless brand experience across a full-width web storefront and a compact mobile app - two fundamentally different interaction paradigms.
03
Conversion optimisation
Guiding users from product discovery to checkout with minimal friction, in a category where impulse purchase is low and consideration is high.

04 - Target Users

Three buyers.
One platform.

I used these three audience profiles as design lenses to evaluate key user needs and interaction priorities. A senior designer doesn't design for an average user - they design for the spectrum.

Mobile 70%
Health-Conscious
Urban Parent
Age 28–40 · Metro cities
Needs
Certified organic baby care, protein supplements, clean-label snacks
Pain Point
Distrust of 'organic' claims without visible third-party proof
Design Response
Certs on homepage Reorder tab Subscribe & Save
Mobile 85%
The Wellness
Enthusiast
Age 22–35 · Urban, educated
Needs
Protein shakes, gummy vitamins, skin care - with ingredient transparency
Pain Point
Analysis paralysis from product overload; unclear size/variant selection
Design Response
Size selector Ingredient accordion Most Loved
Web 55%
Organic Household
Manager
Age 30–50 · Suburban family
Needs
Farm fresh, dairy, and staples in bulk; recurring orders; nearby store discovery
Pain Point
Wants quick category browsing, not editorial scrolling. Frustrated by depth before product
Design Response
Category pills Nearby Stores Cart merge
WEB

05 - Web Platform

The homepage is a
full-funnel page.

The web experience isn't just responsive mobile - it's purpose-built for discovery, brand storytelling, and SEO. Every section has a conversion role.

Hero Section
Works well + Iteration

"Supercharge Your Health & Wealth" - a dual value proposition

The hero combines personal wellbeing and financial wisdom. Mixed-weight display type creates visual impact. The wooden base in the product imagery communicates naturalism without being sterile.

Strong CTA contrast: 'SHOP NOW' in dark red against green creates immediate visual pull. Product variety shown in one viewport.
Planned for next revision: Showing 6–8 products simultaneously dilutes focus. A single hero product with a benefit-led headline - "India's first protein shake with zero artificial colours" - is queued for A/B testing. If developed, I would instrument scroll depth, CTA interaction and checkout progression to evaluate these hypotheses.
Trust & Certifications
Deliberate Tradeoff

NPOP · ECOCERT · Earth Seer · FSSAI - placed below the hero banner, by design

Four world-class certifications, positioned right after the hero section rather than above the fold. This was a deliberate flow decision: let the value proposition and product range land first, then earn trust with credentials once the visitor is already engaged - not before they know what the brand is.

Clean grid layout, official logos reproduced clearly, brief sub-copy explains what each certification means to real buyers.
Tradeoff
Placing certifications this early costs some "hero-only" visual purity, but buys immediate credibility for first-time visitors who don't yet trust an organic D2C brand by name alone. This placement isn't final - it's planned for next revision and will be finalised based on the analytics report once real scroll-depth and conversion data come in.
Current placement - below hero
Trust signals shown right after
the value proposition lands
Being tested for next revision
Hero CTA → SHOP NOW
✓ NPOP ✓ FSSAI ✓ ECOCERT ✓ Earth Seer
Most Loved Section
Strong pattern

Editorial curation solves the organic trust problem through social proof

Labelling products 'Featured', 'Best Seller', and 'New Arrival' creates editorial authority without overwhelming the user with rating numbers - a subtle but effective trust pattern.

What works
Clean product card: name / descriptor / price badge / wishlist / CTA in one unit
In-tab filtering without page navigation
Contextual product photography on soft backgrounds
Planned Next Revision
Testing 'Add to Cart' directly on listing cards, since 'View Details' costs one extra tap for decisive buyers
Testing consistent price display on every card - currently missing on some

Neither change ships until it's validated against the analytics report.

Best Seller
Soully Crunch
Gluten Free · No Added Color
₹400
+ Cart
New Arrival
Slime Hale Shake
Organic Protein · 30g
₹799
+ Cart
Scope Decisions
Tradeoffs

What didn't make the page - and why

About Us
Removed from the landing page entirely, rather than unfolding into a testimonial-driven brand story. This was the client's call - they wanted the homepage to stay focused on product and conversion rather than stretch scroll depth with narrative content.
Micro-interactions
Kept deliberately limited, scoped down against developer implementation cost. Interaction depth was concentrated on two sections - About Us and Certifications - using animation that can be built with CSS alone, rather than spreading thin, harder-to-justify motion across the whole page.
APP

06 - Mobile Application

Mobile designed for
task completion,
not storytelling.

The app assumes higher baseline intent. The user has already downloaded it - they want to find, decide, and buy. Every interaction should feel purposeful and quick.

Read this section like a hiring manager would

Nine screens, one continuous decision: reduce anxiety, protect momentum, get to "Add to Cart" without a wasted tap. Skim the frame, read the one line under it, move on - the full reasoning for every tradeoff is in the cards below the flow.

01 Login→ 02 Home→ 03 Explore→ 04 Reorder→ 05 Cart · Quick View→ 06 PDP→ 07 Cart · Review→ 08 Checkout + Billing→ 09 Order Placed
drag ↕
Login

Skip-to-browse first. Trust is earned before data is asked for - full catalogue browsing works with zero account, signup deferred to actual purchase intent.

drag ↕
Home

Location context up top, Reorder promoted into primary nav. Retention behaviour built into the base layout, not bolted on later.

drag ↕
Explore

Category-first discovery for a low-impulse, high-trust shopper - filters lead with certification and source, not just price or rating.

drag ↕
Reorder

One-tap repeat of last month's full list. Removes the single biggest friction point for a grocery-replenishment user: rebuilding a 35-item cart from memory.

drag ↕
Product Detail Page

Variant, subscription toggle, and trust badges on one scroll. For organic health products the proof has to sit next to the buy button, not link away.

drag ↕
Cart · Full Review

Checkbox model mapped to a physical shopping-list habit, not the standard "everything in cart gets bought" convention. Tradeoff detailed below.

drag ↕
Checkout + Billing

Address, shipping tier, and full cost breakdown compressed onto a single page. Total cost transparency before payment - no fee surprises at the last step.

drag ↕
Order Placed

Confirmation closes the trust loop, not just the transaction - delivery window and support access surface immediately, while confidence is highest.

Tradeoff

5-tab bottom nav: two slots spent on retention, not discovery

Reorder and Track sit at the navigation level instead of inside an account menu. The Reorder tab exists specifically so a user can repurchase last month's full grocery list - 35 items, unchanged - in one tap, rather than rebuilding it manually.

Based on feedback and observations from users familiar with similar grocery applications, I prioritised order tracking as a primary navigation task.

User request: on the existing app they were used to, it was buried inside Profile, and they wanted it surfaced.

What this costs
Two of five nav slots go to repeat-purchase behaviour instead of, say, a dedicated Account or Wishlist tab - a deliberate bet that retention matters more than browsing convenience for this audience.
Home Explore Track Reorder Cart
Tradeoff

Checkbox cart: mapped to a physical habit, not a digital convention

The cart uses a checkbox model, letting items be ticked on or off before checkout. This maps directly to how the target user already shops - ticking off items on a physical grocery list - rather than following the standard "everything in cart gets bought" e-commerce pattern.

What this costs
Familiarity for users coming from other apps, who expect unchecked items to still be in the cart. Planned for next revision: persistent micro-copy - "Uncheck items to save for later" - to close that gap, to be finalised based on the analytics report once real usage patterns are in.
Tradeoff

Skip-first login: browsing before belonging

The login screen leads with a Skip option, not a form. A first-time visitor can explore the full catalogue - categories, PDPs, prices, certifications - with zero account. Account creation is deferred to the moment intent is highest: the first "Add to Cart."

What this costs
No early capture of contact data for retargeting an undecided browser who leaves without buying - accepted deliberately, because for a low-impulse trust category, forcing signup before value is shown raises bounce more than it grows the list.
B2B

07 - Farmer Operations Dashboard

Same system,
opposite user.

Soullyland is a desktop dashboard for the farmers and field teams supplying Soullylush. Instead of driving an impulse purchase in eight seconds, it needs to hold a field manager's attention for an entire shift - surfacing risk, not merchandise.

Built as living teaching material for my students at Image Creative Education: two core screens are fully designed - Overview and Predictions - with Crop Health, Reports, and further flows planned as the next teaching modules, so learners can watch the system extend over time rather than see it finished.

Overview Screen
Command centre

Six stat cards, a live field-health map, and AI insights - one glance, full context

Where the D2C home screen leads with imagery, this leads with numbers. Total area, crop health score, moisture, farm efficiency, active alerts, and soil health sit above the fold as the first thing a farm manager sees each morning - matching how they already think about the farm.

Colour-coded field map reuses the same green/amber/ember system as the D2C badges - so "Field 01, 78% risk" reads with the same visual grammar as "Best Seller." One design language, two entirely different jobs.
Data integrity check: the temperature stat card was originally pulling from the wrong data field, silently showing a stale reading. Resolved by tracing the card back to its source metric rather than trusting the number on screen - a reminder that dashboards fail quietly, not loudly.
Soullyland / Predictions 24 May
Drought Risk (7d)
Medium
Pest Outbreak
High
AI Prediction Feed
● Aphid infestation · Field 01 HIGH
● Moisture deficit · Field 02 MEDIUM
7-Day Risk Forecast
Predictions Screen
Decision support

From "what's happening" to "what's coming" - the same data, a week ahead

Overview answers "how is the farm right now." Predictions answers "what should I do next." Splitting these into separate tabs - rather than one overloaded screen - keeps each screen honest about the question it's answering.

Every AI prediction pairs a confidence score with a concrete action - "78% match, inspect within 24h," not just a bare risk label. A prediction without a next step is just anxiety with data behind it.
Risk-type colour coding (pest / drought / frost) is consistent with the field-health map on Overview - so a manager jumping between tabs never has to re-learn what a colour means.

08 - BI Manager Dashboard

The fourth platform,
currently in build.

Where Soullyland tells a field manager about crops, the BI dashboard will tell a business manager about the company: the same system, extended one more time, for an audience that thinks in revenue and retention rather than moisture and yield.

In Progress Layout direction drawn from the Soullyland Overview pattern - stat cards + live visual + trend charts
Active Customers
Stat card
Total Revenue
Stat card
Orders Fulfilled
Stat card
Inventory Health
Stat card
Customer Drop-offs
Funnel chart
Revenue by Category
Pie chart
Sales Performance
Line graph
Order Volume Trend
Bar graph

Design Intent

Reusing the Soullyland Overview grid - stat cards up top, a primary visual centrepiece, supporting trend charts below - means a manager moving between the farmer dashboard and the business dashboard doesn't have to relearn a layout, only a vocabulary. KPIs replace crop metrics; pie, line, and bar charts replace the field map. Same skeleton, same design tokens, different story.

Tradeoff - kept deliberately separate from the Farmer Dashboard

The BI dashboard is not merged into Soullyland, even though they'll share a design system. Not every farmer is equipped with the education or data literacy to read graphs and charts fluently - the same visual language that helps a business manager scan revenue trends in seconds would add friction, not clarity, for a field user. Two dashboards, one system, deliberately different depths of data visualisation for two different levels of data fluency.

09 - Design System

Visual language
that earns trust

Colour and typography aren't decoration. They create the emotional context within which a user decides whether to trust a brand. Every green communicates health. Every warm orange signals urgency and harvest energy.

Colour System
Primary Green
#25751C
Nav · CTAs · Trust
Light Green
#52B788
Sub-labels · Hover
Pale Green
#D8F3DC
Card tints · Callouts
Ember Orange
#D4622A
CTA urgent · Badges
Near Black
#1B1B1B
Body · Headings
Warm Off-White
#F5F5EE
Backgrounds · Cards
Typography Roles
Display / Hero
Health & Wealth
Large, mixed-weight - creates brand personality and emotional pull
Product Names
Organic Protein Shake
Semi-bold, mid-size - scannable at high list density
Body / Descriptors
Pure, plant-based protein crafted from farm-fresh organic sources.
Regular weight, generous line-height - readable at paragraph length
Price
₹599
Bold, primary decision signal - must visually stand out from all other text
Core Component Patterns
Product Card
Category Pills
Farmfresh
Dairy
Babycare
Badges
Best Seller
→ Green · trust
New Arrival
→ Orange · urgency
Featured
→ Purple · editorial
✓ FSSAI
→ Outlined · certified
V2

10 - Iteration Roadmap

Good design ships.
Great design iterates.

This isn't a list of what went wrong. It's a prioritised brief for what comes next. Every product designer worth hiring knows that v1 is the start of a conversation, not the end.

P0
Critical - Fix Before Launch
Move certifications above the fold
Add a compact trust strip directly below the hero CTA. Research shows 15-25% conversion lift for organic D2C brands.
Default checkout to Standard shipping
Pre-selecting Priority (+₹20) inflates perceived cost. Make the upgrade a clear opt-in, not the default state.
Clarify cart checkbox behaviour
Add "Uncheck to save for later" micro-copy, or revert to standard cart. No UX pattern should silently fail.
Show total inside payment CTA
"Proceed to Payment - ₹633" confirms the amount before the tap. Eliminates a common hesitation moment.
P1
High Impact - Next Sprint
Unify CTA colour system
Replace orange '+cart' buttons with brand green on mobile. One primary CTA colour. No exceptions.
Make flavour thumbnails interactive
Tapping a colour swatch on PDP should swap the hero image. Currently they appear decorative - a missed affordance.
Subscribe & Save in rupees
"Save ₹60/month" outperforms "Save 10%" in D2C subscription conversion. Concrete numbers beat percentages.
Show all categories on desktop
Carousel arrows on a desktop viewport suggest hidden content and reduce engagement. Full row on wide screens.
Direct cart add on web listings
'View Details' CTA removes a conversion step for decisive buyers. Add '+Cart' directly on product listing cards.
P2
Improvement - Backlog
Blog category tags + email capture
Add Nutrition/Recipes/Lifestyle tags for self-segmentation. Email capture adjacent to blog converts traffic to owned audience.
Vary testimonial star ratings
Identical 4.5-star ratings across all reviews reduces believability. Varied, authentic social proof converts better.
Login CTA refinement
The house icon on 'Continue' is metaphorically ambiguous. Replace with arrow or explicit 'Get OTP' label.
Fix Explore tile grid
Originals tile should be a full-width banner above a consistent grid - not an irregular double-width cell.
Performance optimisation
Isometric farm illustration → SVG or Lottie. Maintains visual quality while dramatically improving page load speed.

11 - Success Metrics

Design decisions
without outcomes
are decoration.

Add-to-Cart Rate
Benchmark: 3–5%
% of PDP views resulting in cart add. Directly measures product page clarity and CTA effectiveness.
Cart → Checkout Rate
Target: >60%
Lower rates indicate cart UX friction - checkboxes, unclear totals, or confusing selection patterns.
Checkout Completion
Target: >75%
% of initiated checkouts that complete payment. Validates shipping UX and cost transparency design.
Subscription Opt-in Rate
Industry: 8–15%
% of PDP sessions activating Subscribe & Save. Measures LTV impact of subscription toggle placement and copy.
Cert Strip Scroll Depth
A/B Test Signal
% of web visitors who scroll to certifications. Informs optimal placement for trust signal - pre/post hero.
Reorder Frequency
7 Day & 30-Day Interval
Average days between repeat orders on mobile. Measures the effectiveness of the Reorder tab in driving retention behaviour.
✦

12 - Designer Reflection

Design must be
convertible,
not just visible.

Designing Soullylush reinforced a core belief: a beautiful e-commerce interface that doesn't guide the user to 'Add to Cart' is a failed design - regardless of how polished it looks.

This project deepened my appreciation for category-specific design constraints. Organic grocery is not fashion e-commerce or SaaS. The purchase psychology is slower, the trust barriers are higher, and the emotional payoff is long-term health, not instant gratification. Every section had to work harder to answer one implicit question: "Can I trust this brand with my family's health?"

The dual-platform challenge was equally instructive. The web homepage needed to tell a complete brand story. The mobile app assumed higher intent - the user wants to complete a task, not read a mission statement. Designing for these two mindsets simultaneously, while maintaining visual and behavioural coherence, required continuous calibration between storytelling and efficiency.

Design Philosophy
"Colour, typography, and visual style are not decoration - they create the emotional context within which a user decides whether to trust a brand."
Every green on Soullylush communicates health, nature, and permission. Every orange communicates harvest energy and urgency.
The Soullylush design isn't a skin over a product catalogue. It is the brand's first - and sometimes only - conversation with every customer.
What I would do differently
01
Run a quick comprehension test on the checkbox cart with users unfamiliar with the physical-list metaphor - validating the mental model early, rather than leaning on micro-copy to close the gap after the fact.
02
Instrument scroll-depth analytics before launch, not after - so the certification placement tradeoff could be validated with real data from day one instead of waiting for a next revision.
03
Define CTA colour rules in the design system before screen design - not discovered as an inconsistency after.
JP

Jayaprakash · UI/UX Designer · Visual Designer

Let's build the
next great product
together.

3 years of product design across D2C, SaaS, branding, and editorial. Based in Chennai. Available with 90-day notice.

View Full Portfolio ↗ Get in Touch →
D2C Product Design SaaS UI/UX Design Systems Brand Identity Chennai · Remote

© 2025 Jayaprakash · Product | UX Designer · Case study