top of page
image.png
image.png

presents

Elevating the Online Presence of a B2B Saas Website

Website Redesign - A case study

What’s in this case study?

Clients

image.png

Megaputer, A data and text analytics no-code platform looking to redesign and rebrand its website.

PROBLEM STATEMENT

"How might we redesign Megaputer's website to streamline navigation, unify its visual identity, and boost user engagement”

Overview

Duration:

1 Year

Role: 

Research, Design, Product content, Prototype, Style guide, SEO, 

Heuristic Evaluation, Testing, Card sorting, A/B testing, Contrast check, Eye Tracking, Accesibility

Tools: 

Figma, Photoshop, Docs, Figjam

42%

Increase in optimal clarity from 45% to 78% (users perceive data quickly)

9/10

Interviewed data analysts and new users would use our redesigned website. 

88.89%

Decrease in total time taken to complete tasks 1 min 30secs to 30secs.

Step 1/6:  Analyzing the problem

Unrelated hero page tagline and image

Header contrast issue

Primary CTA in disabled color

Screenshot 2025-01-24 at 2.23.15 AM.png

Inconsistent CTAs and icons

Screenshot 2025-01-24 at 2.25.06 AM.png
Screenshot 2025-01-24 at 2.24.24 AM.png
Screenshot 2025-01-24 at 2.24.03 AM.png
Screenshot 2025-01-24 at 2.25.59 AM.png
Screenshot 2025-01-24 at 2.25.29 AM.png

Image does not match what the page is about

Page primary text and tagline contrast issue+
wrong placement visually(fails eye tracking test)

Screenshot 2025-01-24 at 2.26.12 AM.png

Text heavy

Too many categories

Screenshot 2025-01-24 at 2.25.42 AM.png
What am I solving?
Streamlining and organizing
128-pages
Rebranding and enhancing Visual aesthetics
SEO optimization through
strategic UX 

Step 2/6: Design System

Brand guidelines are like a company’s personality—they define how the company is recognized and remembered. A strong brand identity comes from consistent colors, fonts, and style.
For instance, when you see a red background with the letter "M," McDonald’s instantly comes to mind, right?

That’s the power of cohesive branding!

#FCB913 - Primary

#2B3339 - Secondary

#98CBF8 - Tertiary

#FFDBAB -
Primary Light

#374F65 -
Secondary Light

#C3DEF7 - 
Tertiary Light

Screenshot 2025-01-24 at 2.43.29 AM.png
Screenshot 2025-01-24 at 2.48.44 AM.png
Screenshot 2025-01-24 at 2.49.41 AM.png

Columns: 12 columns

Gutter width: 24px

Column width: Fluid, percentage-based (8.33%each)

Margins: 40px on both sides

Max width: 1440px

Breakpoints:

  • Mobile (0-600px): 4 columns, 16px gutters, 16px margins

  • Tablet (601-1024px): 8 columns, 24px gutters, 24px margins

  • Desktop (1025px+): 12 columns, 24px gutters, 40px margins

Screenshot 2025-01-24 at 2.54.53 AM.png
Screenshot 2025-01-24 at 2.55.22 AM.png
Screenshot 2025-01-24 at 2.54.10 AM.png

Step 3/6: Content organization

Information Architecture - Sitemap

Our journey sorting 150+ categories
Our journey sorting 150+ categories

Step 4/6: The Prototype

Learn about the company offerings

See how the product works

New User

Start

Home

Old User

Contact Sales

Explore available solutions

image.png

The current hero section confuses users with unclear imagery and tagline, failing to convey the company’s purpose effectively.

image.png

The redesigned hero section clarifies the company’s purpose and boosts credibility by highlighting partnered clients, enhancing trust.

Screenshot 2024-12-12 at 10.17.10 AM.png
image.png

Company offers not clearly outlined

WhatsApp Image 2024-12-12 at 01.40.00 (1).jpeg
image.png

Organized company offerings

WhatsApp Image 2024-12-12 at 01.40.00 (4).jpeg
image.png

Confusing for the user, too many options and not having any clear description of the solution

WhatsApp Image 2024-12-12 at 01.40.00 (5).jpeg
image.png

An organized interface featuring tab-based navigation, contextual tags for usability and SEO, and an impactful tagline.

WhatsApp Image 2024-12-12 at 11.16.42.jpeg
image.png

Animal image on the hero section of the solutions page is misleading and the layout has too much information for the user to skim through

WhatsApp Image 2024-12-12 at 01.40.01.jpeg
image.png

Redesigned layout in a readable format by having dropdowns, solution overviews, and organized sections: How it works, Impact, and Case Studies.

WhatsApp Image 2024-12-12 at 01.40.00 (6).jpeg
image.png

An easy way to understand competitors, which also highlights the value proposition of the company + Increases search engine results due to use of SEO words on home page

SCREEN
DESIGNS

Step 5/6: Testing

The Designs look good, but do they test the basic usability tests?

Revenue is generated through tiered subscription plans (monthly, quarterly, annual) and partnerships with industry experts for specialized courses, with shared profits.

WhatsApp Image 2024-12-11 at 23.38.21 (1).jpeg
image.png

Main Focus going towards the human and lion instead of the tagline.

WhatsApp Image 2024-12-11 at 23.38.21.jpeg
image.png

Focus on the tagline and the representing image, CTA and clients

WhatsApp Image 2024-12-12 at 00.58.30.jpeg
image.png

Previous color palette failed contrast test

WhatsApp Image 2024-12-12 at 00.58.30 (1).jpeg
image.png

New color palette passed the contrast test

image.png

​Old flow - 1 min 18 seconds

image.png

New flow - 30 seconds

Evaluation Results

Usability testing with 12 data analysts and new users identified:

  • Achieved a visually modern design

  • Minimized overwhelming content

  • Improved homepage claritySimplified CTAs

  • Enhanced content tagging in solutions

  • Addressed the lack of a search bar

Step 6/6: Conclusion

The Megaputer Redesign project has been one of my most fulfilling experiences, completed as part of my capstone initiative. The project consistently received positive feedback, reflecting its success and impact.

During this process, I enhanced several key skills, including public speaking, leadership, evaluation and testing, design system creation, SEO optimization, team collaboration, designing for development, understanding business markets and trends, client pitching, and more.

In conclusion, we resolved over 35 usability issues by streamlining the website, reducing pages by nearly 50%, and implementing a modern, user-centered design. These improvements enhanced navigation, clarified service offerings, and elevated Megaputer’s brand identity.

MEET THE TEAM