February 26, 2020

750 words 4 mins read

Bela Blok

Bela Blok

👉 About

To live in 🇭🇷Croatia means great food, beautiful seaside, and playing Belot (A.K.A. Bela).

The game Belot has a somewhat complicated way of tracking score. Tracking the score is traditionally done in a notepad, but with App Store Gold Rush some apps have emerged to help you with it. Although they beat pen and paper, they are not good. And the worst part is, we’re still using them today.

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!

If you want to read a basic overview of the way score is tracked in Belot, expand the toggle below:

Belot Scoring

In Belot, there are two different score parts that are added up to get the final round score.

1️⃣ First part

This is the simple one—it’s the sum of values of all the cards each team had in the end. Maximum number of points is 162.

2️⃣ Second part

This part is based on the cards players were initially dealt and are bonuses to the first part called declarations. These bonuses are certain combinations of numbers 20, 50, 90, 100, 150 and 200.

⛳ Objective

Aside from the awful UI, user experience in any of existing apps is horrible. The score input is very confusing and some elements are difficult to read and understand. My objective is to reinvent score input and significantly improve on the UI.

✋ My Role

Since this is a personal project, my role is to create everything from scratch. From visual identity, through UI/UX design, to coding the app in the end.

💥 Challenges

👇
I’m going to focus on the most used app for score tracking in Belot. It is, although not great by any stretch of the word, better than all the competition.

Biggest problems with the current app

  • 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.

Concrete Challenges

  • 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.
Divider

📱 Prototype

Final score input flow looks like this

📈 Solving Challenges

Starting the score input

In the old application, user had to tap on the “New” button and then choose to which team to input the score by tapping on their score box.

Solved problems
  1. User can now choose the team they want to input the score for right away from the main app screen.
  2. The score fields were made to feel like a tappable elements.
Old Score Overview Screen New Score Overview Screen
Old app screenshot 1
New app screenshot 1

Complicated score input

New app with annotations
Since one part (declarations) of tracking the score is based on recalling the round just played, there are often corrections when inputing the score.

Also, 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.

Solved problems
  1. By separating the two main parts of score input, I got great responses from people I showed the prototype to.
  2. Separating the two parts of score input also helped with correcting a wrong user input.
Old Score Input Screen New Score Input Screen
Old app screenshot 2
New app screenshot 2

✨ Mockups

Fist mockup
Second mockup

iPhone SE

Here’s a mockup of the app on iPhone SE

iPhone SE 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

🍏 iOS Version
🤖 Android Version
🌎 Web Version