Application Design II - Task 2: Interaction Design Proposal and Planning
23 May 2024 - 13 Jun 2023 (Week 5 - Week 8)
Vincent Lee // 0359386
Application Design II // Bachelor of Design (Hons) in Creative Media //
Taylor's University
Task 2: Interaction Design Proposal and Planning
INDEX
- Refined UI Design
- Interaction Design Documents
- Animation Prototyping with Written Explanation
- Task 2 Submission and Video Presentation
- Interaction Design Documents
- Animation Prototyping with Written Explanation
- Task 2 Submission and Video Presentation
Instructions
<iframe
src="https://drive.google.com/file/d/1COQkOLwNVO6voHJm6IWqCMo1icYqm2Oj/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 2: Interaction Design Proposal and Planning
We are required to develop a comprehensive interaction design plan for our
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.
Hence in this blog, I have divided into 4 main categories which is:
- Refined UI Design
- Interaction Design Documents
- Animation Prototyping with Written Explanation
- Final Submission and Video Presentation
1. Refined UI Design
Before diving into my interaction planning, I refined my UI design once
again. This unintentional refinement surprised me with how clean,
intuitive, and consistent it turned out, especially after numerous
attempts to incorporate the brand colours.
|
|
|
2. Interaction Design Documents
In this section, I have created a detailed flowchart and master plan
that map out the user journey and key interaction points within the
application I've been working on. These documents clearly illustrate the
layout of each screen and the app's navigation structure.
i) Flow Chart and Visual Representation
As we are only tasked to redesign and create one user flow from our
MVPs, hence I recreate my flow chart in MIRO, and show decision points
and the flow of control within the process of purchasing Golden Bubble
Milk Tea.
|
|
Figure 1.2 - Flow Chart [Latest Update: 06 July 2024] |
Starting with the loading screen of the KOI App, I demonstrate the
transitions and animations leading to the Menu Page, the first step of
my user flow. This section briefly outlines the planned screen
transitions and macro animations on each page.
Figure 1.3 - Flow Chart with UI Design
[Latest Update: 12 July 2024]
ii) Animation Story Boarding
After planning the major transitions and animations between screens, I
moved on to designing the micro animations that will occur on each
screen to make the app more lively and visually engaging. This involved
detailing specific types of animations:
- On Load: Animations that play when a screen or element first appears.
- In Page: Emphasis on the user interactions, feedback and guiding user actions. These elements includes button presses and icons to draw attention.
- Off Load: Animations that play when a screen or element is dismissed or transitions out.
Besides, I also outlined the interactive elements of each screen/ page,
and outline the importance of it, such as what the elements can do and
how the elements going to interact with the users, and what's the
outcome of interacting, and does my design and animation planning able
to guide users to their expectation outcome and etc.
Next, I focused on creating micro animations. While some animations were effective and relevant, I found that Figma was unable to fully realize them, so I needed to find alternative methods.
In this section, I specifically outline these two types of animations:
Carrying the previous regret, I made minor changes to the interface
design, resulting in the clean and straightforward look I had envisioned
from the beginning. It was easier this time because most of the
micro-interactions were already designed in the previous semester,
allowing me to focus on creating macro animations. I also added more
micro animations to meet the task requirements. While some animations
were not entirely satisfactory, many exceeded my expectations,
particularly the bouncy effect, which I found very suitable for my
application's theme.
The flow chart helped me ensure the consistency of animations throughout the entire application. Storyboarding and animation prototyping enabled me to ensure that my application is responsive and interactive, ultimately enhancing the user experience.
Figure 1.4 - Animation Story Boarding
[Latest Update: 06 July 2024]
3. Animation Prototyping with Written Explanation
After constructing my flowchart, I started creating my prototype in
Figma based on the intended transitions and animations outlined in the
flowchart. I realised that to achieve smooth transitions, especially
with macro animations, the more frames I created, the smoother the
effect.Next, I focused on creating micro animations. While some animations were effective and relevant, I found that Figma was unable to fully realize them, so I needed to find alternative methods.
In this section, I specifically outline these two types of animations:
- Micro Animations: Small-scale animations, including button effects, hover animations, loading indicators, and feedback messages.
- Macro Animations: Larger-scale animations, such as transitions between different app states or animated introductions.
Figure 1.5 - Animation Prototyping with Written Explanation
[Latest Update: 06 July 2024]
4. Figma Workplace
|
|
Figure 1.6 - Figma Workplace [Latest Update: 06 July 2024] |
|
|
Figure 1.7 - Components and Micro Animations [Latest Update: 06 July 2024] |
Application Design II_Task 2 Submission: Interaction Design
Proposal & Planning
Figure 1.8 - Task 2: Interaction Design Proposal and Planning
[Latest Update: 06 July 2024]
Figure 1.9 - Animated Prototype
[Latest Update: 06 July 2024]
Video 1.1 - Task 2 Video Presentation
[Latest Update: 15 July 2024]
Reflection
The flow chart helped me ensure the consistency of animations throughout the entire application. Storyboarding and animation prototyping enabled me to ensure that my application is responsive and interactive, ultimately enhancing the user experience.
Materials
1. Motion
Quick Links
