Final Submitssion Application 2

21/4/2025 - 15/8/2025 / Week 1 - Week 14

Chai Wei Yi 0369561

Application Design II/ Bachelor of Creative Media/Taylor's University

Task 4: Interactive Component Design & Development

---

INSTRUCTIONS

Timeframe: Week 12 – Week 14

Description:

A) Final Project – Completed App – 30 %

Students will synthesise the knowledge gained in Task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.

B) E-Portfolio - 10 %

Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a team and foster stable and harmonious relationships for productive teamwork. Reflective writing is part of the TGCP.

Requirements:

Presentation Slide to be submitted as pdf format.

Online posts in your E-portfolio as your reflective studies

TASK 4: FINAL PROJECT

A. Modification and Overall Enhancement of FlutterFlow

Steam Home Page

This is the SteamHomePage, the main landing screen of the app. At the top is the navigation bar showing the app name "Steam" and user profile icon. Just below that are two key sections: Hottest and Latest game listings. The Hottest section highlights trending games (e.g., Dota 2), while the Latest section features newly released games like Counter-Strike 2, Cyberpunk 2077, and Starfield. Each row includes a banner image and a “View More” button. At the bottom, the navigation bar provides access to Home, Library, and Cart. The layout is visually clean, scrollable, and uses dark theme styling to resemble Steam’s original interface.

Game Details Page

The Game Details page provides an “About Us” section followed by featured game descriptions. In this screenshot, Goose Goose Duck is introduced with a banner, summary paragraph, and gameplay visuals. A separate Game Details section gives users deeper insight into how the game works. The scrollable layout is structured for clear readability, allowing users to explore multiple games without visual clutter. This page helps users get to know each game before purchasing.

Result Page

This screen displays individual games in more detail. For example, the Liar Bar section introduces the game with a short description, pricing (RM19.90), and a "Play" button alongside an "Add to Cart" button. Promotional prices and interactive purchase actions are designed to resemble modern e-commerce features. The layout balances game visuals with action buttons, enhancing engagement while keeping the UI functional and familiar to gamers.

Cart Page

The Cart page shows the user’s selected games ready for purchase. Each item (e.g., Liar’s Bar, Hades II) includes a game image, platform icons (Windows/macOS), pricing, discount label, and options like “Gift” or “Remove.” The Check Out button at the bottom is prominent and easily accessible. This page gives users a final overview of their selected items and allows them to manage purchases efficiently before payment.

Top Up Page

This page allows users to top up their Steam Wallet with predefined amounts (e.g., RM15, RM30, RM70). The current balance and purchase history are displayed at the top, followed by a vertical list of “Add Funds” buttons. Each entry shows the amount and an Add Funds CTA in green. The design follows a clean and consistent layout, reinforcing simplicity and trust in financial transactions.

Library Page

The Library page showcases all the games the user has “purchased” or added to their collection. A search bar at the top lets users quickly locate games, and a sorting button (e.g., "Recent") refines the display. Game cards are stacked vertically, showing titles like Liar’s Bar, Minecraft, and Goose Goose Duck. This section acts as the user’s personal game shelf, where they can manage their owned content.

C. Final Submission

Published Web Addressed URL : https://app.flutterflow.io/share/steam-app-xtdp5y

Presentation Video: 

FEEDBACK

WEEK 11

General Feedback: -

Specific feedback: -

WEEK 12

General Feedback: -

Specific feedback: -

WEEK 13

General Feedback: -

Specific feedback: -

WEEK 14

General Feedback: -

Specific feedback: -

REFLECTION

Observation

After completing this Steam-themed mobile app project, I realized that this subject was more challenging than I initially expected, but also incredibly rewarding. I observed that FlutterFlow shares some similarities with Figma, especially in terms of layout structure and drag-and-drop design. However, FlutterFlow goes beyond visual design by involving logic, navigation flows, and backend elements, which made the process both exciting and overwhelming at times. Designing the Steam interface was quite enjoyable, but integrating functions like the cart system, top-up options, and game library required a deeper understanding of how app components interact. I also discovered that some flexibility I had in Figma was limited in FlutterFlow, which occasionally made it harder to execute my intended design ideas—especially as someone new to app development.

Finding

One important finding during this project was the value of using external resources like ChatGPT, YouTube tutorials, and community forums. These tools helped me troubleshoot design issues and learn new techniques more quickly, especially when working with features like scrollable lists, image buttons, and cart logic. Another key discovery was the importance of balancing functionality with user experience. Small design choices—such as using a consistent dark theme, aligning image cards, or adding a visible confirmation section in the cart—played a big role in making the app feel polished and user-friendly. I realized that even a game store app needs to prioritize clarity and accessibility to engage users.

Experience

This project gave me hands-on experience in turning an idea—reimagining a mobile version of Steam—into a functioning app. Even though it was my first time working with FlutterFlow, I learned how to structure a full app with multiple screens, including homepage listings, game details, cart management, and wallet top-up features. It also helped me understand how to plan components in a logical flow, such as how users navigate from browsing a game to purchasing it. More importantly, this experience strengthened my problem-solving mindset, as I constantly had to test, adjust, and troubleshoot my design decisions. Overall, this project boosted my confidence in working with no-code tools and deepened my understanding of UI/UX design in real application development.