Arabica Mobile App Wireframing & Workflow (Front-End for Customers)Version 1.0 - Last Updated 23rd July 2020.

01. New User

Splash Screen

Auto-detect and set Countrybased on Customer’s location.(By tracking the IP)

Auto-detect and set Languagebased on smartphone’s language(If Arabic then the app’s interfacewill be in Arabic; otherwise, English)

02. Login

Sign-In or Sign-Up

Input Fields.Username, Password

Buttons.Login, Signup

Others.Forget PasswordRemember Me

Auto Login.Once the user logged-insuccessfully with remember meoption, every time onward onopening the app user will directedto the dashboard directly, until theylogged out.

SIGN UP

Username

LOGIN

Password

Forgot Password?

Remember Me Checked By-Default

Back to LOGIN

Email Address

03. Register

Sign-Up or Back to Login

Input Fields.Your Name, Mobile No.Email Address

Buttons.Register, Cancel

Others.Accept the Terms & Conditions

Account Verification.Once registeration form issubmitted Mobile No. & Email addressverification is requierd. Only after theverification user’s account will beactivated and they can logged-in.

CANCEL

Your Name

REGISTER

Mobile No.+971

Accept the Terms & Conditions Checked By-Default

Email Verification Required

OTP Verification Required

Add

Password and password confirmation are missing.

04. Welcome

1st Time Login

Dropdown Menus.Select Your CityYour Preferred % Store

Buttons.Continue

Cities.Only those cities will bedisplayed where % Storesdo exists.

Stores List.Once the user select the city,according to that % Storeswill be displayed for userselection.

CONTINUE

Select Your City

Your Preferred % Store

Save settingsLOCALLY on the device

Welcome Ahmed, you arejust one step away to SEE THEWORLD THROUGH COFFEE . . .

Replace dropdown list for stores with a normal scrollable list showing stores within the selected city sorted by distance where the closest to the customer shown on top. The list contains store name, address, operating hours, location icon, and a store phone number to call.

The screen should show only if the user has no previously selected store or the country has changed since last order.

Hot Drinks (15)

05. Dashboard

Buttons.Menu, Search, View CartChange City & Store

Menu Categories.Hot DrinksIced DrinksDrip BasedBottled DrinksGatheringsPastriesTreatsLoafHome BrewingCold Pressed JuicesKids DrinksWater

Categories Selections.Menu categories can maximizeand minimize to display the items.

Mirdif, Dubai Change

EspressoEspresso shot.

AED24.00

AED28.25

Espresso MacchiatoEspresso shot withfoamed milk.

AED22.15

Hot AmericanoEspresso shot with waterFreshly brewed coffee.

Hot Cafe LatteEspresso shot withfresh milk.

AED32.50

Hot Spanish LatteEspresso shot with freshmilk & spanish shot.

AED21.00

Hot Dark LatteEspresso shot with freshmilk & dark valrhonachocolate

AED35.50

Hot Matcha LatteOrganic matcha marbledwith spanish sauce andmilk.

AED25.50

Search

Menu

Choosen City & Store

3 Items - AED 105.00 Your Basket

Hot Drinks (15)

Iced Drinks (05)

Drip Based (02)

Bottled Drinks (10)

Gatherings (15)

& Others

06. Create An Order

Item Details.CategoryItem NameDescriptionPrice

Selections.Radio ButtonsCheck Boxes

Input Box.Enter special instructions

Buttons.+ Add Quantity- Minus QuantityAdd To Cart

Mirdif, Dubai Change

AED30.00

Espresso MacchiatoEspresso shot with foamed milk.

3 Items - AED 105.00

Select Your Choice *

Hot Iced

Extra Options (Optional)

ChocolateAED4.50

Extra MilkAED2.00

Enter special instruction . . .

Total. AED 69.002

ADD TO CART

Item Picture

Description & Price

* Mandatory

Optional

Total Price

07. My Cart

Buttons.+ Add Quantity- Minus QuantityDeleteCheckout

Selection.Check Box

Input Box.Enter Promo Code

Mirdif, Dubai Change

You Have 500 Loyalty Points

AED34.50

Espresso MacchiatoChoice. HotExtra. Chocolate

2

AED21.00

Hot Cafe LatteChoice. HotExtra. Chocolate

1

Sub Total. AED 105.005% VAT. AED 5.00

Points Discount. - AED 25.00Promo Code Discount. - AED 0.00

Total. AED 69.00

CHECKOUT

Redeem Your Loyalty Points500 Points = AED 25.00

Enter Promo Code

Delete Item

Final Due Payment

Loyalty Points

Add

Qua

ntity

Min

us Q

uant

ity

Promo Code

8.1Walk-InDeliveryOptions.Choose delivery methodChoose payment method

Selection.Radio Buttons

Input Box.Amount Change needed.

Buttons.Make PaymentPlace OrderBack to Cart

Mirdif, Dubai Change

PICKUP FROM

Choose Delivery Method

Walk-in to % Store Counter

Car Delivery in Designated Parking Area

MAKE PAYMENT

Choose a Payment Method

Online Payment

Cash on Arrival

Credit on Arrival

BACK TO CART

If Selected

Amount change needed

Cash on Arrival

PLACE ORDER

If Payment Method is ‘Cash on Arrival’ or‘Credit/Debit Card on Arrival’ than ‘Place Order’button will appear instead of ‘Make Payment’.

Please tell us about when you’ll arrive to the store:

o I’m already here.o In about 10 minutes.o In about 20 minutes.o In about 30 minutes.

8.2Walk-In |Pay Online

Options.Choose payment option

Dropdown Menu.Select Credit Card

Input Boxes.Card NumberExp. DateCVV.Name On Card

Check Box.Set as a default payment method

Buttons.+ Add a Credit CardPayBack to Options

ONLINE PAYMENT

Choose Payment Option

PAY

BACK TO OPTIONS

+ Add a Credit Card

Select Credit Card

Card Number

Exp. Date CVV.

Name On Card

Payment Options

Card Details

Default Payment MethodSet as a default payment method

8.3Walk-In |OrderConfirmed

Notification.Order Confirmed

Order Reference No.Dynamic & Auto-Generated

Other Info.Store LocationDelivery MethodOrder Preparation Time

Buttons.I’m Here!Your Order Details

Search

Menu

ORDER CONFIRMED

Order No - Auto Generated

Dear Ahmed, Thank you for the order& your order reference no. is

382701Your Selected % Store Is

Mirdif, Dubai

Pickup MethodWalk-in to % Store Counter

We need 10 Mins. to prepare yourorder, which we will start preparing

only when you press the button below.

I’M HERE!

YOUR ORDER DETAILS

Store Location

Delivery Method

Dynamic Time Variable,Varies Store to Store asper the setting fromAdmin.

Order Confirmation Emailwill go to the customer aswell with complete details.

No “I’m Here” button if “I’m already here” was selected from the previous screen.

8.4Walk-In |OrderConfirmed |I’M HERE!Notification.Start Preparing . . .Order Ready

Buttons.Your Order DetailsOK

START PREPARING . . .

YOUR ORDER DETAILS

Dear Ahmed, We have startpreparing the order . . .

Need App. 10 MinsSee You Soon!

ORDER READY

OK

Dear Ahmed,Your order is ready . . .

Pick-up from our deliverycounter & Enjoy!

See You Soon Again . . .

AnimatedIcon

Time Reminder

Order Details

8.5Walk-In |OrderCompleted |Feedback& Share

Buttons.Feedback 3 FacesFeedback UsShare on Social MediaTake PictureClose

Input Box.Write Anything . . .

THANK YOU

Dear Ahmed, Your feedbackmatters to us . . .

FEEDBACK US

SHARE ON SOCIAL MEDIA

SHARE

SHARE ON SOCIAL MEDIA

Dear Ahmed,Take picture of your order to share . . .

Write anything . . .

9.1CarDeliveryOptions.Choose delivery methodChoose payment method

Selection.Radio Buttons

Dropdown Menu.Select Car Number Plate

Input Box.Amount Change needed.

Buttons.+ Add Car Number PlateMake PaymentPlace OrderBack to Cart

Mirdif, Dubai Change

PICKUP FROM

Choose Delivery Method

Walk-in to % Store Counter

Car Delivery in Designated Parking Area

MAKE PAYMENT

Choose a Payment Method

Online Payment

Cash on Arrival

Credit on Arrival

BACK TO CART

If Selected

Amount change needed

Cash on Arrival

PLACE ORDER

If Payment Method is ‘Cash on Arrival’ or‘Credit/Debit Card on Arrival’ than ‘Place Order’button will appear instead of ‘Make Payment’.

Select Car Number Plate

+ Add Car Number Plate(s)

Tracking Method

I’m Here! GPS Tracking

SHARE YOURLOCATION

SimilarProcessRefer to

8.3

SimilarProcessRefer to

8.2