Wee Jun Jie / 0375271
Application Design I
/ Bachelor of Design (Hons) in Creative Media
Final Project: High-Fi Prototype
LECTURE RECAP
To enhance comprehension of the course material, I have crafted a
set of flashcards featuring couple of questions designed to
facilitate learning. You are warmly invited to explore these resources.
To ensure a seamless experience and avoid potential
performance issues with the blog website, I have uploaded the
original file to my Notion Notes Web. You may access it via
the link provided above. Thank you for your
understanding.
INSTRUCTIONS
-
For this final project, we are tasked with creating a high-fidelity prototype for our mobile application. This prototype will showcase the final visual design, interactions, and functionality, providing a realistic representation of the app. It will allow users to experience and offer feedback on the final design, featuring a polished user interface that aligns with the branding and usability principles established during the design process.
REQUIREMENTS
1. Visual Design:
Execute the finalized visual design concept
previously created, incorporating color schemes,
typography, icons, and other visual elements that
define the application's overall look and feel.
Ensure consistency and attention to detail across
all screens.
2. Interactions and Transitions:
Bring your application to life by adding
interactive elements and smooth transitions
between screens. Utilize suitable animations and
transitions to improve the user experience and
create a seamless flow throughout the
application.
3. Functionality and Navigation:
Implement the essential functionality and
navigation of your application, ensuring that all
interactive elements work as intended. This
includes buttons, forms, menus, and any other
interactive components unique to your app.
4. Content Integration:
Fill the prototype with realistic content to
showcase how the application will appear and
function with real data. Use representative
content and explore different scenarios to
highlight various features and interactions within
the app.
5.Usability Testing:
Conduct usability testing on your high-fidelity
prototype to validate the design and collect user
feedback. Recruit at least five participants who
represent your target audience, observing their
interactions and responses. Take note of any
usability issues or areas that need
improvement.
To have a better understanding of the transport
line. I go visit the transport line to learn the
design system and jot it down all the important
parts.
Click to view my video on YouTube
Week 15 / UI Kit
Click to view my video on YouTube
Week 15 / UI Kit
1. UI KIts
Fig. 1.0 UI Kit - JPEG, Week 15 (23/12/24)
2. Design Process
Fig. 2.0 Color Research - JPEG, Week 15 (23/12/24)
At the beginning, I thought the original app's color
scheme was too chaotic, so I visited the myRapid
official website to check the colors they used, and it
definitely looked much better. However, the color
scheme wasn't unified, so I started reading some books
on color pairing.
Fig. 2.1 Color Research - JPEG, Week 15 (23/12/24)
There fore, I decided to base the color scheme on
myRapid's brand colors. This not only helps the
public feel more connected to the brand but also
reflects the brand's values. Additionally, it
ensures that the app's design aligns with the
transportation system, making it easier to
recognize.
Fig. 2.2 Color Testing - JPEG, Week 15 (24/12/24)
This step involved a lot of experimentation
to find the most comfortable color
combinations. Besides aligning with the
brand's color palette, we also had to
consider the user's visual experience. I
spent nearly half an hour fine-tuning the
color tones for different pages. To avoid
overloading this page, I won't upload all
the images, but I can tell you it was both a
challenging and rewarding process.
Fig. 2.3 Tutorial Slide - JPEG, Week 15 (25/12/24)
Fig. 2.4 YouTube GIF - JPEG, Week 15 (25/12/24)
After Mr. Zeon mentioned that my app felt a bit
boring, I spent a lot of time thinking about
what my users really need. I even took public
transportation again to get a better
understanding. That's when I came up with this
idea: I want the system to suggest which
compartments are less crowded. This would
provide passengers with valuable feedback.
Week 16 / Interview
Recording Documents (ONLY ACADEMIC PURPOSE)
(Videos has been deleted since interviewer do not allow us posted it on public.)
Final Outcome
Demonstrating Video
The 1:52-1:58 part has some bug while filming the
demonstrating video. You are allowed to test it on my
Figma file.
Physical Testing Video
One of the interviewees can't attend my interview online, so I invited her to navigate my app offline physically. She would like to keep the interview in private, so we just showcase the hand and phone.
APP Redesign Presentation Video
Figma View - Work File
Figma View - Prototype
Fig. 2.6 Improvement After Interview - JPEG, Week 15 (01/1/24)
REFLECTION
Experience
Engaging in application design has been an enlightening journey filled with creativity and learning. The process began with identifying the core problems within existing apps and brainstorming innovative solutions to enhance user experience. From sketching initial wireframes to refining designs based on feedback, each stage brought its own set of challenges and achievements. I found immense joy in sharing ideas and techniques, which not only enriched my work but also helped my friends improve their projects. The mutual exchange of knowledge made the entire experience fulfilling, as I was able to contribute to their success while advancing my own skills.
Observations
Throughout the design process, I observed how subtle changes in layout, color schemes, and user flow could significantly impact the usability of an application. Paying close attention to user feedback, I learned the importance of empathy in design understanding the needs and frustrations of users is crucial to creating a functional and appealing app. I also noticed how different elements, such as typography and spacing, play a vital role in the overall aesthetic and readability. These observations helped me develop a keen eye for detail, allowing me to make informed decisions that enhanced the user experience.
Findings
Reflecting on my journey, I discovered that application design is not just about creating visually appealing interfaces, but also about solving real problems and improving user interactions. The process of iterating on designs based on constructive criticism taught me resilience and adaptability. Additionally, helping my friends achieve their design goals highlighted the collaborative nature of this field, where sharing insights can lead to better outcomes for all. Ultimately, I found that the culmination of these experiences resulted in a stronger understanding of design principles and a portfolio of work that I am proud of. This journey has significantly broadened my perspective, emphasizing the value of teamwork and continuous learning in the world of application design.