Air quality is invisible. Trust isn't. The hardest part wasn't designing the interface — it was making an invisible problem feel real enough to act on.
My Role
Full-Stack Designer
Scope
Website · Motion · IA · UI System
Timeline
Feb – Jun 2023 · 4 months
Team
Angad Dariyani · Luxveda Dev · Junior Designer
Status
● Live & Shipped
The problem
Air quality is invisible. The harder problem is that "technically impressive" is exactly the wrong place to start with a buyer who doesn't yet believe they have a problem.
What I did
Website redesign, companion app IA, motion language, and industrial design for the HIVE — all as one coherent design system across a 4-month engagement.
What changed
Three distinct audiences (operators, investors, engineers) served by one entry point. Launched within 4 months. The system is live and in production.
01 — Problem
Build credibility with no conventional proof
The brief wasn't a UI problem. It was a belief problem. Air quality is invisible — people don't see it, don't feel it, and rarely think about it until something goes wrong. Praan builds filterless air purifiers for factories and large industrial spaces. Technically impressive — but that's the wrong place to start with a buyer who doesn't yet believe they have a problem worth solving.
"How do you make people care about something they can't see — and then trust a solution they can't fully understand?"
The question that shaped every major decision in this project
The challenge wasn't simplifying the technology — it was making it believable across three audiences: factory operators who needed compliance reassurance, investors who needed a credible business, and engineers who needed technical depth. One digital ecosystem — website, motion language, product experience — had to carry all of that, without trying to speak to everyone at once.
02 — Key Constraint
A price point that demands restraint
An aspirational price for a product category with no established mental model in India — the website couldn't just explain Praan. It had to earn the right to ask for that much.
⚡
The binding constraint
No filter system. No established category. No existing Indian mental model for ₹80,000 air purification. The website couldn't justify the price — it had to earn the right to charge it. Restraint wasn't a stylistic choice. It was the only credible one.
Target users 35–55 — low IoT literacy, onboarding had to be zero-effortAn aspirational price point — digital presence must match hardware credibilityNew product category in India — no existing mental model to build onApp + website must share a coherent visual and motion language
03 — Key Decision
Explain the invisible with motion
The filterless mechanism — removing particulates using electrostatic fields, without a physical filter — is genuinely counterintuitive. "No filter" sounds like a claim that needs to be earned. Static photography proves the device exists; it proves nothing about how it works.
⚡How do you explain a mechanism that works invisibly — static photography or custom motion?
What we chose
Custom filterless technology animation as the primary explanation mechanism. One 12-second loop replaced approximately 200 words of technical copy. Photography and written specs were repositioned to a supporting layer below the fold.
Motion isn't a stylistic choice here. It's the only format that closes the proof gap. A 12-second animation lets a sceptical buyer watch the mechanism operate and arrive at their own conclusion — that shift from persuasion to demonstration changed the credibility pathway entirely.
04 — Solution
One ecosystem, three audiences
The website, motion language, and HIVE product experience were designed as one system — not three separate deliverables. The website persuades the prospect; the HIVE app reassures the owner day-to-day; the motion language connects both and makes them feel like the same brand at different distances.
"The homepage leads with outcome, not specification — 'Make your factory healthier and safer today' before any technical detail.""The homepage leads with outcome, not specification — 'Make your factory healthier and safer today' before any technical detail."
Filterless technology — electrostatic purification with no physical filter
05 — Impact
Three audiences, one entry point
What changed
Three audiences. One entry point. No one asked to choose.
Operators, investors, and engineers enter the same narrative and find their depth without being routed or segmented at arrival. One coherent narrative starting with the universal outcome — cleaner air, healthier spaces — makes deeper content available to whoever wants it.
This was a zero-to-one engagement — no baseline analytics existed at the time of the redesign. The outcomes are structural design decisions and measurable system changes: a 12-second animation replaced ~200 words of technical copy, and the full digital ecosystem shipped live within four months.
—A
Brief & Problem
The brief was a website redesign. The actual problem was making an invisible phenomenon feel real enough to pay a hefty price.
The brief wasn't a UI problem. It was a belief problem. Air quality is invisible — people don't see it, don't feel it, and rarely think about it until something is already wrong. Praan builds patent-pending, filterless air purification technology deployed across factories and large industrial spaces. Technically, it's impressive. But technically impressive is exactly the wrong place to start with a buyer who doesn't yet believe they have a problem worth solving.
"How do you make people care about something they can't see — and then trust a solution they can't fully understand?"
The question that shaped every major decision in this project
The design challenge wasn't simplifying deep tech — it was making it aspirational, relatable, and believable across three very different audiences: factory operators who needed compliance reassurance, investors who needed to see a credible business, and engineers who needed technical confidence. A single digital ecosystem — website, motion language, and product experience — had to carry all of that simultaneously, without collapsing under the weight of trying to speak to everyone.
Context & Team
I joined Praan in February 2023, working directly under the founder for four months. The brief started as a website redesign — but quickly expanded to cover everything the brand touched digitally: information architecture, content hierarchy, UI design, motion language, and visual storytelling for investors and stakeholders. I also mentored a product design intern throughout.
Design — Manav Hemnani
Full-Stack Designer
Led website redesign end-to-end — IA, content hierarchy, UI system, motion language, and design documentation. Owned the visual storytelling for investor and stakeholder communication. Mentored a junior designer on digital asset production.
Engineering — Praan + Luxveda
Embed Engineers + External Dev
Praan's embedded systems engineers handled the device and data layer; Luxveda, an external development studio, implemented the digital experience. Engineering constraints — platform architecture, sensor data integration, real-time state management — directly shaped several UI decisions across iterations.
Direction — Founder
Angad Dariyani
Product vision and sign-off came directly from Angad — no PM layer. This meant faster decisions and higher trust, but also higher stakes: what I directed and created was shipped as proposed, with the founder's full confidence behind it.
Working without a PM layer changed how decisions were made. Every call — IA structure, motion direction, content hierarchy — was trusted outright. Clear iteration loops with the founder made the process tight. Engineering changes and shifting requirements required real-time pivots rather than formal requests.
—B
Scope & Constraints
End-to-end scope across four months — website, motion system, IA, UI — all constrained by a price point with no category precedent.
Target users 35–55 — low IoT literacy, onboarding had to be zero-effortAt a price point — digital presence must match hardware credibilityNew product category in India — no existing mental model to build onApp + website must share a coherent visual and motion language
At an aspirational price for a product category with no established mental model in India — the website couldn't just explain Praan. Every decision came back to one question: does this feel like a brand that deserves this, or one still trying to justify it? That ruled out feature density, promotional copy, and anything that tried too hard. Restraint wasn't a stylistic choice. It was the only credible one.
—C
Process & What Didn't Work
Two directions abandoned — spec-density and audience segmentation both failed for the same reason: they prioritised the brand's need to demonstrate thoroughness over the visitor's need to feel something first.
Praan website — pre-engagement state. Spec-dense hero, audience-agnostic navigation, and no clear content hierarchy between technical and commercial depth.
The pre-engagement site led with product specifications — PM2.5 filtration percentages, airflow volumes, certification badges — before establishing any reason for a visitor to care. Navigation was flat: Home, About, Technology, News, Careers, Contact. There was no hierarchy between commercial and technical depth, and no single audience owned the primary narrative. Every page tried to speak to everyone simultaneously. The result was a site that felt thorough and trusted nothing.
01
Spec-Dense Technology Page
Content hierarchy — PM2.5 %, certifications, airflow volumes as primary information layer
Abandoned
Read like a datasheet — operators needed confidence, not a component list
02
Audience-Segmented Navigation
Structural IA — separate content tracks for operators, investors, and engineers on entry
Abandoned
Three front doors signals brand immaturity — an audience selector is a liability at seed stage
↓
Unified IA — Outcome First, Depth on Demand
Single confident narrative · technical and commercial depth nested, never gated, never leading
Shipped
One front door. Three audiences. Different depths.
Both directions failed for the same reason: they prioritised the brand's need to prove itself over the visitor's need to understand something first. A spec-heavy page reads as defensive. An audience selector reads as unsure. The alternative was harder to design but more confident to read: one narrative starting with the outcome — cleaner air, healthier spaces — with depth available for whoever wanted it. Operators, investors, and engineers all came through the same front door. They left by different routes. None of them were asked to declare who they were at the entry.
—D
All Key Decisions
Three decisions that determined how Praan communicates credibility across three audiences — each resolved through the same lens: demonstrate, don't persuade.
▶How do you explain a mechanism that works invisibly — static photography or custom motion?
The HIVE — Praan's consumer indoor air purifier. The animation demonstrates the same design language as every other surface: restraint, material honesty, and a form that communicates quiet competence rather than technical complexity.
Options considered
High-resolution product photography — device in situ, lifestyle contexts
Side-by-side comparison diagrams — before/after PM2.5 readings with filter vs filterless
Text-heavy technical section — filterless mechanism explained through copy and diagrams
Custom motion animation — show the mechanism working in real time, 10–15 seconds
What we chose
Custom filterless technology animation as the primary explanation mechanism
One 12-second loop replaced approximately 200 words of technical copy
Photography and written specs repositioned to supporting layer below the fold
Why: 'No filter' sounds like a claim that needs earning. Static photography proves the device exists — not how it works. A 12-second animation lets a sceptical buyer watch the mechanism and reach their own conclusion. That shift — from persuasion to demonstration — changed everything. Motion here isn't a style choice. It's the only format that closes the gap.
⚡Website hero: lead with product specifications or lead with human outcome?
Lifestyle-forward: family imagery, clean home feeling
Problem-forward: Delhi pollution data, health risk framing
Outcome-forward: the result, simply stated
What we chose
Outcome-forward hero — the result, not the mechanism
Technical specs present but never leading
Trust built through restraint, not feature density
Why: At high price points, the customer has already decided air quality matters. The website's job isn't to justify the problem — it's to make them trust Praan as the answer. Leading with specs reads as defensive. Restraint at this price signals confidence.
⚡Do you structure the technology storytelling as a series of discoveries the operator makes (pulling them deeper through intrigue) or as a comprehensive spec sheet they need to evaluate (pushing information at them)?
Options considered
Spec-sheet checklist: nine equal-weight benefits presented as feature list
Sequential discovery: lead with filterless animation (curiosity hook), then reveal how it cascades into operational benefits
Narrative funnel: problem → solution → impact, each layer building on the last
What we chose
Narrative pull — animation as entry point, each benefit unfolds as a consequence
Trust through discovery — operator understands *why* benefits exist, not just that they do
Why: A spec sheet answers "Does this meet my needs?" but doesn't create engagement. The animation captures attention. Once curious, each benefit becomes a revelation: "Oh, *that's* why no maintenance cost — no filters." Trust comes from understanding the logic, not from being handed a list.
—E
The Build
Website, motion language, and HIVE app designed as one system — same visual principles, different distances from the hardware.
The HIVE in Fusion 360 — the industrial design ran in parallel with the digital ecosystem. The same principles governed both surfaces: material restraint, quiet competence, nothing that needed to justify itself.
The website, motion language, and HIVE app were designed as one system — not three separate deliverables. The website earns trust. The app maintains it day-to-day. The motion language connects both and makes them feel like the same brand at any distance. The principles that shaped the website — outcome before specification, depth on demand — carried into the app's home screen and the product animation. A customer moving from the website to the app encounters the same feeling: unhurried, confident, technically precise — but only once trust is already established.
The website homepage leads with outcome, not specification — "Make your factory healthier and safer today" before any technical detail. The MK II cluster is the visual anchor; trust badges and client logos follow below the fold.The technology page introduces complexity only after trust is established. Each feature is anchored by a visual model — the device, the airflow diagram, the compliance scenario — so the specification never floats without context.The filterless technology animation — used across the website and marketing surface to explain a patent-pending mechanism without text. Motion replaces technical copy where the mechanism is complex and the user's patience is limited.
—F
Reflection
What worked
Working directly under a founder — no approval layers — created real ownership. Every decision was trusted and shipped as proposed. That sharpens judgment fast. Iteration loops were tight enough to move quickly and flexible enough to absorb real engineering changes. I'd work this way again for any early-stage product.
What I'd change in V2
The hardest part was reviewing the work through lenses that weren't mine. Investors, engineers, and factory operators all read credibility differently. In a fast-moving founder-led engagement, there wasn't always time to shift between them deeply. Next time, I'd build lighter check-ins at each milestone rather than waiting for full reviews. Designing for multiple audiences in parallel needs more frequent reality checks than designing for one.
Making complex technology legible is a trust problem, not a simplification problem. People don't need less information — they need it at the right moment, in the right order. Ambient status first, detail on demand. That pattern applies to any IoT, health, or environmental product caught between completeness and clarity.
