Role - UX/UI Designer
Timeline - 3 months
Tools - Figma, Photoshop, & Illustrator
Project Scope - Mobile App + Web-Based Admin Dashboard
Industry - Health & Wellness
Collaboration - Individual
CASE STUDY
Keramruth – Virgin Coconut Oil Sales App
Project use case
Keramruth sells organic Virgin Coconut Oil and related products through a five-tier distributor network — Area Development Officer, Master Distributor, Super Distributor, Distributor, and Customer. Product moves down through that chain; orders move back up it. Before this project, the entire network ran on WhatsApp groups.
Keramruth came to InnogenX directly, asking for a mobile app and an admin dashboard that could bring ordering, stock, and target tracking for all five roles into one system.
Problem Statement
A five-tier network coordinated over WhatsApp has no real visibility. Nobody can see who's holding how much stock, who's on track for their monthly target, or where an order actually is once it's placed. Keramruth needed one system that could serve five different roles — each with a different relationship to stock, targets, and the people above and below them — without becoming five different products.
- No visibility into how much stock each tier is actually holding at any point.
- No reliable way to see who's on pace for their monthly target and who's falling behind.
- No structured way to place, track, or confirm an order once it left WhatsApp.
- No system built to handle five distinct roles at once, each needing something different.
Goals
- Give every tier visibility into stock and target progress — not just their own, but everyone in their branch below them.
- Bring ordering into a single flow, built for upward, hierarchical buying rather than a typical one-to-one storefront.
- Keep it usable for a distributor network that had never worked inside a dedicated business app before.
- Support Keramruth's plan to grow the network without adding more manual coordination.
Process
Five roles, one flow — designed by tracing how stock and orders actually move before any screen was drawn.
Define
Understood from the client that their five-tier distributor network needed to come off WhatsApp and into one app, with visibility and target tracking for every role.
Research
No formal research phase; the hierarchy itself was learned directly through conversation with the client rather than from studying comparable apps.
Ideate
Worked out how stock, targets, and orders should move through the hierarchy — top to bottom for stock, bottom to top for orders — before touching any individual screen.
Prototype & Testing
Shared work-in-progress with the client throughout rather than presenting once at the end. Direction shifted more than once (see Challenges), and reviewing along the way with the client caught that early instead of after a full build.
Visual Design
Sketched roughly 10–15 key screens low-fidelity, then built the full UI in Figma — including the target/stock dashboards and the progress-ring status system. Around 210 screens across the mobile app and admin dashboard once every role, state, and variant is counted (closer to 70–90 unique layouts underneath that).
Structure
Broke the flow down role by role, deciding what each tier needed to see and building the drill-down navigation to handle visibility cascading down multiple levels.
Research
There wasn't a formal research phase here — the discovery was direct. Keramruth's team explained how their five-tier network already operated; the goal was moving it off WhatsApp, not redesigning how it worked. I didn't study other MLM or distributor apps as reference, since Keramruth's structure — with visibility cascading down multiple tiers, not just one — didn't map cleanly onto that category. Where I did borrow a pattern was ordering: I referenced standard e-commerce flows (Amazon, Flipkart) for product selection, order preview, and confirmation, then adapted them for upward B2B ordering instead of a typical checkout.
Challenges
I initially scoped too small. I designed the Distributor → Customer relationship first, treating it as the core transaction. The client then explained that the full five-tier hierarchy needed to live inside one app — not just the bottom layer. That meant reworking the flow so it could hold five roles' worth of complexity without feeling like five separate apps stitched together.
The client was building their first app. Direction shifted more than once as they figured out what they actually needed. Rather than treat that as scope creep, I explained how each version of the flow worked until it made sense to them, stayed available for questions as they came up, and briefed their developer directly during handoff so the reasoning behind the design wasn't lost in translation.
Payment turned out to be the wrong assumption. I designed online payment first, the way most e-commerce apps default to it. The client asked to keep it simple and go with Cash on Delivery only — a reminder that the obvious e-commerce answer isn't always the right one for a business that runs on trust between tiers rather than anonymous transactions.
Competitor Analysis
Worth being direct about this one: I didn't run a formal competitor analysis. Keramruth's hierarchy doesn't have a clean comparison point — it's not a standard e-commerce app, and it's not a standard MLM app either. The one deliberate reference was e-commerce ordering patterns, used for the parts of the flow that did have a direct parallel, not for the hierarchy itself.
Outcome
The app is live on the Play Store and in active use. The client relationship continued past launch — a handful of questions came up afterward, I walked them through it, and there weren't any major issues. I don't have adoption or revenue numbers to report, and I'd rather leave this section honest than fill it with figures I can't back up.
What this project actually taught me had less to do with any single screen and more to do with managing a first-time client through a moving target — explaining a genuinely complex, nested system clearly enough that the client, their developer, and eventually the distributors themselves could all work with it.
User Flow
Product moves down the chain — Area Development Officer to Master Distributor to Super Distributor to Distributor to Customer — while every order moves back up it, landing in the seller's queue to pack, ship, and mark as sent.
Final Design
The final product splits into two coordinated pieces. The mobile app gives every role — from Area Development Officer down to Customer — a dashboard showing their current stock, their monthly target, and the people below them in the hierarchy. A circular progress ring with red/yellow/green coding shows target status at a glance, useful for anyone managing more than a handful of people underneath them. Tapping into a role (Super Distributors, Distributors, Customers) drills into that tier's numbers, since a flat member list stopped being usable once visibility had to cascade down multiple levels rather than just one.
The web-based admin dashboard gives the Area Development Officer tier full oversight — managing members, products, and reports across the whole network from one place.
Ordering follows a familiar pattern — select product and quantity, preview the order, confirm — adapted so a confirmed order lands directly in the seller's queue above it in the hierarchy, ready to pack and send.
Case Studys
Designed an AR/VR app that lets users visualize objects and guides them step-by-step through assembly. Kept the interface consistent and visually clean across mobile, web app, and landing page — then converted the Figma designs into a live site in Webflow to ship the marketing site myself.
Built the interface for a desktop system
Built the interface for a desktop system managing end-to-end PC and laptop rental operations — device tracking, client records, accounting, and quotations in one place. The result: a fully organized system where staff can check device location, pending rentals, and component details in seconds.
A full UX case study built from the ground up — designing a platform where pet owners can find trusted caretakers while traveling, track their pet's emotional state through a smartwatch, and stay connected through a social feed. Covered the complete process: research, personas, user flows, wireframes, and prototyping.
Sammer....
Sammer.....