Hi, I'm Mandy; a designer and developer —

From discovery and exploration to production implementation, I embed with creative, research, and engineering teams to design and develop human-centered interfaces and experiences.

Projects & Prototypes

The following are previews of personal and professional projects where I spearheaded UI/UX, and includes designs that expand on personal usability recommendations that may not reflect the final work. To read more about these and other projects — including roles more dedicated to design engineering — see my work history.

Rise to Health Coalition

Founded by the AMA, IHI, and Race Forward, the Rise to Health Coalition provides insights and actions to transform inequitable policies and practices across the health care ecosystem to benefit workers and patients alike.

As the UI/UX Designer, my responsibilities included:

  • completely reworking the provided wireframes to accommodate a total content overhaul
  • adjusting branding and interactive components to meet WCAG AA conformance while maintaining desired constraints
  • high-fidelity mock-ups, a component library, and developer guidelines
  • documenting, managing, and filtering feedback and revisions from multiple organizations and departments
  • Figma
  • A11y Auditing
  • Brand Application
  • Wireframes
  • Component Library
  • UI
  • UX
  • Photoshop
  • Illustrator

Imaginable Futures

Imaginable Futures works in low-income areas to provide access to childcare, education, and employment opportunities.

As the UI/UX Designer, my responsibilities included:

  • converting static Sketch files to interactive Figma docs
  • adjusting branding and existing design to meet WCAG AA conformance
  • updating layouts and designing new components for an English content refresh
  • designing custom navigation and layouts for a Brazilian Portuguese microsite
  • high-fidelity mock-ups, a component library, and developer guidelines
  • Figma
  • A11y Auditing
  • UI
  • UX
  • Browser Prototypes
  • Sketch
  • Illustrator
Desktop view of a regional page.
Five mobile views highlighting accessibility modifications.
Three mock-ups with interactive features for Congressional data
Legislation detail view
Advanced Search view

Rally

An ongoing side project exploring the design and development of a modular, multi-functional civic engagement tool for individuals, communities, and organizations.

  • Feature Definition
  • Branding
  • Market Research
  • Wireframes
  • UI
  • UX
  • Product Design
  • Browser Prototypes
  • Figma
  • Photoshop
  • Illustrator
  • Eleventy
  • Nunjucks
  • SCSS
  • JavaScript
  • Alpine.js

Kapor Center

The Kapor Center is a family of social impact organizations focused on providing education, outreach, and resources for under-represented communities in tech.

As a UI/UX Designer supporting a major rebranding, my responsibilities included:

  • adapting the provided outlines into refined wireframes
  • making accessibility-driven adjustments to branding and components, including a typeface overhaul
  • creating high-fidelity mock-ups & bespoke graphic assets
  • crafting an interactive component library with corresponding markup, browser protoypes, and production-ready code
  • UI
  • UX
  • Browser Prototypes
  • Figma
  • HTML
  • CSS
Kapor Center - Various interface components

Semi-Fluid Type Guidelines

Even when I'm not responsible for the front-end implementation of a project, I'll create a testbed for existing or potential type styles just to make sure they render legibly across major browsers, device types, and operating systems, which is then included in developer handoffs ready to be dropped directly into the project.

  • Browser Prototypes
  • HTML
  • CSS
  • Typography
  • Styleguide

Channel Oni

Channel Oni was meant to be a free digital library from celebrated comic and graphic novel publisher Oni Press, allowing readers to discover more Oni creators and publications.

As the Lead UI/UX Designer, my responsibilities included:

  • refined existing feature designs and
  • creating wireframes and multi-fidelity mock-ups
  • providing interactive prototypes and production-ready code using Alpine.js and Hugo
  • Market Research
  • Feature Concepts
  • Wireframes
  • UI
  • UX
  • Product Design
  • Browser Prototypes
  • Figma
  • Photoshop
  • Illustrator
  • Hugo
  • HTML
  • SCSS
  • JavaScript
  • Alpine.js
Channel Oni - Card components for each recent release that displays the name of the publication, a preview of the artwork, the issue and page numbers, and the most relevant keywords
Channel Oni - Mobile wireframes for the individual comic page view

Proof-of-concept for the basic comic feed panels.

  • UI
  • UX
  • Browser Prototypes
  • HTML
  • CSS

Ephemeri

Ephemeri is a side project for a small, single-purpose web application around a topic with a range of complexity that allows for a flexible, user-defined experience.

  • Branding
  • UI
  • UX
  • Browser Prototypes
  • Figma
  • Illustrator
  • HTML
  • CSS
Ephemeri - Homepage preview

Sparkling constellations with sibling-index()

After adding a few static constellations to the background of the Ephemeri homepage for visual interest, I wanted to assess the practicality — rather; potential annoyance — of having them animate in.

Using Illustrator to create the SVGs (and going through the motions to make its output usable), I built the core functionality of this demo before deciding to implement the [currently] Chrome Canary-only sibling-index() feature to create a sparkle effect across the celestial objects.

As a fallback for other browsers, the brightness of the objects is a slow pulse, and for users who have prefers-reduced-motion the path moves slower and the objects animate to full brightness once and stop.

  • Browser Prototypes
  • Illustrator
  • HTML
  • CSS