Designing a demo mode banner in MoneyCoach for macOS

• written by Perjan Duro


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.

Articles you might like

• written by Perjan Duro

How To Write A Gym Cancellation Letter

If you've decided it's time to part ways with your gym, you'll need to provide proper notice and submit a cancellation letter to end your membership and our free AI tool can help you do that in seconds.

• written by Perjan Duro

Error Codes In The App And How To Fix Them

## Why this page? The purpose of this page is to provide information about error codes in the app and how to fix them. It serves as a guide for troubleshooting common issues encountered in MoneyCoach. ## Shortcut Automations