Application Design TASK 2
21/4/2025 - 27/4/2025 (Week 1 - Week2)
Chai Wei Yi / 0369561
Application Design II
Chai Wei Yi / 0369561
Application Design II
INSTRUCTIONS
Task 1
To do
- Write a reflection on the outcome of App Design's work
- Determine what should be changed and updated
- list out the improvement of your work based on the UIUX
UI Design Kit
UI Design Kits – Application Visual Design Description
This visual shows the main UI design components used in my application STEAM. It includes typography, icon set, and theme usage.
Typography
- I used clean sans-serif fonts to maintain a modern and readable interface.
- Font weights and sizes are adjusted to establish clear visual hierarchy across titles, subtitles, and body text.
- This improves clarity, especially on mobile devices where screen space is limited.
Icons
- The icon set features minimal line icons embedded in circular buttons, following modern design trends.
- Each icon (Profile, Chat, Filter, Menu, Video) clearly represents its function, enhancing usability.
- High contrast with the dark background ensures visibility and provides strong visual feedback.
Theme Design
- The overall theme adopts a dark interface to create a focused and immersive environment.
- This design approach supports extended usage without visual fatigue and aligns with modern aesthetic preferences.
- Blue accents are used to highlight interactive elements and guide user navigation naturally.
Color Codes Summary (Point Form)
-
#000000 Pure Black
- Used for backgrounds, main buttons, and high-contrast text
- Enhances immersion and visual focus
- Ideal for dark mode interfaces
-
#171A21 Dark Navy
- Serves as the primary background or navigation bar color
- Softer than pure black, reduces eye strain
- Creates a subtle and tech-inspired atmosphere
-
#374957 Steel Blue Gray
- Used for cards, containers, and base layer of buttons
- Adds structure and separation to content area
- A modern tone with a calm and professional feel
-
#3CB7FF Electric Sky Blue
- Used as the accent color for CTAs, icons, and highlights
- Draws attention and guides user interaction
- Adds vibrancy and energy to the UI
-
#C7D5E0 Soft Cloud Gray
- Applied to input fields, borders, and background highlights
- Balances darker tones and adds visual depth
- Provides a clean and calming visual break
UI Design
1.Home Page
2.Game Details
In the Game Details page, I improved the overall readability and user experience by simplifying the layout and adopting a cleaner visual hierarchy. Compared to the original version, which was cluttered with text and buttons, the redesigned versions focus on content clarity by separating sections with clear headings and aligning elements consistently. In the final version, I refined the spacing, ensured better alignment of icons and text, and enhanced the visual flow from the About Us section to the Game Community. These changes help users navigate the content more smoothly while maintaining a visually appealing and game-focused aesthetic.
3.Confirmation of Buying Game
In the Confirmation for Buying Game page, I improved the layout by clearly separating each game's content into structured blocks, making it easier for users to scan through game titles, descriptions, and prices. Unlike the original version, which mixed game details and action buttons in a compressed format, the redesigned versions introduce a more card-like structure with consistent spacing, alignment, and clear “Add to Cart” or “Free” buttons. In the final version, I refined the text alignment and button hierarchy to enhance clarity and reduce visual clutter, ensuring that users can make purchase decisions more confidently and efficiently
4.Cart Design (New Add on)
In the Cart Design page, I simplified the interface to create a cleaner, distraction-free experience by removing unnecessary elements like alert boxes and cluttered pricing text from the original version. Version 1.0 introduced a minimal layout with a collapsible cart header, but the visual still felt incomplete. In the final version, I maintained this minimalism while ensuring structural consistency with the rest of the app’s UI, creating a more modern and unified look. The updated design focuses on clarity and future scalability—making it easier to add items while keeping the interface intuitive and visually balanced
5.Cart Design
In Cart Design 2.0, I improved both the visual hierarchy and user interaction flow by transforming the cart items into clear, card-based layouts that highlight key information such as game title, price, platform compatibility, and actions like “Check Out” or “Remove.” Compared to the original version, which appeared cluttered and lacked emphasis on key actions, the redesign in Version 1.0 organized each game into a clean block with structured alignment. The final version further refined spacing, icon clarity, and button contrast to make the cart experience more intuitive and visually cohesive, allowing users to manage their purchases more efficiently and with greater confidence
6. Payment Method
In the Payment Way redesign, I streamlined the interface by replacing the cluttered and text-heavy layout from the original version with a cleaner, more modern dropdown selection system. Version 1.0 introduced a simplified layout with a clear call-to-action (“Confirm”) and visually separated payment logos for better recognition. In the final version, I refined alignment, increased spacing between icons for better tapability, and adjusted visual balance to maintain consistency with the rest of the app. These changes improve user focus, reduce cognitive load, and make the payment process smoother, faster, and more user-friendly for mobile users
7.Top Up E-Wallet ( Original Version), (Version 1.0), (Final Version)
In the Top Up Page redesign, I transformed the outdated, web-style layout of the original version into a mobile-friendly, modern interface. Version 1.0 introduced a vertical card format with improved button visibility and clearer pricing, enhancing readability and usability. In the final version, I refined font consistency, spacing, and alignment to create a more structured, polished look while keeping the interface intuitive. By focusing on mobile ergonomics and visual balance, the new design makes it easier for users to quickly select top-up amounts and proceed with payments—delivering a smoother, more accessible wallet experience.
8.Loading when payment done
To enhance user experience and provide clear feedback during transactions, I added a new confirmation screen that appears after a successful payment. This addition introduces a smooth transition from the loading animation to a “Successful Checkout” message, paired with a recognizable Steam icon to reassure users. The inclusion of a friendly confirmation message and a clear call-to-action (“Continue Shopping”) not only reduces uncertainty but also reinforces trust, giving users closure and guiding them seamlessly back to the app. This thoughtful micro-interaction strengthens the overall flow and professionalism of the purchase journey
9.Menu
In the Menu Page redesign, I improved clarity, consistency, and touch interaction by organizing items into grouped, rounded cards instead of a dense vertical list. Compared to the original version, which felt text-heavy and visually flat, Version 1.0 introduced better spacing and icon alignment for faster recognition. The final version further enhanced visual clarity by refining the bottom action buttons and ensuring uniform padding around each menu item. These changes help users navigate more intuitively and reduce cognitive load, while also giving the interface a more modern, user-centric aesthetic
10.Libary
In the Library redesign, I moved away from the cramped and static grid layout of the original version and introduced a vertical card-based display to enhance visibility and ease of navigation. Version 1.0 added a clearer hierarchy with prominent cover art and more breathing space between games, while the final version refined alignment, button spacing, and visual consistency across elements. These updates not only make browsing the game library more immersive and user-friendly, but also improve accessibility—especially for users interacting with smaller screens or needing quicker identification of game titles.
Slide and Presentation Video
Reflection
Reflection on Improving My Application Design
Over the course of two semesters, I have been working on redesigning my mobile app project – STEAM. From the very beginning, I tried my best to improve every function and feature to ensure a better user experience. In Application Design 1, I put a lot of effort into enhancing the core structure of the app, focusing on user interface consistency, functionality, and the overall concept of the app.
Moving into this semester’s Application Design 2, we were asked to further refine our high-fidelity prototypes. Although I had already made significant changes in the previous phase, I still tried to improve my app in any way I could. For this round, my main focus was on adjusting the font layers, typography size, and overall visual alignment to ensure a smoother and more readable experience for users. I also worked on refining the smoothness of transitions in the prototype to make it feel more natural and polished.
However, I deliberately chose not to change too much in this phase. Since I had already developed a clear and simplified design direction in Application 1, I wanted to maintain that consistency. I believe a good design should be easy to understand and navigate, so I didn’t want to overcomplicate things by making unnecessary changes.
Through this process, I learned the importance of balancing improvement and consistency. While innovation is important, knowing when to preserve the original design intent is equally valuable. I’m proud of the progress I’ve made and how I’ve grown in both technical and design thinking skills through this project.
Comments
Post a Comment