OLI Website: End-to-End Platform Redesign by Vanessa ChangOLI Website: End-to-End Platform Redesign by Vanessa Chang

OLI Website: End-to-End Platform Redesign

Vanessa Chang

Vanessa Chang

Modernizing complex institutional hubs through human-centered logic

As the design lead, I spearheaded the full-cycle redesign of the OLI official website, transforming a fragmented resource library into a streamlined, high-conversion experience.

Strategic Heuristic Evaluation

I performed a detailed audit to identify usability friction points. This led to a complete overhaul of the navigation, significantly reducing the cognitive load for educators and researchers.
Identifying friction points: A heuristic audit of the original site to reveal navigation gaps and cognitive overload
Identifying friction points: A heuristic audit of the original site to reveal navigation gaps and cognitive overload
Structural clarity: A refined sitemap designed for better information hierarchy, ensuring essential resources are only 2 clicks away
Structural clarity: A refined sitemap designed for better information hierarchy, ensuring essential resources are only 2 clicks away

Prototyping & Usability Validation

I translated insights into high-fidelity prototypes and conducted targeted usability testing. This iterative process ensured the new interface was intuitive and addressed real-world pain points.

Inclusive Design Foundations

I prioritized accessibility by ensuring 100% WCAG-compliant color contrast and implementing a clear heading hierarchy for screen readers.
Inclusive Design: Utilizing Stark to ensure 100% WCAG AAA color contrast compliance for a diverse student and educator audience
Inclusive Design: Utilizing Stark to ensure 100% WCAG AAA color contrast compliance for a diverse student and educator audience

End-to-End Implementation

I managed the lifecycle from design to launch, building the final site in WordPress (Avada) to ensure the design intent and accessibility standards were perfectly maintained in the live environment. [View the live site: oli.cmu.edu]
Professional Delivery: Final implemented screens showcasing typographic hierarchy, component scalability, and brand alignment
Professional Delivery: Final implemented screens showcasing typographic hierarchy, component scalability, and brand alignment

For a deep dive into my information architecture and heuristic evaluation: View the full case study on my portfolio
Information Architecture · Accessibility (A11y) · Web Design · Figma · WordPress
Like this project

Posted Jan 31, 2026

Led the end-to-end redesign of CMU’s OLI website. Transformed a complex institutional hub into an accessible experience through UX audits and IA restructuring.

Likes

0

Views

0

Clients

Open Learning Initiative