INSTRUCTIONS
PROJECT 3 - Lo-Fi App Design Prototype
Once the UX design process was completed, we had to create a low fidelity prototype of the app. We need to arrange all the screen wireframes, actions, visual feedback and link them up in Figma. We were required to perform usability testing by outside people to test out our low fidelity prototype and gather all the information, response, feedback, pain points observed from the test.
Process
In the first prototype, feedback was to space out each section more since it looked cramped on the mobile screen. I reference some existing apps similar to Steam for the size reference.
.png)
.png)
.png)
Resizing and adding navigation to buttons. Since the original Steam app doesn't actually have the chat feature in there (need another app for chat), I reference Instagram and Discord for the chat layout.
.png)
.png)
Comparison to the first prototype after getting the feedback.
|
| Home Page Before |
|
| Home Page After |
|
| Chat Page Before and After |
Creating components and adding animation to the transition when moving from one page to another. Also creating more pages and references to existing ones to improve them.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
|
| The Reference Corner |
|
| Final look at the prototype |
Figma Link:
View Prototype:
User Testing:
https://drive.google.com/drive/folders/1ArMJYVAabGK0mn2pq_MOwgt-hrCyQglC?usp=drive_link