top of page
Desktop HD.jpg

The challenge

Update the Instant Win Games outcome pages on web, iOS and Android to facilitate a more exciting and engaging experience which will incorporate animations for celebrating winning plays and optimising the position of cross selling opportunities.

App benefit: Forecasting a 1% increase in the conversion rate from IWG outcome page visitors to repeated players (current rate 65.7% / Target rate 66.7%)

 
Sales benefit: £5.7m per financial year

My roles: Research, Information architecture, user flow architecture, UX/UI design, prototyping, micro-interactions

Research

Before starting the project I performed and expert heuristic analysis of other websites to ascertain best practises for similar pages. This allowed me to learn patterns that could enhance a players experience when using the Instant Win Games outcome pages.

Screenshot 2022-09-01 at 13.57.49.png

Before

The original Instant Win Games outcome pages had inconsistent use of typography and very outdated components. It was text heavy and the heirarchy of information was poor. Existing web designs can be seen on the right and below is the app journey.

Desktop HD.png
2.png

No win

Low win

Mid win (stage 1 and 2)

High win

User flow

Mapping out the user flow for each use case was essential so I could understand the journey a user would take from playing an instant win game to the outcome pages. A flow represents an overall picture and gives me the opportunity to create a more seamless user experience.

flow.png

Wireframing

After reviewing the current experience I began wireframing some basic options. Wireframing to begin with helps me iterate fast and share my ideas with key stakeholders before we commit to a solution. In this instance, I needed to design for both desktop, mobile, app and android including all use cases (no win, low win, mid win and high win). Wireframing for desktop was not needed as we would be using an already existing template for a consistent journey across the website.

UX.png

No win

Low win

Mid win

High win

No win

Low win

Mid win

High win

Visual design

A fresh, modern redesign for the Instant Win Games outcome pages using the existing style guide on web, iOS app and Android app

No win

Low win

Mid win (stage 1 and 2)

High win

ui mob web.png
desktop ui .png

iOS App

Android App

UI android.png
UI app.png
UT_Logo_RGB_Blue_2x-1.webp
testing.png

V1​​

V2​

After sign off of the final designs I ran 4 lots of user testing sessions with 10 users for each test, this was conducted using usertesting.com. A prototype was created and the use cases that were tested included no win and low win across web (mobile) and iOS app. This allowed me to gain an insight into the customer benefit the new designs would provide and whether users felt this was an improved experience across Instant Win Games which was essential before passing on to developers.

​​​

Common themes & insights gathered

I then analysed the testing in depth to conclude any common themes across the designs and displayed them in their simplest form to present to key stakeholders.

Liked the addition of the new iconography and use of green background which they felt uplifted the page and gave an overall more 'positive' feel which encouraged them to play again.

Liked the addition of the new play again component, they felt they were less forced to play and rather asked if they would like to play again.

Screenshot 2021-10-05 at 17.34.53.png

Users felt V2 was more user friendly and thought the copy was more personal. Users preferred the use of larger copy.

90%

90%

100%

Micro-interactions

Micro-interactions were created using after effects, these included animation of the confetti, iconography and copy to create a more joyful experience. Alongside this a dev sheet was created to aid the developers so they could see the exact timing of each animation, frame by frame. A json file was also provided to the developers.

ae.png
dev sheet.png
Background.png
bottom of page