Hello, I’m Patrick
Hill, a product designer.

Pie Menu Hover State

Selection interaction for pie menu.

Skills: ui design, motion design, front-end dev

Tools: figma, tailwind, react, astro, claude code

Client: Voxie

---

Cub Notes Icon

I'm working on a notes app. The aim is to combine the simplicity of Bear with a plain text, file-over-app workflow. The placeholder name is Cub. I created this icon set to go along with it. The final app probably won't use this name or icon to avoid confusion with Bear but I had some fun making it anyway.

Skills: icon design

Tools: figma

Client: Cub Notes

Node Settings

This is a reusable UI for picking options on nodes in a workflow builder. Most of the work on this went into exploring variations on how to present and organize the options available. I needed something that worked just as well for a few options as it would for forty. I used chunking to break down sets of options into related categories for novice users and added search with a keyboard hotkey to allow expert users to quickly find what they needed. I also focused a lot on refining details like state transitions and interactions to give users a sense direction and space as they moved around.

Skills: design, animation, front-end dev

Tools: figma, tailwind, vue, astro, claude code

Client: Voxie

More: https://voxie.com

Autosave Interaction

A prototype for notifying users that changes are being saved. I wanted to grab their attention but not use intrusive or distracting elements like pop-ups or toasts. This shows the user both that their work is being saved and where they can go to see the change history. To keep it from being annoying, the long-term intent would be for this to simplify as the user learns so only the inline animation shows.

Tools: figma, tailwind, vue, astro, claude code

Client: Voxie

More: https://voxie.com

AI Message Recommendations

This prototype shows the interaction and loading states for an AI suggestion UI where the user writes guidance on how an agent should behave. AI suggestions can be invoked to improve what the user wrote. My main focus here was to create a fluid experience where details move and reveal in a pleasing way while keeping the overall interaction quick and responsive.

Skills: design, animation, front-end dev

Tools: figma, tailwind, vue, astro, claude code

Client: Voxie

More: https://voxie.com

Darkmode Tinted Icons

I finally got around to updating these app icons for darkmode and tinted mode on iOS. The originals were already on dark backgrounds so they worked ok but it feels so much nicer to have them fine tuned for these purposes.

Client: The Web Workers

More: https://thewebworkers.co

Multi Select Threads

Voxie has a feature called groups that allows contacts to be associated with franchise locations. They also have a message hub where users can bulk select threads and process them. This design brings the two together so that a user can quickly triage incoming messages. We can't just show one set of actions for all threads because groups might have different phone numbers or feature access. Instead, we chunk the threads together with relevant actions surfaced for quick access.

Skills: design

Tools: figma

Client: Voxie

More: https://voxie.com

OU Folder Animation

Folder animation for Voxie's organizational unit feature.

Skills: design, animation, front-end dev

Tools: figma, tailwind, vue, astro

Client: Voxie

More: https://voxie.com

Finish Meditation Early

I added a "finish early" feature to Zenti, a meditation timer. It allows you to end your meditation before the timer goes off and still save the time you already spent. This demos some of some of the effort I put into fine tuning the animation and placement in the UI.

Client: Zenti

More: https://zenti.app

Workflow Toggle

Toggles for showing and hiding sections of a workflow builder. Made the hit targets the same size as the buttons so the lines are easy to click. Hover state works on the same hit area giving you visual feedback that the sections can be toggled.

Client: Voxie

More: https://voxie.com

Voxie Follow-up

After creating am SMS campaign, scheduling a follow up can significantly increase conversion. I thought it would be fun to create a tear-off ticket that changes into a form. My goal was to keep the callout minimal while still bringing some life into the UI.

Client: Voxie

More: https://www.voxie.com/

Zenti Widgets

I designed and built this iOS widget in SwiftUI to give users an easy way to track their meditation progress from their home screens.

Client: Zenti

More: https://zenti.app/