Minh's UX Project - M&B Education Website Redesign

M&B Education Website Redesign

Redesigned M&B Education’s website with simplified navigation, clear calls-to-action, and a responsive design that builds trust and drives admissions.

ROLE

Product Designer (UX/UI)

TIMELINE

Jun 2025 – Aug 2025

MY LANE

Information architecture, wireframing, visual design, responsive layout

CONTEXT

M&B Education helps Vietnamese students access international education and career opportunities. Yet its outdated website failed to convey professionalism or guide users smoothly to key services.

PROBLEMS

The original website (view here) suffered from several UX and UI issues:

Outdated design language not aligned with modern education platforms

Dense text blocks and inconsistent layouts made content hard to digest

Poor visual hierarchy → important CTAs were buried

Navigation structure was cluttered and not mobile-friendly

RESEARCH

To ground the redesign in user needs, I applied a lean research approach combining quick competitive analysis, heuristic evaluation, and informal user feedback

The redesign aimed to:

Key insights:

The redesign aimed to:

Decision Points – Admissions and Programs were top priorities, needing prime placement in nav and hero

Expectation Gap – Users compared the site to modern universities; outdated design hurt credibility

Scanning Habits – Users skimmed for headings, images, CTAs → led to card layouts and more whitespace

Mobile Behavior – Parents browsed on desktop, students mostly on mobile → mobile-first was essential

ROLE

Product Designer (UX/UI)

TIMELINE

Jun 2025 – Aug 2025

MY LANE

Information architecture, wireframing, visual design, responsive layout

CONTEXT

M&B Education helps Vietnamese students access international education and career opportunities. Yet its outdated website failed to convey professionalism or guide users smoothly to key services.

PROBLEMS

The original website (view here) suffered from several UX and UI issues:

Outdated design language not aligned with modern education platforms

Dense text blocks and inconsistent layouts made content hard to digest

Poor visual hierarchy → important CTAs were buried

Navigation structure was cluttered and not mobile-friendly

RESEARCH

To ground the redesign in user needs, I applied a lean research approach combining quick competitive analysis, heuristic evaluation, and informal user feedback

Key insights:

Decision Points – Admissions and Programs were top priorities, needing prime placement in nav and hero

Expectation Gap – Users compared the site to modern universities; outdated design hurt credibility

Scanning Habits – Users skimmed for headings, images, CTAs → led to card layouts and more whitespace

Mobile Behavior – Parents browsed on desktop, students mostly on mobile → mobile-first was essential

Design Process

Understanding & Structuring (Information Architecture)

I restructured the sitemap to cut down clutter and make key content easier to find. The old site buried important pages under deep menus, while the new version streamlines everything into five clear top-level sections with minimal subpages.

Wireframing

I created low-fidelity wireframes to define layout, hierarchy, and navigation. This helped visualize key pages—homepage, programs, and blog—ensuring clarity and clear CTAs before moving into high-fidelity design.

Visual Design & Branding

I built a website style guidelines with colors, typography, and icons to ensure consistency and scalability, creating a cohesive visual identity for the website.

Prototyping & Iteration

I created an interactive prototype in Figma to test navigation and responsiveness. Based on user feedback, I refined CTAs, mobile menu, and spacing for a smoother user experience.

Final Look

👉 View live site here!

Hero Section → Clear First Impression

I redesigned the hero section with a bold headline, clear imagery, and a strong CTA—creating a cleaner first impression and guiding users toward admissions.