delibirdy_case_logo

take your entire shopping experience and put it online

Client Requirements

Map view

Map view shows a user every deli and grocery store in the vicinity

Delivery options

In addition, to ‘Deliver Now’ client wanted ‘Deliver Later’ option

Future payment

The possibility for a customer to pay now and get the delivery later

Live tracking

The user can track the status of his order in real-time on a map

Pin security

The customer must enter the secret pin sent to him to close an order

Single delivery

A customer buying deli from many stores should arrive in a single order

delibirdy_section2_banner2

One Solution,
Three Products

delibirdy_section4_screen1
delibirdy_section4_screen1_responsive

For buyers

Buyers can search for the items they want to buy, add them to cart and get them delivered home. The app assigns a delivery boy to pick the items and ship your order. You can track the boy-how close is he from your home on a map—and expected time he should take to deliver your order.

delibirdy_section4_screen2
delibirdy_section4_screen2_responsive

For deliverers

Delivery boys can check the live order, closed orders, and open orders in the app. The app displays from which store he has to pick the order and where he has to deliver it. He can navigate to his interim and last destination from within the app and call the owner if he gets lost.

delibirdy_section4_screen3

For sellers

The seller part of the app displays which delivery person is assigned to make the delivery and what the deliver contains, giving a heads-up to the seller what items should he keep handy to save both his and the carrier’s time. The seller can check the location of every deliver person with respect to his on a map.

Prototyping

After discussing details with our UI/UX designer, we began working on wireframes. To create a basic UI and wireframes, we studied a lot of similar on-demand apps to learn how to display tracking info and order details in the best way.

Customers’ app user flow

Registered customers need to ‘Sign In’ to start ordering. They can either select a category to start with or type what they are looking for in the search box. Once they have added everything they required in the cart, they can proceed to checkout.

During checkout, they need to enter the delivery address, and have to decide between payment options: ‘Cash on Delivery’ or ‘Credit Card’. They can also track the status of their order in the app.

delibirdy_section9_banner

Deliverers’ app user flow

The delivery crew’s version of the app is like the customer app and to an extent Uber Driver App. The only major difference being that the delivery crew can see a list of orders from different customers. Upon selecting an order, the app shows the person sees the same delivery information that a customer sees in their app. Delivery crews can use an in-app map for navigation.

delibirdy_section10_banner

UX and UI Design

Creating detailed wireframes typically comprises the following steps: Picking color schemes and readable and aesthetically pleasing fonts to create a set of UI elements and putting them in order according to wireframes.

delibirdy_section11_banner

Challenges and wins

Creating a map view that shows every shop nearby

We used Google Place API to show nearby participating stores. We created a virtual parameter around a user’s location to make sure only stores in close vicinity to them are shown in his ‘Map View’.

Integrating Future payment system

Future payments require PayPal and there was no way if could enable PayPal payment in Qatar. QNB customers thanks to a partnership can pay for their shopping online, send and receive money using PayPal.

Making buying items from different shops in app

While the idea is great, it may lead to delay in delivery. But the client was adamant. So we implemented clever UI and database tricks to make a user buy all he needs without switching the store, from a single store.

Technology Stack

database-icon

Database

SQLite, My SQL

networking-icon

Networking

AFNetworking, Volley

crash-tracking-icon

Crash tracking system

Fabric (Crashlytics)

social-icon

Social

Facebook SDK

delibirdy_section12_banner

Result

We needed improved designs, competence, and most of all, innovative forum where one can buy grocery and deli without reservations.

BECOME A USER

delibirdy_section13_banner