Interaction Design Foundation

Video Walkthrough

🎯 IxDF Website Redesign

Client: Interaction Design Foundation (IxDF)
Role: Figma UI Designer
Tools: Figma (Design, Prototyping, Animations, Design System)
Duration: 1 Week
Platform: Responsive Web (Desktop, Tablet, Mobile)

#1 Project Overview

Interaction Design Foundation is a globally respected UX education platform. As part of a design task from IxDF themselves, I was challenged to rethink their homepage and elevate the user experience with a clean, modern interface while aligning with their brand values. The final result focused on improving first impressions, clarity, credibility, and responsiveness using a fully custom-built design in Figma.

#2 Auditing the Existing Design

I looked at the current website, sent it to some of my friends, on a google meet we discussed on what’s not right and what can be done better.

While the existing homepage communicated basic value, it lacked a modern look and clear hierarchy. The biggest issues I felt were:

• Outdated visual style and typographic choices

Though it must've been modern for when the current website was first published, and to the point it still gets them their current amount of users, it sure was ahead of its time, but in current fast evolving times, it seriously needs a design revamp.

• Low emphasis on trust and credibility early on

Looking at our competitors and references, most big education and training providers like Coursera and CareerFoundry bring the attention to their big clients in or near the hero section, making them look more credible as soon as the user lands on the page.

• Unclear content prioritization and weak storytelling

• Limited use of modern UX techniques like micro-interactions

#3 My Role & Goals

• Create a clean and modern homepage that looks professional and approachable

• Improve hierarchy and storytelling using better section placement and content flow

• Increase trust and conversions with early credibility markers

• Build a fully responsive layout with scalable components

• Incorporate simplicity, fonts, and styles from "Peptide Sciences" while making it more visually engaging than the Peptide Sciences website (since it’s a bit too “clinical”)

• Create a few complex components and component variants to demonstrate reusable design elements.


• Design tokens for consistent and scalable styling.


• Use Auto-layouts wherever appropriate.

• Apply constraints and resizing options to make the design adapts to different screen sizes.


• Introduce micro-interactions to make the experience feel dynamic but still lightweight

#4 Research and Strategy

Competitor Analysis

I explored platforms like Coursera, Udemy, CareerFoundry, General Assembly, and Udacity to understand how education platforms present their offerings. CareerFoundry felt sleek and modern. Udemy and Coursera had clarity but leaned heavily on dense content.

Style and Typography Reference

As per the instructions, I took cues from the Peptide Sciences website. Its minimal layout and use of the Arimo font inspired the clean typographic foundation for my redesign. Even with font weights limited to just two, it helped maintain simplicity and clarity.

#5 Approach & Thought Process

Rewriting the Narrative

Instead of showing everything at once, I structured the homepage as a story:

1. Hook users with a bold, clear headline and visual

2. Establish credibility through featured partnerships and testimonials

3. Show what users will gain (courses, certificates)

4. Reduce hesitation with strong social proof

5. Provide a frictionless CTA

Wireframing the Experience

I restructured the content flow to guide users through a logical and conversion-focused journey. Here’s the order I prioritized:

1. Header

2. Hero section

3. Trusted by top companies

4. UX course section with urgency indicators

5. Testimonials

6. “Designed for Busy People”

After this I started with some rough wireframes with 3 ideas I had in mind for the home page. Some alternate ideas included showing the learning path upfront or letting cards animate into place from scattered layouts.

After careful brainstorming, I chose to go with one that was the safest and wasn’t reinventing the wheel too much (1st one), because Jakob’s Law, am I right?

#6 Building the Design System

I designed an atomic design system with:

• Headings and text tokens that balance accessibility and aesthetics

• A simplified 8pt grid system

• Clean, flat-style icons

• A minimal color palette with soft whites, deep blacks, and accent greens

This design system ensures scalability and can be easily implemented across the IxDF ecosystem.

Typography

Used the Arimo Google font in Regular and Bold weights to keep the layout minimal and easy to scan.

Color System

IxDF’s brand colors felt slightly dated. I explored modern color combinations and settled on Indigo and neutral grays for a mature and elegant tone.

Variables and Tokens

Set up primitive values and mapped them to tokens across typography, spacing, radii, and colors. Created distinct sets for desktop, tablet, and mobile to ensure seamless responsiveness.

#7 Component Library and Responsive System

Every component was built from scratch and made fully responsive using Figma’s auto layout and properties like Booleans etc.

Key Components:

• Navigation bar with responsive behavior and conditional visibility

• Course cards and testimonial cards with hover and focus states

• Buttons with full interaction states (default, hover, focus)

• Search bars, section headers, badges, and info blocks

#8 Micro-Interactions and Prototyping

Subtle micro-interactions were added to improve engagement without overloading the experience:

• Animated headline in Hero section cycling through “UX Design,” “UX Research,” and “Design Thinking”

• Scrollable trusted companies section with looping animation

• Hover shadows and button animations for tactile feedback

• Course cards hover interactions

• Lifestyle-inspired animation showing “day and night” for the busy people section implying they can learn anywhere & anytime.

Performance in Figma preview was a challenge, so I selectively disabled heavier animations that could be handled in production code.

#9 Responsiveness and Mode Switching

The entire design was responsive across desktop, tablet, and mobile breakpoints. I used Figma’s mode feature to switch styles and behavior based on screen size.

Key elements include:

• Navigation bar toggling between full menu, collapsed search, and hamburger icon

• Components adjusting padding, font size, and visibility across modes

• Course sections and CTA blocks stacking or rearranging naturally without breaking layout

#10 Final Outcome

The final redesign successfully delivers a modern and conversion-friendly experience that elevates IxDF’s brand.

Key Sections & Rationale:

Hero Section

The original hero section felt cramped and generic. I redesigned it with a clear, emotionally resonant headline and CTA, layered over a subtle motion background (hinting at future interactivity). The visual makes the value proposition immediate.

Credibility Wall

Instead of burying trust signals, I made them a focal point - featuring big-brand logos, real student faces, and quotes. This section builds emotional trust and positions IxDF as a globally trusted platform.

Course Highlights & Certificate Previews

I featured a small set of top courses with clean previews and hover interactions that explain outcomes.

• Clear visual hierarchy and clean typography

• Strong trust signals early in the user journey

• Well-defined design system for scale

• Responsive layout built with developer handoff in mind

• Delightful yet performance-conscious micro-interactions

Key Learnings

This redesign wasn’t shipped, but it served as an ideal sandbox to practice systems thinking, responsive layout design, and storytelling in UX. I also improved my skills in Figma prototyping, micro-interactions, and presenting a cohesive visual identity.

Simple design systems are powerful when grounded in thoughtful structure

• Content order and credibility placement influence user trust and action

• Responsive design needs to start from the system level, not just layout tweaks

• Figma’s variables and modes enable serious flexibility when used correctly

This project was a great opportunity to demonstrate design thinking, system building, and pixel-perfect execution.