Lo-fi App Design Prototype

on

Lo-fi App Design Prototype

Introduction

The assignment requires to create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software's. Students are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test. Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.

I started with my mood board. For colour theme, i chooses something that looks fresh and vivid, thats make users feel interesting when they open with the apps. The typeface following to the previous application type font. For application design, stay as minimalist, clean and tidy so users would know where is the function and information are.



Next, i started create low fidelity prototype of the app with figma. 


I stared with my lo-fi wireframe, after consultation, sir had commented need more navigation and the colour theme need to stay as monochrome for lo-fi, so i follow the instruction and continue my progress.


Following the consultation and feedback from sir and others, i had created lo-fi wireframe, i make all of the necessary changes and maintain some from the original apps.

Here is the link to know the explanation of what did i changed and which had maintain from the apps:


Here is the user scenario:

First Scenario


Click on next to the sign up page. Agree the term n condition, Sign up with Apple ID, go to home button, select the “uncle gelato & desserts” restaurant to order one lemon juice, after placing order, Choose “Pick Up” and click on promotion and use the promotion “BAIFOOD10” .after confirmed the order, check on where is the restaurant and press “Waze” and click back to application and message the restaurant, press cancel button and back to the page.

Second Scenario


Click next to the sign up button, agree the tnc, sign up with WeChat id to log in and go to the home page, select the "uncle gelato & desserts" restaurant and add one “lemon “ into your cart. after order, view cart, and place order, while payment process click back button and press "pay now" only confirmed the payment. go to my profile  press the "customer service support" ,back to the activity of driver and restaurant, check on the “contact driver” to check your message.

Third Scenario


 Use phone number to sign up, after getting code, enter to "mart" page. Find "home services" or "LF services on the page to add on one "1 cleaner cleaning service" into your cart. After order, choose the delivery time to "now".After all of the step above, check out your order and check the activity of driver, text them to know where are them. After completed the order, go to "order" page to send your receipt.


The Feedback from User Scenario:

First User Scenario
- The sign up page are confusing and complexity. Overall are fine.

Second User Scenario
-The interface design are tidy and clean.

Third User Scenario
-The navigation could add on words below the icon, so that user could know what is the icon of.

Here is the link to figma:


Here is the link to prototype:

Comments

Post a Comment