Talk about a mixed bag.
When I started at Tabcorp, my first assignment was to work on the Keno product - a retail-based lottery product. The team had just launched the first version of the iOS and Web applications for Keno.
After more than two years (and counting) of working on Keno, I've developed hundreds of screens, products, and features. Below are just a few highlights that I enjoyed working on.
What you're seeing is just a tiny snapshot of the work involved, but I'd be happy to talk through any of the features you're interested in.
Giving out free stuff is harder than it looks
A common practice in entertainment products, particularly lotteries, is to introduce or reintroduce customers with free games. It's the '14-Day Trial' of the gambling world.
Customer research showed that customers were hesitant about playing Keno because of the initial investment, and we saw giving out introductory free games as a great way to help customers cross that threshold. We also felt that it was an opportunity for customers to discover if the product was right for them without risking their cash.
Along came 'Reward Games'. These were essentially Keno vouchers - single use, set tickets to play. This allowed us to curate the journey the customer would take when they started with the app, and also allow us to reward existing customers with games we thought they'd like.
Putting our cards on the table
At the time, most of the Keno UI was a series of forms to fill out. Because we wanted Reward Games to feel a little bit special, and because we wanted to communicate the voucher-style transaction in the aesthetic, we opted for a card based layout.
Understanding the journey.
There were a number of scenarios and methods customers might take to play their Reward Games, so it was important to map out that journey in detail.
This allowed us to test multiple methods in UXT before deciding on a final journey.
We used a combination of InVision and Flinto prototypes for the three rounds of user testing. This allowed us to use very high fidelity prototypes for in-person testing, but still participate in remote testing with medium fidelity prototypes.
The start of something new.
Reward Games was the first large-scale new feature added to the Keno App since it's launch in 2017. For our team, it represented the start of continuous improvement and the end of the MVP phase.
The features that followed took many design queues from Reward Games, and the inception and testing strategies would also be reused in the future.
Almost two years later, Reward Games is now a key part of the Keno customer acquisition strategy.
As a lottery product, the most important part of the customer experience is buying a ticket for the game, and then checking if they've won or lost.
The initial 1.0 Keno Ticket was relatively basic - when it was built, there were very few requirements: It only had to support two product types, and a limited set of features.
With new products releasing and more advanced gameplay features being implemented, I was tasked with redesigning the Keno ticket.
Out with the old...
While functional, the old Keno ticket was already beginning to feel outdated. It leaned too heavily on the retail ticket design, with too much white space and erroneous information.
More importantly though, there was little flexibility in the design. Different product types or new ticket features would be very difficult to add to this design.
A large portion of the Keno playerbase used an iPhone 5 or iPhone SE, so we knew that real estate was going to be very rare.
With 60% of our screen already occupied by the Keno lottery draw, we had to find a way to bring the size of the tickets down.
Thankfully, the old design had an abundance of white space we were able to cut down on.
...and in with the new.
The new ticket is almost 30% smaller than the old ticket, while the fonts are actually two points larger. This meant more tickets on the same page, but better readability for our customers.
The new design was built to be fully reactive, and would scale for any size device or container. It could also accommodate advanced game types such as Keno Kwikpik or Keno Advanced.
The new ticket also took some design queues from the Reward Games feature, with soft shadows and rounded edges on the new floating card layout.
Thanks to the new design, even the most complex ticket types would now fit on screen, even on the smallest supported devices.
Much like Reward Games, we took the learnings from this new digital ticket to reuse on all our designs moving forward. Efficient use of space and modern design became a hallmark of future features.
User Onboarding & Feature Highlighting
Introducing new customers
Keno is a simple lottery, but we still wanted customers to feel like they knew what to do when they first arrived in the app.
Our first version of the app had simple static screens that highlighted a few features of the app, but we wanted it to do more:
- Showcase key features of the app, especially benefits over the retail experience.
- Highlight the latest changes and additions to the app for returning players
We reformatted the screen to make more room for text and images, so we could really capitalise on the content. We added a page counter, and integrated animation technology.
A picture says a thousand words. So I guess a lot of pictures is heaps of words.Using Lottie, we created animated versions of each onboarding and feature screen. This was great for complex features or concepts, as we could show the user flow as it appears in the app.
I hope you like orange.
We'd had a product in retail called Kwikpik for quite some time - think of it like a lottery ticket that's already filled out for you with random numbers.
Finally, with the app in a stable state, it was time to add a whole new game mode.
Stacking the deck
We'd seen success with the card layout used in the Reward Games feature, so we chose to reuse that format for Kwikpik, with some slight reformatting.
Early customer feedback told us that users wanted to compare the various offers available, so rather than a single card per screen like Reward Games, we worked on new views that showed multiple cards on the screen.
Quick and Easy
Another great advantage of this format was how quickly a customer could purchase a ticket. With only 2 minutes between games, this is often a major point of friction that we were hearing from users.
Traditional Keno tickets took users roughly a minute to purchase. The new Kwikpik UI made purchasing a ticket something our test participants could do in less than 15 seconds.
Well, there's no accounting for taste...
The first version of the app was very derivative of iOS 7, and this was nowhere more clear than our entry forms.
As Keno was expanding to new markets, we knew we needed to make the sign up process as friction-less as possible.
Little changes, big impact
We made a series of small changes that had a significant influence on the sign-up flow:
- Autofill of fields where possible.
- In-line error handling.
- Increased text size.
- Rewrote hint text to more consistent.
- Expanded address search feature.
Many of our users already had accounts with the TAB app, so a major feature of our Keno account creation revisions was to enable them to merge their accounts. This was a highly complex feature, but the user journey was a simple two step process.
Keeping in touch with Keno
There's a significant amount of data that players might be interested in, and a commonly requested feature from our players was to be alerted when certain events took place, such as jackpots reaching certain amounts, or games starting.
We built a 'Keno Feed', that popped up toast notifications to alert the user of events. This feature was fully customisable, so users could turn on and off the data they wanted to see.
Growing out of MVP
With new games and new functionality coming through, it was important to upgrade the bet building experience.
Clear next steps
We wanted customers who were buying tickets to have a really clear understanding of what to do next, and how their choices effected their purchase. For this, we added tips and hints at the top of each page of the journey.
Keno 2.0 (UX Consistency)
Growing with our audience
The 1.0 iteration of the Keno app had been really focused on taking the retail experience and creating a digital counterpart.
This meant the app was easy to learn for retail players, but as our customers got more and more accustomed to using the app it became clear we needed to grow with them.
After two years of having the product in market, it was time for an upgrade. New UI, new features, and new functionality.
Our old home screen was very focused - a few buttons to take you to key tasks. We found, however, that an enormous number of our users went straight to placing a bet from here.
We refocused the home screen on gameplay, using our jackpots and different game types as call to actions for our customers.
For the other 10% of users who were taking advantage of our less common features, we cleaned up our navigation. Instead of nested lists of features, we used the 'More' menu to highlight popular functions in the app.
The first iteration of the Bet Builder had been a 1:1 simile of the retail experience; a slow, multi-step process that felt like filling out a form - because that's what you do in a venue.
The all-new digital bet builder was a one-page solution that allowed customers to choose all their ticket variables in one place, instead of jumping backwards and forwards through a series of modals. This was a massive improvement on the old experience.
While I've highlighted a few key features, the Keno 2.0 update included a complete visual overhaul of the app. For that reason, we created a comprehensive styleguide and component library both for design use, but also as a reference piece for the wider business.
Keno 2.0 represented a massive shift forward for our business - we were no longer being reactive and conservative, but instead using our immense customer knowledge to build something we knew our users would fall in love with.