Engaging UI/UX for a Seamless Learning Experience

Basilio M.

0

Web Designer

UX Designer

UI Designer

Adobe Creative Suite

Figma

Framer

Project Overview

The Interaction Design Foundation’s (IxDF) website is a leading resource for online UX design education. The project involved redesigning the IxDF website to give it a more professional, clean, and modern look, with the goal of increasing visitor interest and boosting signups.

Purpose

The website redesign aimed to enhance the visual appeal and usability of the IxDF landing page while maintaining its original feel. It targeted UX design beginners, professionals, and companies seeking online education. The redesign addressed the need to improve user engagement and encourage more signups through a modernized, visually appealing design.

My Role

Prototyping
User Research
UI/UX Design
Branding

Research Phase

User Research​

We conducted a competitive analysis to benchmark against leading online education platforms. Additionally, user interviews with existing IxDF users and potential learners provided valuable insights into user needs and expectations.

Pain Points Identified​

Users felt the current design lacked an updated and polished appearance. Information on the page was not well-organized, making navigation difficult. Visitors were not sufficiently compelled to sign up based on the landing page alone.
Previous Landing Page
Previous Landing Page

Visual Design

Design Principles​

The redesign prioritized simplicity with a clean layout that minimized distractions and focused on core messaging. Modern design elements established trust and credibility, while strategically placed CTAs encouraged conversions.

Color Scheme​

The color scheme used a white and neutral base to create a clean and professional look, while an orange accent color was applied to CTAs and important sections to draw attention.
Design System
Design System

Key Features and Innovations

The updated hero section featured a bold header with a clear CTA button (“Learn Design”) to immediately draw attention. Trusted brands were prominently displayed via global company logos to boost credibility. Highlighted courses with visuals provided quick access to popular learning opportunities. Responsive design ensured a seamless experience across desktop, tablet, and mobile devices.

Usability Enhancements

Improved navigation with clear menu options and intuitive scrolling guided users through the page. Key elements like certifications, testimonials, and CTAs were prominently displayed to maintain a clear visual hierarchy.
Landing Page Redesign
Landing Page Redesign

Usability Testing and Feedback

In one scenario, users navigated to find information about certifications. Feedback highlighted that certifications were easy to locate, but the text could be more descriptive. We enhanced descriptions to clarify certification benefits. Another scenario involved users attempting to sign up after browsing the landing page. While the sign-up CTA was effective, feedback suggested adding more testimonials for reassurance, which led to the inclusion of a “Community” section.
 
Users appreciated the professional look, responsive design, and clear CTAs. Areas for improvement included adding more interactive elements, such as videos or animations.
Responsive Landing Page Designs
Responsive Landing Page Designs

Lessons Learned

Early usability tests provided valuable insights that shaped the final design. Showcasing industry trust through logos and testimonials had a significant impact and balancing content and simplicity ensured all key information was included without overwhelming the user.

Results

Feedback surveys showed 90%  satisfaction rate with the new design. 
Improved the overall user experience with simplified navigation and compelling visuals.
Like this project
0

Posted Feb 17, 2025

Crafted an intuitive, modern UI/UX for a website redesign, enhancing e-learning with seamless navigation, engaging design, and a user-friendly experience.

Likes

0

Views

7

Tags

Web Designer

UX Designer

UI Designer

Adobe Creative Suite

Figma

Framer

SpaceNFT Marketplace
SpaceNFT Marketplace
Intuitive App Design
Intuitive App Design