Project Overview

Arizona State Parks & Trails operates a high-traffic government platform serving over 14 million annual visitors. When I joined, the site was sitting at 71% WCAG compliance — 14 percentage points below the industry average of 86.49% — with over 246,000 flagged accessibility violations across 907 crawled pages. My job was to take the platform from legal exposure to full compliance, working solo across two organizational teams over 13 weeks.

The Challenge

• Government entities are legally required by the Department of Justice to meet ADA accessibility standards

• 246,544 individual violations made manual, one-by-one remediation impractical without a systematic triage approach

• Violations spanned multiple ownership layers: some fixable directly in content, others injected at the CMS level by CKEditor, others requiring vendor-side changes from Tyler Technologies

• Working solo meant owning both the technical audit and the cross-team coordination required to get vendor fixes prioritized

Role & Responsibilities

• Ran full-site crawls via Acquia Web Governance to inventory every violation

• Built a triage spreadsheet categorizing violations by type, severity, and ownership (content layer, CMS configuration, or vendor-side)

• Fixed content-layer violations directly — missing alt text, improper heading hierarchy, insufficient color contrast, empty links, missing form labels

• Identified CKEditor as a high-volume root cause injecting non-compliant HTML on save, and escalated it for CMS-level whitelisting

• Documented and coordinated with Tyler Technologies' vendor development team through to resolution

• Re-ran crawls weekly to track progress, validate fixes, and catch regressions

• Reported progress directly to Arizona State Parks Deputy Director 

Key UX Decisions

The key decision wasn't fixing violations one by one — it was tracing 246,000+ of them back to a single systemic root cause in CKEditor, then escalating that fix instead of chasing volume.

Process & Rationale

• Prioritized diagnosing the CKEditor root cause over immediately fixing individual violations one by one — slower early progress, but a single systemic fix that resolved the bulk of the problem at once

• Chose to build a repeatable triage methodology rather than treat this as a one-time cleanup, so the process could be maintained after the engagement ended

• Systemic fixes over volume remediation was the operating principle throughout

Project Goals

• Bring the platform from 71% to full WCAG 2.2 compliance

• Establish a triage methodology that separates content-layer, CMS-level, and vendor-level issues

• Build a vendor escalation workflow that could resolve CMS-injected violations at the source

• Create a monitoring cadence the organization could sustain going forward

• Communicate progress clearly to non-technical leadership stakeholders

The Outcome

• Compliance rose from 71% to 98.31% in 13 weeks

• Violations dropped from 246,544 to 2,786 — a 98.9% reduction — across 863 crawled pages

• Final score landed nearly 12 percentage points above the 86.49% industry average

• The CKEditor whitelisting fix was a systemic change, preventing future violations from being reintroduced at the content level, not just a one-time cleanup

Skills Demonstrated

WCAG 2.2 · ADA Compliance · Acquia CMS · Web Governance · Triage Methodology · Vendor Management · Stakeholder Communication · Manual Auditing · CKEditor

Project Overview

A national banking institution planned to expand its reach by launching a mobile banking app that brings key in-person services online. The goal was to create a secure, intuitive experience that allows users to manage accounts, access services, and receive support without friction.

The Challenge

Designing a banking app comes with layered complexity:

• Users expect clarity, security, and trust

• Interfaces must handle sensitive data

• Accessibility is non-negotiable, especially for form validation

• Brand, typography, color, imagery, and layout were all predefined and constrained
  

The goal was to elevate usability and polish without deviating from approved wireframes, while ensuring the product felt modern, intuitive, and scalable.

Role & Responsibilities

Develop high-fidelity mockups in Figma based on approved wireframes.

• Integrated client feedback and requirements into final designs

• Applied brand colors, typography, imagery, and logo usage per style guide

• Designed interactive button states (default, hover, active, disabled)

• Ensured visual hierarchy, readability, and spacing across all screens

• Designed navigation patterns allowing access to all app sections from every screen
  

Design Goals

Create a frictionless login experience that prioritizes security and trust

• Design a dashboard that surfaces critical information at a glance

• Clearly communicate banking services and user benefits

• Provide accessible, multi-channel support with inclusive form feedback

• Apply brand standards consistently across all screens

• Ensure full navigation between all four screens

• Incorporate interaction states for all CTAs

The Outcome

A cohesive, brand-aligned mobile banking experience

• Clear navigation and visual hierarchy across all screens

• Accessible form validation patterns for colorblind users

• Accessible interaction patterns suitable for real-world banking users

• A scalable design foundation ready for development handoff

Key UX Decisions

I was responsible for transforming approved wireframes into high-fidelity mockups while incorporating client feedback, brand standards, accessibility requirements, and interactive states across the application. This project demonstrates my ability to design regulated, trust-based digital products while balancing UX, content clarity, accessibility, and strict brand constraints.

Login Screen

• Prioritized simplicity and clarity to reduce cognitive load

• Included clear paths for password recovery and account creation

• Designed CTA button states to communicate interactivity and security

• Reinforced trust through consistent branding and clean layout

Home / Dashboard

• Surfaced account balances, transactions, and primary actions immediately

• Used negative space and hierarchy to reduce overwhelm

• Enabled intuitive navigation to Services and Support from the dashboard

Services

• Organized banking features into clear, scannable sections

• Focused content on user benefits rather than internal banking language

• Designed layouts to support future feature expansion

Support

• Provided multiple contact options including phone, email, address, FAQs, and a form

• Designed accessible form validation using Icons and text labels in addition to color Focus and hover states for all inputs & Inline error messaging for individual fields

• Ensured feedback appears contextually, improving clarity and reducing form errors

Accessibility & Interaction Design

Accessibility considerations were built directly into the UI:

• Color contrast verified using WCAG guidelines

• Form validation used multiple feedback methods beyond color alone

• Focus and hover states were clearly defined for keyboard and assistive technology users

• Button states communicated availability and action clearly across all screens

Project Overview

Kitchen Tune-Up’s homepage needed to clearly communicate offerings to first-time visitors while reducing confusion caused by a large menu of services. Users struggled to quickly understand what the company did, which products mattered most, and where to go next. Additionally, a redesign had to work within Optimizely’s technical and design constraints while improving SEO performance and page load time. I led UX and content optimization for the homepage redesign, partnering closely with the brand manager to align business goals, content strategy, and technical feasibility within Optimizely.

The Plan

Instead of introducing new navigation complexity, I focused on content hierarchy and reduction.

• Added new content blocks and optimized existing ones to clarify offerings quickly above the fold

• Prioritized the top four products and services to reduce cognitive load and support SEO

• Streamlined content to reduce unnecessary clicks and decision fatigue

• Collaborated with the brand manager to refresh and optimize imagery, improving visual clarity and reducing page load time

Project Goals

• Improve clarity for first-time visitors

• Reduce friction caused by too many navigation options

• Highlight core products and services for SEO and conversions

• Improve performance without a full redesign or rebuild

• Work within Optimizely's technical constraints to avoid relying on new development work or needing to deploy new code.

• Utilize RAD development methodology to quickly develop and deploy new design framework to remove iterative design process between departments for quick turnaround & implementation.

What Changed

The redesigned homepage introduced:

• Clear product and service prioritization for faster user understanding

• Interactive elements, including a product carousel and FAQ accordion, to support exploration without overwhelming users

• Optimized imagery and content structure to improve performance and SEO outcomes

The result was a homepage that guides users instead of confronting them.

Design Impact

Improved clarity of offerings for new visitors

• Reduced friction caused by excessive navigation options

• Enhanced SEO alignment through strategic content prioritization

• Improved page load performance through optimized imagery

Retrospective

This project reinforced the importance of designing for clarity within real-world CMS constraints and showed how thoughtful content prioritization can significantly improve user experience without a full visual overhaul.

Project Overview

ElephAid is a nonprofit organization whose mobile app was experiencing severe usability and functionality issues that directly impacted user trust and donation completion. Core flows were broken, navigation was confusing, and accessibility issues created friction for users attempting to support the organization.

The Problem

The existing app suffered from critical UX and functional failures:

• Donation page returned a 404 error and did not allow users to donate

• Forms lacked required field indicators and submit actions

• Navigation was confusing and inconsistent

• Accessibility issues with contrast, legibility, and hierarchy

• CTAs were unclear, inconsistent, or misleading

• Overall design appeared unprofessional, reducing trust

These issues directly conflicted with the organization’s core business objective: encouraging user engagement and donations.

The Process

My Role & Responsibilities:

• Redesigned the app UXUI and user flows in Figma

• Rebuilt the donation experience from the ground up

• Applied accessibility best practices (WCAG contrast, legibility, feedback)

• Created clear content hierarchy and page structure

• Implemented consistent UI patterns using the provided UI kit

• Incorporated client feedback into revised designs

Design Goals

• Restore trust and credibility in the donation experience

• Create a clear, secure, and accessible payment flow

• Improve navigation and content clarity

• Reduce user frustration and cognitive load

• Align the interface with brand guidelines while modernizing the UI

• Address accessibility and usability issues identified in testing

What Changed

The redesigned ElephAid app delivered:

• A fully functional, accessible donation flow

• Improved navigation and content clarity

• A modernized UI aligned with brand identity

• Reduced friction in key user journeys

• Increased user trust through confirmation and feedback mechanisms

Key UX Decisions

The goal of this project was to redesign the app experience to improve clarity, accessibility, and conversion while aligning with ElephAid’s brand identity and mission. This project demonstrates my ability to identify systemic UX failures and redesign experiences that balance user needs, accessibility, and business goals, even within defined constraints.

Donation Experience Redesign

The donation flow was completely rebuilt to eliminate functional and trust issues:

• Created a secure, structured payment form with only essential fields

• Clearly indicated required fields using asterisks

• Added inline visual validation for correct and incorrect inputs

• Included a confirmation modal to reassure users that their donation was successful

• Used visual cues beyond color alone to support accessibility

This transformed the donation experience from broken and frustrating into clear, secure, and confidence-building.

Navigation & Content Structure

To reduce confusion and improve task completion:

• Introduced a clear hamburger menu with large, labeled navigation items

• Added secondary navigation in the footer to surface additional content such as stories, stats, and videos

• Created a logical content flow guiding users from mission → impact → action (donate or volunteer)

• Ensured all pages were clearly titled and interconnected

This structure allowed users to explore content at their own pace while always keeping donation and volunteer actions accessible.

Accessibility Improvements

Accessibility was addressed systematically across the app:

• Color contrast validated using WebAIM tools

• Text and images separated to prevent clipping and legibility issues

• Uniform button shapes and clear CTA labeling

• Visual feedback for all buttons and form interactions

• Removal of non-functional or unnecessary elements such as broken search

These changes ensured the app was usable for a broader audience while meeting accessibility standards.

User-Centered Design Approach

The design addressed the needs of two primary user personas:

• Users seeking reassurance that donations are secure and impactful

• Users wanting clear information about how funds are used

By emphasizing transparency, confirmation, and storytelling through stats and content, the redesigned experience reduced anxiety around payment and strengthened trust in the organization.

Client Feedback Integration

Design iterations incorporated direct client feedback, including:

• Adding required billing and contact fields to the donation form

• Updating typography to match brand guidelines (Avenir and Garamond)

• Enhancing secondary navigation to support task-based user needs

• Adding additional contact and social links without overcrowding primary screens

Feedback was implemented thoughtfully while maintaining usability and visual balance.

Key Takeaways

This work highlights strengths in:

• UX problem solving

• Accessibility-first design

• Content hierarchy and navigation

• Trust-building in high-stakes user flows

• Translating feedback into actionable design improvements