Application Design TASK 2
WEEK 05 - Week 07 (22.05.2025 - 05.06.2025)
NAME: Chai Wei Yi
I.D: 0369561
COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 2 - Task 02: Interaction Design Proposal and Planning
Module Information Booklet
Requirement:
- Interaction Design Document: Creating detailed flowcharts and wireframes to map out user journeys, creen layouts, and navigation paths.
- Animation Prototyping:
- Micro Animation:Small effects like button clicks, loading icons, and feedback states, prototyped in Figma.
- Macro Animation: Larger UI transitions or intro animations. I can use After Effects or reference similar examples if needed.
- Explaination and Presentation: Write or visually present how these interactions and animations enhance usability and aesthetics, explaining the thought behind each design decision.
Hi! I'm Chai, and in this project, I developed an interaction design plan for my final mobile web app – a redesigned version of the Steam platform, tailored for mobile users.
The goal of this task was to enhance the user experience by thoughtfully planning how users interact with the app. This includes not just the layout, but also how the app feels through animations and transitions.
2.1 Application Flow Mapping
Before diving into the visuals and interactions, I began by mapping out the entire application flow to ensure that user navigation would be logical, intuitive, and goal-oriented.The flow starts with a clean landing screen that guides users toward key actions like browsing the store, checking their library, or managing their wishlist.While I included both micro and macro animations to improve user experience, I was also mindful not to overuse animations. Adding too many effects could cause lag or performance issues, especially on lower-end devices. Therefore, I focused on using subtle and purposeful animations only where they truly enhanced the interaction.
App Launch → Home Page
The app opens with a short splash screen delay showing the Steam logo, then instantly transitions to the Home Page. This simple animation builds branding without making users wait too long. It ensures the app loads smoothly without lag, even on lower-end devices.
Home Page → Game Details / Cart Design
On the Home Page, tapping on a game or the cart icon leads instantly to the Game Details or Cart Design page. I included light micro-interactions (like card highlighting or button press effects) to give immediate feedback without slowing down the experience.
Game Details → Confirmation → Cart Design
From Game Details, users can add a game to their cart. A check mark animation confirms the action before transitioning to the Confirmation and then Cart Design pages. These transitions are fast and clean to keep the purchase process smooth.
In the cart, users move through Cart 2.0, Top-Up, and Payment screens. These transitions use “Change to: Open” logic for quick navigation. No complex animations are used here to avoid slowing down the checkout flow.
Payment Processing → Menu
After payment, a brief loading animation shows “processing,” followed by a confirmation screen. The app then returns to the Menu, which slides in smoothly using a macro animation with soft fade-ins for the menu items.
Menu → Library
From the Menu, users enter the Library, which opens with a clean transition. Game covers appear with subtle micro animations for a modern and polished look. A final message confirms the flow is complete.
2.2 Master Plan
Through this project, I gained meaningful hands-on experience in improving user interface and interaction design. By carefully analyzing the original Steam app, I was able to identify key areas for improvement—such as visual consistency, streamlined user flow, and the inclusion of effective feedback animations.
I redesigned each screen with a focus on modern aesthetics and user-centered usability, applying core UX principles like visibility of system status, interactive feedback, and user control. Using Figma’s prototyping tools, I implemented both macro and micro animations to enrich the user experience and make the app feel more intuitive and responsive.
This project also deepened my appreciation for storytelling in UI/UX design—not just through visuals, but through the use of storyboards, interaction flows, and before-and-after comparisons. It strengthened my ability to design with both functionality and emotional impact in mind, and I now feel more confident in creating thoughtful, user-focused digital experiences.
Comments
Post a Comment