Role: UX / UI Designer, UX Researcher
Client: Bad Moon Saloon, Google UX
Design Certificate
Duration: Feb - Mar 2022
Tools: Figma, Moqup
Bad Moon Saloon is a trendy bar that recently opened after the previous space had been abandoned for many years.The bar has put a lot of effort into hosting community events and making the space feel welcoming and modern.They are located in a residential are that not many people pass through, so they looking for novel ways to bring in new loyal customers.
Create an app that attracts new customers to Bad Moon Saloon by promoting the welcoming and trendy atmosphere and encouraging customers to return by offering incentives through a rewards system.
Bad Moon Rewards should be simple and user-friendly with intuitive navigation such that the app fits naturally into the bar experience.
With my research goal in mind I started to gather participants. I knew Bad Moon Saloon was trying to reach as many new potential customers as possible so I wanted my target demographic to be as large and inclusive as possible. To find my research participants I posted in several UX design groups online asking for people who are over the age of 21 who socially drink at bars at least once a week. Since Bad Moon Saloon is located in Milwaukee, Wisconsin I also asked for participants who lived in the United States. I wanted my research to cover enough variety while still aligning with American bar culture and standards.
From there I found five people to participate in an unmoderated user interview and asked them to answer the following questions:
Don't know prices or what is on special
Free drink tokens are easy to lose
When asked if they use promotions at bars users only brought up receiving free drink tokens. They often lose them before they use them.
Want to know
when events
are happening
Users feel strongly about bar events, some users love certain events and others want to avoid the bar on those nights.
Casual drinkers
only like going
with friends
Users who went to the bar once a week expressed they would go more often if they knew their friends were already at the bar.
Now that I knew what my users pain points were it was time to figure out how to solve them. To do so I had to try to get inside my user's head. I started by creating two user personas based off of the demographics and answers of interview participants to better understand and empathize with them.
.jpg)
With my imagined user and competitive audit in mind, I began the ideation process. The methods I chose to use were: how might we's, crazy eights, and both big-picture and close-up storyboards.
My focus was on how the user would interact with the app in a busy bar setting and how the rewards system should be simple and intuitive.
When transitioning from paper to digital wireframes, I kept the layout fairly similar, with only mild changes made to the design.
I wanted the home page to include all the content the user would likely use the most frequently. I decided on a fixed navbar on the bottom of each screen.
With the rewards portion of the app being the main feature I decided to focus on building those pages.
I want users to be able to use the Rewards section easily and intuitively so I broke the content down into three sections. Having Earn, Redeem, and History on separate pages makes the process more digestible and easy to follow.
My original idea was to have customers be able to pay their bar tab from the app. After Bad Moon Saloon's owner told me this would not be practical, I changed my focus to exchanging QR codes printed on receipts or on the user's phone instead.
To create the low-fidelity prototype, I connected all the screens involved in the Rewards user flow.
This consisted of redeeming a reward, finding and cashing in on a reward to earn points, and viewing previously
redeemed rewards.
I conducted two rounds of usability studies. Findings from the first study helped guide the design from wireframes to mockups. The second study used a high fidelity prototype and revealed what aspects of the mockups needed refining.
To complete my usability tests I gathered five participants who were over the age of 21 and lived in the United States to participate in a 10 - 15 minute moderated usability test. I chose to do a moderated test as I thought it would be helpful to observe each participant's body language and tone of voice while using the app. I used this information to create an affinity map to help turn observations into insights and discover what the user's pain points were.
.png)
.png)
Content is too small, especially buttons and text
Users missed the explanation on how the point system works
White background clashes with app and brand identity
Would be helpful to
know which bartender is working
After receiving feedback from users about the low-fidelity prototype it was time to address the pain points, and to do my favorite part of the process, adding visual elements.
Users expressed difficulty navigating through the different sections so my I focused on improving the navigation flow. To start I redesigned the top nav bar to have more contrast and emphasis. I also moved the History page to the bottom of the Redeem page as users were looking for this section there instead of using the nav bar and having History on it's own page.
Another major pain point that was brought up during usability testing was users needed more noticeable indications of what page they were on and more visible confirmation that they had completed a task.
To combat these pain points I added headers to each page and added more screens that were relevant and helpful to complete a user flow.
After conducting the second usability test I knew I needed to make some major improvements to the design. With the project goal of wanting to attract and retain customers for the bar I focused on addressing accessibility concerns along with strengthening the branding of the app to match the bar.
The biggest and common pain point users brought up was that the content throughout the app was hard to read and to navigate. This lead me to look further into Web Content Accessibility Guidelines (WCAG) and increase both my font size and buttons for a better user experience and to ensure my app was meeting text and navigation standards.
To further ease user navigation frustrations I redesigned the top layout for the Rewards section to be more organized and easier to navigate.
When conducting the usability study 4/5 users did not think the app explained how the point system worked. This told me that having the explanation as a part of the Earn page did not work. Since users have to know how the app works to use it I decided How it Works was an important enough feature to have a dedicated page.
The other major pain point I had to solve to ease user flow was making sure users could scan their receipt at any point while using the Rewards section. I remembered from user interviews this process had to be easy and convenient for users or they would get frustrated and not use it.
To further improve the design, I changed the point progress bar in the Redeem section to display the amount of points and to be highlighted when the user accumulated enough points.This provided a cleaner, more streamlined look. I kept the progress bar on the home page to entice the user to navigate to this section.
.png)
The last concern from the usability study was the white background. It did not match the style of the app and was too bright for the edgy modern branding of Bad Moon Saloon. Since the app is meant to draw customers in I knew it was important for the bar's style to be reflected in the app. To correct this I changed the background to be black but kept the bright accent colors and humorous imagery to match Bad Moon's sleek but playful environment.
After hearing feedback from an interview participant, I added a new feature that showcases which bartenders are on duty. The user mentioned they often make friends with the bartenders and they prefer to go when they are working. I thought this was a valuable insight and decided to add the feature to my app.
With my design changes complete it was time to add the interactions. My hi-fi prototype provided a cleaner user flow, more points for access and more confirmation that a user completed a task.
Close attention was paid to the size of interactive elements to ensure easy and flawless interaction for every user. All tappable elements meet WCAG Standards.
Bad Moon Rewards design implements high-contrast to help color blind users and users with low-contrast sensitivity. All the text content and colors meets WCAG Standards.
Headers demonstrate clear visual hierarchy with unique colors and sizes to account for users that use assistive technology
and those with visual impairments.
Alt text was added to all images to provide context to users who use screen readers.
The target users found the app enjoyable and useful. They enjoyed the simplicity of collecting and redeeming points and were intrigued by other features of the app.
I learned a lot through the process, especially about accounting for accessibility. When first designing the app I still had my Graphic Designer mind frame of trying to fit as much content as neatly as I could on a screen. I quickly discovered this was the wrong approach. I learned that scrolling is a natural way users interact with the app and helps them digest the content.
Learning the psychology of spacing elements and sizing content was important in order to ensure that users will actually enjoy interacting with the product. Checking the color contrast of design was also crucial for the black background to ensure the product passed readability standards. I also learned a lot about how important research and testing is to ensure the product is enjoyable, useful, and usable.
“This app has a really fun vibe to it. I like that the rewards are actually something you would want to have and that they aren’t too hard to get. And all the other elements, like the Event Today page would be so useful!”
Conduct another usability test with a larger pool of users since major design changes have been made.
Keep researching ways to improve accessibility to ensure app is made for as many users as possible.
Work on building out other features for the app. Users found the features fun and useful.
Talk with the owner of Bad Moon Saloon to see if the product is up to their expectations.
Pawtner
A Responsive Website for an Animal Shelter
that Helps Users Adopt their New Best Friend
I’m always open to fruitful collaboration, so if you are in search for a enthusiastic UX designer, I'd love to hear from you!
Email: suzybiernat@gmail.com
LinkedIn: www.linkedin.com/in/suzy-biernat