Teemu Talja App revenue (gross gaming revenue, GGR) grew +17% when I led home screen redesign. The clicks of a product card also grew 200x (10K to 2M).
200x
+17%
Discovery
Our app promo UI appeared to underperform. I had noticed its card components didn’t match home screen layout. The card design hid key contents below-the-fold.
The Keno and Casino cards looked fine because you could recognize the products above-the-fold (left and right images). Also the Eurojackpot card showed product brand. Still, does the Eurojackpot card design lose opportunities when jackpots are high?
First cards got 80+% of all clicks, so above-the-fold optimization looked promising.
Personas
I targeted app designs for four personas. They are example users. I based each App Persona on one or two customer segments.
Design
The layouts below show what the home screen could look like for the personas.
I designed a new, small card for Lotto games. For Betting and Casino we recycled our earlier small cards.
I pitched the solution to product management. Then we agreed on an MVP.
Information architecture
Our old backend could show one card per product. I designed a new Information Architecture to support the big and small cards. It used existing machine learning models. See the image below.
We call the concept three card recommendations. The diagram below shows its logic.
Frontend
Calls ML models
Main model
Selects card concepts
Other models
Select actual games
Frontend
Shows UI
Feature modeling
The Main model selects three card concepts from our offering. The image above shows the offering concepts as rows.
Let’s simulate how the model works. For an occasional lotto player (Leila), it may select:
- Biggest jackpots
- Casino offline model with small cards
- Casino offline model with a large card
The Main model replaced click counters with reinforcement learning. This enabled the big and small cards. The model also adapted to changing lottery jackpots.
AB testing
This is our experiment card for the home screen promos.
KPI effects
The new cards boosted sales by +17%.
How does a significant AB test result look? Its two curves A and B overlap just a little. Such a diagram looks like a two-hump camel (left image).
If there is no significant difference, the curves nearly match. In that case, a diagram looks like a single-hump camel (right image above).
May you need two camels to depict the +17% sales effect (image above)? The scale of this result surpassed all expectations. For this reason, data scientists triple-checked and validated it.
Does seeing a jackpot sum just invite more customers to play more than seeing spinning lottery balls?
Learning
I checked user analytics. The data showed two dominating use cases:
- See current jackpots for Lotto games
- See relevant casino games
For example, the clicks of Lotto games grew 200x, when comparing old and new cards (left images above). Without the new promo, users may have missed big jackpots. The Lotto games category no longer underperformed!
Analysis
Marketing ran no campaigns in the app at the time. Did this give us an easy win?
When introducing the new cards, I had wanted big and small cards for key products. Sadly, we didn’t achieve this.
By contrast, two cards got so popular they practically killed all other cards (except one). See images above.
Upgrading both the UI and the model together drove a huge impact. Yet in product and UI design, there is always room for improvement.
Afterthoughts
How could we improve both beauty and effectiveness? What kind of UI and IA would support them both? Later we replaced content area quick links with tabs (left and center images below). This improved the layout already.
Still, does a text-heavy card at the bottom of the screen invite scrolling (left image)? Maybe not.
Surprisingly, just two use cases covered most of the traffic. In this situation, could we personalize custom layouts for the cases? The center and right images combine beauty and conversion for the key cases.
The above designs are technically feasible. The Main model reacts to high jackpots. When it ranks Lotto games highest, frontend shows a custom layout (rightmost image).
Later on, another team added the Lotto games hero card. Yet they brought it as a manual banner. We had designed the card for betting earlier.