Tapster

Objective

Brand and launch Tapster’s alcohol delivery and keg retrieval service.

Approach

Align marketing campaigns with a revamped experience, built in React.

Branding

Tapster's voice and visual language were born from competitive analysis, audience research, and rounds of creative concepting. The analysis of lookalike experiences gave the team comparable apps to learn from.

Tapster logo depicts a bespectacled bartender with a raised eyebrow. Three phones show logo splash screen, favorites empty state, list populated with favorites.

App Teardown

We had a functioning prototype to test the end-to-end customer journey. I built a “birdseye” view of the app to benchmark flows that help users accomplish tasks. The audit revealed where to focus our efforts.

App screens are printed with descriptive captions on letter size sheets pinned to a large foamcore board. Dry erase sketches in front of foamcore in the background.

Requirements

From the audit we were able to extract valuable jobs-to-be-done. These tasks were documented in the form of user stories, written from the perspective of three personas crafted from initial audience research. Two user story creation workshops prompted company-wide participation.

User stories written on index cards are pinned to a foamcore board. Menu containing basic functions appears on the left screen and the home screen with a promotional banner and product grid is on the right. Three phones show a cart empty state on the left, a cart with products from multiple sellers in the center, and an empty state of past orders on the right.

I worked with INPHANTRY’s Creative Director to organize user stories into epics based on task flows. When our seven week production timeline was reduced to five, we had to cut out a few proposed features. We decided to reduce product discovery, specifically filtering and recommendations, to concentrate on ordering flows.

Wireframes show a product in the cart on the left, a checkout screen in the center, and options to change or add an address on the right. Phone screens display a product description page with available sizes and stores and product details.

Leadership

I was on point for daily standups, coordinating the development team around progress and blockers. I led weekly client presentations to share new wireflows and validate assumptions with stakeholders. Approved flows allowed the team to apply Tapster’s new brand identity to the UI.

It was refreshing to step away from visual design decisions and support the Junior Designer’s vision through internal review. This allowed us to reveal design on a rolling basis while I drew up the next phase of wireflows.

Wireframes depict order status states during a keg delivery. Phone screens display a product listing page and a sorting overlay. Welcome screen with location permission prompt for new users flanked by order summary screens.

Ongoing Testing

We frequently shared unfinished work so that stakeholders had a voice in the process. Since we were our own QA team, I was installing new builds and tracking bugs in between design work and presentations. A shapeshifting schedule ultimately led us to a successful app store submission and thus, the MVP was launched.

Artboards in sketch are organized with prototype connections to visualize task flows. Phone screen shows Tapster in the App Store.

Thanks to

Abby Carlson, Jacob Roscoe, Kevin Ngo, Derek Tran, Regi Jacob, Kevin Lee, Em Montoya

Next

PUMA LQDCELL AR

Unlocking a digital dimension to immerse sneakerheads