Lotto Tree

The Client

Kentucky State Lottery

The Duration

03/12 – 09/13 (18 months)

Available On

Smart phones,
Desktop Computers,
Tablet Computers

Skills Used

Research, Storyboarding,
UIUX Design, Acceptance Testing
Graphic Design, Illustrator, JustInMind

What is it?

Here, I created a mobile lottery store of sorts, which allowed consumers to buy and play lottery games from mobile devices.

The Challenge

The challenge was to create a safe and state-specific buying environment for state lottery players with a focus on mobile devices.

Background of the lottery and the Internet

My role on this project was to define and organize strategy, design and development of the” Play the Lottery” feature for both draw games and scratch-offs. My initial thoughts were to build an adaptive site that used Geo-fencing. The client had their mind set on building a desktop version first. However, I wanted to understand the lottery and identify if desktop was a best first approach.

Overview

My role on this project was to define and organize strategy, design and development of the” Play the Lottery” feature for both draw games and scratch-offs. My initial thoughts were to build an adaptive site that used Geo-fencing. The client had their mind set on building a desktop version first. However, I wanted to understand the lottery and identify if desktop was a best first approach.

What are the game types?

There are two types of games, draw games and scratch-off games. With draw games, a player has to match their numbers to the winning numbers. There are 2 number groups with sequential numbers. The first group starts at 1 and end at 52. The second group starts at 1 and ends at 35. A player has to pick 6 numbers from the first group and 1 number from the second group. Scratch-off games require a user to scratch away a designated area on the game to reveal winning results.

Who are the players?

I wanted to understand who plays the lottery. Data provided by the Kentucky state lottery informed me the average lottery player is a male in mid 30’s with some college. This debunked the traditional belief that the lottery is merely a tax on the poor and gave me a better understanding of who the users of the proposed technology would be.

How are they playing?

I went to a local store and observed 10 players stop in to buy lottery draw-style tickets. They would yell out things like,” let me get 3 lines on Powerball with the PowerPlay” and ” I want to play these numbers.” With the current process, a buyer either asks a store clerk for a quick pick or has to fill in a form. When a player fills in a form he/she hands the form to the store clerk to be processed through a machine. Think of a scan-tron sheet. Scratch offs are blatantly obvious as to their function.Next, I wanted to understand who is currently offering online lottery solutions. Illinois was the only one available in the United States. So, I looked abroad.

 

Who is currently offering lottery online?

I identified 3 existing web platforms that offered lottery draw-style game purchases and 2 mobile apps that allowed for players to simulate playing a scratch-off. Thelotter.com, Illinois State Lottery (ISL) and LotteryUniverse.com were some examples. These stood out the most to me because they highlighted current lottery capabilities in the US and abroad. With the ISL solution, a user could play draw games, but not scratch offs. I particularly liked how thelotter.com designed their tickets view for the user. They have their numbers roll out across the screen on lotto style-balls. It did not take up a great deal of screen space and it sells the lotto Experience fro the user. Also, I noticed that we could quickly create similar comps for testing. ISL had a mobile app with a horrible on-boarding process. My initial thoughts were, why does this needs to be an app with the presence of so many limitations? This was the defining moment for me as I realized adaptive was the best way. Their process was long and required users to download an un-trusted file and turn off their firewalls to install the files. Safety is a major concern of mine, especially, when using an e-commerce technology. Once installed, the app was a delight to look at. However, it was not reliable. I was forced to close the app several times after an attempt to explore its functionality. When I explored their buying process, I learned there was a minimum required purchase amount. Also, I learned that in an effort to avoid Apple’s 30% tax on goods sold in its market, ISL opted out of designing for IOS and opted in for taking a 3rd party Android app approach. It was a developer friendly approach, but the user experience was compromised.

 

How is the internet currently being used?

I reached out to both Flurry Analytics and Cisco Virtual Networking Index (CVNI) to identify if mobile was the best fit. CVNI researched showed 90% of data consumption would come from some form of mobile device. Flurry analytics suggests 80% of users were playing games, using social media or looking at content categorized as entertainment. In this study data was collected by 54 billion worldwide sessions in 2012.
Now, I understood mobile was the best way. However, I understood adaptive mobile would be a better approach than a native approach because of limitation in purchase options and accessibility concerns. Adaptive views designed specifically for mobile would provide the lottery access to a wider audience and a native app-like experience for the user.
Once I understood the customer, the current state of the industry and the platform I would focus on, I began to craft a story around how that experience would need to look for a user when buying lottery tickets on an adaptive mobile site. To begin, I created 4 personas. during our routine morning meeting. I worked with the team to break the experiences up into 4 categories, the avid player draw game, the large jackpot size player, the impromptu player and the social player. Our avid player’s concerns were having access to buying tickets quickly, delightfully and reliably. The impromptu player plays needed help to purchase. The large jackpot players were interested in playing when jackpots were high. The Social lottery player was motivated by the social experience of lottery groups. I worked alongside other creatives to define what the user’s flows looked like. I posted Personas on our wall and created a story for each of the personas.

Why go Mobile?

The lottery has been the same for the past 30+ years. It is time to accept the inevitable, online lottery.Cisco Virtual networking index (CVNI) suggested that mobile and portable device will control data consumption. With that in in mind we decided to focus on Mobile. Next, I focused on what people were doing on these portable devices. Flurry Analytics helped me there. Their data suggests a combined 80% of users were playing games, using social networking services and using services that offered entertainment. This was a slam dunk as the lottery encompasses all three. Once I saw what devices people were using most and what users where doing on those devices most, I moved forward with designs

Source- Flurry Analytics

Source- Flurry Analytics

Source – Cisco Virtual Networking Index

Source – Cisco Virtual Networking Index

Personas

Persona 1

Dave, 31, was an electrician who played draw-style games 3 times per week and has won a draw game before. He associated his previous winnings with the time of day he played. Therefore, he played mostly during lunch time. Lunch time can often be busy for his area. So, he rushes back to work frequently. The store clerk told him the lottery is offered online and they have subscriptions.

Hi guys, I am Dave!

Hi guys, I am Dave!

David’s Flow

Dave pulls up his internet on his mobile device. he goes to ABCLOTTO.com and explores the quick pick draw feature. He is prompted by an overlay informing him that he has limited access to all of his lotto feature (subscription model, scanning a physical ticket to your online acct) He decides to create an account to access more features. He clicks on settings; then he clicks edit to set up his subscription.

Persona 2

Micheal, 34, is a construction worker who stops by the store most mornings for a 10 dollar scratch off. He does not like draw games because he has delayed knowledge of a win or loss. A friend told him that he could play from his mobile device.

Hey, I am Micheal.

Hey, I am Micheal.

Michael’s Flow

Michael takes out his mobile device and downloads the app. When the app open it allows him to immediately interact with the content. Michael clicks on “Play the Lotto.” He click on “scratch offs” and chooses a ticket. Then he is prompted with a “create an account” overlay. He creates his account and adds a payment method to purchase the ticket.

Persona 3

Christian, 36 is an Architect that works from home to take care of his son and father. He rarely plays the lottery and when he does, he stated ‘I am motivate to play when the jackpots are large.”

Hello, I am Christian.

Hello, I am Christian.

Michael’s Flow

Christian notices the Power ball has a large jackpot size and says” I need to buy a ticket.” An ad plays on TV informing lottery players they can now play from their mobile devices. He also gets a text from his grandmother asking him to buy a ticket. With the phone in his hand, he decides to look up KY Lottery adaptive website. He downloads the app and buys his first ticket.

Persona 4

Bobby, 34, is truck driver who is frequently on the road. He reads the newspaper everyday often. He likes to play the lottery, but does not know when his schedule will allow him to play.

Good day, I am Bobby.

Good day, I am Bobby.

Bobby’s Flow

Bobby arrives to a rest stop and reads through a job directory. He passes by an ad that says you can play the lottery online. He visits the website and notices that he can, in fact, play the lottery. He fills out a quick on-boarding form and drops off the page. The server sends him a text notification informing him of friends who are playing the lottery near him. He messages his friends and suggest starting a lottery group. They open the site and click groups. an e-mail notification 4 hours later telling him the lottery is playing tonight. Bobby selects “buy” and purchases a ticket using his debit card.

User Experience buying a ticket

Step 1

  • Needs to have a clear C.T.A.
  • Needs to allow for users to see existing games currently available.
  • Needs to have a clickable scroll bar that brings a user to the game clicked

INSPIRATION

TheLotter.com does a great job of crafting its home page around the main CTA. I chose to adopt this method as the function is intuitive and test users via Slack agree that its function is clear. However, we realized that a significant amount of potential users in our target were often busy and had to set aside time to play the lottery. It was my hope to make the design simple enough to quickly understand and use for users who were ready to make a purchase or considering a purchase.

IMG_1199
IMG_1200

Step 2

  • Needs to show the Lottery’s product line up
  • Needs to inform customer of draw times
  • Needs to have a countdown til draw
  • Needs to clearly differentiate between draw and scratch off
  • Needs scroll-able screen to show available games

INSPIRATION

Scratch Off Mania is an app that allows its users to play scratch-off like games by swiping their fingers across their mobile screens. Although, this game was a perfect representation of how our scratch-off games needed to function, Illinois State Lottery only allows for their users to play draw-style games. I introduced the toggle idea as a solution to managing the relationship and distinction between the two types of games. My inspiration for the toggle came from LottoUniverse.com which carries lottery games from all around the world. They have a toggle feature that allows for users to quickly toggle game type.

Step 3

  • How will the user play draw games?
  • Needs to connect with “Choose-Numbers” feature
  • Need to access “Favorite-Numbers” feature
  • Need to connect to “Play-Lottery” feature

INSPIRATION

Thelotter.com has a feature which allows users to save numbers frequently used and number sets liked. On this step I thought about how frustrating it would be to retrieve number combinations when your pressed for time. It is intended for this web platform to offer the feature of storing number combinations the user finds to be of significance.

Notes:

After communication with our dev team, I decided move forward on a feature, an API which allowed for game developers to create digital gaming experiences for the lottery. Initially, this idea came to me as inspiration when the lottery discussed their lack of game diversity during our kickoff meeting. I wanted the users to have 3 options and to choose the path that was most desirable to them, but still help navigate the user down the funnel to increase conversions.

IMG_1205
IMG_1207

Step 4

  • Needs to add pin to secure account
  • Needs to pick 6 balls from first number set and 1 money ball from another number set
  • User needs to clearly see selected numbers
  • Needs C.T.A. to move forward
  • Needs to confirm purchase

INSPIRATION

Security was a priority on this project. I thought of using a secret pin to complete each transaction. My inspiration was Visa’s and Master Card’s 3 digit security codes located on the back of each card.

It is a function of this service to allow users to share tickets and winnings with friends. To prevent anyone from accessing an account, buying tickets and sending those tickets themselves, adding a pin to complete a transaction adds protection for the user. It further protects the user from their own error.

Step 5

  • Need to have numbers played
  • Needs branding for game played
  • Needs favorite button
  • Needs to show time of lottery drawing (Countdown)

INSPIRATION

1.After perusing through the Illinois state lottery’s app, I noticed that their ticket details page showed times of play, numbers played and expected winnings but did not have a countdown to entice future plays. One lottery player in our online forum stated he would like to see a countdown because it makes lottery more of a “real” experience. After further discussion, I uncovered what “real” meant to him. He believed a countdown would keep users in a consistent state of engagement with the product , making it seem more transparent and honest. He also stated that the lottery seemed fake saying ” You toss money out and you either win or lose. Its not a genuine experience for me!” Another lottery player said, “the countdown adds an element of excitement and anticipation.” I believe it would offer the user more transparency and would create a sense of urgency in the purchase funnel. This works well for the business of lottery.

IMG_1209

From Paper to Digital

transition to high fidelity

THE HOME PAGE STARTED OUT WITH THE FOLLOWING FUNCTIONS

*Accounts, *Alerts, *Syndicate, *Feedback, *Shop, *Competitions, *Settings, and *A scroll from lottery names and jackpot sizes

HOW DID IT CHANGE?

Alerts on most of the comps we used were shaped like an envelope and located at the top right of the screen. I explored putting an envelope up to draw a users eye up to the safety of the upper right side of the screen. It also motivates a person to commit to looking at it because it takes more of an effort to look to the top right of a screen. I choose to keep the “Play the Lotto,” previously “Shop” C.T.A as the primary and show the other icons secondary. I made the secondary button smaller to emphasize less significance. “Account” is important so I need to have it close to the main C.T.A. and it needed to be easy to get to. I placed this on the left as the user frequently views the left because the eyes always reset on the left side of a screen.

I did not choose Feedback to live on the homepage because there were not any protocols in place to handle a this type of data.

Instead of using syndicate, I chose to go with “Groups” as it was easier to understand and it told what its function was. Having groups lead to having friends. The thought was, users are going to want to join groups with their friends. If so, we need to allow users to befriend others and keep the experience within the website. This feature was really enjoyed and highly regarded among the varying teams

“Competition,” known now as “Sweepstakes” is a feature I worked on with the sweepstakes team to discover ways to scale lottery sweepstakes-like products. I advised that having it live on the homepage would increase the chances of scaling those products and it would serve to compliment the overall design strategy for the homepage.

We chose to leave “Settings” in an always-on mode. We chose to keep the, support tabs/tools accessible to all users to clearly see and understand. The perception being conveyed is, we are a safe environment and we are always willing to help.

I strongly supported having multiple way to access lottery games. The ticker tape scroll with lottery information is a great way to allow users in the driver seat of the website. Users are empowered to achieve business goals in different ways. Having the scroll also appeals to users who would play because of large Jackpot sizes. This consideration was a bold move in that it would take away from the view-able real estate on the page.

The lottery’s new perspective

The lottery’s new perspective

Here is the future

Here is the future

Wire-framing and updating the Prototype

The prototype was expected to showcase functionality of the draw-game ticket and scratch-off ticket buying process. Perfecting the prototype was a challenge as there were multiple teams working on different portion of the experience. I solved this by developing a style guide that helped us work more uniformly. I worked with creatives, PM, devs and copywriters to identify what brand and experience consistency would need to look like for users. In particular, I wanted the On-boarding and the management of users through the funnel to be consistent. My thought was users could quickly sign up and quickly immerse themselves in the experience without any design culture shocks.


On-boarding introduced the user to the pin feature. I directed the attention of copy team members to focus in on the right way to speak to the customer about the pin feature. To best manage the user through the funnel, I found several inspiring platforms as discussed in earlier sections. They all offered their content through wizard experiences that led the customer to the next progressive step in the funnel. Wizards are more direct and less exploratory which could be a pain point for some users who want to test out the application. In contrast, it gives users direction and a sense of accomplishment when moving through the process.


I built and documented the draw-style and scratch off game’s buying process for our prototype by creating comp using Photoshop and illustrator, gathering comps from other designers on our team and using the JustInMind prototyping software to implement those changes. These tools allowed me to quickly add my work to other team’s work on the project.


During this time, I would meet with the client to address concerns, suggest changes and supporting data, comps from other companies and research to support design decisions. If a design decision needed to be changed, I would communicate the design need to PMs, developers and creatives. In this case, the Client was satisfied with the result and are using the same design 6 years later.

Safe enough for you to leave on your desk

Safe enough for you to leave on your desk

Is it safe?

State lotteries were aggressively trying to find solutions that addressed the need to diversify their product line and take advantage of the significant cost savings associated with going online. However is it safe?

In short, it is. Security and experience go hand in hand. With security being paramount, I made sure to follow the banking industry’s lead. Similarly, I steered our security efforts in the direction of FIPS 140-2 Compliance. specifically, two step authentication, changing or updating keys where applicable and using industry-standard encryption specifications to protect the user as outlined in the Gramm-Leach-Bliley Act (GLBA)

What did I learn?

This was the first project I understood User Centered Design (UCD). I learned there were two goals in a project: the business goal and the end user’s goal. I learned how to plan and support my designs with research and data. I learned that working with cross functional teams could be a challenge when design guides are not present. I learned how to communicate more effectively through-out the varying disciplines involved in a project. Working in an agile environment makes everything and everyone accessible. In my experience, most people in an agile process shows you their style and commitment to the project early on. The consistent communication makes overcoming communication hurdles and meshing well with involved parties much easier. I also learned how to manage the Client’s suggestions and deliver them in a meaningful way to designers and developers alike.