INSTRUCTIONS
TASK 2 - Interaction Design Proposal and Planning
In this task, we 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.
Animation Draft Ideas:
Start-Up & Sign-In
The animation will play when the user opens the app. After it finishes, the sign-in option fades in, allowing the user to fill in their information. After successfully signing in, I planned to have a "Welcome User" screen play, but I removed the idea after I received feedback from a friend stating that they would rather not have it and instead be led directly to the home page.
|
| Ideation Sketch (Start-Up & Sign-In) |
Navigation Bar (Icons)
A metaball effect will be used for the animation when the user presses on the icon for the navigation bar. Well it is between a metaball or a basic circle to move left or right animation.
|
| Ideation Sketch |
Purchase Screen
After the user makes a purchase the app will process their payment. While processing their payment, the animation will play. A chart with money rolling from left to right. After the payment is done processing, the text of "Payment Successful" slides in and bounces off the wall at the right, and then the rest of the details about the purchase appear below it.
|
| Ideation Sketch |
Added to Cart (Game Page)
When the user adds a game to their cart this animation beside the price will play, indicating that the game has been added.
Flow Chart: HERE
Animation:
Start-Up
For the start-up screen, I used Premier Pro to animate it since the animation I wanted couldn't be achieved in Figma. First I tried to find a SVG file of the Steam logo but they didn't have the one I needed so I recreated it in Illustrator.
Processing Purchase
ww