Application Design 1 - Project 3: Lo-Fi App Design Prototype
xx.xx.2024 - xx.xx.2024 / Week 6 - Week 8
IAN CHOO XIN ZHE / 0369451
Application Design 1 / Bachelor of Design (Honours) in Creative Media
MIB
To kick-start the project, I began by exploring various design inspirations online. Platforms like Pinterest and Behance were instrumental in helping me gather ideas and visualize the overall aesthetic and functionality I wanted for my app redesign. This step was crucial in shaping my initial direction and sparking creativity for the design process.
Given my limited experience with Figma, I dedicated time to watching several Figma tutorials. These tutorials were invaluable in familiarizing myself with the software’s interface and tools. By improving my understanding of Figma, I aimed to streamline my workflow and make the design process smoother. This preparation laid the groundwork for a more efficient and confident approach to creating my app prototype.
 |
| Fig 1.1 Pinterest Inspiration |
 | |
|
Then, the real work began as I transitioned from planning to execution. I started by sketching out a few initial ideas to brainstorm the app’s layout and features. These sketches served as a blueprint, helping me visualize the structure and flow of the app. Once I had a clear vision, I created layout grids in Figma to establish a solid foundation for my designs. Learning how to create these grids was a new skill I had to pick up, but it proved to be a valuable step in ensuring consistency and alignment throughout the app.
With the grids in place, I began designing the app pages in Figma. This stage marked the transformation of my ideas from concept to digital form, and it was exciting to see my vision start to come to life.
 | |
|
 | |
|
We were also tasked to create three user scenarios for the app’s main flows. I spent considerable time brainstorming and gathering inspiration, as I wanted the scenarios to feel authentic and engaging without directly replicating existing designs. While this careful approach helped create unique and thoughtful flows, it left me with limited time for refinement—a regret I hope to learn from. Nonetheless, I successfully completed all three flows, readying them for the next phase: usability testing.
Flow 1: Purchase a Game on Sale
Start by logging into your account, then navigate to the "On Sale" section. Browse the games on offer, select one that interests you, and read its detailed description. Add the game to your cart, apply a promo code at checkout, and complete the purchase.
Flow 2: Explore Your Profile
Log in and head over to the "Profile" tab to dive into your stats. View your first unlocked achievement, and read your "About" section for a personal touch. Wrap up by navigating back to the home page.
Flow 3: Engage with the Community
After logging in, visit the "Community" page to interact with fellow gamers. Open a specific community group and check out the latest posts. Expand the most recent post, leave a thoughtful comment, and stay connected with the vibrant Steam community.
After completing the low-fidelity wireframes, I conducted usability testing to gather valuable feedback from users. This testing phase provided critical insights into the app’s functionality, design clarity, and areas for improvement, ensuring the project remains user-centric and refined.
Once I implemented the necessary improvements based on the feedback, I reviewed the changes to ensure they aligned with the project goals. Finally, after completing the adjustments, the app redesign was finalized, marking the conclusion of this phase of the project.
 |
| Fig 1.5 Final Working File |
 | |
|
This project was both challenging and rewarding. While the process was tiring at times, I gained a deeper understanding of Figma's tools and functionalities, which was a major takeaway for me. Seeing my design transform from initial sketches to a fully realized digital app was incredibly satisfying and made the effort feel worthwhile. However, I recognize that my workflow could have been more efficient, and managing my time better would have reduced some stress along the way. On a positive note, this experience has sparked a growing interest in app design and has motivated me to explore Figma even further in future projects.
Comments
Post a Comment