step 2: High-Fidelity Wireframes & App Mockup
My next step was to take my paper prototypes/low-fi wireframes and create high-fidelity versions of them. This process included the creation of the majority of the elements/icons that make up the interface.
Using high-fidelity wireframes help with the representation of the end product that could be used for the testing phase but based on our teacher’s requirement, we were to take this step further and create final mockup versions of our app/mobile interface using Photoshop.
Creating the high-fidelity mockups was the last phase before we entered the testing phase, so at that point, we should’ve created all the elements, icons, graphics and finished with our final touches.
step 3: InvisionApp Testing
After finishing the mockups in Photoshop, it was time to test our interfaces using InvisionApp.com.
Invision is a cloud-based digital product design platform that helps development professionals and businesses of all sizes create and manage prototypes. It allows users to collaborate, test, and experiment with designing templates and ideas on a digital dashboard.
So I uploaded my mockups to Invision and started creating interactivity for them so that my classmates could test my interfaces and make comments accordingly. This process was absolutely crucial for ensuring seamless functionality and performance.
final step: Post Feedback and Finalization
After receiving a great number of feedbacks both positive and negative on my interface, it was time to make adjustments and improve our UI even further before finalizing the project.
For the most part, the adjustment that had to be made were minor which is a good sign and with that, I started to make the last edit and finalize the project for submission.