Email:

Lets Connect

Email:

nairvinay2601@gmail,com

Lets Connect

2024

Vinay Nair, Vrushank

www.letstranzact.com

View Notion Document

2024

Vinay Nair, Vrushank

www.letstranzact.com

View Notion Document

TranZact Website Redesign: From Confusion to Conversion

About the Company

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

View Notion Document

About the Company

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

View Notion Document

About the Company

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

View Notion Document

Role

Senior Product Designer

[ OVERVIEW ]

"Breaking through the noise"

TranZact's feature-heavy page failed to communicate its value. Confused visitors bounced within seconds.

For TranZact, a SaaS platform built for MSME manufacturers, the website is far more than a digital storefront. It’s the brand’s first handshake with potential customers — often manufacturing owners and operations managers who are juggling inventory chaos, production delays, and operational inefficiencies.

[ tHE CHALLENGES ]

Fixing a Disconnected User Journey and Weak Value Proposition

TranZact's Website was part of the problem, not the solution. While SME owners battled daily operational fires, they were met with a confusing site buried under generic imagery and a disjointed journey. The core promise of relief was never delivered costing conversions instead of saving businesses. Another lead, lost.

1) Performance Metrics Revealed Critical Gaps:

Bounce rate: 68% (vs. 45% industry benchmark)
CTA engagement: Only 14% clicked "Book a Demo"
Scroll depth: 60% of visitors never reached the features section

2) Visual and Content Problems:

Overloaded interface with scattered messaging
Generic stock imagery that didn't resonate with manufacturing audience
Technical jargon overwhelming first-time visitor

3) Clarity and Usability Challenges:

Vague value proposition requiring extensive scrolling to understand
Fragmented storytelling without logical flow
Mobile-unfriendly design with disappearing CTAs

[ PROCESS ]

Rather than redesigning on assumptions, we implemented a comprehensive research methodology

Quantitative Analysis:

Analytics deep-dive using heatmaps and session replays
A/B testing of messaging variants
Performance benchmarking against industry standards

Qualitative Research:

Direct interviews with SME manufacturing owners
Operations manager surveys
User behavior pattern analysis

[Key Insights That Shaped Our Approach ]

Turning Research Into Strategy: The Key Learnings That Shaped Our Redesign Approach

Speed is Critical

Manufacturing decision-makers needed to understand value in under 5 seconds

Visual Communication Wins

Users processed illustrations 60,000x faster than text

ROI Proof Required Upfront:

Trust indicators needed prominent early placement

Plain Language Preferred:

Technical jargon created barriers rather than credibility

Make it easy to get started

Mobile-First Necessity:

Increasing mobile traffic demanded responsive optimization

Refreshing the User-Interface

Reinforce the free tier and detail other plans.

01-Interviewed SME users (supervisors, procurement, finance) from auto-component & machinery firms to test sign-up, feature discovery, and security trust.

We interviewed a mix of TranZact’s existing and potential SME users: plant supervisors, procurement officers, and finance staff from Indian auto-components and machinery firms. Tasks included sign-up flows, feature discovery, and security trust questions

01-Interviewed SME users (supervisors, procurement, finance) from auto-component & machinery firms to test sign-up, feature discovery, and security trust.

Rajesh, 34

Manufacturing Supervisor

“If your page proves it saves minutes on the floor—alerts, traceability, one‑click reorder—that’s real value in five seconds”

Rajesh, 34

Manufacturing Supervisor

“If your page proves it saves minutes on the floor—alerts, traceability, one‑click reorder—that’s real value in five seconds”

Sunita, 28

Accounts Assistant

The Website felt dated, there wasn’t enough real‑world feature proof to show how it helps with everyday tasks in seconds

Sunita, 28

Accounts Assistant

The Website felt dated, there wasn’t enough real‑world feature proof to show how it helps with everyday tasks in seconds

[ research & Ideation ]

1. Message Architecture: From Features to Benefits

How we managed to take the narrative from this

To This

2. Illustrating How TranZact Solves Key Pain Points

The Illustration Strategy

Instead of generic icons, we developed custom illustrations for each major feature that mirror real-world manufacturing processes.

Faster Comprehension
Visual processing advantage eliminates cognitive load

Faster Comprehension
Visual processing advantage eliminates cognitive load

Faster Comprehension
Visual processing advantage eliminates cognitive load

Reduced Ambiguity
Custom visuals show exactly how TranZact solves specific problems

Reduced Ambiguity
Custom visuals show exactly how TranZact solves specific problems

Reduced Ambiguity
Custom visuals show exactly how TranZact solves specific problems

Enhanced Recall
Users remember distinctive illustrations tied to functionality

Enhanced Recall
Users remember distinctive illustrations tied to functionality

Enhanced Recall
Users remember distinctive illustrations tied to functionality

Brand Differentiation:
Unique visual library distinguishes TranZact in crowded ERP market

Brand Differentiation:
Unique visual library distinguishes TranZact in crowded ERP market

Brand Differentiation:
Unique visual library distinguishes TranZact in crowded ERP market

3. Content Flow: Mirroring the Buyer's Journey

Strategic Narrative Structure:

Problem Recognition: Immediate pain point acknowledgment

Problem Recognition: Immediate pain point acknowledgment

Problem Recognition: Immediate pain point acknowledgment

Solution Introduction: Clear value proposition

Solution Introduction: Clear value proposition

Solution Introduction: Clear value proposition

Feature Demonstration: Visual proof of capability

Feature Demonstration: Visual proof of capability

Feature Demonstration: Visual proof of capability

Social Proof: Industry-specific credibility

Social Proof: Industry-specific credibility

Social Proof: Industry-specific credibility

04- User Flow

In redesigning the experience, We charted the end-to-end user journey, highlighting where guidance, transparency, and trust-building interventions could accelerate revenue growth.

[ Design Process ]

Behind the Scenes of Our Design Process

Phase 1: Wireframe Foundation 📂

Phase 1: Wireframe Foundation

Low-fidelity wireframes focused on content hierarchy

Low-fidelity wireframes focused on content hierarchy

Low-fidelity wireframes focused on content hierarchy

Rapid iteration without visual distraction

Rapid iteration without visual distraction

Rapid iteration without visual distraction

Phase 2: High-Fidelity Prototyping 📂

Phase 2: High-Fidelity Prototyping

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Finalised Wireframes :

Phase 3: Validation and Refinement 📂

Phase 3: Validation and Refinement

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

CTA placement optimization

CTA placement optimization

CTA placement optimization

Mobile usability testing

Mobile usability testing

Mobile usability testing

Phase 4: Technical Optimization

Performance Enhancements: 📂

Lazy loading implementation

Lazy loading implementation

Lazy loading implementation

Asset compression without quality loss

Asset compression without quality loss

Asset compression without quality loss

Sticky header CTA for persistent accessibility

Sticky header CTA for persistent accessibility

Sticky header CTA for persistent accessibility

Design Handoff and discussion with developers

Design Handoff and discussion with developers

Design Handoff and discussion with developers

Mobile-optimized touch targets

Mobile-optimized touch targets

Mobile-optimized touch targets

[ final SOLUTION ]

The new TranZact: Designed for Trust, built to Scale, focused on MSME success

[ impact ]

Numbers That Tell the Story (First 3 Months)

Demo Bookings:(Earlier- Baseline) Captured on HotJar

38%

Bounce Rate Reduced :(Earlier- 68%) Captured on HotJar

41%

Free Signups:(Earlier- Baseline) Captured on HotJar

52%

Higher Click‑through on Features Section:(Earlier- Na) Captured on HotJar

29%

User Feedback:

"We understood what you offer within seconds — that's why we booked a demo."

A collective Win!

Business Impact Overview:

Stronger brand positioning in manufacturing SaaS market
Improved sales team efficiency with higher-quality leads
Enhanced credibility through professional presentation

Business Impact Overview:

Stronger brand positioning in manufacturing SaaS market
Improved sales team efficiency with higher-quality leads
Enhanced credibility through professional presentation

Business Impact Overview:

Stronger brand positioning in manufacturing SaaS market
Improved sales team efficiency with higher-quality leads
Enhanced credibility through professional presentation

[ Key Success Factors ]

How We Turned Challenges into Wins

1. Research-First Approach

Deep user research prevented assumption-based design decisions and ensured solutions addressed real user needs.

2. Visual-First Communication

Custom illustrations transformed complex features into instantly understandable benefits.

3. Narrative Coherence

Structured storytelling guided users through a logical decision-making process.

4. Continuous Testing

A/B testing validated design decisions and messaging effectiveness.

What Would Have I done Differently?

Earlier User Testing

Deep user research prevented assumption-based design decisions and ensured solutions addressed real user needs.

Competitive Analysis

Deeper competitor research might have revealed additional differentiation opportunities

Content Strategy:

More systematic content audit could have streamlined messaging further

[ Conclusion ]

The transformation turned our landing page from a static "brochure" into a dynamic, conversion-oriented product showcase that continues to drive growth and establish TranZact as the trusted choice for MSME manufacturers.

Latest projects

Some of my other stuff

{

Website Design

}

7/13/24

Landing Page Revamp for TagMango

Web design & Web development

{

Mobile

}

7/13/24

Designing for Creator Monetization at SuperLink.io

Mobile Interface Design

{

Website Design

}

7/13/24

Landing Page Revamp for TagMango

Web design & Web development

{

Mobile

}

7/13/24

Designing for Creator Monetization at SuperLink.io

Mobile Interface Design

TranZact Website Redesign: From Confusion to Conversion

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

The TranZact landing page redesign turned a cluttered, generic interface into a strategic conversion engine. Using visual storytelling and data-driven insights, we built a cohesive experience that addresses MSME manufacturers’ pain points while highlighting TranZact’s unique value proposition.

[ OVERVIEW ]

"Breaking through the noise"

"Breaking through the noise"

"Breaking through the noise"

TranZact's feature-heavy page failed to communicate its value. Confused visitors bounced within seconds.

[ tHE CHALLENGES ]

Fixing a Disconnected User Journey and Weak Value Proposition

[ PROCESS ]

Rather than redesigning on assumptions, we implemented a comprehensive research methodology

[Key Insights That Shaped Our Approach ]

Turning Research Into Strategy: The Key Learnings That Shaped Our Redesign Approach

Speed is Critical

Speed is Critical

Speed is Critical

Visual Communication Wins

Visual Communication Wins

Visual Communication Wins

ROI Proof Required Upfront:

ROI Proof Required Upfront:

ROI Proof Required Upfront:

Plain Language Preferred:

Plain Language Preferred:

Plain Language Preferred:

Mobile-First Necessity:

Mobile-First Necessity:

Mobile-First Necessity:

Refreshing the User-Interface

Refreshing the User-Interface

Refreshing the User-Interface

Manufacturing Supervisor

Manufacturing Supervisor

Manufacturing Supervisor

Accounts Assistant

Accounts Assistant

Accounts Assistant

[ research & Ideation ]

1. Message Architecture: From Features to Benefits

1. Message Architecture: From Features to Benefits

How we managed to take the narrative from this

How we managed to take the narrative from this

To This

To This

2. Illustrating How TranZact Solves Key Pain Points

2. Illustrating How TranZact Solves Key Pain Points

3. Content Flow: Mirroring the Buyer's Journey

3. Content Flow: Mirroring the Buyer's Journey

04- User Flow

04- User Flow

[ Design Process ]

Behind the Scenes of Our Design Process

Phase 1: Wireframe Foundation 📂

Phase 1: Wireframe Foundation

Low-fidelity wireframes focused on content hierarchy

Low-fidelity wireframes focused on content hierarchy

Low-fidelity wireframes focused on content hierarchy

Rapid iteration without visual distraction

Rapid iteration without visual distraction

Rapid iteration without visual distraction

Phase 2: High-Fidelity Prototyping 📂

Phase 2: High-Fidelity Prototyping

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

User Task Mapping – Structured wireframes around key SME tasks like sign-up, feature discovery, and transaction workflows.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Clarity & Information Flow – Focused on simplifying complex product information into digestible sections for easier comprehension.

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Early Validation – Reviewed wireframes with stakeholders and SME users to align expectations before moving into visual design

Phase 3: Validation and Refinement 📂

Phase 3: Validation and Refinement

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

A/B testing of headline variants (benefit-led outperformed feature-led by 27%)

CTA placement optimization

CTA placement optimization