

presents
Elevating the Online Presence of a B2B Saas Website
Website Redesign - A case study
What’s in this case study?
Clients

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

Inconsistent CTAs and icons





Image does not match what the page is about
Page primary text and tagline contrast issue+
wrong placement visually(fails eye tracking test)

Text heavy
Too many categories

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



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



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


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


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


Company offers not clearly outlined
.jpeg)

Organized company offerings
.jpeg)

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

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


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


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

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.
.jpeg)

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


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


Previous color palette failed contrast test
.jpeg)

New color palette passed the contrast test


Old flow - 1 min 18 seconds


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