Tally
App.
— A refreshing new payment experience around managing your bar tab.
The Background
We’ve all been here. You’re celebrating your buddys birthday at a bar or nightclub, only to find out the next day your credit card is not in your wallet. Where is it? Well it’s at the the bar because last night you simply walked out and forgot to close out your tab. Dope!
It is situatons similiar to this that act as the driver behind why we created Tally. Our goal at the end of it all was to optimize the users experience around the proccess of opening and closing your bar tab and we planned on doing this by leveraging the latest and greatest of what tech had to offer.
User Research👋
We first set out by defining our user demographics and we essentially boiled it down to 3 destinct yet familiar groups.
1) The Frat Boy
2) The Girls – night out!
3) The Old School Parents
The Frat Boy
Girls Night Out
The Oldschool Parents
Competitive
Analysis
To get a jump start on the visuals, we looked at what the competitors were up to. In order to keep the design of this article in tack though, We’ll refrain from posting screenshots of what we found…😜 I will however post a link to an interesting article from a company who took a stab at a similair concept before us and unfortunatly wasn’t succesfull.
https://techcrunch.com/2013/08/31/the-decline-and-fall-of-flowtab-a-startup-story/
We learned alot from this story, such as, how important it is to create a focused network of bars AND not to overcomplicate the solution!
With our newfound knowledge, we drafted up the a few different wireframes and ultimately decided on the following user flow.
User Journey
Confident with the information we had gathered on the problem combined with the key takeaways from the competitor analysis, We diagrammed a user flow from start to finish.
Since the primary goal was to essentialy make the experience of opening and closing your bar tab as frictionless as possible, we decided to only design features that were ABSOLUTELY neccessary. This meant we “only” had to solve for the following two tasks.
• Opening/closing the tab
• Paying for the tab
While it sounds easy on paper, it proved to be much more diffcult from an implementation standpoint. For instance we knew we wanted to shift the process of opening/closing the bar tab off of the bartender and onto the patron. This automaticaly improves the experience, as the patron would now be in full control of their tab. Unfortuantely thsi also presented a few new issues.
— How can we verify the patrons identity without the use of an ID card
— If the patron can open/close their tab at will, does this present a oppurtunity where they can game the system?
— What if the patron forgets to close their tab at teh end of the night?
After crafting some clever solutions to the above, we had the first version of what we felt the the user flow should look like.
Wireframes
Happy with the user flow we designed, it was finally time to craft some visuals! Although it was challenging, we managed to confine the core functioanlity of the app into only 2 Screens. Aside from setting up an account and linking their credit card, all users had to do to open/close there tab was click 1 button!!
In order to accomplish this, we leveraged “geo location” technology, built into mobile devices, to remove the step in which the user would have had to identify which location they were at. There was of course inevitable edge cases where users may not have granted location access or two locations were so close to each other it was too difficult to determine exactly which one they were at. For those scenarios we simply, showed a “map view” and alowed the user to specify where they were.
Make it purty!
With the research, user flows, and wireframes behind us, it was now time to have some fun and start applyng the visual identity. In order to esnure thae the branding would resonated wth our target demographic using the knowledge we leanred during the discoverign phase of the project.
Choose a Typeface
With the research, user flows, and wireframes behind us, it was now time to have some fun and start applyng the visual identity. In order to esnure thae the branding would resonated wth our target demographic using the knowledge we leanred during the discoverign phase of the project.
Raleway
Aa
Extra Light Light Regular Semi Bold Bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890 — &#%?!
Bitter
Aa
Regular bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890 — &#%?!
Define the color scheme
With the research, user flows, and wireframes behind us, it was now time to have some fun and start applyng the visual identity. In order to esnure thae the branding would resonated wth our target demographic using the knowledge we leanred during the discoverign phase of the project.
Create the logo
With the research, user flows, and wireframes behind us, it was now time to have some fun and start applyng the visual identity. In order to esnure thae the branding would resonated wth our target demographic using the knowledge we leanred during the discoverign phase of the project.
Mix it all together!
With the research, user flows, and wireframes behind us, it was now time to have some fun and start applyng the visual identity. In order to esnure thae the branding would resonated wth our target demographic using the knowledge we leanred during the discoverign phase of the project.
