Edit Template

Mawhiba Website Redesign

Re-Design main Mawhiba Website

Client مؤسسة الملك عبد العزيز و رجالة للموهبة و الإبداع

CategoryWebsite Re-Design

Time Line 4 Months

Associated With HUED

Website https://www.mawhiba.org/

Project Overview

Re-Design project for Mawhiba’s website that aims to enhance the user experience and interface design to create a more intuitive, engaging, and visually appealing platform for users.

The Old website serves as the previous platform for Mawhiba’s services and information. Users are now directed to the updated site at www.mawhiba.org for the latest services and information.

Why the redesign is needed :
-Outdated User Interface
-Limited Mobile Responsiveness
-Inconsistent Design Language

Business goals :
-Increase User Engagement
-Improve Information Accessibility
-Drive Program Applications & Registrations
-Enhance Brand Perception & Trust
-Provide Accessibility Features

Target Users :
-Gifted & Talented Students
-Parents & Guardians
-Teachers & School Counselors
-Program Alumni

Auditing the Old Website

Auditing the old website was essential to define the main problems that needs to be worked on. these problems can be summarized i the next points.
-Poor user journey and overwhelming content.
-Outdated design and limited accessibility.
-Weak mobile experience and technical inefficiencies.
-No clear focus on user goals or engagement strategy.

Usability Evaluation :
Navigation Complexity
Inconsistent User Flow
No Visual Hierarchy

UI & Visual Design Evaluation :
Outdated Aesthetics
Lack of Accessibility

Content Audit :
Information Overload
Unclear Messaging

Creating the Benchmark Analysis

The primary objective of a benchmark study is to establish a baseline for the current user experience of the “Mawhiba” website. It provides a starting point to measure future improvements and track progress over time.

Benchmark Foundations Included in the study:

-Misk Foundation
-Ethraa Foundation
-Ministry of Culture
-European council for high ability
-KAUST Gifted student program

Creating Information Architecture

We Conducted Information Architecture (IA) and mapped out the hierarchy of content to align with both business priorities and user mental models. The resulting IA served as the foundation for:
-A clear navigation structure
-Logical grouping of features and content
-Scalable taxonomy for future expansion

Creating a scalable Design System

We crafted a scalable, accessible design system aligned with Mawhiba’s brand:
Design tokens for colors, typography, spacing
UI Components for cards, filters, modals, tables
Prototypes for mobile and desktop
The final UI balanced modern aesthetics with functionality and clarity, tested via Figma prototypes.

Final Result

We Hopefully Delivered an enhanced version of the website considering best User experience practices and also adapting new design trends that suits the targeted audience. below there’s an example for our achievements:

1- User-Centric Approach: Implementing a user-centered design methodology to ensure that the website meets the needs and expectations of its diverse user base.

2- Improved Navigation: Enhancing the site’s information architecture and navigation to make it easier for users to find relevant content and services.

3- Visual Refinement: Updating the visual elements, color schemes, typography, and imagery to create a cohesive and aesthetically pleasing design.

4- Accessibility: Incorporating accessibility features to make the website inclusive and usable for all users, including those with disabilities.

Noha Yasser