Institute of adult learning website redesign

Less Clicking, More Learning.

ROLE

UI/UX Designer

tools

Figma, FigJam

YEAR

2025

Project Overview

Project Overview

Project Overview

IAL's existing website struggled to serve its core audience — working professionals seeking quick access to courses, resources, and learning support. The site was cluttered, text-heavy, and difficult to navigate, creating friction at the very moment users needed clarity and confidence. The brief was to redesign the experience from the ground up, refreshing the visual identity and restructuring the information architecture to better serve learners.

The Problem

The Problem

The Problem

Professionals visiting the IAL site often had limited time and specific goals such as finding a course, accessing a resource, or getting support. The existing site made all of this harder than it needed to be. Redundant content, a bloated sitemap, and an outdated UI meant users had to work to find what should have been immediately accessible.

My Role

My Role

My Role

I co-led the project from kickoff to launch as the primary UI/UX designer, working closely with a project manager and development team. My responsibilities spanned the full design lifecycle: user research, competitive analysis, design system creation, wireframing, and high-fidelity design, through to stakeholder presentations and developer handoff.

Style Guide

Style Guide

Style Guide

Buttons and Cards

Buttons and Cards

Buttons and Cards

Approach

Approach

Approach

User research and competitive analysis informed the foundational decisions early. We audited the existing sitemap to identify redundant pages and consolidate content, simplifying the navigation structure so learners could find what they needed in fewer steps.


A refreshed colour palette and cleaner UI brought the visual experience in line with IAL's positioning as a credible, approachable learning institution. All design decisions were validated against WCAG 2.1 AA accessibility standards, including contrast checks and inclusive design reviews, ensuring the site was usable across a diverse range of learners. Designs progressed from mid-fidelity wireframes to polished high-fidelity screens, with regular stakeholder presentations to gather feedback and refine direction iteratively.

Explorations

Explorations

Explorations

For the purpose of this portfolio, I will be showcasing only the homepage design of the platform.


The homepage plays a critical role as it is the first touchpoint for learners, setting the tone for their entire experience. It introduces the courses, highlights the different learning paths and communicates the brand personality through its visual design.


At the early stages of the project, I did some initial design explorations for the homepage to explore different directions and to spark discussions with the clients. I presented two layout variations:

Formal look:
A layout with sharper corners and a more structured grid, giving the interface a polished, professional feel.

Approachable look:
A layout with softer corners and more rounded elements, creating a warm and welcoming tone.

As part of the process, I presented these early explorations directly to the clients. During the presentation, I explained the design rationale behind each variation, how even subtle choices like corner radius can influence the tone of the platform and how they mapped back to different learner groups.


This not only gave the clients a clear understanding of the design intent, but also invited their feedback at a stage where design directions could still be refined. I was able to guide the conversation, gather meaningful feedback, and ensure alignment between the design direction and the client’s vision.

Homepage Initial Design

Homepage Initial Design

Homepage Initial Design

After exploring different visual and colour directions for individual sections, I combined these ideas into a high-fidelity homepage design. Some parts, such as images and client-specific content, have been greyed out to protect confidentiality, giving it a slightly mid-fidelity appearance.


The design incorporates the overall layout, navigation, content hierarchy, and design system elements, and it is fully mobile-responsive to ensure a consistent experience across devices. I presented this to the clients during the early design stage to gather feedback and ensure alignment before moving into final refinements.

Final Outcome

Final Outcome

Final Outcome

Since the time of this project, the full website redesign has been completed and is now live. The final implementation evolved from the initial homepage explorations shown earlier, but stayed aligned with the core direction in terms of structure, visual hierarchy, and simplified navigation. This project took approximately 7 months from initial exploration to final launch.

You can view the live website here:

https://www.ial.edu.sg/

Thank you for reading my case study!

Thank you for reading my case study!

Thank you for reading my case study!

Let's connect!

Let's connect!

Let's connect!

Create a free website with Framer, the website builder loved by startups, designers and agencies.