The making of the Stoloto lottery results interface

Studying the data sent by the client.

Prototyping draw mechanics and adjusting the timeline.

Having understood the scenario, visiting one of retails locations with the screens.

It turns out that most of the screens are vertical. Due to the serious public and presence of screen with data tables, our approach will not work, as draws happen every 15 minutes and all that time the screens will be cycling the same images over and over again. We understand that it makes sense to show previous draws with the upcoming ones marked on the timeline.

The art director does not approve the horizontal timeline and explains his vision of the vertical one. Working on the table, adding the mark for the next draw and rules of winnings distribution in the draw.

Showing both approaches to the client. The client doesn’t like the idea with the timelines, but deems the table approach feasible. Working on the layout, adding the draw screen and advertising blocks.

The client approves the approach. Moving on to details.

Estimating the style trying to maintain continuity with the website.

The art director asks us to go to a shop with a screen and see the environment where the design will have to work. Creating testing conditions of a production environment and trying out the design. Understanding that we have to make everything larger. Also, it appears the TVs require more saturated graphics. Making changes and showing to the art director again.

Art director: The numbers are jagged, it’s better to keep them all aligned to the right. It also seems that the choice of the typeface makes digits illegible. We need perfect legibility to ensure information is easy to read and grasp. Everything that gets in the way—bars, shadows—should be discarded.

Changing the design.

Working on the cycle logic, animating games and thinking through interface behavior in case of technical malfunctions.

The technologist brings the design to life. Making corrections and launching in test mode.

It turns out people in shops sit even further from TVs than we thought which means everything needs to be even larger. Inviting the second designer to join the project. Deciding not to show the results of previous draws in favor of clarity.

Ultimately deciding to keep only one previous result for each of the games and dividing the screen into three zones. The nearest draw takes up most of the screen, after the screening it collapses and waits for another draw. Inventing metaphors.

Drawing a timeline to understand state change logic.

Working on the bar (using the example of Rapido).

Thinking through all states of each game.

Getting the client’s approval. Drawing the final graphics.

Testing on a TV similar to those that will be used in shops.

Now the stage of total animation. Animating the splash screens.

Giving all objects straight trajectories due to technical limitations.

Coming up with metaphors for the Work in Progress icon.

Art director: These associations are too complex, let’s go with a simple Attention sign.

Making the sign.