Noel Wong

Case Study: IGT

1
 My Key Skills

UI design:

Design Wire-framing,
Branding User Testing
thinking prototyping

2
Table of Contents
1. About IGT
2. My Role In IGT
3. New Feature on Responsive Website — Lottery Group
4. Responsive Website Revamp (Baseline Product)
5. UI Design and Product Customisation for Clients

About IGT
IGT delivers entertaining and responsible gaming experiences for
players across all channels and regulated segments, from Lotteries
and Gaming Machines to Sports Betting and Digital.

4
My Role In IGT
I create UI designs for the company's baseline products, which include an e-commerce
website and a native app. I always strive to deliver the best possible user experience when
translating business requirements into high- delity design solutions. To achieve this, I work
closely with the team to conduct usability testing on usertesting.com, develop a component
library, and establish guidelines to ensure consistency across platforms.

5
fi
New feature on responsive
website — Lottery Group
Group lotteries offer individuals a collaborative approach to increase their
chance of winning. By pooling their money, participants collectively purchase
lottery tickets. A typical example of this is a family lottery pool, where family
members individually contribute to a private ticket pool with hopes of a better
chance of winning.

6
 The Design Requirement
The lottery group is a new feature on the responsive commerce site that
allows players to set up their own lottery group or join a public lottery
group to increase their chances of winning.

The feature comprises two primary roles: Group Captain and Group
Member. The Captain is responsible for initiating a lottery group, managing
settings, and sending invitations. Members are players who join a group
and contribute the required tickets to the lottery pool.

I started by identifying the user stories associated with this feature and
translating those user stories into user flows and UI designs.

 The Design Requirement

The chart was created for analysing the changes in the roles’ actions throughout he life cycle of a lottery group Flow chart analysis on Miro

As a lottery group captain, I would like to… As a lottery group member, I would like to…
1. Crate a group to increase chances of 1. Explore lottery groups and decide which one
winning and play games with friends to join
2. Invite players to join a group by sending 2. Join a group through private invite
invites 3. Receive messages if the group has updates
3. Check the status of invites so that he/she
can delete unresponsive invites ⋮
⋮
 There are more actions for the group member
in other stages
There are more actions for the group captain
in other stages

One of the User Flows and the Corresponding Flow on Mobile

The user ow starts from group discovery, group selection and joining, ticket customisation, checkout, and the con rmation of joining
Web version

Mobile version

9
fl
fi
Challenges and Approach
While I was developing the mockups, I had several questions that came up in my mind. Some of these
questions were the average size of a typical lottery group and how the financial contributions are handled.
Since our objective was to create a digital service that closely mirrors real-life experiences, I suggested to
the team that we should conduct user testing. By empathising with players who have experience in a
group lottery with friends, family, or colleagues, we can gather the insights and design features closely
tailored to their needs.

Objectives of the research:

1. Gain insights into lottery group players’ experiences and preferences.
2. Validate and refine the existing design choices and UI elements

10

Questions in the User Testing - Screeners

1. Which of the following types of games do you regularly play on the phone or on a website?
A. Mobile games (e.g., Candy crush, Angry Bird, etc) [May Select
B. Sports betting [May Select Lottery games [Must Select
C. Casino games (e.g., Poker) [May Select
D. Scratch cards [Reject] (This is an off-line game)
E. None of the above [Reject]

2. How often do you play lottery games with friends, family or colleagues?
A. More than 3 times a week [Accept
B. 1-3 times a week [Accept
C. Less than once a week. [Accept
D. Less than once a month [Accept
E. I never play any group lottery games [Reject]

11
]​
]​



]​
]​




]​


]​




]​


]​






 Questions in the User Testing - Discovery
Discovery (to understand players’ habits and preferences) Discovery (To know more about group lottery)
1. [Verbal response] What initially attracted you to draw-based games 1. [Verbal response] Have you ever participated in a group lottery (e.g.
and do you have a preferred type of draw-based game? Please office lottery pool or family lottery) with friends, colleagues, or family
provide details in your answer. members? Tell me how you started playing the game.
2. [Verbal response] Do you have any specific strategy when playing 2. [Verbal response] What is the typical size of your group when
draw-based games? Please describe your strategy. playing the lottery games?
3. [Verbal response] Have you ever managed a lottery group? If yes,
⋮
 What factors do you consider when determine the size of the group?


And more questions ⋮


7. [Verbal response] How do you share information and updates

within your group? What kind of information is shared in your group ?

12





Some Questions for Evaluating the User
Flows Created
1. [Rating Question] Take 1-2 minutes to review the information on the
page. How clear is the content and structure on the screen? Please give
details in your response.  (5-point Rating scale: Not at all clear to Very clear)

2. [Verbal response] What information can you see here? Do you think you
need additional information to start playing? Please give details in your
response.

3. [Task-based question] Show on the screen how to access a Powerball

game. Please speak aloud. 

⋮



And more questions

13



The Takeaway
Due to rearrangement of internal resources, the company made the decision to stop the
development of the entire project. Throughout the development process, I learnt valuable skills, such
as formulating questions for unmoderated testing and breaking down intricate requirements into user
stories that are later transformed into user flows.

14
Approach An example shows the
spacing and padding of the
main components and their

To ensure a consistent user experience between adjacent elements

the native app and the responsive website, our

team devised the following plan:
1. Establishing a speci cation for both web and
mobile layouts, adhering to the rule of
multiples of 4
2. Developing a visual style guide and 24px

constructing a component library to ensure

consistent behaviour and visual style of
64px 24px 64px
components used across platforms.

40px

15

fi

Responsive website revamp

(baseline product)
The revamp aims at providing a unified user experience across mobile and web
portal, and addressing some of UX issues in the previous version.

16
UI Component Library
The development started at an atomic
level — establishing colour schemes,
typography and basic layout
components, as well as crafting key
graphics and icons. Building on this
foundational level, we subsequently
expanded the library to include more
components at molecular and organismic
levels. Some atoms

Complex components on organismic level

Some components on molecular level

17
UX Problems in the Last Version
1. Users don’t feel they received a clear con rmation upon completing a process such as
activating a subscription and completing a purchase process
2. UI accessibility issues
3. Visual consistency across devices
4. During ticket customisation, users need to be reminded if they have set up an automatic
purchases of tickets
5. Mobile users expect to see the presentation of lter options in a button format

⋮


13. And other user feedback…

18

fi
fi



 One of the Flows on Web Portal and the Corresponding Mobile Version

Web version

The user ow shows the revamped

layout design and demonstrates an
attempt to solve the issue of insuf cient
feedback upon completion of purchase.

Mobile version

19
fl
fi
UI design and product
customisation for clients
The team has a baseline product (mobile app) with most of the features
developed internally. When a client has purchased the solution, designer
will generate a set of visual assets tailored specifically for the client.

20
 Examples of the
User Flows
I was responsible for designing the UI
elements based on the existing
framework, and making adjustments to
the UI design and UX to meet the
client’s business needs.
UI design: Apply client’s branding style
Main ow to the app with a consideration of
accessibility
UX customisation: Provide
suggestions for the functionalities
according to the requirements of the
client's business.

Landing page of a game

21
fl

Some Pages of the Style Guide

22
Further information
Please also visit my portfolio site: noelwongsp.com.
Should you have any questions, please contact my email:
noelwongsp@gmail.com

23


“Thank you”

24