Adinda Cahaya

Shopter: Crafting quick commerce using design system

Case study / visual design, user experience

Share

Quick-commerce app

In this project, we created a quick-commerce app with Tiny Design System. Shopter is a 15-minute delivery app that provides groceries and house supplies. We used the existing design system to learn every component of the design system and how to use it in an app.

How might we design a quick commerce app that is easy to use?How can we implement a design system?

Role: UX Designer, UI Designer

Sector: Quick-commerce

Time: 2 Weeks

Project Category: Case Study at Purwadhika

Team: Ridho Alamsyah, Hafinda Windianti

Research on Quick Commerce

Faster Delivery: Q-commerce's goal is to provide faster delivery. Because they want to be quick, apps must be simple and not overloaded.
Shop Anytime: Customers can shop whenever and wherever they want by simply tapping their smartphones. This means that the app must be suitable for use at any time of day or night.
Reliability: Customers can be confident in the delivery and quality because these are reputable brands. As a result, the app features do not necessitate features from other e-commerce, such as a rating. The description or detail products in the app must be concise, simple and clear.
Lower Pricing: The q-commerce brands frequently buy in bulk, which lowers the average cost of each product and allows them to offer attractive discounts. It implies that the product discount is important to highlight, but so is the product expiration date, because it is stored in the warehouse and the users cannot see it.
‘One stop shop’: Quick commerce companies create their own apps that allow users to order multiple products from a single platform. The app's category arrangement is a crucial factor in getting users to buy multiple products.

User Flow

We defined the user flows for shopping in the app based on competitive analysis and research on q-commerce. The key consideration here was whether the app asked for the user's location at the start of the app or while checking out the product. We chose the first option when the app asked for our location because each warehouse has different products and stocks.

Wireframe of Shopter

At this stage, we looked into the possibility of a user's experience while using the app. We considered focusing the search bar, promotional banner, category, and promotion products on the home page. We only had these four items to help users decide which product to purchase. Also, look into the other category.

Wireframe of Shopter

At this stage, we looked into the possibility of a user's experience while using the app. We considered focusing the search bar, promotional banner, category, and promotion products on the home page. We only had these four items to help users decide which product to purchase. Also, look into the other category.

Design of Shopter
The components were then implemented into our designs. In this section, I demonstrate how the designs are made and what components are used.

Shopter: Crafting quick commerce using design system

Case study / visual design, user experience

Share

Quick-commerce app

In this project, we created a quick-commerce app with Tiny Design System. Shopter is a 15-minute delivery app that provides groceries and house supplies. We used the existing design system to learn every component of the design system and how to use it in an app.

How might we design a quick commerce app that is easy to use?How can we implement a design system?

Role: UX Designer, UI Designer

Sector: Quick-commerce

Time: 2 Weeks

Project Category: Case Study at Purwadhika

Team: Ridho Alamsyah, Hafinda Windianti

Research on Quick Commerce

Faster Delivery: Q-commerce's goal is to provide faster delivery. Because they want to be quick, apps must be simple and not overloaded.
Shop Anytime: Customers can shop whenever and wherever they want by simply tapping their smartphones. This means that the app must be suitable for use at any time of day or night.
Reliability: Customers can be confident in the delivery and quality because these are reputable brands. As a result, the app features do not necessitate features from other e-commerce, such as a rating. The description or detail products in the app must be concise, simple and clear.
Lower Pricing: The q-commerce brands frequently buy in bulk, which lowers the average cost of each product and allows them to offer attractive discounts. It implies that the product discount is important to highlight, but so is the product expiration date, because it is stored in the warehouse and the users cannot see it.
‘One stop shop’: Quick commerce companies create their own apps that allow users to order multiple products from a single platform. The app's category arrangement is a crucial factor in getting users to buy multiple products.

User Flow

We defined the user flows for shopping in the app based on competitive analysis and research on q-commerce. The key consideration here was whether the app asked for the user's location at the start of the app or while checking out the product. We chose the first option when the app asked for our location because each warehouse has different products and stocks.

Wireframe of Shopter

At this stage, we looked into the possibility of a user's experience while using the app. We considered focusing the search bar, promotional banner, category, and promotion products on the home page. We only had these four items to help users decide which product to purchase. Also, look into the other category.

Wireframe of Shopter

At this stage, we looked into the possibility of a user's experience while using the app. We considered focusing the search bar, promotional banner, category, and promotion products on the home page. We only had these four items to help users decide which product to purchase. Also, look into the other category.

Design of Shopter
The components were then implemented into our designs. In this section, I demonstrate how the designs are made and what components are used.

Back