Introduction
When you first open MoneyCoach for macOS, you will be greeted with the demo mode. This is a special mode that allows you to test the app without creating an account. This is useful if you want to see how the app works before commiting.
UI matters, and we want to make sure that you undestand in a few seconds if you are in demo mode and how to exit from it. Being available on all Apple devices, we have to make sure that the UI is consistent and easy to understand.
Challenges on the macOS version:
- The demo banner should be visible on all screens
- The demo banner should fit into the macOS design language
- The demo banner should be easy to understand and dismiss
First iteration
After developing the app for the iPhone first, we turned to macOS. This is how it looked like in the first iteration, without any changes. At first it looked alright, but after 4 seconds I realized that the banner was covering the toolbar, and it was not looking good.
Second iteration
Then I moved the banner to the top right of the screen, and it looked better. Now the issue was that the banner was covering the navigation bar buttons.
Third iteration - N-1
I played around with its position and size. And you have to consider it should look good on all screen sizes and when window is resized. This is the valley of hidden work. Nobody sees it, but it is important to go through it.
N-th iteration
Then I moved the banner to the bottom of the screen, and it looked way better. Now you can understand you are in demo mode, and you can easily dismiss it. Given its red colors, it is easily visible and stands out from the rest of the UI.
All this was done in 2 hours, and it was a great learning experience. Of course there were also other changes, but this was the most important one.
