Wee Jun Jie / 0375271
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Proposal & Planning
All class notes have been stored here: My Notes
INSTRUCTIONS
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/16bRDQ2MYICukbgm9S20tULOMcRedVvyr/preview"
width="640" height="480"
allow="autoplay"></iframe>
Task 2 Requirements:
Students are required to develop a comprehensive interaction
design plan for their final web-based mobile application,
including detailed wireframes, user flow diagrams, and
prototypes of both micro and macro animations. The goal is to
visually and conceptually prepare the interaction design and
animations that will enhance the user experience of their
application.
<iframe
src="https://drive.google.com/file/d/16bRDQ2MYICukbgm9S20tULOMcRedVvyr/preview"
width="640" height="480"
allow="autoplay"></iframe>
Task 2 Requirements:
Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.
Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.
Progression
For Task 1, as part of the MyRapid PULSE app
redesign, I am responsible for creating a Master
Interaction Board, which defines the overall plan
for both macro and micro interactions throughout
the app. Macro interactions focus on broader
user flows, such as route searching or checking
schedules, ensuring the functionality. Meanwhile,
micro interactions refine the smaller details,
including gesture animations and user feedback
upon taking an action. These subtle enhancements
play a crucial role in making the app feel
polished, intuitive, and responsive.
After finalizing the Master Plan, I will proceed to the Storyboard, where I will outline the animation plan for
each user flow. For every screen or interaction,
I need to define and incorporate three key types
of animations
-
On-load animation – What happens when the
page or component first
loads.
-
On-page animation – Animations triggered
by user within the same
page.
-
Off-load animation – What the user sees
when they leave the current
page or component?
This approach ensures a cohesive
user experience, aligning motion
design with the app’s brand identity
and usability objectives. By
defining animations at each stage, I
can create a smooth, intuitive flow
that enhances both functionality and
engagement throughout the
redesign.
REFLECTION
Experience
Working on Task 2 of Application Design II has been both a
challenging and rewarding experience. This phase of the
project required me to focus deeply on the interaction design
aspects of my public transport app, which included creating
detailed wireframes, user flow diagrams, and prototypes
showcasing both micro and macro animations.
At the start, I found it somewhat overwhelming to plan
every screen and interaction, especially when trying to
ensure a smooth and logical user journey. However, once I
broke the task down into smaller parts such as identifying
key features such as live bus/ train tracking, schedule
view and route search, it became clearer how to organize
the app’s structure.
Separating flows allowed me to visualize the layout and
structure of each screen. It was helpful to sketch out
designs before moving to the next step. It's something
like a pre-plan for me. The user flow diagrams helped me
understand how users would navigate through the
app. Prototyping animations was a new but exciting challenge.
I learned the importance of micro animations like loading spinners, and transitions between tabs in
providing feedback to users and enhancing usability. On
the other hand, macro animations such as page transitions and onboarding sequences played
a major role in making the app feel more dynamic and
user-friendly.
Observations
During the development of the interaction design plan, I
saw that simplicity in both layout and navigation
significantly improved the usability of the app. When
designs were too cluttered or included unnecessary
features, users had difficulty completing basic tasks such
as searching for routes or checking transport schedules. I
noticed that even small animations, like button presses or
loading indicators, contributed positively to the overall
user experience by making interactions feel smoother and
more responsive. Consistency in design elements across
different screens was another important factor when icons,
fonts, and layout patterns remained uniform, users
navigated the app more confidently. Additionally,
accessibility considerations such as readable fonts and
proper color contrast needed to be addressed early on, as
they greatly affected usability for a wider range of
users.
Findings
Through
this process, I found that user-centered design is
crucial to creating a successful app. I also discovered
that animations are not just visual enhancements they
serve a functional purpose by helping users understand
what is happening in the app and confirming that their
actions were registered. Another key finding was that
investing time in creating detailed wireframes and user
flows early in the project saved a lot of time and
effort later during prototyping. These tools helped me
visualize the app’s structure and made it easier to
communicate design decisions to others. Overall, I
learned that thoughtful planning and continuous testing
are essential for delivering an effective and intuitive
user experience.
Progression
For Task 1, as part of the MyRapid PULSE app
redesign, I am responsible for creating a Master
Interaction Board, which defines the overall plan
for both macro and micro interactions throughout
the app. Macro interactions focus on broader
user flows, such as route searching or checking
schedules, ensuring the functionality. Meanwhile,
micro interactions refine the smaller details,
including gesture animations and user feedback
upon taking an action. These subtle enhancements
play a crucial role in making the app feel
polished, intuitive, and responsive.
After finalizing the Master Plan, I will proceed to the Storyboard, where I will outline the animation plan for
each user flow. For every screen or interaction,
I need to define and incorporate three key types
of animations
- On-load animation – What happens when the page or component first loads.
- On-page animation – Animations triggered by user within the same page.
- Off-load animation – What the user sees when they leave the current page or component?
This approach ensures a cohesive
user experience, aligning motion
design with the app’s brand identity
and usability objectives. By
defining animations at each stage, I
can create a smooth, intuitive flow
that enhances both functionality and
engagement throughout the
redesign.
Working on Task 2 of Application Design II has been both a
challenging and rewarding experience. This phase of the
project required me to focus deeply on the interaction design
aspects of my public transport app, which included creating
detailed wireframes, user flow diagrams, and prototypes
showcasing both micro and macro animations.
At the start, I found it somewhat overwhelming to plan
every screen and interaction, especially when trying to
ensure a smooth and logical user journey. However, once I
broke the task down into smaller parts such as identifying
key features such as live bus/ train tracking, schedule
view and route search, it became clearer how to organize
the app’s structure.
Separating flows allowed me to visualize the layout and structure of each screen. It was helpful to sketch out designs before moving to the next step. It's something like a pre-plan for me. The user flow diagrams helped me understand how users would navigate through the app. Prototyping animations was a new but exciting challenge. I learned the importance of micro animations like loading spinners, and transitions between tabs in providing feedback to users and enhancing usability. On the other hand, macro animations such as page transitions and onboarding sequences played a major role in making the app feel more dynamic and user-friendly.
Separating flows allowed me to visualize the layout and structure of each screen. It was helpful to sketch out designs before moving to the next step. It's something like a pre-plan for me. The user flow diagrams helped me understand how users would navigate through the app. Prototyping animations was a new but exciting challenge. I learned the importance of micro animations like loading spinners, and transitions between tabs in providing feedback to users and enhancing usability. On the other hand, macro animations such as page transitions and onboarding sequences played a major role in making the app feel more dynamic and user-friendly.
During the development of the interaction design plan, I
saw that simplicity in both layout and navigation
significantly improved the usability of the app. When
designs were too cluttered or included unnecessary
features, users had difficulty completing basic tasks such
as searching for routes or checking transport schedules. I
noticed that even small animations, like button presses or
loading indicators, contributed positively to the overall
user experience by making interactions feel smoother and
more responsive. Consistency in design elements across
different screens was another important factor when icons,
fonts, and layout patterns remained uniform, users
navigated the app more confidently. Additionally,
accessibility considerations such as readable fonts and
proper color contrast needed to be addressed early on, as
they greatly affected usability for a wider range of
users.
Findings
Through
this process, I found that user-centered design is
crucial to creating a successful app. I also discovered
that animations are not just visual enhancements they
serve a functional purpose by helping users understand
what is happening in the app and confirming that their
actions were registered. Another key finding was that
investing time in creating detailed wireframes and user
flows early in the project saved a lot of time and
effort later during prototyping. These tools helped me
visualize the app’s structure and made it easier to
communicate design decisions to others. Overall, I
learned that thoughtful planning and continuous testing
are essential for delivering an effective and intuitive
user experience.