The making of the Stoloto lottery results interface

Overview   Process  

Studying the data sent by the client.

baltbet process 01

Prototyping draw mechanics and adjusting the timeline.

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

baltbet process 24

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.

baltbet process 03

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.

baltbet process 04

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.

baltbet process 05

The client approves the approach. Moving on to details.

baltbet process 06

Estimating the style trying to maintain continuity with the website.

baltbet process 07

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.

baltbet process 08

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.

baltbet process 09

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

baltbet process 10

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.

baltbet process 12

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.

baltbet process 13

Drawing a timeline to understand state change logic.

baltbet process 14

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

Thinking through all states of each game.

baltbet process 15

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

baltbet process 16

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

baltbet process 17

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

Giving all objects straight trajectories due to technical limitations.

baltbet process 18

Coming up with metaphors for the Work in Progress icon.

baltbet process 22

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

Making the sign.

baltbet process 23

Order a design...