Youth Career Resource Website
A youth-focused workforce initiative that helps Baltimore City students explore career pathways and access occupational training and support.
Client
Drio Duo
Year
2025
Services
Website Design & Wordpress Development
Technologies
Figma, Wordpress, Gutenberg, HTML, PHP, SCSS, JS, ACF
Project at a glance
Designing for access and opportunity.
A Baltimore-based youth career initiative needed a standalone website to communicate its mission, organize its programs and resources, and better serve students, educators, employers, and community partners. I partnered with Drio Duo to design and develop a responsive WordPress experience that extended the client’s brand into a clear and accessible digital platform.
Dedicated digital presence
Expanded the initiative from a single landing page into a standalone website.
Design + development
Created the high-fidelity mockups and developed the responsive WordPress website.
Multi-audience experience
Created clear pathways to programs and resources for students, educators, employers, and community partners.
Agency collaboration
Partnered with Drio Duo to translate the client’s branding, messaging, and content needs into the final website experience.
The challenge
The client had previously been limited to a single landing page within another organization's website and needed a dedicated digital presence to support its growing youth career initiative.
The new website needed to communicate the organization's mission, introduce its five core program areas, and guide multiple audiences toward relevant training, resources, and opportunities. The challenge was organizing a significant amount of information without overwhelming users while staying aligned with the client's established branding.
Before and after: The website evolved from a single landing page into a dedicated digital experience with clearer content organization, stronger visual storytelling, and more accessible pathways to programs and resources.
My approach
I partnered with Drio Duo to translate the client’s goals, content, and existing identity into a clear digital experience designed around its programs and audiences.
Structure the experience
Organized the content around the client’s programs and audiences, creating clear pathways to help visitors understand the initiative and find relevant resources.
Extend the visual identity
Worked with the existing logo to establish typography and create bespoke visual elements for the website. I applied the new visual direction throughout the high-fidelity mockups to create a cohesive and engaging experience.
Design + develop
Translated the approved mockups into a responsive WordPress website, maintaining consistency between the designs and final build while prioritizing usability and accessibility.
Collaborate + refine
Worked with Drio Duo throughout the project to incorporate feedback, refine the experience, and ensure the final website aligned with the client’s content, brand, and communication goals.
Design exploration
Establishing the visual direction
I explored multiple homepage directions to establish the visual system, refine the content hierarchy, and create a cohesive experience before moving into development.
Collaboration + Interation
Refining the experience together
I collaborated closely with Drio Duo throughout the design process, using Figma to review concepts, refine the experience, and resolve design and content decisions before translating the approved direction into WordPress.
Design feedback + iteration
Collaborated with Drio Duo in Figma to explore layout options, share recommendations, and refine designs through ongoing feedback.
UX + content decisions
Worked through UX and content details together, including calls to action, visual placement, and other interface decisions before finalizing the experience.
The outcome
The finished website gave the client a dedicated digital presence that is clean, engaging, and easy to navigate. It provides students and other stakeholders with a clear, accessible entry point into career training, resources, and support while better communicating the initiative’s mission and programs.
The final experience also brought the visual identity established during the design process to life across the website. Typography, bespoke graphic elements, and consistent interface styles created a more cohesive digital presence while building on the client’s existing logo.
For development, I translated the approved designs into a custom WordPress Gutenberg theme with reusable custom blocks. This maintained consistency with the original mockups while giving the client greater flexibility to manage content and expand the website as their needs evolve.
What I learned
This project reinforced the importance of designing around both audience and information needs, especially when a website serves several groups with different goals. Organizing a large amount of program information challenged me to think carefully about hierarchy, accessibility, and creating clear pathways without overwhelming users.
It also gave me the opportunity to expand an existing identity into a more complete digital visual system. Working from the client’s logo, I explored typography, bespoke graphic elements, layouts, and interface styles that could work cohesively across the website while still feeling connected to the original brand.
Carrying that direction from Figma into a custom Gutenberg theme strengthened the connection between my design and development process. Building reusable custom blocks required me to think beyond individual page designs and consider how the visual system could translate into flexible components that remained consistent as content changed.
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.
