CAP Tulsa
UX + Content Strategy
Responsive Website Design
CMS Module System
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Designing a mobile-first, multilingual resource for families navigating early childhood education
The Assignment
CAP Tulsa is a leading early childhood education and family services provider in Oklahoma, known for its two-generation approach to reducing poverty. Their website had become an overwhelming directory of dense information, making it difficult for families—many of whom do not speak English as a first language and rely on mobile devices—to find and act on what they needed.
CAP’s team wanted a site that reflected their warm, supportive in-person presence and could function as a tool during real-time conversations with families, while still serving secondary audiences like job seekers, researchers, and community partners.
Requirements:
- Design and develop a robust new CMS website from the ground up.
- Streamline a cohesive digital identity using existing brand elements.
- Enable multilingual functionality in English, Spanish, and Zomi.
- Create a user-friendly tool to engage hard-to-reach audiences.
- Ensure variety through a lean but flexible modular design system.
The Solution
I collaborated with the Good Work development team as lead UX and visual designer, focusing on accessibility, clarity, and ease of use on mobile devices. From the start, we designed the experience around the needs of users who were likely visiting for the first time, often while caring for children or facing stressful circumstances. The goal was to create a calm, intuitive experience that helped families take action quickly and confidently.
We restructured the entire site architecture to better reflect real-world tasks and user priorities. I developed a simplified sitemap, introduced a "Get Started" hub to surface common user goals, and worked closely with the team to ensure that content and page structure were clear and easy to navigate.
Working within a limited development budget, we created a flexible system of 15 reusable content blocks that CAP could customize and reconfigure for future needs. Each block included layout, color, and spacing options to support a wide range of looks and content while keeping the system streamlined.
The final site became not only easier for families to use independently, but also a helpful tool for staff during in-person conversations, extending CAP’s mission of empowerment into their digital presence.
Highlights:
- Simplified site architecture to highlight and clarify key user tasks.
- Delivered a vibrant design system within budget using 15 highly flexible content modules.
- Designed UX to reflect the organization’s core values: data-driven decision-making, innovation, integrity, growth, and empowerment.
- Ensured that CMS and front-end design support varied content lengths across different language translations, and that the site's responsive, multi-column navigation also adapts seamlessly.
- Worked with developers to implement dynamic color variations based on page and scroll position for intuitive way-finding.
"The team exceeded our expectations, delivering not only what we requested but going above and beyond. The result is a significantly improved experience from our past endeavors and a superior end product. We are so happy!"
- Rainey Talbot, Director of Marketing & PR at CAP Tulsa
The Process
1: Discovery + Sitemap
I led the discovery process with CAP’s Director of Marketing, her team, and key stakeholders to define goals, target audiences, and messaging. I drafted a creative brief and facilitated alignment until it was unanimously approved. Once goals were finalized, I designed a sitemap that balanced user clarity with strategic priorities—also requiring consensus. In tandem, the organization’s graphic designer and I audited visual assets across platforms to begin streamlining a cohesive digital identity.
2: Wireframes + Module Plan
After sitemap approval, I developed a modular CMS system designed to support CAP Tulsa’s wide range of content types—from program details and application instructions to assessment data, resource hubs, interactive maps, videos, and financial reports.
By identifying recurring content patterns across more than 30 unique pages, I distilled the site into 15 reusable modules that provide clarity, editorial flexibility, and creative brand expression. These blocks empowered the team to present complex information with consistency and clarity—while keeping updates manageable for a small team.
3: Design Concepts + System
Once the modular system was approved and confirmed within scope and budget, I began exploring visual directions. I presented two full design concepts with accompanying style guides and mockups for the team to choose from. They ultimately selected the bolder, color-blocked direction, which they felt would be more engaging for their audience.
From there, I collaborated with developers to strategize interactive elements that would bring the visuals to life. I built out a tight design system to apply across our modular foundation, staying in close contact with both client and dev teams for reviews and feedback along the way.
CAP's new website became not only easier for families to use independently, but also a helpful tool for staff during in-person conversations, extending CAP’s mission of empowerment into their digital presence.
Project Management
Ariel Kidwell
Development
Good Work
Graphic Illustration
Carlos Moreno
