version - last updated 23rd july 2020. · my cart buttons. + add quantity - minus quantity delete...
Post on 16-Aug-2020
1 Views
Preview:
TRANSCRIPT
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
top related