This page is currently under construction. Check back soon for more examples of work.
Raffetto Real Estate Prototype WIP

I'm the kind of learner who doesn't retain much from just watching tutorials. What really sticks is when I hit roadblocks and have to Google my way through. As a designer working in an agency setting, I rarely get to dive deep into full UI/UX projects. Most of my work involves one-off landing pages or adapting interfaces for marketing.

I wanted a reason to explore the process of building the foundational pieces of a design system: responsive variables, layout grids, components, micro-interactions, and reusable patterns. So I revisited an old project I’d originally designed in Photoshop and used it as my sandbox.

The result is a work-in-progress prototype that includes responsive typography variables (built with future mobile support in mind), card-based components with multiple properties and variants, and other elements I’ve been experimenting with.

This isn’t meant to be a showcase of flawless design execution but rather an example of how much you can learn when you spend the late-night hours (after your wife goes to bed) following your curiosity.
Rhapsody.Health CTAS

Rhapsody needed the ability to add eye-catching CTA styles throughout their site in anticipation of a major product release. They needed a solution that would stand out against the already colorful backdrop. We created three distinct treatments in multiple color systems for each one. The first solution was adding a parallax effect to their current blade treatment with a modified card layout. Per their request the second option was adding a sudo-splash-screen. Knowing that splash screens are not ideal, our solution was to add a translucent background. The third option we provided was a sticky, scaling banner that would shrink upon page scroll and expand again when hovered.
Rhapsody.Health Resource Cards

Rhapsody wanted to improve the functionality of their resource cards and create an organized system to display their various types of content. The original version had a staggered grid caused by the varying amount of content on each card. In addition to redesigning the rest state of the cards, we implemented was an animated hover state that removed the cover image and added a character limit for their longer titles and descriptions.
Payscale seller calculator

Payscale needed a tool that allowed their sales team to more easily calculate the total value of contracts. This internal tool replaced existing spreadsheets and allowed sellers to walk prospective clients through the costs in a branded experience.