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.

Rationale for fonts

In our design process the choose of our fonts was crucially to make the identity of QueueHub. We concentrate in show a modern app while enhancing user experience. We want with our fonts improve the readability, takes care of user experience and UI/UX patters. For that reasons we choose each one of these fonts:

• Poppins Bold: Poppins was chosen for its readability and its modern esthetic. Also, Poppins is effective in tittles or headers, highlighting information in a clear and striking way, for that reason we use that font in our tittles and headers. Poppins have a geometric design which allow to reflect a vanguard app, with a modern and futurist app.

• Roboto: Roboto enhance the readability of the information because is a sans-serif optimized for screens font. Also, Roboto is known for its flexibility that allows in different purposes. In other way, Roboto is a modern font because have a minimalist design, that give a comfortable sensation to user. And in addition, Roboto is optimized for Android, which is valuable in our Kotlin application.

Icons and images

Icons

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

Rationale for Icons

The integration of Material Design 3 icons is in line with QueueHub’s style. These icons offer a wide variety and are widely recognized. This can help make the app more intuitive to navigate. Moreover, the use of these icons represents a modern aesthetic because they are part of Google’s latest design language. Furthermore, the decision to mix the neuromorphic style with Material Design 3 icons helps the brand to adopt a distinctive look. Furthermore, it gives a 3D effect, adding depth and tactility. The result is a more engaging and interactive interface that creates a connection with users. In conclusion, QueueHub achieves a distinctive brand identity through good quality and user experience.

Images

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

Navigational patterns

Our application is easy to use for every user because it's navigation is simple and easy to understand. Here you can find a navigational tree that shows how is the screen flow on out app.

Our main navigational patterns are the following

• Navigation bar: It consists of tabs located at the bottom of the screen, allowing users to switch between different sections. Each tab is labeled with an intuitive icon, such as Home, Map, Recommended, and Queue. This design improves navigation by providing easy access to different sections, making it more convenient for users to switch between by only tapping on each icon.

• Scrollable content: Given that users may visit several places over a month or more, we recommend the ability to scroll through a list of suggested places to visit. This scrollable pattern is applied to screens such as Queue, Recommended, Reviews, and Profile (where users can view their recently visited and most visited places). Users simply need to scroll down to load more options, making the search process quick, easy, and efficient.

• Section components: To simplify the presentation of each establishment's details, a global card component was implemented to display a summary of each place. This card component is shown in a list format, allowing users to browse and select the places they need. The cards display key information such as the name, icon, distance, and rating of each location, enabling users to explore multiple options without being overwhelmed by unnecessary details.

Rationale for Navigation Patterns

The navigational patterns in this app are designed to create a seamless and intuitive user experience, especially for those who need to wait in lines. The Navigation Bar, positioned at the bottom of the screen, allows users to easily switch between key sections. This design enables any user to navigate between screens with just a single tap, reducing effort and increasing navigation speed.

The implementation of Scrollable Content recognizes the dynamic nature of user interactions. As users often visit multiple places over time, scrollable content provides a continuous browsing experience without the need to press buttons for more content, avoiding pagination that can complicate user interactions with additional taps. QueueHub promotes the easy and efficient search for establishments by allowing users to scroll through different points of interest. This intuitive approach enhances user satisfaction while using the app.

The use of Section Components further enhances the interface by presenting key information in a clear and concise format. A global card component summarizes each establishment's details into easily digestible cards. This ensures that users can explore multiple options without cognitive overload, making decision-making faster and more efficient. With this approach, we ensure an easy way to review potential establishment options, facilitating quicker decision-making by providing a quick overview of utility and a brief description of each place. In this way, QueueHub implements these navigation patterns to streamline the user journey, balancing functionality and simplicity, allowing for efficient and intuitive interactions with the app’s core features

UI prototype

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