Currently accepting new freelance work! Tell me about your project.

A mix of personal and professional projects, prototypes, and design explorations.

For the sake of distinction, these are only projects I designed directly (i.e. not where I was only responsible for the front-end implementation of other designers' work).

Rally

Rally is/was a personal study in design systems, social layers, data contextualization, and modular civic engagement tooling initially motivated by a previous project that never launched and re-inspired by the activism of my local community. This theme, applied to components from a previous iteration, was the result of getting distracted by UI while building a rough prototype using Eleventy and Alpine.js.

  • Figma
  • Product Design
  • UI/UX Design
  • Branding
  • Wireframes
  • Design System
  • Browser Prototypes
  • Photoshop
  • Illustrator
  • Eleventy
  • Nunjucks
  • SCSS
  • JavaScript
  • Alpine.js
  • Market Research
  • Feature Development
Rally: Manage > Watching: All Engagements
Rally: My Library (with active Legislation tab)
Rally: Advanced Search page

Rise to Health Coalition

Alongside the wonderful team at Matter Unlimited, I worked with teams from the Institute of Healthcare Improvement, the American Medical Association, and Race Forward to completely redesign a shared initiative website to accommodate a revamped content strategy.

  • adjusted palette and typography for better accessibility and WCAG conformance
  • provided mobile and desktop wireframes for multiple unique pages and content templates
  • created high-fidelity mock-ups & a scalable component library
  • developer hand-off with constraint annotations and HTML/CSS definitions where applicable
  • Figma
  • UI/UX Design
  • WCAG
  • Branding & Application
  • Wireframes
  • Accessibility Auditing
  • Component Library
  • Photoshop
  • Illustrator
Rise to Health Coalition: Impact Areas page
Rise to Health Coalition: Homepage
Rise to Health Coalition: Content Finder page

Imaginable Futures

Once again with the Matter Team, I worked with Imaginable Futures on a couple of projects as they expanded their network.

  • converted their existing Sketch document to Figma with interactive/state-based components
  • provided mobile and desktop mock-ups for content updates to existing pages
  • accessibility consulting with proof of concepts (seen above)
  • designed mobile and desktop layouts for the Brasilian Portuguese microsite
  • UI/UX Design
  • Figma
  • Browser Prototypes
  • Sketch
  • HTML
  • CSS
  • Accessibility Auditing
  • Sketch
  • Illustrator
Imaginable Futures: Brasil (Primary Nav Dropdown)
Imaginable Futures: Brasil (Microsite Internal Page)
Imaginable Futures: Brasil (language switch UI)

Synthesis: Product Encyclopedia & Glossary

While at Steelcase, my team and I conducted multiple formal and informal interviews with colleagues across the organization to find ways we could use design and technology to improve internal processes. We repeatedly heard a need to better understand what other departments were working on to make sure efforts were consolidated and knowledge was shared. My solution was to architect a wiki and glossary-like system with an immediate focus on our tech team projects in order to make their data more accessible, their purpose more clear, and their connections to other initiatives more understood. Priorities shifted after outlining the core features, but I designed this at-a-glance landing page for fun using pseudonyms to describe the SaaS web application I worked on and the related hardware and firmware that were also built in-house.

  • Browser Prototype
  • Wireframes
  • Information Architecture
  • User Interviews
  • Product Development
  • HTML
  • CSS
  • JS
  • SVG
  • Responsive

Grid Cards

A simple grid prototype with various interaction points and additional features on :hover, originally designed as a proof of concept for a feed of recently-updated comics for Oni Press.

  • Browser Prototype
  • Codepen
  • HTML
  • CSS
  • Responsive
  • Figma

SVG Constellations

Uses CSS sibling-index() function that creates a sparkle effect across the celestial objects that make up some of the major constellations. Animates the SVG's paths between these objects to show the inferred final shape.

  • Codepen
  • HTML
  • CSS
  • SVG
  • Browser Prototypes
  • Illustrator