#derma
essentials
Hiver – Omnichannel Inbox Redesign
Hiver needed a clearer marketing experience to communicate product value faster and reduce
friction between product discovery and conversion.
This redesign focuses on improving information hierarchy, visual clarity, and trust signals so visitors
can quickly understand the shared inbox workflow and evaluate the product with less cognitive effort.
PROJECT DURATION
4 Days
ROLE
RESPONSIBILITIES
UI Designer
UX Audit, Information Architecture,
Landing Page Strategy, Visual Design,
Conversion-Focused UI Design
PROBLEM
The existing Omnichannel Inbox page lacked clear hierarchy and visual prominence, making it
harder for visitors to quickly
grasp what the product does.
For decision-makers like CTOs, Product Leaders, and Operations teams, this meant higher cognitive effort before understanding the value proposition — increasing
the risk of early drop-off.
GOAL
Design a conversion-led landing page experience that:
-
Communicates value within seconds
-
Reduces visual and cognitive overload
-
Strengthens trust through clearer proof and structure
-
Aligns with Hiver’s brand while modernizing layout flow
EXPECTED IMPACT
-
Faster comprehension of product value within the first scroll
-
Clearer differentiation of Hiver’s key benefits and features
-
Improved visual hierarchy supporting stronger conversion
-
Increased CTA visibility across the scroll journey
-
Stronger trust perception through improved testimonials
SCOPE
Responsive landing page (Mobile+Web)
Use the sections below to navigate through the case study quickly.
Understanding where users slow down.
Before redesigning the Omnichannel Inbox page, I audited the existing experience to understand where users slowed down,
lost clarity, or missed key decision cues. The goal was to identify friction points affecting comprehension and conversion.
KEY OBSERVATIONS
01
The hero section does not clearly surface the core differentiator or primary benefit
02
Value proposition lacks clear hierarchy, making it harder for decision-makers to quickly understand product differentiation.
03
Feature sections feel repetitive due to limited visual variation leading to the visual flow being flat with limited section contrast.
04
Testimonials need stronger
layout, better imagery, and
clearer emphasis. The key
credibility indicators are not surfaced early in the scroll journey
05
CTAs and 'features' block lack visual prominence. Low contrast across components reduces clarity and action visibility
INSIGHT
The core problem wasn’t missing information —
it was how information was prioritized, grouped, and surfaced during the scroll journey.
Approach for faster decision-making.
DESIGN RATIONALE - What & Why
The redesign aimed to create a clear, conversion-focused experience helping mid-to-senior decision makers quickly understand product value, build trust, and move toward action.
STRUCTURE
Hero
Immediate framing + CTA
Feature highlights
benefit-led storytelling
Solution framing
Familiar Inbox Metaphor
Social Proof
Trust Before Commitment
Final CTA
Capture
High-Intent Users
FAQs
Address Objections
Late Journey
To reduce decision fatigue, the redesign focused on improving hierarchy, pacing, and clarity while aligning with familiar SaaS landing patterns. Key principles applied to achieve this are:
Information Hierarchy
Structured the page to communicate
value → features → proof → conversion
in a progressive narrative.
01
Modular Layout
Feature sections were
redesigned into modular
blocks to improve scanning
and reduce cognitive effort.
02
Conversion Rhythm
Introduced consistent trust
signals and CTAs at strategic
intervals to maintain momentum.
03
Visual Pacing
Increased section contrast, spacing,
and layout variation to prevent visual
fatigue during long-scroll consumption.
04
Content Simplification
Translated feature-heavy copy
into benefit-led messaging with
clearer micro-hierarchy.
05
The goal was to reduce thinking effort and increase confidence at every scroll stage.
Refreshing the visual language while staying on-brand.
A clean, high-contrast aesthetic was used to communicate trust, clarity, and B2B credibility while maintaining Hiver’s approachable tone.
Typography, Layout & Grid
Typeface: Hanken Grotesk
-
12-column grid for consistency
-
Clear hierarchy from H1 → H4 supporting text
-
Generous whitespace to reduce density
-
Card-based grouping for mental separation
-
Predictable Alignment patterns
Color Usage
Primary: Midnight Slate Black
- Used for: Headers, hero background, emphasis sections
- Purpose: Trust, seriousness, B2B credibility
​Accent / CTA: CTA Blue
- Used for: Primary CTAs, highlights
- Purpose: Action, warmth, brand recall
​Secondary: Cotton white / Light Grey (CW range)
- Used for: Page backgrounds, cards
- Purpose: Reduce eye strain, improve readability
Supporting / Illustrative:
Coral blaze and
Indigo Surge
Few quick sketches.
The Page.
ACCESSIBLITY
Contrast Ratios
- Increased contrast between text, backgrounds, and CTAs across the page
- Primary CTAs use high-contrast solid fills
Color Usage
- Color is never the only indicator
- Icons + text + spacing reinforce meaning
Touch Targets
- Buttons, pills, and interactive cards meet minimum touch target size
- Clickable areas extend beyond text labels
- No tightly packed links or actions
Motion and Cognitive Accessibility
- No critical information conveyed only via animation
- Auto-moving elements are predictable and interruptible
- Plain language and short sentences
- Clear headings and reduced information density per section
Text and Background
- Dark text on light backgrounds (or vice versa)
- Clear typographic hierarchy (H1 → H4)
- CTA buttons clearly distinguishable
BEFORE V/S AFTER
The redesign focused on improving clarity, hierarchy, and conversion rhythm while preserving Hiver’s existing brand language. Instead of reinventing the experience, the goal was to remove friction and make value perception immediate.
BEFORE
AFTER
1. Hero Clarity
The hero section introduced the product but did not clearly communicate the primary differentiator or immediate value for decision-makers.
1. Hero Clarity
Reframed the hero with clearer value positioning, stronger visual hierarchy, and a prominent CTA to reduce cognitive effort within the first few seconds.
2. Value Proposition Structure
Key benefits were present but spread across sections, forcing users to interpret value themselves.
2. Value Proposition Structure
Grouped benefits into structured feature blocks that communicate outcomes quickly (accountability, visibility, productivity).
3. Feature Section Readability
Feature sections felt repetitive with low visual variation, creating scroll fatigue.
3. Feature Section Readability
Introduced modular layouts, alternating compositions, and stronger section pacing to improve scanability and maintain engagement.
4. Trust & Social Proof
Testimonials and metrics appeared later in the page with limited visual emphasis.
4. Trust & Social Proof
Enhanced visual hierarchy, clearer testimonial framing, and stronger metrics presentation to establish trust earlier in the journey.
5. CTA Visibility & Conversion Flow
CTAs lacked visual prominence and supporting sections competed for attention.
5. CTA Visibility & Conversion Flow
Created a clearer conversion rhythm by reinforcing CTAs across the page and improving contrast, spacing, and hierarchy.
5. Features Visibility
The features earlier looked like non-clickable floating elements on the page.
5. Features Visibility
Designed pill-shaped buttons giving clear indication of clickable deep linked explorable feature pages.
INSIGHT
The redesign focused less on adding new content and more on restructuring existing information to support faster understanding and decision-making.
Expected Impact.
Since this was a redesign assignment, impact is presented as expected outcomes based on UX principles, conversion patterns, and structural improvements.
PRODUCT AND BUSINESS
​
-
Faster comprehension of product value within the first 8–10 seconds.
-
Reduced cognitive load through simplified hierarchy and modular sections.
-
Stronger differentiation of the Omnichannel Inbox offering.
-
Improved trust through clearer testimonial and metric placement.
-
Better conversion momentum due to consistent CTA reinforcement.
USER EXPERIENCE
​
-
Easier scanning for mid-to-senior decision makers.
-
Improved readability across desktop and mobile layouts.
-
Reduced visual fatigue through rhythm and spacing.
-
More predictable navigation through progressive storytelling.
Final Reflection.
What this redesign taught me
This project reinforced that conversion issues are often not caused by missing features — but by how information is structured and communicated. Instead of redesigning for aesthetics alone, I focused on:
-
Clarifying value before introducing complexity.
-
Designing with visual pacing to reduce decision fatigue.
-
Using hierarchy to guide users toward action rather than forcing exploration.
​
Key Takeaways
-
Clarity beats density in SaaS landing experiences.
-
Visual rhythm plays a critical role in perceived usability.
-
Trust indicators need strategic placement, not just presence.
-
Strong structure allows visual design to work harder with less effort.
This redesign demonstrates how visual design, UX structure, and conversion thinking work together to transform a content-heavy page into a clearer, decision-friendly experience.