Colour palette and its rationale

Principal colors:

• #19381F (Dark Green): This dark green color gives the user a feeling of calm, stability and confidence. In addition, it creates an atmosphere of security for the user. This is essential for our virtual queuing application, because we need our users to trust the process and feel that their turn is in good hands.

• #BDBDBD (Grey): This grey color is useful to achieve a good balance with green. It shows the user a more modern and softer interface, basically a clean look. It can be used as a background color. Also, it keeps the user focused on key actions.

Secondary colors:

• #7AA482 (Soft Green): This soft green works as a complement to the dark green color. It gives the user a feeling of friendliness and approachability. It can be used for interactive or informative elements.

• #E1D887 (Warm Yellow): This yellow brings energy and makes the app look more lively. It can be used for informational elements, notifications, alerts, or to draw attention to important actions.

Neutrals

• #000000 (Black): This color is useful for creating contrasts. It is ideal for texts or elements that require high visibility.

• #D9D9D9 (Light Grey): This color can be used for borders and dividers. It helps to maintain a clean and minimalist look.

• #FFFFFF (White): It serves to provide contrast to darker and more colorful elements.

Fonts

We chose two fonts. The first, Poppins Bold, is used for titles and sections with a higher hierarchy. The second, Roboto, is used for normal text. It is legible and basic.

Icons and images

Icons

We use the icons provided by Material Design 3. In some cases, we add a neomorphism style.

Images

At the moment we only use one type of images, which are stock photos.

UI prototype

To see our UI prototype in more detail here is the link: UI prototype

Navigational patterns

Our main navigational pattern consist on Navigation Bar.

It basically consists of tabs at the bottom that allow the user to switch between different sections. Each icon has an icon label that makes it intuitive for the users. This makes it possible for the user to navigate the app efficiently while keeping the main areas of the app easily accessible.