Revamped Prelim's homepage to enhance User Perception:
Structured consistently to help users understand the product’s value
CHALLENGE
The homepage was visually inconsistent, missing key sections, and the product value wasn’t clear through the microcopy.
DESIGN IMPACT
Stronger Brand Credibility
Consistent visual language
Easier Product Understanding
Structured homepage
Immediate Product Clarity
Focused Hero Section
Prelim is a fintech product that helps banks build digital experiences quickly and flexibly.
When I first saw Prelim’s homepage, it felt scattered and inconsistent. I decided to redesign it from scratch to bring clarity, consistency, and a stronger product narrative.
The redesign gave Prelim a consistent, uniform look where the product story flows clearly making it easier for banks to instantly understand the value. For me, seeing the final design come together felt rewarding, almost like the scattered pieces had finally clicked into place.
I started the process deliberately, taking time to understand Prelim’s value and plan the homepage structure before moving into design.
→ Took time to understand Prelim’s value
→ Mapped out the sections before wireframing
→ Built slowly, refining as each part came together
→ Final homepage: consistent, structured, and clear in communicating product value
REDESIGN IN ACTION
Hero Section
What wasn’t working?
The headline felt oversized, and when paired with the subheadline, it didn’t deliver a clear meaning.
The product was shown through a video, which added friction instead of clarity.
The core product value wasn’t visible upfront, users couldn’t grasp what Prelim actually does in the first 10 seconds.
How it was reshaped
Headline and subheadline were rewritten to communicate product value clearly within the first 5 seconds.
CTAs were redefined for clarity, with relevant CTAs added in the sticky navigation bar for accessibility across all pages.
A subtle line of social proof was added under the CTA input in the hero section to build credibility instantly.
A dashboard visual replaced the video, giving users an immediate view of the product’s core functionality.
A second line of credibility markers was added to further enforce trust.
Why a dashboard in the hero?
Video demos are often slow. Dashboards are instant. For Prelim, showing the dashboard directly gave clarity in one glance. It felt right for a fintech product that’s about building faster digital banking.
Features Section
What wasn’t working?
The features section lacked clarity and definition, making it hard for users to understand the value.
There was no visual representation of the product to support the features
The section didn’t align with the website’s color palette, reducing visual consistency.
How it was reshaped
Conducted a full audit of the website to distinguish features vs. benefits, ensuring users could quickly see what the product does versus how it helps them.
Added relevant product visuals alongside features to reinforce understanding.
Adjusted colors and design elements to match the overall palette, creating a consistent and modern visual style.
Launchpad section
What wasn’t working?
The Launchpad section was the highlight of the product, showcasing how users could customize services and apps.
The visual didn’t clearly represent the drag-and-drop functionality, leaving the core feature unclear.
How it was reshaped
Added a simple drag-and-drop visual to clearly communicate the customizable functionality.
Highlighted the section visually to draw attention to the product’s key feature.
Added supporting microcopy to explain details, ensuring users immediately understand the purpose and functionality.
Microcopy and Visuals
I updated the copy for precision, alignment, and clarity. Visuals were added strategically to emphasize key product features, ensuring users could quickly understand core strengths.
Color and Consistency
Colors on the homepage were inconsistent. I retained the base shades but applied them uniformly, giving the page a modern, cohesive, and polished look.
Benefits
After studying the product and the website, a dedicated benefits section was added to show users what’s in it for them and why they should use the product.
Final touches
Added a final CTA section to guide users toward the next action.
Refined the blogs section slightly for better clarity and visual consistency.
FROM UNCLEAR TO STRUCTURED AND CONSISTENT PRODUCT
Before
After
Insights and Learning
This project highlighted several important design principles:
Placement and clarity drive understanding.
Every copy element, visual, and CTA contributes to the user’s perception of value.
Structured exploration helps decision-making.
Dividing the website into sections allowed me to focus deeply on each core area and make informed design choices.
Evolving the Product
The redesign clarified the product story and improved user understanding, but further opportunities remain:
Enhancing the “Launchpad” section with richer visuals or animations.
Adding testimonials and trust-building elements for Fintech credibility.
Exploring interactive elements to guide users more intuitively.
Outcome of the Redesign
Consistent Visual Language → Stronger Brand Credibility
Consistent use of colors across the homepage makes the design feel polished and professional.
Structured Homepage → Easier Product Understanding
Sections are visually organized, so users can grasp Prelim’s value at a glance.
Focused Hero → Immediate Product Clarity
Dashboard hero communicates capabilities instantly, saving users time and building confidence.
Got thoughts on these designs?
Share your take, let’s spark ideas and shape the next version together.