Week 05 - Week 07
Ahmad Firas Bin Ahmad Fisal | 0345121
Application Design II | Bachelor of Design (Hons) in Creative Media
Task 02: Interaction Design Proposal and Planning
INSTRUCTIONS
Task Brief
Deliverables:
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.
1. Interaction Design Documents:
- Flowcharts
- Wireframes
2. Animation Prototyping
- Micro Animations
- Macro Animations
3. Visual and Written Explanation
4. Video Presentation
Task 02: Interaction Design Proposal and Planning (Status: Completed)
For this task, we are required to develop a design plan document for
our final web-based mobile application, including wireframes, user flow
diagrams, and prototypes. We should also put in detailed information that
describes the onload, in-app, and offload interactions between each screen as
part of the deliverables. We should only focus on our main MVP of the
application as the flow for the project in this module, Application Design II.
For example, removing unnecessary processes that are not considered part of
the main flow such as; logging in, setting up the application, etc. This is
mainly due to reducing the amount of workload to ensure that we would have a
smooth journey in the front-end development later on.
Application Flow and Screens:
The screens below are finalised according to the required flow to showcase for
the final project. This process of user journey mapping in the form of
arranging the screens will help in visualising the steps a particular user
will take to reach the end goal of the MVP. Further skimming from the larger
app flow into the main targeted ones will aid in identifying pain points and
room for optimising the user experience of the application.
To start, I shall reintroduce what will be my main MVP flow for this
application that was documented in Task 01's blog;
|
|
MVP 01 - Wireless Photo Printing |
Original Design Flow - MVP 01: Wireless Photo Printing
|
|
MVP 01: Wireless Photo Printing |
MVP 01: Wireless Photo Printing was chosen and agreed upon by the lecturer
before proceeding with any of the tasks in this module. Seeing that the flow
is focusing on the main function of the Instax SHARE application which is to
wirelessly print photos from our phone's gallery, upon reconsideration, it now
seemed inefficient to include the 'Onboarding Frames' as they are not directly
related to the main flow of 'Wireless Photo Printing' but a rather
instructions for first timers of the application instead.
The new flow to focus on for Task 02 onwards, would be from the first loading
page of the splash frames and moving straight to the 'Main (Home) Frame' as
that would be the home page of the app. Finally, it goes through the process
of the screens under the 'MVP 01 - Wireless Photo Printing'
|
| Refined MVP 01 |
Exploration of the types of animation styles that could be done in Figma is
necessary at this stage as it helps develop the interaction design planning
before moving forward to the further stages of this task.
|
| User Map Journey for Instax SHARE: MVP 01 |
I had gone online to find inspiration for the macro transitions from one frame
to another as well as browsing through other applications out there that give
off similar simple feelings towards the app without using too many
transitions. After self-discovering and online tutorials on both macro and
micro animations of an application, I felt most comfortable with my own
progression.
Macro Animation (Frames to Frames - Overview)
|
| Overview of the MVP 01 - Macro Animation Flow |
From AN 1 to AN 2;
To introduce the splash screen, I've decided to add another blank frame before
the splash screen and linked it together during the prototype by choosing
After Delay for 500ms for it to Ease In at 300ms with Smart Animate turned on.
|
| AN 1 to AN 2 |
From AN 2 to AN 3;
AN 2 to AN 3 frames focus on transitioning the shorter gradient background in
AN 2 and making it longer after going through the transition. I chose After
Delay at 800ms for the frame to Ease In at 500ms with Smart animate turned on.
|
| AN 2 to AN 3 |
From AN 3 to AN 4;
**Changes are made, and updates are under the micro animation
documentation
AN 3 acts as the home page and here, I have enabled the On Click action to
happen because I need to direct viewers to MVP 01 straightaway as it is the
project's main objective. I had chosen Slow as the transition type at 1100ms
with Smart Animate turned on so that the gradient background from AN 3 expands
slowly to fill the edges of the screen.
|
| AN 3 to AN 4 |
From AN 4 to AN 5;
**Changes are made, and updates are under the micro animation
documentation
As instructed to not overload our work to maximise the time remaining for coding, It's best to be direct with the MVP flow; that justifies the purpose of me pre-setting the flow by only making that one particular image clickable as opposed to making other pictures clickable with a working flow as well just like what I've done in Application Design I. These frames are with On Click transition type with Gentle at 800ms and Dissolve turned on as opposed to choosing Smart Animate. Smart Animating these two frames made it look awkward for both pink elements at the top part of both frames.
|
| AN 4 to AN 5 |
From AN 5 to AN 6;
These two frames are On Click frames and the button 'Print' is made clickable it will then Ease In at 300 ms with Dissolve turned on for a similar reason as what's written for AN 4 to AN 5.
|
| AN 5 to AN 6 |
From AN 6 to AN 7;
**Changes are made, and updates are under the micro animation
documentation
|
| AN 6 to AN 7 |
From AN 7 to Home;
**Changes are made, and updates are under the micro animation
documentation
Just to loop things together, the Home button is made clickable to go back to
the start of the flow from the Home page. It is in Gentle at 800ms with Smart
Animate turned on.
|
| AN 7 to Home |
Micro Animation (On Load, In-App, Off Load)
|
| Micro Animation (Overview) |
 |
| 01 (Enlarged) |
 |
| 02 (Enlarged) |
 |
| 03 (Enlarged) |
It is a good reminder to note that there are a few changes made to macro
animation along the way of making the micro animation. It is expected that a
few changes or updates made to reflect a progression task.
Any frames above that are highlighted with this remark will be explained
further below under this particular section (Micro Animation):
**Changes are made, and updates are under the micro animation
documentation
These changes are significant after AN 4 due to the nature of the creation
of components and that changes the whole flow that influenced the macro
animation from frame to frame as well. Below, will be a normal documentation
of any micro animations added to the flow, alongside explaining the changes
made.
Prototype
Gradient Background:
This was made by using combined knowledge in making components and when
linked with prototype flowing, the element is going to look like it is
elongated smoothly.
|
| Gradient Background |
Icon Animations*:
*Before realising that this was a mobile application, I made these icons
with their respective animation which will bounce and expand at the same
position when clicked. However, this has become something that I will not
focus on as this is a touch-mobile application.
|
| Icons |
Gradient Background & Sliding Photos:
The idea behind the micro animation for AN 4, is to have the gradient background now from the elongated state before; expand to the edges of the frame and have the photos slide up. Having the transition for the photo to be quick, realises the vision and smart animation is also turned on to make the gradient background expand smoothly from before too.
|
| Gradient Background & Photos |
Navigation Bar:
I have the icons in the navigation bar to appear from the left to the right one by one. Following the variant tutorial enabled this vision comes to life. I have the animation set to Bouncy to have some effect of it falling down in one place from above.
|
| Navigation Bar (Bottom) |
Top Bar (Elements):
After finishing the animation for the bottom navigation bar, I decided to replicate the same animation style for the top elements on the same frame, as if it was falling from above from left to right with the bounce effect.
|
| Top Elements |
Progress Bar (Animated):
I followed a tutorial online that teaches how to make this progress bar and the green bar will progress according to the duration set to the animation. It is with Ease In and Out for 2500 ms. I've decided to change it from the grey version of the original ideation to improve the user experience of the application and adhere to the colour psychology of the colour green; to indicate completion.
|
| Progress Bar |
Navigation Bar 2:
Since this frame only requires one icon in the middle, I've decided to tie in a similar stylistic decision made before which was the bounce effect of the icons entering the frame. However, for this particular frame, the icons will now leave the screen from right to left.
|
| Navigation Bar 2 (Bottom) |
Pulsating Tick Icon (Element):
Instead of having just a static green tick icon to indicate the completion of the photo printing, I've decided to make a pulsating version of the icon to improve the aesthetic value of the application. Also, when something is pulsating like this icon, users tend to realise more of what's moving on the screen constantly, so this could act as a form of error prevention from users reprinting the same image unnecessarily.
|
| Pulsating Tick Icon |
Changes:
AN 3 to AN 4
.png)
|
| AN 3 to AN 4 (Changes) |
Due to the new influence from the component and its own prototype flowing
actions, the previously picked; Slow transition is not suitable and it's
been changed to Ease In at 300ms with Smart Animate turned on to enable the
gradient background to expand to the edges of the frame.
AN 4 to AN 5
.png)
|
|
AN 4 to AN 5 (Changes) |
Instead of a dissolve and gentle, since the component is now in action, it
is rather suitable to introduce a left-push. It was a creative decision to
introduce a design identity with this left-push and it will be used
again at the end of this flow.
AN 6**
.png)
|
| AN 6 (Changes) |
The new update of this AN 6 is the green progress bar rather than having it
in a plain and greyed-out box. A progress bar was made by following this
tutorial that I stumbled upon while researching for other
micro-interactions.
AN 6 - AN 7
.png)
|
| AN 6 - AN 7 (Changes) |
When the green bar was introduced, there were also changes to the flow
setting like the timing for the after delay is now 2500ms to integrate it
with the time it took for the bar to progress fully.
AN 7 - Home
.png)
|
| AN 7 - Home (Changes) |
As mentioned, left-push was introduced to create a sense of identity
via design consistency. This is the final frame of the flow before moving
back to the start of the flow. The left-push transition is introduced again
here to tie back the starting usage of this transition.
Final Overview (Figma):
.png)
|
| Figma Artboard Overview |
Prototype Testing:
*Please view the prototype in full screen and click 'Restart' once if it seems laggy.
Click Here: Prototype Testing Figma Link
Video Presentation
Click Here: https://youtu.be/Hdf6g20vxMU
Reflection
The progress for this module so far has been great as it feels natural trying to hone our skills in Figma. I have implemented some ways to make the prototype planning as good as possible. Listing out my changes in this task in comparison to the last one made me realise how much I've grown as a UI/UX student and I'm proud to say that I'm getting the hang of this so far.
Comments
Post a Comment