Case Study: Product Management & Web Design
BLDA Website
Designing and building an independent digital presence for Business Leaders for Diverse Abilities (BLDA) at Michigan Ross, from a Figma homepage design to a coded, accessibility-focused website.
UX Research & Design
Product Design
Operation & Strategy
Client
Ross (BLDA)
Timeframe
Aug – Oct 2026
Role
Product Manager
Team
BLDA board
Tools
The project at a glance
Original homepage design in Figma, in light and dark.
Interactive prototype built in Framer: Home and Events.
Final website on mbablda.org, built in HTML, CSS and JavaScript and deployed on Netlify.
Problem
How might we increase awareness of BLDA?
BLDA, the disability affinity club for Michigan Ross MBA students, has a meaningful mission but was not reaching as many students as hoped. With CampusGroups discontinued for the 2026 academic year, we also needed an independent place to explain what BLDA does.
Discoverability
Students needed one place to learn about BLDA.
Communication
The mission and value of the club needed clearer messaging.
Engagement
Students needed a way to explore initiatives and get involved.
External visibility
BLDA needed a recognizable presence for partners and collaborators.
Research
What I looked at
Content
Mission, initiatives, team, events, ways to get involved, and contact details on ublda.org.
Visuals
Photography, typography, layout, hierarchy, and branding.
Imagery
Photos make an organization feel tangible by showing its people and activities.
Gaps
Where the MBA site could express its own identity instead of copying the undergraduate site.
Reference Research
Learning from ublda.org
Before building, I reviewed the undergraduate BLDA website (ublda.org): what it communicates, how it looks, and what an MBA chapter could do differently. I was not trying to copy it. I wanted to understand what an organization like BLDA should tell prospective members and outside visitors.
How I wanted to differ
Three decisions set the MBA site apart: following WCAG accessibility guidelines, offering light and dark modes, and using photographs of the officers so visitors can see the people behind the club.
Design decisions
Describe the mission
A more descriptive homepage that explains what BLDA stands for.
Show the people
Officer photographs introduce the community.
Accessible by default
Built to follow WCAG guidelines and checked with WAVE.
Two themes
Light and dark modes let visitors choose what is comfortable.
I designed the homepage in Figma first, then built the other pages in Framer as a prototype.
Design and prototyping
Pivot
Why I moved from Framer to code
I used Figma for the homepage design and Framer to prototype Home and Events. But building in Framer took nearly five weeks alongside school, and BLDA needed a site sooner. I used Claude Code to translate the prototype into HTML, CSS and JavaScript, which took under a week, and deployed it with Netlify.
Framer prototype
Coded site on Netlify
Why change course
Framer took nearly 5 weeks around coursework; the code version took under a week.
What carried over
The Figma-led visual direction and page structure.
What was added
An Accessibility in Tech page.
Accessibility
Making accessibility tangible
I built side-by-side demos of forms, screen readers and keyboard use, each in an inaccessible and an accessible version.
Inaccessible and accessible examples, side by side
Forms, screen readers and keyboard use
Learning through comparison
Before
After
Side-by-side demos compare inaccessible and accessible forms, screen readers and keyboard use.
Final Product
Accessibility and what is next
Accessibility in Tech page
Side-by-side demos of forms, screen readers and keyboard use, each built an inaccessible way and an accessible way.
Future accessibility content
Possible topics include screen-reader compatibility, color contrast, readable typography, and accessible forms.
Future initiatives
BLDA is exploring sports, healthcare and consulting. These are exploratory, not launched programs.
Visit the live website
mbablda.org is the finished site. Opens in a new tab.
Project timeline and scope
about 5 weeks
Framer prototype, built around coursework
under 1 week
Migration to HTML, CSS and JavaScript
5
Pages: Home, Events, Team, Accessibility, Contact
I designed and developed an independent digital presence for BLDA, addressing an organizational awareness challenge while creating a platform that can evolve with the organization. Membership results are not available yet.