Application Design I - Final Project / Completed Mobile Application Design Prototype (High-Fi)
15.7.2024 - 5.8.2024 (Week 13 - Week 15)
Chong Hui Yi / 0363195
Chong Hui Yi / 0363195
Application Design I / BDCM
Final Project / Completed Mobile Application Design Prototype
(High-Fi)
Week 14:
Usability Heuristic, Design elements & principle UI design
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1vqYK31ZyWtsWEfmNzRwtmwszm9CcTWTq/preview"
width="640" height="480" allow="autoplay"></iframe>
Final Project: High Fidelity App Design Prototype
Requirement
"Students will synthesize the knowledge gained in task 1, 2 and 3 for
application in task 4. Students will create integrate visual asset and
refine the prototype into a complete working and functional product
experience for a selected task."
Progression
All the frameworks were already completed in Project 3. Now, I just need
to add images, text, and theme colours to the lo-fi prototype. When I
inserted the images, I realised that the text became unreadable (Fig.
1.0 left image). So, I added a gradient from black to transparent from
the bottom and changed the text to white, which made it look much
better.
Fig. 1.0 Make the text on the images in the homepage clearer
I found and downloaded the movie posters from the GSC website because it
is easier to see basic information about the films there compared to the
MBO website. Additionally, I changed the "Recommended" movies on the
homepage from double rows to a single row, making the layout cleaner.
The images in the Promotions section are screenshots I took from the MBO
Cinemas app on my phone.
Fig. 1.1 Insert movie poster and text
I realised that the original Past Purchases page looked a bit empty,
so I added an illustration (Fig. 1.2).
Fig. 1.2 Add illustration
In Figma, I actually created many connecting animations between the
pages, which I found a bit confusing myself (Fig. 1.3). I might have
spent too much time on some pages that won't appear in the scenario,
but since I already made them, I recorded a short video to show them
(Fig. 1.2).
Fig. 1.2 High fidelity prototype (some are not included in the
scenario)
Fig. 1.3 Figma prototype links
Final High Fidelity Prototype
Fig. 2.0 Figma High Fidelity Prototype
Figma High Fidelity Prototype Link:
Fig. 2.1 Figma High Fidelity Prototype - Mobile Version
Figma High Fidelity Prototype Link (Mobile Version):
Fig. 2.2 High Fidelity Prototype Walkthrough Video
FEEDBACK
-
REFLECTION
I think the final project was easier than Project 3 because I already
had the framework. I just needed to add colors, text, and images. When I
added the images, I felt like I gave the prototype a soul. Suddenly, the
previous black-and-white version seemed dull. This made me feel very
accomplished. The only tricky part was finding images and movies, but
overall, it was fun.
I discovered that there are websites where you can download
illustrations for free and change their colors. This is very convenient
and attractive, but sometimes it was hard to find the exact images I
wanted. I spent a lot of time searching for images. Besides that, I
think my time management was an issue, and I couldn't finish on time. I
need to improve in this area.
Overall, the final project was very interesting. I enjoyed the design
process and felt a sense of accomplishment when it was done. However, I
know there is still room for improvement.
Comments
Post a Comment