0% found this document useful (0 votes)
56 views

Mobile App Design Requirement Report v2

1. The document outlines the design and features of pages for a grocery delivery app, including the logo page, signup page, login page, home page, category pages, product details page, cart page, and account/preferences page. 2. Key elements across pages include a centered logo, header navigation, location selection, product images and details, add to cart button, cart indicator, and address saving in account. 3. Interactions include tapping category slides to redirect to related pages, adding products to cart from product pages, and opening the cart from the cart indicator in header.

Uploaded by

Gopi Naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
56 views

Mobile App Design Requirement Report v2

1. The document outlines the design and features of pages for a grocery delivery app, including the logo page, signup page, login page, home page, category pages, product details page, cart page, and account/preferences page. 2. Key elements across pages include a centered logo, header navigation, location selection, product images and details, add to cart button, cart indicator, and address saving in account. 3. Interactions include tapping category slides to redirect to related pages, adding products to cart from product pages, and opening the cart from the cart indicator in header.

Uploaded by

Gopi Naveen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Logo Float down Entry animation

Logo Center alignment


No sound animation
SIGNUP PAGE LOGIN PAGE

• No scrolling
• Fit to screen
LOGO HERE LOGO HERE • Lite grey color text
indications before
entering data
WELCOME WELCOME (mobile number,
name)
Inbuilt
locations list Choose location
Open list
>

only button
Mobile number
Enter your nick name
Enter OTP
Mobile number
Customer details for
Registration/database
LOGIN LOGIN On click opens Home page

Enter OTP
New? Signup here
On click opens signup page
City/town name
should appear
here Templet/poster
Product
Red dot pending
indication for Folder/button
notifications
Header LOGO location button and
navigation basket button
• Logo
Templet slides
• Profile
(on click, redirect
• Location(elect
ed location) to related page
• Notification or link)
button
• Soft edge borders
10%off • Total scroll expect
Deals of the day header and footer
navigation

Left and right


products sliding Product images

Select Category

Products Thumbnail Product name | local name


500g
Monthly combos Fruits
Rs.240 |280
- ADD +
Footer
navigation Meat Grocery
• Home button
• Search tab
• Customer care
• basket
LOGO location

Ready to cook Soft drinks

Exotics snacks

Offers
Templet slides
(on click, redirect
to related page
or link)

Single templet
image for
advertisement
Opening category >

Cancel button
Single templet
image for
advertisement

• No any other option should


• No appear on screen except
header Product images
product detail window
navigati • Multiple product images
on
should
On click, the product detailing Product name | local name
appear
window opens. It includes, 500g
• Product images Rs.240 |280 10%off
• Product names Product description: Product description scrolling
• Quantity . if the content is large
• Prices
• Offer percentage - ADD +
• Product description
• Add button

Floating button with no.of items added on basket and on click,


No. of items in cart Open basket >
opens basket page
Floating button should appear only after adding products to
basket
• Only two address data sections
Header navigation > to be saved
• Using current location option
need to access the mobiles
location and need to fill the Preferences
Your orders
blanks
• If the new address added the Choose the language
Profile Order ID very first address entry to be
Expected time to deliver ENGLISH
deleted automatically
HI Order received
• Selection tab on saved
address(single selection only )
TELUGU

Customer Name
Packed Which products you wish to
Registered mobile number see first (select any 5 main
Dispatched preferences)
• No Address Grocery snacks
Soon to deliver
header Your Information
Add new Address Drinks vegetables
navigate Delivered
-on Your orders Use current location Kitchen Fast food
should Ready to cook Bathroom
Address Receivers Name products
appear Contact Customer care Cleaning
D.no/house number/street Deserts
• No Preferences products

scrolling landmark
• Sharp City/town
edge
Other Information Receiver’s ph.no
borders
save
Share the app
• Customer care button need to Saved address • Selection tab language (single
Customer support
icons divert to customer care page Saved address 1
selection only )
Service Review
About us Saved address 2
• Chat option should be
Header navigation > redirected to personal
WhatsApp chat or else
BOT chat feature
• Call should be redirect to
mobile Dialpad.
• Mail should redirect to
mail compose section
Profile • Multiple responses can
with company email mail
submit
Id.

HI
Customer Name
Share the app Customer support
Registered mobile number
Chat
Service review
Call
Your Information Type your review
Mail here…..
Your orders

Address

Preferences
Rate our service

Other Information Share via


Submit
Share the app
Customer support
Service Review
About us • Mobile suggested App
icons
• Play store app link to be
copied to mobile
clipboard
• App objective
description should be
included
Header navigation >
• Current location
• Only city name should appear
LOGO location here
• If the user is not at company
registered town/city “No
Notifications service here” should appear
here.
Notification 3

Notification 2

Notification 1 Deals of the day Address


Add new Address
Use current location
On click, should
Receivers Name
redirect to
address page D.no/house number/street
Select Category
landmark

Products Thumbnail City/town

Receiver’s ph.no
Monthly combos Fruits save

Saved address
• New Notification should be at top Saved address 1
• All messages from the company should appear here
(refund transactions, delivered order, new products, Meat Grocery
app updates ) Saved address 2
Footer navigation >

LOGO location
Customer support
Search

Top searches Chat

Biscuit snacks Call

Drinks vegetables Mail

Milk Fast food

Tomato

Deals of the day

Select Category

Products Thumbnail

Monthly combos Fruits

• Company operator
decides top searches list
• The tags should linked to
Meat Grocery products and folders.
Footer navigation >

LOGO location
Your Basket
No of items in cart

Total items:
Product name
Quantity Price - 1 +
Total products price 650

Product name GST 10

Quantity Price - 1 + • Minimize and Delivery charges 30


addition buttons Discount price 25
Deals of the day of products Total amount:
Product name quantity
Quantity Price - 2 +
• Zero numbered
quantity item
should be
removed from Rs.665 only
Items you may add the basket list
Select Category
• This section should be
Products Thumbnail at end of the page
after completing the
products scrolling.
Monthly combos Fruits

• Price details button


Total amount: includes total amount,
Meat Grocery View price details
Select address GST, Delivery charges,
discount price.
Basket >

Your Basket
No of items in cart

Product name
Address
Quantity Price - 1 +
Add new Address
Use current location
Product name
Quantity Price - 1 +
Receivers Name • Customer can add new address and can select only one
address option from the saved address for the delivery
D.no/house number/street
Product name
Quantity Price - 2 + landmark
City/town

Receiver’s ph.no

Items you may add save

Saved address
Saved address 1

Saved address 2
• floating payment button should be added in this page at
this step
Proceed to payment
• No footer navigation

Total amount Select address


Basket > Select address >

Address
Add new Address Select payment method
Total amount:
Use current location
Receivers Name Phone pay

D.no/house number/street
Google pay
landmark
City/town Cash on delivery
• Coupons should contain written content/poster
• After selecting the coupon the celebration animation
Receiver’s ph.no should be appear
Net banking
save

Saved address Add coupons


Saved address 1
On
click
Saved address 2 • On click, should redirect to selected payment related
Confirm order
app

Proceed to payment
Basket > Select address > payment > after payment >

LOGO location

Your orders

Your order Order ID


confirmed Expected time to deliver

Customer name Order received

Packed

Dispatched
Estimated time for delivery

Track your order > Soon to deliver

Delivered
• Should redirect to your orders in profile section

Contact Customer care

LOGO

You might also like