Application Design 2: Task 2
Interaction Design Proposal & Planning ㅤ
Table of Contents
✿ Lectures
- Todo
- Instructions
- Final Wireframes of Temu App
- High-Fi Animation Wireframes of Temu App (MVP Focus)
- Prototype Overview
- Temu App Interaction Design Proposal & Planning in Figjam
- Temu App User Flowchart
- Prototype Storyboard
- Presentation Video
- Final Submission Links
Instructions
Find out other information about this module below
Module Information
Lectures
Week 5
➜ Lottie Files
In Lottie Files, we learnt to make short animations. We
were tasked to animate a logo and I chose to do
Mcdonalds.
Figure 2.1 Mcdonalds GIF
Week 6
➜ Flutterflow & Firebase
In Flutterflow, we learnt to create 3 pages (Login, Sign-Up, Dashboard),
and linked the buttons to redirect to the correct page. We were also
introduced to Firebase which will used as the authentication method. We
ended the class by making our pages prettier and I decided to make the login
page to replicate my Temu final wireframes.
Figure 2.2 Temu Login Page
Week 7: No class
Week 8
➜ Flutterflow Map Testing
Today we referred to this
link to learn how to add map API in Flutterflow. We used the same file as our
W6's file and worked on the project on
Google Cloud Console. Given that it was confusing, I only managed to learn till the part
where I have to add places.
Task 2: Interaction Design Planning &
Prototyping
Todo:
- Plan final web-based mobile application including wireframes and animations
- Video Presentation
Instructions:
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.
-
Interaction Design Documents
- create detailed flowcharts and wireframes
- map out the user journey and key interaction points within the application
- illustrate the layout of each screen and the navigation structure of the app
-
Animation Prototyping
- micro animations: small-scale, enhances user interaction (button, hover, loading, feedback messages)
- macro animations: larger-scale, affect user interface (transitions, animated introductions)
- complex animations: can use Adobe After Effects or similar tools (can provide references if can't animate)
-
Visual and Written Explanation
- written / visual presentation that describes how these animations and interactions contribute to the usability & aesthetic
- discuss the purpose behind each animated element and how it integrates into the overall user experience design
- Video or Class Presentation
Final Wireframes of Temu App
Attached below is the final wireframes I have adjusted for Task 1 of
App Design 2.
Figure 5.1 Prototype Testing
click HERE for the link to Figma file
High-Fi Animation Wireframes of Temu App (MVP Focus)
After completing all the final wireframes of Temu App, I went ahead and
selected the wireframes that will be used for the MVP flow focus. I went
through all screens carefully to make sure all elements are aligned, and
that the overall flow feels intuitive.
Below shows the final wireframes to complete Task 2.
Figure 5.2 Temu App High-Fi Wireframes and Prototype (MVP Focus)
Prototype Overview
To make sure the flows feel intuitive, I made sure to review every
aspect of the interactive prototype , paying close attention to micro
and macro animations. I also checked the timing, ease, and transitions
of each animation to ensure they feel smooth and responsive.
Figure 5.3 Prototype Overview
Temu App Interaction Design Proposal and Planning in Figjam
To start, I planned the flow of my animations by visualising it in
Figjam, alongside with a storyboard to make sure everything is going
according to plan.
Figure 5.4 Storyboard and User Flowchart on Figjam
Temu App User Flowchart
I created a User Flowchart on Figjam, the following is a breakdown of
each screen.
-
Loading Page
Figure 5.5 Loading Page Flowchart
Macroanimations:
- smart animations transitions (ease out) to sign up page
Microanimations:
- logo reveals (fades in and scales up)
-
Sign In & Sign Up Page
Figure 5.6 Sign In & Sign Up Flowchart
Macroanimations:
- smart animations transitions from sign in to sign up
- transitions are triggered by clicking on "Sign In" Button
Microanimations:
- logo elements bounces up in a timely manner (sign in) / tilt left & right (sign up)
-
Home Page
Figure 5.7 Home Page Flowchart
Macroanimations:
- smart animations transitions from sign in to home page (linear)
Microanimations:
- heart icon allows users to "wishlist" items, will turn solid red when tapped onto
-
Product Listing
Macroanimations:
- product listing slides up from home page
- instant transition to cart after on tap view cart
Microanimations:
- heart icon allows users to "wishlist" items, will turn solid red when tapped onto
- add to cart button animation turns from small to big and changed text to view cart
-
Cart
Macroanimations:
Figure 5.9 Cart Flowchart
- instant transition to cart from product listing
- instant transition to checkout after tapped onto view cart button (delayed transition)
Microanimations:
- cart button animation turns from small to big with and arrow pointing upwards, indicating checkout
-
Checkout
Macroanimations:
- instant transition from cart to checkout
- smart animation for transitions between checkout steps (shipping, payment, review)
Microanimations:
- progress bar line animates with width expansion
- tick icon fills in colour when progress is ongoing
-
Order Status, Payment Status
Macroanimations:
- instant transition from checkout to order status
- instant transition back to home page
Microanimations:
- loading icon animates to show order is processing
- direct transition from order status to payment status after short delay
Prototype Storyboard
To continue, I made a full storyboard that shows each screen's
animation plan, categorised by On Enter, On Screen Loaded, and On
Exit. Further refinement was made to micro and macro animations to
ensure smooth and engaging UI feedback for users of the Temu App.
Figure 5.12 Prototype Storyboard on Canva
Presentation Video
After completing the storyboard, I recorded a presentation video that walks
through the entire interaction flow, explaining the design decisions,
animation choices, and how the prototype enhances user experience.
Figure 5.13 Presentation Video
Final Submission Links
Shortcut and collection of links to all projects & files done to
complete Task 2.
- Figma Wireframes
- Figma Wireframes (MVP Focus with Animation)
- Figjam
- Storyboard on Canva
- Presentation Video
Reflection
In this task, it was challenging as I had to move ahead from thinking
and brainstorming static designs, to planning the interaction. It was
really helpful that Mr. Razif shared a few senior works and examples
of his own to get me started. I learned that proper planning is the
smoothest way to progressively complete the tasks to complete. For
example, I thought going straight to editing the wireframes on Figma
with animations is a great idea, but I end up making alot of changes
after completing the user flowchart and prototype storyboard.
Hence, I did learnt that proper plan and flow is very important and
plays a crucial role in interaction planning. Besides that, I managed
to learn the use of components and how to user prototype interactions
to smoothy make transitions that can improve user experience. I also
did alot of research on mobile applications to know what is great and
what is not in the UI design of e-commerce apps, like Shopee, Lazada,
Taobao, and so on.
Overall, I learnt alot from completing this assignment, and it is a
great start to continue onto my Task 3 which is to actually make this
into a working interface.