Where design meets
production code.
Architecting digital systems, 360° web experiences, and interactive learning environments, while leading a team to turn complex information into effortless human connections.
With 18+ years spanning design systems, web architecture, and interactive storytelling, I listen first to reframe complex, multi-faceted concepts into clear, empathetic digital experiences that resonate deeply with users.
Impact that scaled
Outcomes delivered across enterprise UI systems and product experiences.
Built & maintained a Figma + coded UI component library serving experiences for millions of active users.
Users preferred experience-designer-built flows over unassisted baselines in a 2024 comparative study.
Every surveyed user agreed navigation & IA improvements measurably boosted task success.
Mentored a small, high-craft experience-design team; championed technical excellence & accessibility.
AI-accelerated, human-directed
I treat AI as a force multiplier on craft - faster scaffolding and iteration, with judgment, accessibility, and quality staying firmly human.
Component scaffolding
GitHub Copilot & Claude to draft component boilerplate and variants, so more time goes to interaction detail and polish.
Prompt-driven prototyping
Standing up throwaway prototypes fast to test an interaction idea with the team before committing engineering effort.
Design → code handoff
AI-assisted translation of Figma specs into clean, framework-ready markup - tightening the loop between designers and engineers.
Workflow automation
ChatGPT & scripted intake automations that remove repetitive steps and raise consistency across the team's output.
A 0-to-1 enterprise design system, built as code
Figma library, design tokens, and multi-platform variables that keep design and engineering in lockstep - with accessibility as the foundation, not an afterthought.
UM System's enterprise Figma Design library & custom UI design tokens
Built the enterprise component library from zero: a componentized Figma library backed by a design-token architecture, with shared variables authored to travel across web, iOS, and Android surfaces rather than live in one CMS alone. Extended a constrained platform with custom grid/flex layouts, CSS 3D flip-cards, hero overlays, auto-columnizers, and accessible callouts - documented and reused across hundreds of pages by non-engineers. The system runs across 4 unique instances, powering over 100,000 users and millions of unique views daily.
Walkthrough: the enterprise CSS style guide
Live in CanvasThe documented style guide that powers the Welcome Guide (and every other page built on this system) - every component cataloged, versioned, and organized by category for non-engineer authors to reuse.
Individual components, pulled from the same CSS
Five of the reusable pieces cataloged in the style guide above - each documented on its own so authors can grab exactly the component they need.
Fluent in both rooms
I operate where design intent becomes real, working code - component engineering, high-fidelity prototyping, design-to-engineering handoff, AI-accelerated workflows, and accessibility as a mark of craft.
Competency Balance
360° web design, brand cohesion & creative campaigns
Responsive frameworks and brand systems carried consistently - from an onboarding guide to public-facing campaign sites.
From a static orientation outline to Mizzou Online's interactive faculty portal
Transformed a static, multi-page welcome packet into a responsive, brand-aligned Canvas portal for faculty, department chairs, deans, and campus stakeholders - one that streamlines institutional workflows, clarifies compliance mandates, and makes the design team's value legible at a glance.
The legacy state
- • Orientation content, department structure, and service tiers scattered across static PDFs and email attachments.
- • 16-week build cycles and Quality Course Review timelines were opaque, causing scoping confusion and missed deadlines.
- • Documentation undersold the pedagogical rigor and empirical impact of the Design Services team.
- • No high-visibility platform to educate faculty ahead of the incoming ADA Title II (2027) accessibility mandate.
The redesigned portal
- • Restructured into 5 modular blocks: identity & leadership, case for design, department matrix, build timelines, quality frameworks.
- • Tabbed departmental switcher replacing endless scrolling across all five Mizzou Online divisions.
- • A 17-column, color-coded Gantt matrix visualizing parallel Planning / ID / XD / Review sprints across the 16-week build.
- • High-contrast callouts for the Four Pillars of Quality Courses, the QCR lifecycle, and the April 2027 ADA Title II deadline.
The production version lives inside Mizzou's Canvas LMS, gated behind university login. This interactive rebuild reproduces the full portal - every tab, timeline, and callout - outside that walled garden for use on the Mizzou Online website.
View the web-based demo (opens in a new tab)Where a blank page becomes a brand
Before design systems and code, there was ink, grids, and color theory. Marks, palettes, and type built as systems - then carried across identities, layouts, and campaigns spanning fifteen-plus years of freelance and in-house craft.
Marks, lockups, and clear-space rules - identities built to hold up at every size and on every surface.
Palettes designed as systems, not swatches - primary, secondary, and semantic roles with documented contrast pairings so every downstream designer stays on-brand and accessible.
Selected work
A running collection of print and digital design work - identities, layouts, and campaigns.
Universal Trail Access
QCR Summer Camp series · Mizzou Online
The Universal Training Map
QCR Summer Camp series · Mizzou Online
Design Services
"Take your course way beyond" · Missouri Online
Focus Group & Survey Overview
Design Services user research · Missouri Online
Academic Technologies Roadmap
2024 feature roadmap · Missouri Online
Boonslick Bulletin
Community newspaper identity
Holiday Toy Swap
WJ's, Boonville
Skip the Line Raffle
School parking-spot fundraiser
Pancake Breakfast Fundraiser
Cooper County Democrats
Bechtel for Mayor
Platform mailer, back panel
Under Contract
The Walters Team, eXp Realty
Websites where I've left my mark
Three current public web properties I once designed, developed, and maintained - each carrying its organization's branding, messaging, style and tone from homepage to footer.
teaching.missouri.edu
Developed and maintain this site and the Mizzou Online Design Services brand identity during my employment with the University of Missouri - the public front door to the course design, training, and accessibility services detailed in the case study above.
Visit site (opens in a new tab) Web & brand · Empower Missouriempowermissouri.org
Developed and maintained this site and Empower Missouri's brand identity during my employment as Director of Digital Strategy & Communications - a responsive layout carrying one consistent brand across outreach and campaign pages.
Visit site (opens in a new tab) Web & brand · Discover the Districtdiscoverthedistrict.com
Developed and maintained this site and Discover the District's brand identity during my employment with the organization - a campaign-driven marketing site pairing a responsive framework with a focused landing-page structure.
Visit site (opens in a new tab)Brands I've Managed
University systems, nonprofits, campaigns, and small businesses - brand identities and web presences I've built and maintained across every role.
Turning dense content into guided experiences
Utilizing strategic marketing & communications, UX/UI, and instructional design experience to build empathetic story arcs with purpose.
Instructional design principles I build from
Analyze, design, develop, implement, evaluate - the backbone process behind every module build.
Universal Design for Learning: multiple means of representation, action, and engagement, by default.
Layering complexity gradually so learners always have a foothold before the next concept lands.
Andragogy: designing for self-direction, prior experience, and immediate relevance.
Milestones, progress states, and low-stakes feedback loops that keep momentum without gimmicks.
Managing cognitive load to build interactive flow
Restructured a dense, unstructured instructions page into a responsive, chunked, four-frame interactive module. Storyboarded the 6narrative arc first, then paced users through milestones with progressive disclosure - cutting cognitive load and reducing repeat "how does this work?" questions. See the before/after walkthrough below.
Broke a linear text dump into four user intents: why, what, timeline, rules.
Two-column responsive layout pairing overview media with supporting visuals.
Collapsible timeline accordion reclaiming vertical space without hiding intent.
High-contrast do / don't cards so constraints are impossible to miss.
Walkthrough: before & after
Interactive muscle map
Custom JS, CSS, & HTMLA custom interactive diagram component built to unpack an anatomy-dense subject module by module.
Master Gardeners
Rise 360 · SCORMRise 360 SCORM interactives built for the Master Gardeners program - self-contained, gamified modules that drop into any LMS.
Design that leaves the screen
Booklets, magazines, program brochures, handbills, and event collateral - designed for print production.
The Missouri Online Design Services tri-fold - a system-wide program brochure introducing course & experience design, training, and quality course review services to faculty across all four UM System campuses.
Fully customized editorial and magazine layouts while maintaining a cohesive visual identity and brand loyalty.
Laminated handbills for a local mayoral campaign - quick-turn, door-to-door collateral built to survive a full canvassing season.
Foldout comparison charts and pocket guides breaking down birth control and STI-prevention options - dense clinical information made scannable at a glance.
A feature spread laid out for print - full-bleed photography, a pull-quote headline, and a measure built for long-form reading.
Testimonials
A few words from colleagues, faculty partners, and clients.
"Working with her was such a great experience! She was incredibly creative, detail-oriented, and really took the time to understand my vision for my seller guide. She had great ideas throughout the process and made everything feel easy and organized. The final product turned out even better than I had imagined, and I'm so excited to start using it with my clients. I would absolutely recommend her to anyone looking for high-quality, thoughtful design work!"
"Working with Persephone was transformative for my course! Her insight as an Experience Designer and her ability to structure complex material into an engaging, student-centered online curriculum was invaluable. She took the stress out of the process, and my students love the final product. Truly high-quality design work that I would recommend to any colleague."
"Persephone is a fantastic Design Technologist. In our large-scale course redevelopments, she demonstrated exceptional skill in balancing innovative technology with sound pedagogical principles. Her meticulous attention to detail, proactive approach, and collaborative nature made a significant positive impact on our department's output. A truly invaluable asset to any instructional design team!"
