UI/UX Case Study : Designing a desktop UI/Transaction Page Website for Flow Self-Pickup & Online Delivery

Image from Unsplash

Sayurku is one of the vegetable outlets with business development in the form of: The most complete sales of vegetables and fruits in Jabodetabek. Sayurku has several offline outlets spread over the Greater Jakarta area. Currently, if the customer wants to make a purchase offline can only be done via WhatsApp and it takes hours to do order until the goods arrive.

The owner of Sayurku was inspired by several e-commerce companies abroad to improve its business efficiently where it not only has an offline store but also want to have an efficient booking website.

This idea emerged during the COVID-19 Pandemic, when outlets had to limit capacity the number of customers who shop for the sake of carrying out health protocols and in an effort to break the chain of transmission. To solve the problem the Business Owner wants provides a feature for customers to be able to self-pickup orders at outlets.

Customers simply make transactions online without having to queue up at the outlet, So that customers only need to come to the outlet to pick up orders that have been prepared by the outlet only by showing the pickup code.

Market

Customer Sayurku especially in the Greater Jakarta area

My Role

Create a desktop UI/transaction page website design for Flow Self-Pickup & Online Delivery with Virtual Account and E-money payment methods (will be checked automatically).

The Process

Design Sprint is a development activity product made in a short time.

1. Mapping

At this stage, I process the briefing from the client, brainstorm and build empathy.

2. Define Stage

At this stage I am looking for the best ideas to find solutions for user and business goals. At this stage I am using Figma.

I empathize and feel consumer complaints as well as the owner. To be able to see more clearly the following related links.

At this stage I collect any opportunities that might be a solution to client and customer problems. To be able to see more clearly the following related links.

3. Ideate Stage

At this stage I try to create a concept design that is the answer to the problem. To be able to see more clearly the following related links.

At this stage I separate specifically the part that we will work on. To be able to see more clearly the following related links.

At this stage I rank which ideas will be executed immediately. To be able to see more clearly the following related links.

5. Crazy 8's

At this stage I make an approximate sketch of the appearance of the website & application that will be made. To be able to see more clearly the following related links.

Visuals and Design System

1. Chart

In this process I identify the user to visually complete the task/goal. To be able to see more clearly the following related links.

2. WireFrame

The next process is that I try to make a trial layout, at this stage I try to make it as close as possible to the appearance of the finished result. So that the client can provide feedback. To be able to see more clearly the following related links.

3. User Interface Style Guide

Sayurku Brand Logo

The typography uses the Anybody font, the font is bold and pointed on each side.

Colours

4. User Interface

Website Version

Figma

Application Version

Mock Up

Conclusion

During the Design Sprint project process, I gained different experiences and thoughts about Sayurku. During the process brilliant ideas emerged. I am well aware that due to time constraints and lack of skills, it is necessary to study more. I hope this project can be the beginning of our other projects that can answer and help the community.