Bela Blok Pro

• 3 min read

Tracking the score in a game of belote is traditionally done in a notepad, but the goal is to save trees and replace paper with an app.

Bela Blok Pro cover picture

About

Living in Croatia means great food, a beautiful coast, and long evenings playing Belot (also Bela).

Belot scoring is fiddly. People still default to a notepad; a wave of App Store apps tried to replace paper. Most are barely better than pen and paper, yet we keep using them.

Recently, the app we used the most was removed from the App Store due to lack of support from the developer. It is time for a change!

My Role

Solo project: visual identity, UI/UX, and implementation.

Current Solutions

The most-used Belot score app is still the benchmark. It is the least bad option, not a good one.

  • It takes up to two taps to start score input.
  • Score input screen is not intuitive. Two score input categories are mixed into one number which leads to a very confusing experience.
  • The app was created with smaller phones in mind. Most of the UI does not scale well for bigger phones we have today.

Objectives

Existing apps pair a weak UI with confusing score entry and hard-to-read chrome. The goal was to rethink input and clean up the interface.

  • Halve the number of taps needed for starting the score input.
  • Make score input process as frictionless as possible.
  • Design must scale well and work on iPhone SE, as well as iPhone 11 Pro Max.

Prototype

The final score input flow:

Solving Challenges

Starting the Score Input

  1. User can now choose the team they want to input the score for right away from the main app screen.
  2. Score fields read as tappable at a glance.

App homescreen

App homescreen with annotations

Simplifying the Score Input

Declarations depend on remembering the round you just played, so corrections while entering the score are common.

Moreover, declarations are just combinations of numbers 20, 50, 90, 100, 150 and 200. There is no need to use the number pad to input them. They can be separate buttons.

Score input screen

Annotated elements of the score input screen

Mockups

App mockup

App mockup 2

iPhone SE (1st Generation)

Mockup on the original iPhone SE:

iPhone SE 1 mockup

What I Learned

I learned that you shouldn't take things as they are if you don't like them. As I'm currently using an alpha version of this app, I realized it has made my life just a bit easier. That is why I will finish this case study with my favorite quote from Steve Jobs:

Everything around you that you call life was made up by people that were no smarter than you and you can change it, you can influence it, you can build your own things that other people can use. Once you learn that, you'll never be the same again.

Download links

Go Home