Photo Credit: Main Street Beer
Main Street Brewing
The main thing is the beer
Nestled in the popular Vancouver community of Main Street is the aptly named Main Street Brewing. A brewery, tasting room and retail store are all neatly tucked into a historic old brewery building and each section is stocked with hoppy temptations.
The Hop'ortunity
To encourage the refilling of growlers (re-usable beer containers) at their brewery, the brewery created a program that rewards customers for refilling their growlers at the brewery. This program is called the Growler Loyalty Program.
The program became very popular and, as a result, the brewery had 1,500+ physical loyalty stamp cards filed in alphabetical order on their countertops. This made the reward tracking process cumbersome for both employees and customers. Our team's project would be to digitize the Growler Loyalty Program.
Our problem
The client already had a well-established brand and numerous sub-brands as well.
How might we design an interface that is unique, but still connects to the overall brand AND is flexible enough to work with numerous sub-brands?
Getting orientated
After our first meeting with some of the founders, my UI design partner and I delved into the world of Main Street Brewing to gather insights and an understanding of the brand.
Our client had very detailed brand guidelines along with guides on how the sub-brand of each beer logo should be displayed. The website was designed to make the beer logos the most prominent elements and the purpose of this design was aligned with the company’s slogan of:
From the client’s social media presence it was easy to ascertain that the brand’s tone was playful, inviting and helpful. Like the website, the majority of social media posts were putting the beer front and center.
The start of something great
First brand adaptation
After sharing my findings with my team and confirming them with the founders, I began dismantling brand elements to create new combinations.
The first brand element I established from this method was the icon for the app. With this icon as a reference point, I determined that the UI would be mostly black and white while the highlight colour would be gold. Gold was chosen as the main highlight colour since it matched a theme of “loyalty” and “reward”.
Setting up the boundaries
Establishing the app's style guide
A finalizing the logo/icon my partner and I developed the overall style guide for the app. We used the same typefaces as the brewery's website to ensure that the app connected with the overall brand.
Playing within the lines
Component creation
A component that took a lot of time was the card structure of the beer sub-brands.
After consulting my UX team, I decided that a minimal approach would be ideal. Our client though felt that the minimal approach of Version #1 did not showcase the sub-brand enough. They preferred Version #2 which was more in-line with their current digital products.
The next design element I created was a set of custom icons. I felt the icons were necessary to provide an on-brand delightful representations of the unique prizes.
Can you guess which icon is "Nachos and two flights?"
A fresh coat of paint
High fidelity prototype
Our fantastic UX counterparts were very much on schedule and this allowed my UI partner and I time to experiment. At first, I thought the app should have a dark theme similar to the way the website was designed.
This first experiment failed though because the white was overpowering the yellow highlight and competing with the beer sub-brand's colours. As a result, the dark theme was only used for the onboarding experience.
After the onboarding screens, the app opens up to a clean and minimal look to ensure that "The main thing is the beer".
Adding a little more life
Interaction design
After cleaning up the hi-fi's I decided to animate the prototype using Principle. I wanted to add more 'wow' factor to our pitch and give our client a better idea of how the app would work.
Onboarding experience
From dark to light
The transition from a black background in onboarding to a white background in the app was meant to give a feeling of "getting in".
The black background of the onboarding was also an ideal connection to the brewery's main brand. As a result, users familiar with the brewery's brand would feel right at home.
Homepage interaction
Beer, the main thing
The beers are a central element catching the user's eye throughout the app and when they aren't, everything else is out of focus so the user knows exactly what they need to do before getting back to the beer.
Since there were eight beers available for growler refills, I built an animation that moved everything out of the way so the user can see all of the beers at once.
Reward redemption
Getting the good stuff
Since all rewards are physical items, the customer would need to scan their card and pick up their reward in-store.
Looking back, this process could have been clearer to customers with an indication of current number of stamps versus the number of stamps to be redeemed.
Notifications
Encouraging engagements
The app presented a number of opportunities to inform customers about special tasting room promotions, limited beer releases and upcoming events.
Providing helpful information to customers through the app was absolutely ideal for encouraging engagement, increase user retention and promoting further brand loyalty.
Final thoughts
Many proud moments
The final pitch to our clients was a packed house, including our clients, all RED Academy staff and a class of app developers. Our clients were exuberant after seeing the prototype and especially pleased with the way we had stayed true to their branding. They also thanked our team handsomely with their fine brew.
The prototype was also chosen to be developed by the App Development students. As a result, I managed the hand-off and collaborated with the developers to bring the project to life.
"Absolutely love it. I'm speechless. It's on-brand but completely new. The deep thought and detail you all went into is really amazing."
Cam McGowan, Co-Founder
Feedback on the design? Want to chat over coffee about UI design systems? Feel free to get in touch or schedule a chat.
