Community Impact Website
A nonprofit organization dedicated to advancing education, financial security, and health equity.
Client
Drio Duo
Year
2024 - Present
Services
WordPress Development, UX/UI Implementation, Website Optimization, Design System Development
Technologies
Figma, Wordpress, Gutenberg, HTML, PHP, SCSS, JS, ACF
Project at a glance
From design challenges to a functional digital experience.
Brought in by Drio Duo to help overcome development challenges and bring an approved nonprofit website redesign to life. My work focused on WordPress development, usability, performance, and implementing updated brand standards to support a cohesive, maintainable digital experience.
Development challenges
Stepped in after the initial implementation encountered challenges, helping translate approved designs into a functional, responsive WordPress website.
User experience + functionality
Translated designs into responsive WordPress pages and components with a focus on usability, navigation, and performance.
Brand evolution
Supported the transition to United Way's updated national branding across the regional website.
Design system foundation
Created a Figma style guide to establish reusable visual standards for future website designs and updates.
The challenge
United Way of Central Maryland needed a redesigned website that made it easier for visitors to explore programs, access community resources, and engage with the organization's mission. While the visual direction had been established, the initial development effort struggled to translate the approved designs into a functional, responsive, and optimized WordPress experience.
Drio Duo brought me into the project to help overcome these implementation challenges and move the website forward. The work required balancing design fidelity, usability, performance, and the flexibility needed to manage a content-rich nonprofit website.
As the project evolved, an additional challenge emerged: incorporating United Way's updated national branding into the regional website while maintaining consistency across existing pages and future design initiatives.
Before and after: A refreshed homepage with updated branding, improved visual hierarchy, and clearer pathways to community resources.
My approach
I partnered with Drio Duo to resolve development challenges and bring the approved designs to life in WordPress, focusing on usability, performance, and responsive design. I also helped implement updated branding and created a Figma style guide to support future website initiatives.
Assess & troubleshoot
Reviewed the existing implementation and approved designs to identify development challenges, usability concerns, and opportunities to improve the website's structure and functionality.
Develop & optimize
Translated the approved designs into responsive WordPress experiences using Gutenberg, ACF, PHP, SCSS, and JavaScript, with attention to functionality, performance, and content management.
Align with new brand standards
Helped implement United Way's updated national visual identity across the regional website, adapting existing pages and components to the new branding.
Document & standardize
Created a Figma style guide to document typography, colors, and reusable visual standards, providing a foundation for consistent future design mockups and website updates.
Wordpress Development
Bringing the redesign to life
Drio Duo brought me in to continue the first iteration of the website redesign after the initial development encountered challenges. I worked to translate the approved designs into a responsive, functional WordPress experience, addressing implementation issues while focusing on design accuracy, usability, and performance.
Initial website redesign
WordPress implementation
Brand Implementation
Adapting to the new United Way identity
Translated updated national branding into a Figma style guide and website designs, establishing consistent visual standards across components, page layouts, and future initiatives.
Website design system
Figma style guide for consistent website design and development.
Resources redesign exploration
Explored page layouts using updated branding and improved visual hierarchy.
The outcome
The result was a more functional, cohesive, and user-friendly WordPress experience that brought United Way of Central Maryland's redesigned website to life. The updated implementation provided clearer pathways to programs, resources, and opportunities to get involved, while supporting the organization's ongoing content needs.
Beyond the initial redesign, the adoption of United Way's updated national branding and the creation of a dedicated Figma style guide established a stronger foundation for visual consistency across future website initiatives.
Improved user experience
Created a more intuitive, responsive website with clearer navigation and pathways to programs, resources, and opportunities to get involved.
Cohesive brand experience
Integrated updated national branding across the website, creating a more consistent visual experience throughout key pages and components.
Scalable design foundation
Established reusable WordPress components and Figma style standards to support consistent design, easier content management, and future website updates.
What I learned
Working on United Way of Central Maryland reinforced how important the relationship between design and development is to creating a successful digital experience. Joining a project after the initial implementation encountered challenges required me to understand the existing work, identify what wasn't functioning as intended, and determine how to move forward while respecting the approved designs and project goals.
The experience strengthened my ability to troubleshoot complex WordPress implementations, balance design fidelity with technical requirements, and think critically about how website structure, performance, and functionality influence the user experience. It also reinforced the importance of building flexible solutions that support the people responsible for maintaining and updating the website. Supporting the transition to United Way's updated national branding gave me another opportunity to work at the intersection of visual design, development, and design systems. Creating the Figma style guide showed how documenting standards can help bridge the gap between design and implementation, improve consistency, and make future collaboration more efficient.
Most importantly, the project reinforced that delivering a successful website involves more than reproducing a design. It requires understanding the organization's goals, anticipating user and content needs, solving technical challenges, and creating an experience that can continue evolving after launch.
Browse More Projects
Let’s create something great together.
If you’re ready to transform your idea into an intuitive digital experience, I’m here to help.
