Team
Rebecca S./ Product Owner
Paul H./ Project Manager
David I./ Solution Architect
Matt R./ Engineer
x4 Dev Team (out-sourced)
Challenge
How can we improve the Buzz Bingo app to enhance customer experience and engagement, particularly for those who cannot visit the check-out to top up their account or redeem vouchers?
Objective
Establish a consistent visual language.
Provide an intuitive conversational user experience.
Redesign the onboarding process, balance viewing, and voucher flows.
20+
3x
160
About
Buzz Bingo
Buzz Bingo is one of the biggest bingo sites in the UK. It was awarded WhichBingo’s Best Bingo Site of the Year along with other numerous awards.
Bingo Buddy
The Bingo Buddy app enhances the Bingo experience for club visitors. It's a comprehensive app that allows you to plan your visit to our Buzz Bingo clubs, discover Bingo sessions, add funds to your account, and avoid waiting in line.
App audit
During early discovery, I made the following observations:
I took screenshots of every UI in the app and designed a comprehensive user journey as stated in the app. During the heuristic evolution, I made detailed annotations on each screen - noting concerns about usability, questions to ask stakeholders, neutral observations, and ideas for improvement.
During this process, I identified the following problems:
The app lacks clarity, accessibility, and visual appeal.
Browsing the app becomes confusing due to complex navigation.
The content hierarchy lacked clarity and was difficult to scan.
The app exhibited clear issues with bugs, slowness, and occasional crashes.
User journeys were needlessly complicated, lengthy, and unpredictable.
Market Research
Before moving on to designing wireframes, I studied a few rival designs to see what worked well, and how I could use that in my own design. This research also helped me discover new opportunities for Bingo Buddy.
While examining various apps, I noticed pattern consistency in how the navigation was optimised to make features more accessible. I also considered different methods for Wallet top-up journey and how we can display balance. I also noticed in FinTech apps how a quick top-up function would eliminate an extra step for users who top-up the exact amount on a regular basis.
User Interviews
“How can we elevate and make club experience more enjoyable?” To understand this question, I conducted several interviews via phone and video call to learn about:
Over the span of a week, I interviewed 8 customers between the age of 25 - 70 on their experience visiting the bingo clubs to understand the pain points and prior experience first-hand.
Dislike waiting in the queue, especially on a busy day.
During a routine trip to Buzz Bingo clubs, several participants expressed dissatisfaction about the time spent in line which impacted their experience; having to wait their turn at the counter.
Wants to focus on their games
The best experience for the customers is when their visit remains unhindered. They find it more enjoyable to hold steady at their spots, focusing on the bingo games.
Hassles-free customer experience.
Users are interested in live delivery updates and tracking the location of their courier to expect delivery time. What's more - enhanced courier tracking offers customers reassurance in the safety of their valuable package.
User persona
To ensure an unbiased understanding of our user's needs, we condensed interview insights into a set of personas. These personas were crucial in guiding us to identify essential features and prioritise them in our initial design iteration.
Information architecture
I created a sitemap to visualise the user journey. The company is shifting from the old to a new backend architecture to implement a new feature API. There is a significant upgrade in vouchering, single wallet and the ability for the existing customers to upgrade their account when they login to the app.
Low Fidelity Wireframes
The next stage was to design low-fidelity wireframes to present my vision to my peers. With inVision freehand, I produced extensive detailed wireframes for every scenario. In addition to developing the UX for the app, I have also developed an upgraded journey for the current users advancing from various platforms.
Style Guide
Style Guide
Our style guide is a growing, living set of guidelines I created that anyone in the company can reference. This ensures that we can always deliver a consistent, accessible experience that reflects our brand values through the omni-channel. Our main principle is always putting our end users first and helping them find value in our product.
Typography
I also used the typeface family Qanelas Soft, which has extensive online documentation and guidelines to ensure legibility and accessibility.
Icons
As the product's end-users range from nearly all ages, languages, and backgrounds, I wanted to maximise recognisability by using Material Design icons.
Prototype Usability Test Findings
We decided to conduct moderated testing via UserZoom to wireframe and design, then used notion to track tasks and to do lists.
We started with a low-fidelity, black–and–white wireframes for content planning, but shifted to high-fidelity visual prototypes before doing any testing, since comparing visual designs to assess aesthetic appeal was a high priority.
We created multiple visual versions to test, then successively narrowed the set. With each new version we added polish and fidelity.
Our iterative design process evolved from black–and–white wireframes for content planning to multiple versions of high-fidelity visual mockups created with cloud-based prototyping tools.
Early prototypes:
Users did not notice the main navigation menu at the bottom and struggled to find key pages like "My Cards" and "My Vouchers". Suggest making bottom nav more prominent.
When first registering, users were confused about the purpose of providing email and mobile number. Recommend adding explanatory text about how it will be used.
Mid-stage prototypes:
When trying to top up their account, users had difficulty finding where to enter payment info. Suggest reworking account top up flow to be more linear and direct.
Users wanted to easily see their voucher/balance info. Recommend adding a prominent badge/indicator in header with voucher balance.
Later stage prototypes:
Low conversion rates for users upgrading from old to new ecosystem. The upgrade prompts were too passive and ignored. Make upgrade messaging more prominent and persuasive.
Users requested easier way to discover bingo sessions by date, time, location rather than scrolling a long list. Add filters and sorts.
When marking bingo cards, users wanted to "daub" the numbers for a more authentic experience. Add daub interaction and sounds.Users requested social features like friending other users and seeing recent winners. Consider adding social components.
Final designs
Project reflections
Our living design system and style guide streamlined the design-development workflow and saved 60% of our resources and time compared to previous projects. Below are a few of the takeaways from this project and the final designs.
Design for inclusion and accessibility from the first step.
In hindsight, I should have integrated considerations for accessibility and inclusion right from the start of the design process of accumulating UX debt and auditing for these gaps afterwards. For example, I would have added more personas to help us empathize with users who face not only physical disabilities but also cognitive disabilities and various temporary or situational impairments.
Use data analytics to test your assumptions and find new insights.
I would use search analytics to reveal what our users might be after that I haven’t accommodated in the navigation. It would also inform me if users were using different keywords or terms than those I expected.
