Merkatin - Point of Sales App for Mall Tenant

Project Summary

Client

Prefer to not mentioned

Role and Responsibility

In this project, I contribute as a Freelance Product Designer. I get in charge of:
- Doing competition research
- Creating detailed and ready-to-code mobile app design
- Define the style guide and contents

Goals and Objectives

Creating a Point of Sales app design for Mall Tenants that takes minimum efforts to develop meanwhile aiming for the maximum user experiences.

Gathering the Requirements

To starting out the projects, I gather the information and requirement needed to set expectation between me and the client.

Target Audience

Shop owner of the shop tenant in malls

Deliverables

• High-fidelity design for shop owner app
• Assets (including icons and illustrations)
• Microcopy for the UI

Scope of Works‍

Defining the scope of works is very essentials, it helps us as a designer to works more focus and set boundaries at early stage so we have the same understanding of how we determine the end states of the projects.

Because the client didn't have a clear brief than "Point of Sales App for Mall Tenants", I guided them to describe what they want using User Stories.

Account
• As cashier, i want to login with google account so i can start using the app
• As cashier, i want to able to log out from the app
• As cashier, I want to update shop information
• As cashier, I can see the intro page

Inventory Management
• As cashier, i want to add products so people can buy it (product variant + stock)
• As cashier, i want to add product variant so i can manage product easily
• As cashier, i want to edit a product information when need
• As cashier, I want to manage Category Product

Point of Sales (Transaction)
• As cashier, i want to see point of sale page
• As cashier, I can add to cart a product seamlessly
• As cashier, I can see the cart page
• As cashier, i want to see point of sale page
• As cashier, I can add to cart a product seamlessly
• As cashier, I can proceed the cart to checkout
• As cashier, i want to see point of sale page
• As cashier, I can add to cart a product seamlessly
• As cashier, I can pick payment method (cash, payment gateway)
• As cashier, I can print the struck

And many more

Design Process

Defining the Brand Styles

First I rebrand to simplify the brand logo to show modern looks and feels.

For the icons, I use Feather Icons as my Icon library considering they already have a coded icon library so it will enhance the development process.

For the illustration in empty states, I used Story Set library by Freepik.

Benchmarking

To help me understand the competition and current existing system, I analyze several competitors and landscapes.

Point of Sales

To get a better understanding of the Point of Sales app existing system, I take a look one of the main competitor Qasir. From this, I take it further for simplicity considering the requirement is not complex as Qasir.

Ordering Flow

I recognized several gap between Qasir and my design vision, so I did a bit research on order flow of two most familiar food ordering app, Go-Food and Grab Food.

Exploration

In my process, I run through several iteration of design exploration for my screens. The goal is to explore multiple solution before deciding which one suit the best.

Hi-fi Design and Prototype

‍

Summary

After my design process, I handed over design specs to the devs teams. While they implementing the code, I will be their to fulfill their needs. One of the the requirement of this project is to create a ready-to-dev app design, which take me to think twice when designing the component.

Maintaining the effort to implement while optimize the experience for the users.