WEEK 01
Discovery & Customer Journey
Reviewed usability issues in the original Google Apps Script order form. Mapped the main customer shopping journey across four steps: Find → Choose → Order → Track.
SWAGATHAM
Bringing India
Home.
One business, two problems: making grocery shopping easier for customers and everyday store management simpler for the owner. I designed the online shop and helped organize daily order handling.
THE SHOPPING EXPERIENCE
02/THE TRANSFORMATION
From a form to a storefront.
Swagatham originally relied on a single Google Apps Script order form. Customers navigated hundreds of unorganized items on one continuous page, creating a slow and cumbersome purchasing experience.
Simultaneously, store owner Vidhya handled frequent WhatsApp inquiries and compiled orders manually while balancing a full-time job.
This project addressed both sides of the business: designing an easy online shop for customers and simplifying daily store management for the owner.
02 · BEFORE / AFTER COMPARISON
BEFORE
A single, continuous order form
Customers could browse and select items, but the entire catalog was compiled into one continuous list, with customer details and order submission located at the very bottom.
AFTER
A dedicated digital storefront
I organized the catalog into clear grocery categories, dedicated product pages, simple guest checkout with cash on delivery, and easy order tracking.
Product PagesAisle categorization & dedicated product pages
Guest CheckoutQuick ordering without requiring an account
Delivery ZonesDefined local delivery radius and cash on delivery
Order TrackingSelf-service status tracking with order tokens
PROJECT TIMELINE
Five weeks from audit to storefront.
Five weeks of design and prototyping, moving from a single order form to a live online store that is easy to browse and simple to run.
Workstream / Focus
Week 01Audit & Journey
Week 02IA & Brand Start
Week 03Brand & UI Start
Week 04Storefront & Build
Week 05Review & Delivery
Existing Experience Audit & Customer Journey
Audited the original Google Apps Script order form and mapped the primary customer journey: Find → Choose → Order → Track.
Catalog & Information Architecture
Organized hundreds of groceries into aisles (Rice, Spices, Flours, Staples) and search structure.
Brand Identity & Visual System
Explored brand marks, designed the Ganesha-inspired 'S' logo, and created a warm, culturally familiar visual identity.
Storefront & Checkout UX
Designed product detail cards, fresh produce pre-orders, local delivery zones, and guest checkout.
Implementation Support & Operational Walkthroughs
Assisted with frontend implementation and walked through everyday store operations with owner Vidhya.
Weekly Milestones
W1Customer journey mapped
W2Information architecture defined
W3Brand identity finalized
W4Storefront UX reviewed
W5Storefront delivered
WEEK 02
Catalog Architecture & Brand Exploration
Reorganized the flat product list into familiar Indian grocery aisles (Rice, Flours, Spices, Staples). Began initial logo explorations inspired by Indian cultural symbols.
WEEK 03
Brand Finalization & Storefront Layouts
Finalized the Ganesha-inspired 'S' logo and warm color palette. Began designing product cards, clear pack sizes, and mobile navigation.
WEEK 04
Checkout Flows & Technical Prototyping
Designed the guest checkout with cash on delivery, weekly fresh produce pre-order flow, and local delivery zone schedules. Initiated implementation support for frontend build.
WEEK 05
Operational Review & Storefront Delivery
Added self-service order tracking. Walked through real ordering and pre-order scenarios with store owner Vidhya, preparing the store for launch at swagatham.de.
03/INFORMATION ARCHITECTURE
Structuring the shopping journey.
I organized the store around clear grocery categories and a simple four-step customer journey: Find → Choose → Order → Track.
Swagatham Public Storefront
swagatham.de · Customer Entry Point
01 · GROUP
Browse
Product discovery and category navigation
HomepagePAGE
Featured groceries, delivery coverage, and current offers
Grocery categoriesIN-PAGE
Culturally familiar aisles: Rice, Flours, Spices, Snacks & Staples
Search and resultsIN-PAGE
Keyword search with instant product availability
02 · GROUP
Products
Product evaluation, pack sizes, and inventory
Product listingsPAGE
Category catalog with pricing, stock indicators, and quick-add actions
Product detailsPAGE
Item specifications, ingredients, and inventory status
Pack sizes, prices and stockIN-PAGE
Pack weight selector with corresponding price adjustments
Fresh produce pre-ordersPAGE
Advance reservations for delivery-day seasonal produce
03 · GROUP
Order
Cart validation and order placement
BasketIN-PAGE
Item summary, quantity selectors, and minimum order check
Guest checkoutPAGE
Simple address entry without requiring an account
Local delivery informationIN-PAGE
Covered delivery towns and cash-on-delivery details
04 · GROUP
Support
Post-purchase tracking and customer support
Order trackingPAGE
Order status lookup using unique tracking tokens
Product requestsPAGE
Request form for items not currently in the catalog
CUSTOMER JOURNEYFind → Choose → Order → Track
STEP 01
Find products→
Search for ingredients or navigate familiar grocery aisles.
STEP 02
Choose products→
Compare pack sizes, check stock, and see prices before adding items to the cart.
STEP 03
Place an order→
Order with cash on delivery without needing to create an account.
STEP 04
Track an order✓
Look up delivery and packing status using a unique order token.
Primary storefront architecture and customer shopping journey.
04/BRAND & VISUAL LANGUAGE
An identity that feels like home.
Swagatham translates to 'welcome.' The store owner needed an identity that felt warm and familiar to Indian families living in Germany.
I designed a brand identity around a Ganesha-inspired 'S' logo, paired with warm colors and the tagline, “Bringing India Home.”
SWAGATHAM / THE FINAL IDENTITYBringing India Home.
OFFICIAL BRAND TAGLINE
“Bringing India Home.”
A simple promise: helping Indian families in Germany find familiar regional groceries and everyday ingredients.
01 / EXPLORATION
Brand exploration
Explored over 50 logo sketches to balance traditional cultural motifs with clear readability on digital screens.
02 / FINAL DIRECTION
Final identity
A Ganesha-inspired silhouette within the letter 'S'—providing a clear, recognizable mark for the website and packaging.
Brand colors
05 / CUSTOMER STOREFRONTA familiar shop.
A familiar shop.
An easier way to shop.
From finding groceries to checking delivery status, three core design decisions made shopping straightforward.
DECISION 01
Making products easier to find
Context & Problem: The original Google Apps Script form listed hundreds of groceries in one long list without categories or search, making it slow to find specific items.
Design Intervention: Grouped items into clear grocery categories (Rice, Flours, Whole Spices, Everyday Staples) and added keyword search with clear in-stock and out-of-stock indicators.
User Impact: Customers can quickly search or browse by category instead of scrolling through the entire catalog.
PRODUCT SPECIFICATIONS
Clear pricing, pack sizes, and stock availability.
Shoppers can compare pack sizes, check availability, and see total prices before adding items to their cart.
Stock AvailabilityClear badges showing if an item is in stock.Pack SizesEasy switching between weight options.Upfront PricingClear prices before heading to checkout.
DECISION 02
Keeping checkout simple
Context & Problem: Requiring customer accounts adds unnecessary friction for a local grocery store, while fresh weekly produce needed an easy way for customers to pre-order before stock arrives.
Design Intervention: Created a simple guest checkout asking only for name, address, and phone number with cash on delivery, alongside a dedicated pre-order page for weekly produce.
User Impact: Customers can order quickly without creating an account or remembering a password, and the owner can plan weekly produce orders in advance.
DECISION 03
Making delivery information and order tracking clear
Context & Problem: The owner received repeated WhatsApp messages from customers asking if their address was covered for delivery and when their order would arrive.
Design Intervention: Clearly listed covered delivery towns (Ulm, Neu-Ulm, Blaustein) and cash-on-delivery terms upfront, and added an order tracking page using unique order tokens.
User Impact: Customers can check delivery areas and look up their own order status anytime, reducing basic support questions for the owner.
06/BUSINESS MANAGEMENT
The other half of the business.
Behind every order was a store owner balancing deliveries, stock, and customer messages alongside a full-time job. Making shopping easier for customers was only half the job—the owner also needed a practical way to manage daily store operations.
OPERATION 01
Order packing & prep
Problem: Orders arrived through both spreadsheets and WhatsApp messages, requiring slow manual copying to make packing lists.
Design focus: Grouped orders into a single packing list to make packing boxes and preparing deliveries simpler.
OPERATION 02
Stock & fresh produce counts
Problem: Updating product stock and totaling fresh vegetable pre-orders required editing spreadsheets by hand.
Design focus: Made it easy to turn items in or out of stock and total up pre-orders before ordering from suppliers.
OPERATION 03
Delivery route coordination
Problem: Planning delivery stops across Ulm, Neu-Ulm, and Blaustein during evening hours required constant back-and-forth messaging.
Design focus: Organized orders by neighborhood to help plan efficient delivery routes and clearer drop-off times.
CONFIDENTIALITY NOTE
Internal management screens and business records are omitted to protect store privacy and business confidentiality.
07/TESTING & REFLECTION
Review, delivery, and next steps.
We reviewed key shopping and store tasks through walkthroughs with the store owner. Below is what was evaluated together, what launched at swagatham.de, and what should be tested next.
STAGE 01REVIEWED
What was reviewed
Reviewed key shopping and store tasks with the store owner—checking category structure, pack sizes, delivery areas, and produce pre-orders against real daily operations.
STAGE 02DELIVERED
What was delivered
The live store at swagatham.de, with organized grocery categories, product search, simple guest checkout with cash on delivery, and self-service order tracking.
STAGE 03NEXT STEPS
What still needs testing
Testing with more customers to observe their shopping experience, tracking checkout completion, and gathering feedback after deliveries.
My verified UX contributions
01
Information architecture & journey mapping
I mapped the end-to-end shopping journey (Find → Choose → Order → Track) and organized the catalog into clear grocery categories.
02
Interaction design & e-commerce flows
I designed product pages, pack-size selectors, stock badges, delivery area details, and a simple guest checkout.
03
Brand identity & visual system
I developed the brand identity, designed the Ganesha-inspired 'S' logo, and created the warm color palette to reflect Indian culture and hospitality.
04
Implementation support
I assisted with frontend implementation, prototyping interactive components and helping prepare the store for launch.
WHAT I LEARNED
Designing for two audiences: creating an easy, inviting shop for grocery customers while simplifying everyday order management for the owner.
This project showed that e-commerce design goes beyond the storefront itself. A store works best when it fits naturally into how the owner picks items, manages stock, and delivers orders alongside a full-time job. Good small-business design makes things easier on both sides of the counter.
Explore the live Swagatham storefront
Visit the live site to see the shopping experience firsthand.
A closer look
at Swagatham.
From searching for ingredients to home delivery. Explore the complete screens across desktop and mobile.
