Change in the design
It was time to put all the pieces together. My first choice was to go with a dark theme to resemble the look of the upcoming website (at that time we were working on both)
Separating the Onboarding and the actual app
The first try failed due to the purple color clashing with the dark background and overpowering the gold and whites. We also faced a technical issue where the barcode reader did not pick up the white lines of the barcode resulting an error code that occurred frequently. we decided to keep the dark theme for the onboarding screens.
Did you like my work ? do you have any feedback on the design? Want to chat over coffee about UI/UX design. get in touch
Other Case Studies you might like
-
how do we build an app with dynamic updates?
-
how do we create a point system for rewards?
-
redeeming points for prizes can get complicated
-
do we need 2 contrast modes for lighting conditions? night/day
-
Are rewards point transferable between users?
-
Are we going to design scrolls? what do we do with overflow?
-
How do Unicorns make beer?
?
The Questions
The Chalange
Since the venue concept was a new fresh take on the neighborhood pub, the owners wanted to design a reward system that can be edited and expended to fit the future changing needs of the venue. The app needed to be designed in conjunction with the POS system (Point Of Sale) terminal and presented a challenge for the development team. We started with a long inventory list that needed to be digitized and live in the app…
Lets set some project goals:
Goal 1: Build an app that works with the venue POS
Goal 2: Simplify & Digitize the Unicorns menu for the app
Goal 3: Include upcoming events section that can be easily updated
Goal 4: Keep it simple...
Learning the details
we set with Pete to understand his ideas and expectations. Pete turned out to be an open book of information since he had a lot of experience with rewards programs from previous owned pubs. according to him the program was vey popular but became very difficult to track for both customers and employees since cards where manually punched and tracked.
Pete wanted the whole experience to be simple and the points earned to be achievable for patrons so prizes are attainable after just a few purchases.
We came up with a customer journey map
Preliminary Study conclusion
After a few interviews with Pete the problem became clearer. According to Pete running the reward points manually with punch cards or stumps in the past always came to a catastrophic end due to a few main issues that he defined as “critical issues”
• Employees had a hard time calculating and punching/stamping cards at busy times
• Patrons lost/forgot their cards after receiving punches/stumps
• Patrons often argued the correct amount of points received
• Patrons in groups had fights over who get points
Since these issues where ongoing without good solutions the owners decided to end the programs and look for better solutions for the customer loyalty programs.
The Problems with reward card programs
Trying to run a rewards points system with conventional
paper cards and stumps/punches is difficult to follow
for both the bar employees and the patrons.
From not getting the correct number of points to loosing cards it only works good in theory. The card point system is very hard for employees and patrons to track manually.
On the employee side it is very time consuming to calculate, write on a spreadsheet than punch cards at busy times, to efficiently track every card and points amount is almost impossible. on the patron side – patrons often forget to punch their cards or worse – lose the card altogether.
!
The Problem
The Solution
Our solution to the problem is to digitize the process!
An app that will simplify the rewards point process
with real time dynamic updates and a direct connection to the bar’s POS system. With regards to simplicity the app should be easy to use for both the employees and for patrons and work with a quick barcode scan for verification and transactions. The app not only solve the manual points tracking issue, it also have the capability for direct marketing and promotions on tap!, from specials to target events it creates a more intimate vessel for the bar to keep up with its patrons and keep them engaged and coming back.
*
App Features and function
We started to list points for the app functionality. Since this app is tied to the POS system and have to work with a set customer database in a secure environment, we had to work closely with the app developers and software engineers.
We put together a list of features and functions for the app
• Barcodes to be used to identify users
• Barcodes automatically generated at sign on
• Barcode on the phone needs to be scanned to update/redeem points
• Awards and Prizes needs to be displayed in app and have a counter for points
• Menu for drinks and food with points for each item
• Highlight for specials with double points
collecting the pieces to the puzzle
The brain storm sessions
After some long days and longer nights, using coffee to bolster the flowing creative juices we came up with the basic designs for functionality and layout. I took some time to create wireframes to help digitize the process and give as the base for a style guide.
“Sooo...what do Unicorns eat?”
Playing with Colors
On one of our interviews with the clients we came across the old pub logo and thought it would be a great idea to work the main colors into the new Design System we created for the app. The main colors were changed slightly to work better on monochrome backgrounds.
Adding some color to make it pop
The ‘bubblegum’ pink was changed to a more neutral purple and the gold was changed to a brighter gold with more red and yellow tones. We also introduced secondary colors with brown and blue overtones to accentuate and bring a more ‘established’ feeling to the design.
Branding and logos
Our client already had a brand they used in previous years called “the Unicorn Pub”. They had a logo but really needed and wanted a revised one. “Our old logo looks like a child in 3rd grade made in class” and “it is too assuming and might give the wrong impressions to some bar goers” we need something more neutral” so I went to work. The main request the client had was to make a logo that can be on both light and dark backgrounds. This is the result after a few tries
Catching the Unicorn
Iconology
Our next design element was a custom and unique to the brand set of icons for navigation and prize symbols. I designed the icons with the brand colors for enhancements. For the navigation buttons I added a “pressed” state to indicate the corresponding page.
Adding some 'pop'
First Hi Fi Prototype
It was time to put all the pieces together. My first choice was to go with a dark theme to resemble the look of the upcoming website (at that time we were working on both)
First Hi Fi prototype
The first try failed due to the purple color clashing with the dark background and overpowering the gold and whites. We also faced a technical issue where the barcode reader did not pick up the white lines of the barcode resulting an error code that occurred frequently. we decided to keep the dark theme for the onboarding screens.
Final Screens
Now that all the screens were designed it was time to go over the whole project and check and fix any design or interactivity issues.
