December 2025

Butterpad Mobile App

Butterpad Mobile App

Butterpad Mobile App

Overview: Butterpad is a studio that provides a space for creatives or producers, to initiate their creative endeavors. The app allows members to book reservations, connect with others, and learn about updates the studio is bringing.


My Role: Lead UX Designer

Overview: Butterpad is a studio that provides a space for creatives or producers, to initiate their creative endeavors. The app allows members to book reservations, connect with others, and learn about updates the studio is bringing.


My Role: Lead UX Designer

butterpad phone mock

Objective

Objective

Goals for this app

Goals for this app

Goals for this app

The stakeholder discussed:

  • A retro inspired aesthetic that matches the studios appearance.

  • Allow members to make/edit/cancel reservations.

  • Accessible and intuitive interface for users to easily navigate

The stakeholder discussed:

  • A retro inspired aesthetic that matches the studios appearance.

  • Allow members to make/edit/cancel reservations.

  • Accessible and intuitive interface for users to easily navigate

Strategy

Strategy

Mapping out the product

Mapping out the product

Mapping out the product

Creating a user flow map to help understand the navigation for the app. After discussing with the stakeholder, calendar, booking, member directory, and settings are going to be the main pages users can interact with.


This helps me set up all the different screens for the app, and the journey the user will go through.

user flow map
log in user flow map

The stakeholder has a retro dinner/menu inspiration for the brand and app design.

My inspiration came from geometric shapes and bauhaus design. I thought we could turn those values into a meaningful icon system.

vintage inspiration

Ideation

Ideation

Testing different styles

Testing different styles

Testing different styles

I created different versions based on the inspiration they sent me. We landed on the last image as we both agreed that one had the simplest layout with a retro aesthetic.

I created different versions based on the inspiration they sent me. We landed on the last image as we both agreed that one had the simplest layout with a retro aesthetic.

butterpad version 1
butterpad version 2
butterpad version 3

The stakeholder was reworking with the brand colors, so I stuck with black and white for the ideations. We also implemented a checkerboard pattern and a background texture to increase the vintage aesthetic.

butterpad sign up process

For the calendar I thought having a key would help users understand what these different circle values mean. As well as having larger boxes for longer reservations.

butterpad calendar screens

I thought having your skills displayed helps you gain a better understanding of other members you can possibly connect with.


Within account, you can change all your information that's displayed to others, you also have the option to remain anonymous if you prefer.

butterpad member directory
butterpad account

Outcomes

Outcomes

Reflection and next steps

Reflection and next steps

Reflection and next steps

This is my first app design I lead, and is currently in the app store! I learned a lot about user mapping and how to create an intuitive experience. It was both exciting and challenging to design an app with a distinct aesthetic that remained clear and approachable.


We're onto phase two, where we will be creating more features such as payments, qr scans, and new locations!

This is my first app design I lead, and is currently in the app store! I learned a lot about user mapping and how to create an intuitive experience. It was both exciting and challenging to design an app with a distinct aesthetic that remained clear and approachable.


We're onto phase two, where we will be creating more features such as payments, qr scans, and new locations!

butterpad screenshot 1
butterpad screenshot 2

ERIK VANDERGRIFT

ERIK VANDERGRIFT

ERIK VANDERGRIFT