Hop Passport
Role
Lead Product Designer
Responsibilities
Full Fidelity Prototype, Branding
Tools
Sketch, InVision, Figma
timeline
2 months
Where better to begin discovery than going out for a drink? Our team met with Hop Passport's founder at a participating brewery to learn the ins and outs of his business, and speak with the brewery owner.
We covered how the passport works in the real world and got a look at the physical copy. You simply get your passport stamped when you purchase a drink, and for many breweries you also get a discount. The app didn't have a big budget, but it also didn't have a large feature-set.
In addition to the basic function of the passport, we talked specifics. The app needs to offer a free version that only lists participating breweries, and allows users to purchase the full passport to gain the true benefits, since the paper passport also required a one-time purchase.
The project was on a quick timeline, and after laying out specifics, wIe jumped straight into designing the features in full fidelity, working closely with the client during every step of the process
The map is what users see first after starting up the app and it's simple and useful at a glance, and the list view shows what's closest in a layout that will be familiar to the average user.
The focus here was on keeping the map simple. We wanted users to know exactly what they were getting into when they landed on the map page, and took design patters from other popular mapping apps to keep things familiar.
You can search for any brewery to see if it's participating in Hop Passport, and there's also a color coded key for different map pins. Based on the client's research, it was important to users that each brewery submit a list of services and other features available at their location, so we added filters to accommodate user preference.
The brewery listing is the heart of Hop Passport. It's where users can redeem coupons and, in doing so, mark a brewery on their passport. It also provides some useful information provided by the brewery directly to Hop Passport's team — including some fun facts and recurring events. Users can add photos of the tap list as well for the team at Hop to vet on the Admin side, which we'll get to later.
Translating the process of getting a passport stamped to a digital application proved to be a challenge. We considered options like NFC readers, or QR code scanning, but for the sake of the brewery owners, we needed a solution that didn't require an extra effort on their end.
Our solution was a countdown that starts after choosing to redeem the special, this way a user will be incentivized *not* to stamp the passport unless they're actually at the brewery, in order to get the discount.
It's the hub for tracking which breweries you've stamped, and also where you've got left to go. Hop Passport runs a yearly contest to visit all the breweries in your state, with cash prizes to those who make it first, and the passport tracks your progress towards the finish line.
This part of the app is basically a digitized version of the old paper Hop Passport (which I really wish I'd kept lying around so I could show you a picture.) The first three sections allow you view your breweries, and the Amazing Brewery Race section explains all the terms and conditions.
There's also a version of the passport page for those who haven't purchased the Hop Passport. It allows you simple access to track which breweries you visit, but no discounts and no brewery race. We wanted anyone to be able to download and use the app, even if they couldn't use all the features.
.png)
The Hop Lens. It's a creative name for the photo overlay you can add to your photos while at a brewery, (or any photo really. Hop Passport wedding photo? Sure.) This was a fun feature thought up while having a beer during the discovery meeting, so we said why not? You can save it to your camera roll, pull up a share sheet, or retake the photo.
Designing an app from scratch for an entrepreneur always comes with the added requirement of making sure the owner can manage it on their own once the project is complete. Ordinarily I'd have designed this portal and we'd have built it in house, but as circumstances and workload shifted, we ended up contracting out this piece.
Still, the bones of the design are here, and help to visualize how we made it simple for the Hop team to manage everything in a central location, from breweries and analytics, to adding new "Partners" (basically a rotating list of local companies who pay to advertise a promotion in-app), and even approving submitted tap list photos.
Within the first year of going live, the app saw hundreds of downloads and drew new attention to the brand. Covid hit the company pretty hard in 2021, soon after the app hit the market, but years later it's still going strong.
The digital passport now works as a mainstay for the company, as a phone based alternative to the paper passport for those who want to make sure they always have access to it. With a 4.1 star rating on the app store, and new passports available every year, the Hop Passport app has become a key part of the business.