Lawazm eCommerce App: UX Design of the Homepage

mobile-app

Lawazm (developed by TatbiqIT) is a Kuwaiti marketplace specializing in products for newborns and children, as well as household goods. This company aimed to establish a reputable electronic platform in Kuwait and the Middle East for housewares products, and infant, and children's needs. So our collaboration began here. The design phase is always the first challenge for software developers. What the client told us about the business must be visualized in the cleanest way possible in a mobile fr

Savy (Chief Editor)

Dec 8, 2022 • 5 min read

تطبيق لوازم للتجارة الإلكترونية ، من تطوير شركة TatbiqIT

The design phase is always the first challenge for software developers. What the client told us about the business must be visualized in the cleanest way possible in a mobile frame. However, it is not just what the client wants; the combination of the customer's requests and the UI/UX design standard makes this process more difficult.

In this article, we will illustrate a piece of our design experience with the Lawazm project.

Design Concept

First and foremost, the design concept and theme must reflect the industry in which the client serves. Imagining yourself as the end user of the app. The first step is to make sure the design reflects the client's industry. Imagine being a user. The app's splash screen must convey a corporate atmosphere.

Simply put, the application's overall theme should convey the nature of the business.

The splash screen and no connection page

If the software doesn't support guest accounts, the user will be redirected to the registration/login screen. If that's not the case, they'll be taken to the homepage.

Starting at the top, the homepage's app bar displays the user's current location. It may also include elements such as a search button, a profile button, or a sidebar. However, what users notice is the banner. It can display the most recent business news, new items, promotions, or even business campaigns.

When a company deals in housewares, it tends to sell a wide range of items. Thus, in order to deal with this issue, it is advisable to place the business's categories on the homepage in order to guide the user to the desired category.

Landing Page

The user's initial view upon launching the app is the homepage's top area. In order to best introduce the business's activities and demonstrate that it is thriving and active, we placed a banner relating to recent stories and categories at the very top of the application.

Carousel

The user can navigate the carousel displaying featured and best-selling products with only a little scrolling. We prioritized the featured products carousel because we believe that the most important products for this company should be displayed first. Then it can be the newest or best-selling products.

Sale items must be shown in a homepage carousel (deal of the day). Sales items usually speed up the shopping process. A time limit on sales, on the other hand, is preferred because it influences consumers' purchase decisions.

Also, the "deal of the day" title is meant to convey a sense of urgency, as the sales are only good for that day.

Thus, UX design is not only related to the software's aesthetics, but also to the combination of the application's theme with the placement of components, their order, and even titles. However, this combination must be UI-friendly.

Product Card

Some details on the product cards are crucial for app users to make an informed purchase. What's most important to the customer when making a physical purchase? After answering, design the product card.

Image
Product name
Short description
Price

Here's the minimum information of a product you'll need to provide on the product card.

One note on price: Pricing influences buyers' decisions. It's better to report to the customer about all price changes. Especially for a product card, it is essential to mention the product's discount. Crossing the old price and writing the lower price in a different color is a common UI design technique (preferably primary color). Tell the customer how much money they can save by buying this product.

Add to cart

When a customer taps the basket button on a product card, a bottom dialogue allows them to add the product. To shorten the process of purchasing a product, add the product's attributes in the bottom dialogue.

Be informed that variations that are out of stock must be in a disabled style and cannot be selected by the customer.

When a customer adds a product to the cart, an announcement must be made. Snackbars or bottom dialogue can show this. Also, the "View cart" button may lead some customers to the shopping flow.

Additionally, using Flutter throughout the development of these designed frames improves the application's overall performance.

These are some important considerations while designing the homepage of an e-commerce program. In the following blogs, we will examine several more homepages that we have created, as well as other components of an e-commerce application.

Also, you can take a look at our client's testimony on the partnership with Tatbiqit.

If you are interested in the world of eCommerce businesses just feel free to click here. Our colleagues will contact you and help you through this journey.