Product adding Flow Design : Grocery App

🛒 Background

A company chooses to delivers daily grocery necessities to people, right at their doorsteps. The objective is to allow users to shop hassle free from comfort of their home without wasting any valuable time.

💡 Solution

Design an app that lets users place order from a company, which have product list page of upto 50 products, from where user can browse and add desired products and quantities to their cart.

👨🏻‍💼 Core Users

Students, Working professionals ( Male & Female ) - Age Group 25 + 

👉🏻 Business needs

Pack Size : Each product is available in multiple pack sizes and the retail shop can choose which ones to order based on what sells best at their shop.

Different types of stock :  For ease of business, the whole sale company keeps separate inventory for Regular Orders and Bulk Orders. An order qualifies as bulk order only when minimum 100 units are ordered. Until then it is treated as a regular order and regular rates are applied to it.

Clearance stock : Regular inventory that is close to expiry, gets marked as Clearance stock and is placed on heavy discount. Also, we show the expiry date to the customer when an item is on clearance sale.

✍🏻 Wireframes

Sketched the wireframe on Paper, finalise the design and did the UI design on figma.

🧐 User needs & expectation from User Research

● Users want to see the Expiry date of Products as it help them to choose the best.

● Pack sizes for product with different quantity and rates

● If users want, they can discard all the items in the cart using one tap action.

● User can purchased at low price when ordering in bulk.

● Users can have different section for various categories of items.

🖌 UI Design

colour Scheme

Contrast Ratio

Components

Figma components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. 

🚀  Business Impact 

● To retain the users for the app w.r.t buying of products either in bulk quantities or regular orders which would led to increase in order value. 

● To make sure the same set of users return and order again from the app.