Application Design 1: Project 2-Hi-Fi Prototype

 01/09/2022 - 11/12/2022 / Week 1 - Week 14

Darren Liga / 0351480
Application Design 1: Project 2-Hi-Fi Prototype

---

INSTRUCTIONS

For this project's final part, I started by inserting colors from the ready-made Low-Fi design by sourcing out to my UI Documentation I made in the earlier stage of this module.

Fig 1.1: UI Documentation

Here's my UI Documentation in Adobe XD:

https://xd.adobe.com/view/366228c0-619a-480f-9a9d-b4c9375bf06f-6331/

I then made more pages for the final part of this project compared to the Low-Fi Prototype. which was 28 Pages in total.

Fig 2.1: High-Fidelity Prototype

I created more pages and understood the application after playing around in Figma compared to when making the Low-Fi prototype. I understood the Figma community better and how things work.

Fig 2.2: Prototyping

I then continued with prototyping to make the design interactive.

I worked backward with this part of the project. I made the login page last. I felt like something from this app was missing; I then realized that the app does not have a login page and an interactive "forgot password" page.

Fig 2.3: Login Page

To add finishing touches to this prototype, I added apple's FaceID animation from another Figma user to have advanced animations in this prototype.

Fig 2.4: FaceID animation

Final Figma High-Fidelity Prototype: