Rebuilding MJ’s Website Design Files for Responsiveness & Accessibility Compliance
UI Conversion, Responsive Redesign, Accessibility Compliance
I was tasked with converting and optimizing MJ’s website for accessibility and responsive design. The original site was designed in Adobe Illustrator, which posed limitations for modern web development and component-based design. My role was to:
Convert the design files from Adobe Illustrator to Adobe XD, and finally to Figma, to streamline the developer handoff and create a structured UI style guide.
Ensure full accessibility compliance, implementing WCAG Level AA guidelines across typography, color contrast, interactive elements, and navigation.
Redesign key UI components to improve responsiveness and touch-friendly interactions for mobile users.
Challenge
Non-Responsive Design – The original site was not optimized for mobile devices, making navigation and readability difficult on smaller screens.
Accessibility Gaps – Color contrast issues, small interactive elements, and low visibility text prevented the site from meeting ADA & WCAG Level AA compliance.
Lack of Scalable Design Components – The existing Illustrator-based design was not structured for developer-friendly handoff, requiring a systematic rebuild in Figma.
My Role & Approach
UI Conversion & Design System Setup
Converted static Illustrator files into Adobe XD, then migrated them to Figma, ensuring:
Scalable components for buttons, typography, and interactive elements.
A structured UI style guide for consistency in future updates.
Component-based design for easy developer handoff.
Accessibility Compliance Enhancements
Adjusted color contrast site-wide to meet WCAG AA standards:
Darkened primary brand colors (Magenta, Teal Blue, Red) for improved text readability.
Adjusted overlay opacities on team pages to maintain contrast without compromising aesthetics.
Improved typography legibility:
Increased font sizes and bolded key UI text (e.g., navigation links, team member names, blog tags).
Enhanced touch targets by resizing buttons and interactive elements to 44px minimum height.
Updated mobile navigation:
Made the hamburger menu and search icons white for better visibility on dark backgrounds.
Resized and bolded navigation links to enhance readability.
Mobile Responsiveness Optimization
Ensured all buttons, forms, and navigation elements met mobile usability best practices.
Refined the blog experience by adjusting filter chips, pagination colors, and typography for readability and contrast.
Updated the footer for clearer call-to-action elements and more accessible link visibility.
Results & Impact
Fully Responsive & Developer-Friendly Design – The Figma conversion provided developers with scalable UI components, ensuring faster implementation and future-proofing the design.
Improved Accessibility & Usability – All WCAG AA compliance issues were resolved, enhancing readability, navigation, and mobile usability.
Better User Experience for All Audiences – The refined color contrast, touch targets, and text hierarchy significantly improved accessibility for users with visual impairments and those on mobile devices.
Relevance
This project is a good case study showcasing my ability to:
Optimize and convert legacy designs into modern, scalable UI systems.
Enhance accessibility compliance to meet WCAG standards.
Improve mobile responsiveness for a seamless experience across devices.
Bridge the gap between design and development through structured handoff processes in Figma.
