Porto Adib | UI/UX Designer

Home / Projects / MENDIK | Yayasan Islam Al Huda

MENDIK | Yayasan Al Huda

Improving the interface of the website to be more user friendly and attractive in accordance with the institution's branding identity.

The problem I solved:
Improve the interface of the website to suit the way the institutional campaign is marketed, and enhance the institutional image by creating profiles for each school under the institution.

Roles: UI/UX Designer, Website Designer

Client: Manajemen Pendidikan YIA

Prototype

The Story Behind the Design

More Attractive and Functional. This website faced several challenges, including an outdated design and a cluttered layout, making it less appealing and difficult for visitors to navigate.

Project Objectives:

  • The goal of this project is to update and manage the website so that it remains up-to-date.
  • Visually appealing.
  • Easy to understand.
  • Effective in delivering information.

I hypothesized that:

  • The design should be colorful yet minimalist to create a modern and attractive look.
  • Add some elements to enhance the visual appeal.
  • Reorganize the layout for easier navigation.
  • Simplify the navbar by removing unnecessary elements.
  • Provide dedicated profile pages and promotional campaign pages for each school unit.

Process:

  • Designing in Figma: I started by creating a layout in Figma and consulted with my supervisor to ensure it met expectations.
  • Collecting Materials: I gathered the content, visual elements, and other assets to enhance the website.
  • Implementing in WordPress: Using Elementor, I transformed the Figma design into a functional website.
  • Content Validation: I reviewed the content with representatives from each school unit to ensure accuracy.
  • Publishing: Once validated, the website was updated and published.

This redesign aims to provide a fresh, professional look while improving user experience and information delivery.

Landing Page

Before and After

Website Profile

For one of the schools under the foundation

PPDB Webpage for Promotion Campaign

For one of the schools under the foundation