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

Link to the “About” sectionAbout

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

Belot scoring is fiddly. People still reach for a notepad. A wave of App Store apps tried to replace paper. Most barely beat pen and paper. We keep using them anyway.

Recently, the app we used most got removed from the App Store. The developer stopped supporting it. Time for a change.

Link to the “My Role” sectionMy Role

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

Link to the “Current Solutions” sectionCurrent 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.
  • The score input screen mixes two score categories into one number. That confuses people.
  • The app targets smaller phones. Most of the UI does not scale on the bigger phones we have today.

Link to the “Objectives” sectionObjectives

Existing apps pair weak UI with confusing score entry and hard-to-read chrome. I wanted to rethink input and clean up the interface.

  • Halve the taps to start score input.
  • Make score entry as frictionless as possible.
  • Design for iPhone SE and iPhone 11 Pro Max.

Link to the “Prototype” sectionPrototype

The final score input flow:

Link to the “Solving Challenges” sectionSolving Challenges

Link to the “Starting the Score Input” sectionStarting the Score Input

  1. Pick the team to score for right from the home screen.
  2. Score fields read as tappable at a glance.

App homescreen

App homescreen with annotations

Link to the “Simplifying the Score Input” sectionSimplifying the Score Input

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

Declarations are just combinations of 20, 50, 90, 100, 150, and 200. No need for a number pad. Separate buttons work better.

Score input screen

Annotated elements of the score input screen

Link to the “Mockups” sectionMockups

App mockup

App mockup 2

Link to the “iPhone SE (1st Generation)” sectioniPhone SE (1st Generation)

Mockup on the original iPhone SE:

iPhone SE 1 mockup

Link to the “What I Learned” sectionWhat I Learned

Do not accept tools you dislike. I use an alpha build of this app daily. It makes scorekeeping a little easier. I'll close with my favorite Steve Jobs quote:

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

Back to Home