Website Redesign: UX/UI Case Study Fundamentals

A website redesign can feel like walking a tightrope. You’re balancing the thrill of a fresh look with the pressure to deliver results that actually move the needle. Too often, though, aesthetics take the wheel while user experience is left in the backseat—and that’s when things go sideways.

We’ve seen it before: a project starts strong with bold ideas and big ambitions. But somewhere between the wireframes and the final handoff, clarity fades, priorities fumble, and the end result is just another pretty face on the internet.

At Beetle Beetle, we believe UI and UX should work in perfect harmony. This article walks you through our approach to revamping both, featuring MailReach as a case study. If your SaaS website isn’t converting as it should, keep reading—we’ll show you how to fix that.

Why Do You Need a UI/UX Redesign?

When we first started helping SaaS companies revamp their websites, we noticed a common thread. Most businesses we’ve worked with had great products but frustrated teams asking the same question: “Why isn’t our website working?”

After a thorough site audit, we found that the UI/UX was holding them back in most cases. Poor design and clunky interfaces create friction. And in the world of SaaS, friction equals lost signups, lower engagement, and fewer conversions.

UI/UX optimization is the very foundation of Conversion Rate Optimization (CRO). Your website is your most important salesperson. If it’s confusing or hard to use, visitors leave. And the sad truth? Most of them won’t come back.

Here are five key reasons why it’s time to rethink your website’s UI/UX:

1. Your First Impression Is Your Only Chance

Visitors form opinions about your website in milliseconds. A clean, professional design makes them stay. A confusing layout sends them packing. For example, imagine landing on a SaaS homepage with tiny fonts and blurry images—it screams "untrustworthy." 

2. The Need for Speed Is Real

Speed is non-negotiable when it comes to retaining users. According to Google, your website should load in 1-3 seconds. 

Every additional two seconds can increase your bounce rate by nearly 32%. Slow-loading pages don’t just frustrate visitors; they also signal to search engines that your site isn’t user-friendly, thus badly hurting your SEO rankings. 

3. Confusion Kills Conversions

If users can’t figure out where to click or what your product does, they’ll move on. Clear navigation, intuitive calls-to-action, and logical flows are essential. Think of Netflix: every button leads somewhere meaningful, with zero ambiguity.

4. Mobile Users Demand Excellence

With more than half of web traffic on mobile, a responsive design isn’t optional anymore. Poor mobile experiences mean missed opportunities. For example, if buttons are too small to click, users will leave frustrated.

5. Your Competitors Are Getting Smarter

The SaaS market is more competitive than ever, and your website’s UI/UX is a critical differentiator. We want you to compare a sleek competitor site that instantly highlights benefits with an outdated website with terrible navigation.

Which would you trust more? Strong UI/UX not only captures attention but also builds credibility. It shows you care about the user experience, which reflects directly on your brand.

To show how we approach a UI/UX redesign, we’ll take you through the process we completed for MailReach, an email deliverability tool trusted by growth marketers and CEOs.

MailReach Redesign - UX/UI Case Study 

Before we go deep into technical territory, let us introduce you to the brand first. 

Who Is MailReach?

MailReach is an email deliverability tool. It helps you make sure your emails land in the inbox, not spam. Growth marketers and CEOs rely on their tools to boost deliverability and improve email campaign results.

MailReach has two core offerings:

• Email Warmer: This tool mimics real email activity. It opens, replies, and moves your messages. Inbox providers see this activity as a signal that your emails are trustworthy, improving your sender's reputation.
• Spam Checker: This tool identifies problems that could stop your emails from reaching their target. By diagnosing issues before campaigns are sent, you ensure your emails avoid spam filters.

Despite solving a critical problem, they weren’t able to convert visitors into customers. So, our first logical step was to identify the problem areas. 

The Bottlenecks

MailReach was dealing with a two-fold problem:

1. Their Audience: An Outstanding Product Overlooked Amid Market Clutter

MailReach provided us with a straightforward, no-frills Excel sheet that clearly outlined why their product outperformed other tools available in the market.

However, this valuable comparison never resonates with their visitors. They weren’t informed enough to differentiate between effective and ineffective email warming. 

Many competitor features sounded impressive in their marketing but didn’t deliver meaningful results in practice.

We needed to step up and explain why our email deliverability practices are superior.

And then comes the second part of the problem:

2. The Design: A Brochure Website, Stuck in the Past

After a comprehensive website audit, we uncovered several issues:

• The site’s outdated design failed to convey trust or professionalism. 
• Visitors struggled to understand how MailReach’s two tools—Email Warmer and Spam Checker—worked together or why they mattered. 
• Navigation was clunky, and important details were either buried or missing.

The client confirmed our findings: "The website feels old, doesn’t explain what we do well, and doesn’t stand out from competitors. We need something modern, clear, and approachable."

To dig deeper, we analyzed visitor behavior, assessed bounce rates, and reviewed user feedback. 

Based on the gathered insights, we developed a targeted plan to address these gaps. 

The focus was on creating a design that built trust, simplified navigation, and communicated MailReach’s value with clarity and precision.

Core Objectives:

We believe a website isn’t just a place to show off your product—it’s where trust begins. For MailReach, the challenge wasn’t their tools by any means. It was making those tools feel approachable, easy to understand, and worth choosing over competitors.

We needed to design a site that spoke to their audience. Growth marketers and CEOs should be able to see the value of MailReach’s tools at a glance, explore the site without frustration, and be confident in their choices.

To make that happen, we focused on a user-first approach. Every design choice aimed to simplify the experience, build credibility, and guide visitors naturally toward action.

1. Modernizing the Visual Design

First impressions set the tone. MailReach’s design lacked credibility. The visuals felt uninspired and didn’t match the quality of their tools. 

We created a clean, clutter-free layout that made all the necessary information easy to find and digest. 

The color palette centered around dark blue (#11103C) to create a premium feel, paired with light backgrounds to ensure clarity. 

For typography, we retained the Roobert font, balancing sophistication with readability.

To show the transformation, MailReach suggested we introduce a before-and-after widget. And we happily obliged:

This simple addition gave visitors a strong sense of progress, showing exactly how the redesign elevated MailReach’s presence. 

We also added subtle animations and scroll effects. These brought energy to the design without distracting from the content, guiding users’ attention naturally.

2. Clarifying the Product Offerings

One of the biggest challenges was explaining MailReach’s tools in a way that clicked immediately. Visitors didn’t understand the Email Warmer and Spam Checker or how they worked together. This confusion created friction and left potential users disengaged.

We created dedicated product pages for each tool. These pages broke down the functionality of the Email Warmer and Spam Checker in clear, user-friendly terms. 

Each page highlighted key benefits, addressing common pain points for MailReach’s target audience.

To further reinforce their value, we added two essential sections:

• The “Why MailReach” section: This answered the question, “Why should I choose MailReach over other email tools?” It showcased their specialized focus on deliverability and explained why expertise matters in this field.

• A competitor comparison page: Visitors in the decision phase often compare options. Instead of generic feature lists, this page explained how MailReach solved deliverability problems better than competitors, building trust and confidence.

These changes helped visitors grasp the tools’ core value proposition the instant they landed on the website. 

3. Custom Product Visuals to Tell a Story

Complex tools can be hard to explain with words alone. We used visuals to make the Email Warmer and Spam Checker feel approachable.

For example, an animation on the homepage demonstrated how the Email Warmer restored the sender's reputation by simulating real engagement. Another visual showed how the Spam Checker identified deliverability issues before campaigns went live.

These custom visuals served two purposes:

• They simplified technical concepts, making them easy to understand.
• They created a sense of familiarity, showing visitors what to expect when using MailReach’s tools.
• This approach made the tools feel more tangible and trustworthy.

4. Streamlining the User Journey

Every visitor comes to a website with a goal. Some want a quick overview, while others need details before committing. MailReach’s old site failed to guide either group effectively.

We simplified the homepage to focus on key messaging. Visitors learned who MailReach was, what they offered, and why it mattered—all within seconds. From there, clear calls-to-action directed users to detailed product pages for the Email Warmer and Spam Checker.

We also simplified the sign-up process for leads who were ready to take action. Fewer clicks, less friction, and a clear path to conversion made it easy for users to move forward.

By aligning the design with user intent, we created a journey that felt natural and engaging.

The next step of the process was to build a clear strategy and obtain the resources to put the strategies into action. 

Tools and Strategies Used in the Redesign

See, the goal was pretty clear: create a design that tells a clear story and encourages action without confusion.

To achieve this, we focused on designing visuals that clarified value, tested the interface to ensure usability, and built a platform that was both fast and scalable. Here’s how each element came together:

1. Visual Strategy

We needed MailReach’s website to connect with visitors on a practical level. The visual design had to communicate their expertise and simplify complex concepts.

Our solution started with a clean, modern layout. This made navigation easy and kept the focus on MailReach’s core tools. Dark blue tones added a premium feel, while lighter backgrounds improved readability.

Custom visuals played a key role in demystifying the tools. For instance, animations showed how the Email Warmer improved the sender's reputation and how the Spam Checker identified potential problems.

2. User Testing

We didn’t stop at designing; we tested everything to make sure it worked for real users. This involved walking through the site like a first-time visitor would, noting any friction points.

We spent a great deal of time making sure the users could quickly find what they needed. Whether someone wanted to learn about the tools or sign up immediately, the path had to feel seamless. 

Through testing, we fine-tuned navigation, ensured calls-to-action were clear, and removed unnecessary steps from the user journey.

3. Webflow Development

A slow or clunky site can undo all the work put into design and user flow. Webflow gave us the flexibility to build a site that MailReach could easily update on their own. We also provided a detailed style guide to maintain consistency as the site evolved. 

The result was a website that looked polished, loaded quickly, and could grow with their business.

Is there any specific reason for using Webflow? Glad you asked.

Here’s why:

• Responsive images: Webflow automatically optimizes images for different devices and resolutions. This means mobile pages can load up to 10 times faster, ensuring a smooth experience for users on the go.
• Lazy loading: Instead of loading all images at once, Webflow only loads them as visitors scroll. This approach reduces load times and keeps the site running efficiently. Bonus? Optimizing for retina displays ensures visuals look sharp across devices.
• CDN hosting: Webflow uses Amazon CloudFront and Fastly, two of the fastest Content Delivery Networks available. This ensures fast, reliable hosting for every visitor, no matter where they’re browsing from.

And that was our process. Excited to see what all that hard work led to?

The Results:

When the new MailReach site launched, the difference was both palpable and immediate. We successfully managed to bridge the gap between their powerful tools and their audience’s expectations.

• A Clear Identity: The refreshed design and messaging showcased MailReach’s personality and value. Visitors immediately understood what set them apart from competitors.
• Improved Conversions: “Our conversion rate per session increased by 60%, and per user by 82%. That’s absolutely great.”, was the feedback we received!
• A Design That Delivers on All Fronts: What was once “ugly” and “outdated” became a sleek, premium website. It not only grabbed attention but also turned interest into action.

In short, the new design struck the sweet spot between professionalism and accessibility. It’s visually polished, easy to navigate, and built to support future growth and updates.

You can see it for yourself -

Old Website Design:

Current Website Design: 

The difference is almost instantly clear. 

The new design clearly communicates why MailReach’s email deliverability practices are superior. We are low-key proud of how it embodies the product's premium positioning while remaining exceptionally user-friendly.

And now, it’s time to outline our key takeaways from the project. 

Lesson From a MailReach UI/UX Case Study

Even the most capable SaaS product can struggle to make a mark without the right website. A strong tool needs an equally strong user experience to truly connect with its audience.

Here are four major lessons we took away from the whole experience:

• First impressions are 50% visual and 50% functional. Visitors judge both how a site looks and how it works. A credible, modern design paired with intuitive navigation is essential for trust.
• Clarity beats complexity every time. If users don’t understand your value within seconds, they’ll leave. Clear messaging and persuasive copy can make all the difference.
• Good visuals are a lot more than mere cosmetic additions. Custom visuals and animations make complex ideas approachable and help users connect with your product.
• Slow loading speed is the biggest UX faux pas. It turns visitors away, no matter how sophisticated your design is. 

Do you also have a terrific SaaS product that’s suffering due to a website that doesn’t pull its weight? If so, it might be time to rethink your design, messaging, and user experience. 

Revamp Your Website UI/UX With Beetle Beetle

Looking back at the website redesign process, we spent most of our time organizing and planning. We reckon the actual design part took only about 30% of the project TAT. This was intentional. 

Our thoughtful planning allowed us to solve deeper issues like unclear messaging, confusing navigation, and a lack of trust in the brand. 

If you also feel your website is holding your business back, we would love to help you. 

Still on the fence about whether we are the right fit for your business?  

Book a free clarity call today.