Overview
Minority and Women-Owned Business Enterprise (MWBE) was created to address historic disparities in City contracting and provide minority and women entrepreneurs increased opportunities to do business with the City.
Project Overview
Diversity Works is a web-based platform designed to empower Minority and Women-owned Business Enterprises (MWBEs) by helping them navigate procurement processes, certification requirements, and contract opportunities. However, the original platform struggled to fulfill its mission due to critical usability issues that created friction for users at every touchpoint.
- Core Challenges
- Low User Engagement
High bounce rate (~45%) indicated users were leaving before taking meaningful action. - Complex Task Flows
Only 42% of users were able to complete essential tasks like certification applications. - Confusing Navigation
Unclear hierarchies and frequent dead ends made the experience feel disjointed. - Poor Content Comprehension
Long, jargon-heavy copy created barriers for users trying to understand key processes and benefits. - Ineffective Data Visualization
Users struggled to interpret funding opportunities and contract metrics due to cluttered, unclear visuals. - Outdated Visual Design
A lack of visual consistency and accessibility features made the platform difficult to use, especially for those with visual or cognitive impairments.
- Low User Engagement
Solution Statement:
The goal of the Diversity Works redesign was to transform an outdated, underperforming platform into a modern, empowering experience for Minority and Women-owned Business Enterprises (MWBEs).
Our mission was to create an interface that is:
- Intuitive enough for first-time users
- Accessible to all, regardless of ability or technical background
- Effective at guiding users through complex tasks—such as certification, funding access, and contract discovery
By streamlining user flows, simplifying language, and improving visual clarity, we aimed to boost engagement, reduce friction, and ensure that every user can confidently navigate and complete critical processes that support business growth.
- User Research Approach: To deeply understand user pain points, I led a mixed-methods research plan:
- Qualitative Methods
- User Interviews (15 MWBE applicants across industries)
- Contextual Inquiry (shadowed users applying for certification)
- Empathy Mapping Workshops with stakeholders
Wireframes
Designs
UX Strategy & Design Execution
As the Senior UX Designer, I led a research-to-execution design sprint that translated user insights into actionable solutions. My role involved facilitating cross-functional collaboration and driving key initiatives across each phase of the process:
1. Navigation Redesign
To reduce friction and improve clarity across key user flows, I introduced several UX improvements grounded in research findings:
- Implemented a guided, step-by-step experience for certification applications and contract searches, helping users stay focused and oriented throughout complex tasks
- Simplified global and local navigation by standardizing iconography and labeling for faster recognition and fewer errors
- Added breadcrumb trails and progress indicators to reinforce wayfinding, reduce cognitive load, and give users a clear sense of progress
2. Modern UI & Accessibility
To create a more inclusive and future-proof experience, I led the UI overhaul with a focus on scalability and accessibility:
- Rebuilt the interface using a modular, scalable design system in Figma, enabling faster iterations and consistent UI patterns across screens
- Applied WCAG 2.1 accessibility standards to ensure compliance and enhance usability for users with visual, motor, and cognitive impairments
- Implemented a clean, high-contrast visual design to improve readability and support underserved user groups, including older adults and low-vision users
3. Content Strategy Overhaul
To make complex information more approachable, I partnered closely with content strategists to create a more user-friendly and task-oriented content experience:
- Simplified legal and bureaucratic jargon into clear, concise language that aligned with the needs and reading levels of diverse users
- Applied progressive disclosure techniques to reveal content contextually—surfacing the right information at the right time without overwhelming users
4. Data Visualization Improvements
To empower users with actionable insights, I designed interactive dashboards that made complex data easier to understand and navigate:
- Created dynamic dashboards to help users track contract status, funding availability, and certification progress in real time
- Included plain-language summaries of key metrics and next steps, specifically tailored for non-technical users and small business owners
- Focused on clarity, hierarchy, and accessibility to ensure that essential data could be quickly understood and acted upon
5. Team Enablement & Iteration
In addition to hands-on design work, I played a key role in mentoring and cross-functional alignment throughout the project:
- Mentored two junior designers on best practices for prototyping, usability testing, and design systems implementation
- Partnered with developers to streamline front-end development by implementing design tokens and reusable UI components
- Facilitated weekly design critiques and stakeholder syncs, ensuring consistent alignment, timely feedback, and shared ownership across teams
Key outcomes
- Navigation: Simplified the site architecture with a clearer, more intuitive menu and improve search functionality.
- User Engagement: Redesigned feature interactions, including interactive elements like left, and right menu bars, interactive pie charts, bar and line graphs.
- Responsive Design: Showcasing new implementation of new responsive design to allow users to use mobile devices on site visits.
- Form Collaborative Teams: Assemble cross-functional teams with members from different departments to work together throughout the design and development process.
Key solutions
- Interactive Elements: Created interactive prototypes which increased user satisfaction by 22%.
- Comprehensive Training: Developed training materials and sessions for city staff to familiarize them with the new application.
- Conduct Interviews: Gather insights from various department stakeholders about their processes, pain points, and how they envision a more integrated service delivery system.
- Develop Prototypes: Create interactive prototypes of the unified platform that demonstrate how different services will work together.
- Form Collaborative Teams: Assemble cross-functional teams with members from different departments to work together throughout the design and development process.
