The design process

Home screen

The home screen offers an overview of the existing and active announcers. By having a switch, each widget allows to quickly turn on and off the announcers. On the other hand, all announcements can be turned off too by the master switch right next to the main title.

There's really not much more to add, after all, it's simply an overview page!

Settings menu

Thanks to the simplicity of the whole app, we are able to place the settings menu right at the bottom of the screen. What advantages does this give us? That it's very close to the thumb and, therefore, easily reachable. And it's not the only one! Closing the settings menu, as well as adjusting the volume are right there the moment the menu spawns.

As for the "Quick settings", they continue in the same style as the app tiles from the overview.

The options have been carefully chosen to match possible scenarios of a regular User. Let's see the examples behind:

• "Always announce": Are you one of those people who always keep their phone on silence? (Not judging, I do that too) There's a chance you might miss an announcement because of it so, why not get rid of the issue?
• "In-App alerts": What about distractions when using your phone? Maybe you want to read the messages yourself if you are using the phone, right? There's a solution for that too with this option.
• "Only on Bluetooth": Caring about privacy? Solved!
• "Text to speech language": Messages in many languages? For this first version we keep it easy, but ideally all messages should be read with a right (switch to French) intonation.

Template screen(s)

Let's go to the very core of the app now. The template is the customizable part of the app, where one can play around with predefined fields.

For this first version, there is no freedom to reorder the building blocks, not to add new custom ones. Hence, this screen is entirely dedicated to customizing and enabling/disabling the fields.

The templates change from one app to the other in order to adapt to their specific features (we'll see that in a bit) and even color. The accent color of the app is present in all the templates, but elements as the colored sheet behind the template always matches the app's icon accent color. Below, we see the "Phone" icon is similar to a green mint, which sets the hue for the whole screen. As a second example, Viber's icon would set the hue to an intense purple.

But that's not the only color around!. While the app's accent color (fuchsia) is still around, when including additional options in the templates these will be displayed in the complementary color of the app's icon accent color. However, this complementary color is not the exact complementary, but an approximation.

Take a look at the image below, for instance:

Since the template's hue has been set to a vibrant purple, the options switch to an amber, in order to not clutter the image further with more purple or fuchsia hues.

Navigation

Navigating through templates can be done in multiple ways:

1. Swiping through: If you take a look at the right part of the screen, you see there's a blank rectangle, similar to the main rectangle encompassing the template you're focusing on. This indicates there's another element on the right which can be brought to focus by pulling from the right side. Then, returning to the previous template is as easy as pulling from the left side. This shortcut tries to appeal to the natural swipe gesture many apps include to navigate through a list of items.
2. Using the bottom navigation: At the bottom we see a miniature menu of the overview. It is as easy as tapping on one element and you switch the template.
3. Through the overview menu (if you have patience and time to spare): The last two options allowed you to navigate without leaving the templates space, but we also need the good old way to navigate back to the Overview, don't we?

‍

Building blocks

The first step is to attract one's attention. When the User hears the (few or many) words they've chosen, they know the Announcer is speaking to them.

Just as we make pauses in between words, we need to make pauses in between blocks. These blocks split the blocks announcements by introducing (adjustable) time delays.

Now, we need to know who's messaging us, right? The Contact descriptor is in charge of this.

You might be wondering: If someone is not in my contacts, how do we know the name? Well, you are right, we do not. This is because "Contacts" refers to a specific list of contacts, which is set up and visible when that option is selected (not in this design, unfortunately).

Finally, the message itself. It speaks for itself, right? But here is where we actually have a difference between apps. Instant messaging (IM) apps allow sending links and media, which can be read and/or described when announcing the content of the message, while others, like SMS messages, are less likely to contain them.

Repetition

This feature has been introduced in case one misses the announcements. Imagine the announcement catches you off-guard, or far away, and you only got half of the message. Setting the amount of times you want it to be repeated should fix that!

The placement of this menu is right below the template, in order to indicate these settings are specific for that template.

Audio teaser

Another important feature when the User is building any kind of sequence is testing their creation somehow. This is vital for quickly adjusting tiny details such as delays and repetition times.

Because this app is focusing on announcements, the way of testing how they'll sound is by actually listening to a preview of the built template. Sometimes we fail at predicting how something will feel or sound when it's only in our mind, so extra testing it becomes essential in this cases.