Task 4: High Fidelity App Design Prototype

08/07/2024 - 05/08/2024 / Week 12 - Week 15
Reema Arif Hamza / 0362792
Application Design I/ Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 4: High Fidelity App Design Prototype

Content

Week 12: Consultation
Week 13: Consultation
Week 14: Consultation

Instructions

Task 4: High Fidelity App Design Prototype

Students will create integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task. Creating a high fidelity prototype of their app design.

Process

For the high-fidelity prototype we had to refine our low-fidelity prototype, add color, and images. Because I already had my UI Kit to work off of, I just created some additional components in color and updated everything accordingly. Figure 1.1 shows the updated UI Kit


Fig. 1.1 Updated UI Kit, Week 15 (05/08/2024)

Based on previous feedback from the usability testing, people mentioned increasing the readability of the bottom navigation bar. I increased the height of the bar to make it more noticeable. Then I changed the hover/down effect to be a rainbow. The rainbow ties into the brand's visual identity, and adds a fun element to the UI. A user also mentioned that the original app should me more colorful so I tried to include their feedback in the design.


Fig. 1.2 Navigation Bar Rainbow, Week 15 (05/08/2024)

I then included the side menu panel into the prototype design and linked it to the different pages. I also updated all my typography and components to match the color scheme. 

Fig. 1.3 Menu and Home Page, Week 15 (05/08/2024)

The last element I needed to add was images and paint colors. I used the official Dulux Paint Photos and used random colors for the paint colors. Once I added in the images the app really began to look a lot more real.

Fig. 1.4 Home, Color, and Visualizer Page, Week 15 (05/08/2024)

I made some last minute refinements and finally completed the high fidelity prototype. If I had some additional time I wanted to add the wish list page and some more interactions. Unfortunately due to some time constraints I wasn't able to do so. However, the app's UI Design looks great and reflects the brand's identity while maintaining a consistent UI. 

Final High Fidelity Prototype

Link to Figma File: Click Here

Fig. 1.5 Walkthrough Video, Week 15 (05/08/2024)

Feedback

Week 12: You just need to create the frames for 3 user scenarios.
Week 13: Include a log in/ forgot your password scenario.

Reflection

Experience
The High Fidelity Prototype came together a lot quicker than I expected. Thanks to having a good foundation to build my design on I was able to go forward with minimal changes. If there was some more time I would have liked to get a usability testing done to receive some additional feedback. 

Observation
I found that using components really helped speed up my workflow and keep things consistent. But I had to be careful, because there were some instances I forgot to detach. When I went to change it in the UI Kit, it changed the icon in multiple other places I didn't want it to. So lesson learned use components wisely. 

Finding
I was surprised that as soon as I added colors and images the app began to look like a real life app. I think once you understand Figma better you can have a better workflow and make smarter decisions as you do your work. Unfortunately, I did not have enough experience to do that so it took a lot longer than I anticipated. 

Further Reading

I referred to the slides given in class. I also looked at Figma tips on Youtube to learn how to use Figma more efficiently.
 

Comments

Post a Comment