Minimal Desktop Setups
Planner Hero Page Redesign
Role : UX/UI Designer
Platforms: Desktop & Mobile
Tools: Figma
Project Type: Ecommerce / Product UI
Summary
I worked with Minimal Desktop Setups to design the hero landing page for their new Planner product on both desktop and mobile view. The goal was to improve first impressions, product visibility, and user engagement—especially on mobile, where the majority of their audience browses.
The Problem
They were launching a new physical planner and needed a strong hero section for both desktop and mobile that:
clearly introduced the product
highlighted key features
matched their minimal, clean aesthetic
worked seamlessly across desktop and mobile
Goals
Clearly communicate what the product is
Increase engagement with feature highlights
Improve readability and visual hierarchy
Create a unified experience across desktop and mobile
Research & Discovery
I conducted a brief competitor analysis across:
premium stationery brands
minimalist eCommerce stores
hero sections for newly launched products
Key findings:
Successful planner landing pages use bold hero imagery and simple messaging
Product feature icons and clear photos drastically improve engagement
Clean spacing and strong typography are critical for clarity, especially on mobile
These insights guided the redesign.
Through these research and findings, the Information hierarchy was hence prioritised in this order:
Product image
Product name / Slogan
Strong CTA
Customer testimonials
This ensured users immediately understood what the new planner offers and why it matters.
Wireframing Desktop
I explored and developed multiple layout structures for:
hero imagery on right vs. center
CTA and information placement on mobile
‘shop now’ button that leads into product
Paper Prototype 1
Low-Fidelity Prototype 1
High-Fidelity Prototype 1
Paper Prototype 2
Low-Fidelity Prototype 2
High-Fidelity Prototype 2
Paper Prototype 3
Low-Fidelity Prototype 3
High-Fidelity Prototype 3
Wireframing Mobile
Similar hierarchy was explored and developed for the mobile design:
hero imagery placement and sizing
How much CTA and information to display on mobile
‘shop now’ button size and placement that leads into product
Low-Fid 1
High-Fid 2
Low-Fid 2
High-Fid 2
Low-Fid 1
High-Fid2
Final UI
The final design used:
bold right imagery with background fade
strong visual hierarchy
Spacing based of information priority and hierarchy
CTA with strong visibility placed for conversions
minimal, modern typography consistent with the brand
Clean, impactful hero image showcasing the planner
Clear messaging with strong value proposition
Consistent layout adapted to desktop and mobile
Results
These improvements created a cleaner, more modern presentation of the planner, increased clarity on mobile, and aligned the designs more closely with the brand’s minimal aesthetic. The redesign also helped reduce friction in product exploration and improved user engagement with key product information.
Old Design
New Design
Reflection
This project strengthened my understanding of:
designing high-impact hero sections
mobile eCommerce design
balancing brand aesthetic with conversion-focused UI
structuring product information for clarity
It also reinforced the importance of strong visual hierarchy and readability—especially when working with mobile users.