UI/UX Design Tips: Chayyel App Homepage

UI/UX tips for designing homepage

Here's another post on some of the UI/UX techniques and tricks we employed in our designs. In this article, we'll go over one of our most challenging projects, Chayyel.

Such posts have already been published for our other projects, such as Lawazm.

Theme

First and foremost, we always discuss the software's UI Concept.

The photographs on this blog suggest that the application's focus is on gaming products, and since the vast majority of those games, whether they be for the PlayStation or a PC, are played in a dark mode, the app's design should reflect that.

Primary and Secondary Colors

We went with a neon primary color and 3d vectors for the app since the logo is neon and three-dimensional. Note that designing with neon blue requires a different user interface strategy than designing with plain blue as you see in the below image.

difference of the neon and plain color — difference between the neon and plain color

For example, if a UI designer is creating an application for soccer or tennis, the application must include a green color to represent the green field. The best example is the Wimbledon application.

Carlos Alcaraz the champion of Wimbledon 2023

It is also preferable to use the secondary color from the logo, which in this case is orange.

All of these acts are performed to promote our application's brand, and the most essential element is the brand colors.

UX Tips

If you are in a store looking at some of its products and have a question, the shopkeeper will answer it. But what about an application? The product cards (together with the product page) are the most significant aspects of an application that accomplishes the same job as the shopkeeper does.

The product card you are designing must include crucial information about that specific product and must influence the customer's purchase decision.

In general, a product card must include

The product image
The product name
Short description
The product price
And more importantly the discounted price (with a timer)

The discount timer always provides the customer with a sense of urgency, which influences their decision.

However, with this application, which is a multi-vendor app, it is preferable to show the consumer the vendor's name and logo, as well as the vendor's rate. By seeing that vendor's rate, the client can determine whether other customers suggest this vendor's products or not, which makes the act of purchasing safer.

When the product variety in this application is extensive, the product category can be displayed on a label. However, keep in mind that this label must appear on the product cards on the main page, not the category page.

In some applications, you may put a shortcut button for adding the product into the basket, which would make the buying process easier and faster for the customer. But you may wonder why we didn’t do that?! That’s because of the application’s business field.

When an application sells a product with a variety of significant specifications, it is critical to reveal all of the features and variations to the user before proceeding with the add-to-basket flow. Consider PlayStation Plus to be a product that you want to purchase. It is critical to show the new and unique characteristics of this product before leading the user to the next steps in the purchasing process.

You can get some advice on creating shortcut buttons in the below blog post. We have utilized such a feature (the add-to-basket shortcut button) in other applications like Lawazm.

When adding a feature to your design, keep the nature of the business in mind

Design Uniformity

Here's a great design technique for preserving the UI elegance of your design. This banner appears at the top of the landing page, giving the design a gaming feel. The bad news is that this picture is dynamic, and the application's owner can change it to another, which will destroy the application's UI.

changing the banner image to Fortnite game. The UI uniformity of the app is not preserved.

Here is the UI trick

You can add a fading layer to the home page banner. Make the bottom of the banner fade till it touches the homepage's background color. (use linear gradient)