Legal & Ethics Venture Institute

A strategic rebranding and functional React prototype to transform a static text-heavy page into an engaging user friendly prototype.

Role: Design & Front-end

•

Tech: Figma + React + Tailwind

•

Duration: 4 weeks

TL;DR

Cognitive Load

Replaced dense legal paragraphs with progressive disclosure UI (Cards & Timelines).

01

Navigability

100% Keyboard and screen-reader accessible semantic HTML structure and breadcrumbs

02

Responsiveness

Fluid typography and minimum 44x44px touch targets implemented for mobile users.

03

| Problem

The

Identity Crisis

The original website suffered from an identity crisis. It looked like a PowerPoint presentation, walls of text that made students assume it was just another lecture series. The goal was to rebrand it as a 'Venture Institute' while keeping the academic rigor.

Key Challenges

I had to figure out how to make walls of text engaging without losing meaning.

1

The Constraint

Keep All The Text.

The only requirement was: Don't delete anything. My challenge wasn't just 'redesigning', it was figuring out how to make heavy legal definitions engaging without losing the meaning.

I had to guide the user's eye so they wouldn't get bored.

2

The Fix

Visual Storytelling.

Instead of hiding the text, I styled it. For the 'Who We Are' section, I used a 'Redline' pattern to cross out what LEVI is not. This turned a boring list into a bold statement.

3

The Build

Tailwind as Design

I used Tailwind CSS to enforce this hierarchy in the browser. Using utility classes, I muted the 'rejected' text and applied a bold strike-through to ensure the meaning was clear even to screen readers.

| Redesigned features

  1. Inclusive Themes

Dark mode isn't just an aesthetic trend; it's an accessibility feature. However, for users with astigmatism, dark mode can cause 'halation' (text blurring). I engineered a seamless theme toggle that respects system preferences, dynamically shifting the brand palette to maintain strict WCAG AA contrast ratios in both environments.

  1. Journey as Timeline

I transformed a standard text-heavy roadmap into a responsive, vertical timeline. By alternating left and right alignments and using clear visual nodes, I created a spatial rhythm. This progressive disclosure allows users—especially those with cognitive or attention-related disabilities—to digest complex project phases one step at a time without feeling overwhelmed.

Theme: Greek Futurism

To bridge 'Ancient Law' and 'Future Tech', I combined classical layouts with neon accents.

Colors

Void Black

#000000

Alert Red

#F43D41

Ash Grey

#9CA3AF

Typography

Inter

Primary Sans-Serif

Bold Headlines

Regular Body

Secondary Info

Timeline

Week 1

UX Audit & Research

Week 2 & 3

Ideate & Design

Week 4 & 5

Development

Final Product

Final Thoughts

The biggest takeaway from redesigning LEVI was unlearning the myth that 'accessible' means 'boring.' Designing for edge cases—like ensuring a high-energy brand palette works for low-vision users—didn't dilute the brand. Instead, it forced a cleaner, more deliberate visual hierarchy that improved the usability for every single user. Good accessibility is just good design.