App Redesign Case Study

Mangal Materials

E-Commerce App Redesign for Spiritual Puja Rituals

ReactFirebaseUX ResearchMobile UI

MANGAL MATERIALS HUB

SYSTEM ONLINE // V1.0.4100% SECURE SSL

About the Project

Mangal Materials is an offline-first spiritual e-commerce application. It delivers a curated ecosystem providing deity idols, custom puja packages, and ritual items directly to users. The redesign prioritizes tactile interface elements, simplified navigation trees, and accessibility standards.

The Core Challenge

The initial mobile experience was plagued by excessive catalog fragmentation, complicated ritual-selection screens, and a multi-step checkout funnel that alienated older non-technical user demographics. The redesign targeted cognitive-load reduction and WCAG contrast conformance.

73%

PUJA orders fail due to confusing multi-item ritual package grids.

99.8%

Search speed lift through elastic indexing and dynamic swatches.

42%

Cart abandonment drop under our unified 1-click package checkouts.

Information Architecture

Structured Sitemap tree

Puja Package Catalog

Ritual Planner
Deity Selection
Custom Material Bundles

Tactile Cart

1-Click checkout
Scheduled delivery settings
Priest booking addon

User Profiles

Family puja logs
Holy event alerts
Orders history

Interaction Blueprint

User Flow & Wireframe layout

Tactile Package Configurator

A clean, responsive flow where users select their upcoming festival, and all necessary elements are bundled automatically.

Content Canvas Placeholder

Accessible checkout funnel

Unified single-page card checkout with highly visible text contrast indices, large touch target fields, and micro-instructions.

Content Canvas Placeholder

Collaborative Ideation

Virtual Whiteboard & Retrospectives

Verify API queries latency & structure offline fallback sync.

@tech_lead

Maximize font contrast score to WCAG 2.1 AA parameters.

@ux_designer

Simplify ritual configs down to direct 1-click packages.

@product_owner

Test responsive layouts on physical mobile targets first.

@qa_tester

Premium Aesthetics

High-fidelity final UI designs

Emerald Brand Interface

A breathtaking dark emerald-green and mint layout. Utilizes soft card gradients and organic visual structures.

Simplified Ritual Bundler

Bespoke checkout interfaces enabling users to instantly configure complex religious kits in two taps.

Visual Identity

Color Palette & Typography

Unified Color Palette

Deep Emerald

#081F16

Primary brand background color instilling deep peace and holiness.

Tactile Mint

#00A37B

Interactive brand accent color highlighting CTA actions and cards.

Pure Sand

#F3EFE0

Light text contrast color echoing spiritual sand and clay assets.

Typography scale

H1 / Heading Light

Manrope Light - 45px / 1.1

H3 / Subtitle Regular

Manrope Regular - 18px / 1.5

Body / Description Light

Manrope Light - 14px / 1.8