Putting in the numbers

Blog article image showing number inputs

Wuzzl.io is one of our own products. It’s the one and only foosball manager for you and your team. We at Liechtenecker love to play foosball! Since the beginning of the company it is a big part of our culture. It was only a question of time until we decided to create a lovely tool that manages all our games.

While we developed Wuzzl.io we focused on a few key challenges, one of these being the user’s need to quickly put in the results and go on with life.  On the result screen you’re able to fill in results for each team. It is just a small part of Wuzzl.io but still a quite challenging one. In this article we want to share our experiences of the design process and the thoughts we put into this part of our application.

 

You have to start with the customer experience and work backwards to the technology

Steve Jobs, 1997

animation_1

So this is how the screen looks like. After the game is finished the user needs to fill in the results. Our first approach was quite straightforward: A click on the score of each team will open an overlay with the numbers 0 to 10 to select. It takes the user five clicks to fill in the score and hit the save button.

The downsides of this approach

The first downside is, that five clicks are way too much to fill in the result, no matter how nice the UI looks while the second downside was something, we struggled while developing Wuzzl.io: not everybody plays until a team has 10 goals.

For a product like Wuzzlio every interaction is really important. People like it simple and every click you can avoid is often a good step towards a better experience. So we asked ourselves: How can we improve the interaction? First thing we did was automating the score input process. We always played till the first team scored 10 goals. That way the user can enter the lower score first and the app sets the second one automatically to 10. That made it three clicks instead of five. Yeah that’s a lot better but we still have got the second problem: We cannot be sure that everybody plays their games till ten. In fact, official games are played till 5. So this wasn’t the right solution.

Make it as easy as possible

We did some research prior developing Wuzzl.io, talked with people from other companies playing table foosball and read the official rules. At first, we decided to implement the rules by which we play in our company, but we already knew it was utterly important to provide a way to let each Organization choose their own rules. So we did a big update to the general settings of each organization in our February/2016 Update. Additionally to choosing how many goals are required for a victory, the user now has the option to play in “2 up mode”, which is frequently used in other companies. The “2 up mode” requires the winning team to be 2 goals ahead of the other team. A game that has a limit of 5 goals may theoretically end with a score of 24:22.

Our result-input screen had to step up it’s game. We thought a lot about optimizing the way user input their scores, tried different approaches, measured the required time to put in the numbers and counted the clicks. We settled on an approach, that was visually comparable to the screen we used before the update. Under the hood is an utterly more complex logic to handle all the possible outcomes.

 

animation_2

The devil is in the details

This is how we changed a small but important part of Wuzzl.io. We put a lot of effort into these updates and spent hours researching but we are happy with the result and our users are too. You always have to refine your product and work on every detail to provide the best experience possible for your users.

 

 

Über den Autor

Stephan Fletzberger

Meine Rolle bei Liechtenecker:
Eine Mischung aus Künstler und Nerd, Verehrer der Frontend Entwicklung

Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf:
Förster

Mein Herz schlägt für:
Elektronik, Harmonie und Entwicklung

Du hast etwas zum Artikel zu sagen? Schreibe es nieder

Schreibe einen Kommentar