0% found this document useful (0 votes)
7 views18 pages

GoVendit App UI/UX Update Brief

Uploaded by

Rabia Shaikh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views18 pages

GoVendit App UI/UX Update Brief

Uploaded by

Rabia Shaikh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd

Developer Brief

Changes in Previous Version


Old

Initial Screen
New Changes:
● Theme/colour of background and button changed
● Change the name of button to ‘Get Started’
● Logo changed(get new logo of ‘GoVendit from iqra)
● Size of video changed, but this should be dynamic and adjusted as per the size of video
uploaded on our online portal
● Adjust the screen to new tablet size New
○ Outer Body: 10.3” x 6.3” x 0.4”
○ Inner Body: 8.5”x4.375”
● Footer added below (Use the following ones instead)
○ Info@[Link]
○ [Link]
○ 03444972992

Old Changes entered in sheet:


● Fix Logo on first page
Old

Product Page
New Changes:
● Theme/colour of background and ‘Product’ changed
● Logo changed(get new logo from iqra)
● Adjust the screen to new tablet size
● Footer added below New

Old Changes entered in sheet:


● Fix colour of product names(change to black)
● Change background of product page to white.
● Fix it in full page, currently there's empty space left at the
bottom
Old

Payment Page
New Changes:
● Theme of ‘Pay’ and ‘Using’ changed
● Keypad Text and buttons changed
● Adjust the screen to new tablet size
● Footer added below

Old Changes entered in sheet: New


● White part and pink part should be half half(50% ratio). Currently Qr Part is bigger.
Also fix the whole page in full page, currentlyu there is empty space left at the
bottom
● Background of qr should be same, either white or grey. Also, reduce the size of QR
similar to the design on the right
● If customer enters his easypaisa mobile account number, a red line below keypad
should show saying "Please approve payment on the easypaisa app on your phone"
New

Payment Page
New Changes:
● Show the disclaimer if anyone enters an incomplete number
● If someone clicks next on keypad after entering their number,
the reload image needs to show up in place of qr and text of
‘Please approve payment on approvals section on your New

easypaisa app" needs to show up below the keypad above the


timer of 60 seconds.
● And once pressed, the next button should not be able to be
pressed again for a while
Old

Payment Confirmation
New Changes:
● Theme/Colour changed of ‘Product’
● Change the pack to the new icon
● Adjust the screen to new tablet size
● New
Add footer

Old Changes entered in sheet:


● Animation should keep on repeating. It stops after 1st drop
Transaction Failed
Add this transaction page, which will
show up if transaction fails for any
reason.

Add footer in this page as well


Employee Version
Initial Screen
Changes from the previous version
● Everything same, just the button of
‘Employee’ is to be added
● If the customer selects ‘Guest’ then the old
version will continue
● If the customer selects ‘Employee’ then this
new employee version will continue
● Footer is to be added in all pages of this
version as well.
Product Page
Changes from the previous version
● Product page would be the same
Product Page
Changes from the previous version
● Once the customer chooses product, he has
to enter his mobile number. Then the system
will check the customer’s data from our portal
whether he has any balance left from his
monthly balance. If there is any balance, it
will proceed to next stage and dispense, if
not it’ll show transaction failed page.
Product Page
Changes from the previous version
● Rest of the page will be the same, just the
text on top is different, also it’ll show the
remaining balance of the employee for that
month e.g 4.
● Snapshot of balance shown in our portal
Product Page
Changes from the previous version
● This page will be exact same as the one
added in previous version. Just that the
reason will change accordingly.
New Additions(Currently in Design)
How to use Tab
Will just be a normal page with content, images and design showing how to use
the machine.

Ref: [Link]
Side Bar
A side bar also has to be added in all
pages with following buttons/tab names:

Logo on top

1. Home(Taking to initial tab wherever


you are)
2. How to use?
3. Contact us
How to Use Icon
1. There will be an icon as well for How
to use, which will display in all pages.
2. Clicking it will take it to the how to use
page tab.

You might also like