Application Design 1 - Final Project: High-Fi App Design Prototype

⭐ 23/12/2024 - 12/1/2025 (Week 13 - Week 15)

🎀 Yan Zhi Xuan | 0369425 

💜 Application Design 1  | Bachelor of Design (Hons) in Creative Media | Taylor's University 

📚 Final Project: High-Fi App Design Prototype

---

TABLE OF CONTENTS

1. Links to Projects

2. Instructions

3. Final Project

4. Feedback

5. Reflections

---

1. LINKS TO PROJECTS  ⊹ ࣪ ˖₊˚⋆˙⟡

Application Design 1 - Project 1: Mobile Application Design Proposal

Application Design 1 - Project 2: UI/UX Doc

Application Design 1 - Project 3: Lo-Fi App Design Prototype

---

2. INSTRUCTION ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 2.1 Module Information Booklet - Application Design 1.

Tasks:

Final Project – Completed Mobile Application Design Prototype

- Synthesize the knowledge gained in task 1, 2 and 3 for application in task 4. 

- Create integrate visual asset and refine the prototype into a complete working and functional product experience for a selected task.

E-Portfolio 

- Describe and reflect on 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.

- The reflective writing is part of the TGCP.

---

3. FINAL PROJECT: HIGH-FI APP DESIGN PROTOTYPE  ⊹ ࣪ ˖₊˚⋆˙⟡

Week 13 | High-Fidelity Prototype

During this week, the wireframe prototype will be enhanced based on feedback to address usability concerns and better align with user expectations. These improvements will ensure a more seamless and intuitive design foundation. Following these updates, the process will move forward to creating a high-fidelity prototype, incorporating detailed visuals, interactive features, and a cohesive design that closely resembles the final product. I also searched the Guardian website.

Observation: The Guardian website utilizes a gradient colour scheme, which I have incorporated into my redesign concept to maintain consistency. Additionally, the website prominently features orange and dark blue icons, aligning with the brand's visual identity. The subscription section, social media links, and payment options are well-highlighted, reflecting a user-friendly layout and design approach.

Fig. 3.1 Guardian Website.

User Kit of Guardian App:

Fig. 3.2 Guardian App User Kit. 

Fig. 3.3 Guardian App User Kit #1.

Fig. 3.4 Guardian App User Kit #2.

Fig. 3.5 Guardian App User Kit #3.

Fig. 3.6 Guardian App User Kit #4.

Fig. 3.7 Guardian App User Kit #5.

Guardian App Colour Codes: Link to Color Shades and Tints Finder

Fig. 3.8 Guardian App Colour Codes.

Work Progress

Initial Design Phase 

The development of the high-fidelity prototype began with refining the foundational structure established in the low-fidelity prototype. This included incorporating user feedback from usability testing to address identified areas of improvement. During this phase, key visual elements such as color schemes, typography, and detailed layouts were defined to create a polished and cohesive design. The primary objective was to balance aesthetic appeal with user-friendliness.

Fig. 3.9 Icons created by me.

I initially created the icons myself but later realized they didn’t look as appealing as I had hoped. To improve their quality, I explored Figma to find more visually interesting icons. I then saved the selected icons as SVG files, which allowed me to easily edit their colours and make further customizations directly within Figma.

Fig. 3.10 Icons on Freepik.

After incorporating pictures into the design, I came to the realization that adjustments to the layout were necessary to ensure a better fit and improved visual harmony. The addition of images highlighted certain areas where the arrangement of elements needed to be restructured to maintain a cohesive and aesthetically pleasing design while enhancing overall functionality.

Fig. 3.11 Minor Adjustments of Layout.

I conducted a series of color experiments to explore different combinations and variations that could enhance the overall appearance and appeal of the icons. By testing a variety of shades and tones, I aimed to find a harmonious color palette that not only aligned with the app’s branding but also made the icons more visually engaging and user-friendly. This process involved experimenting with contrasts, gradients, and saturation levels to ensure the final design achieved both functionality and aesthetic appeal.

Fig. 3.12 Colour Experiments #1.

Fig. 3.13 Colour Experiments #2.

Fig. 3.14 Colour Experiments #3.

Fig. 3.15 Colour Experiments #4.

Integration of Visual Elements 

Images, icons, and illustrations were integrated into the prototype to enhance visual appeal and create a more engaging user experience. Special attention was given to the icon design, ensuring they were visually consistent and intuitive. Following the addition of images, the layout was revisited and adjusted to ensure that all elements were aligned and effectively utilized the available space. This step also included testing the clarity and impact of the visual hierarchy.

Fig. 3.16 Components.

Week 14 | User Testing & Finalised High-Fidelity Prototype 

Testing and Iteration 

The prototype underwent usability testing with three participants to evaluate its functionality, user experience, and overall effectiveness. During the testing sessions, feedback was collected on layout adjustments, visual elements, and newly added functionalities. The entire process was recorded and filmed to capture user interactions and observations, providing valuable insights for improvement. Based on this feedback, further refinements were implemented, including resizing icons, reorganizing content to enhance flow, and addressing minor usability issues to ensure a more intuitive and user-friendly design.

Fig. 3.17 Low-Fidelity Prototype Usability Testing.

There are 5 scenarios:

Scenario 1: Sign In/Sign Up

Imagine you’re opening the app for the first time and need to sign in or create a new account.

• The process begins with the app loading to the redesigned landing page, where you’ll see options to “Sign In” or “Sign Up.”
• If you already have an account, click on the “Sign In” button and enter your credentials (email and password). If you’ve forgotten your password, click on “Forgot Password” to reset it.
• If you’re a new user, select “Sign Up” to create an account. Fill in the required information, such as your name, email, and password, or use the “Sign Up with Social Media” option for a quicker process.
• After completing the sign-in or sign-up process, you’ll be redirected to the home page, where you can begin exploring the app.
• This streamlined process ensures accessibility and a smooth entry into the app for both new and returning users.

Scenario 2: Product Browsing and Purchase

Imagine you’re browsing for a product and want to make a purchase.

• Start by logging into the app and navigating to the Home Page. Here, you’ll see a list of featured products and categories.
• Use the Search Bar or category filters to narrow down your options. Select a product to view more details, including price, specifications, and reviews.
• If the product supports the Virtual Try-On feature, tap on the “Try On” button to see how it looks.
• Once satisfied, click on the “Add to Cart” button. After adding all desired items, proceed to the Cart Page by clicking the cart icon.
• On the Checkout Page, review your order details and choose a payment method to complete the purchase. This intuitive process makes browsing and buying products seamless and enjoyable.

Scenario 3: Claim Voucher and Purchase

Imagine you want to claim and use a voucher for your purchase.

• Navigate to the Category Page and click on the “Limited Voucher” section. You’ll find a list of available vouchers here.
• Browse through the vouchers and click “Use Now” on the one that best suits your needs. The voucher will be added to your account.
• Proceed to browse products and add them to your cart. If you choose the minimum spend RM30 voucher, once you are going to spend RM30, it will shows you that you have claimed the voucher.
• Review the updated total price and proceed with your payment method to complete the transaction.
• This process integrates discounts effortlessly, ensuring a rewarding shopping experience.

Scenario 4: Rate the Store

Imagine you’ve visited a store and want to leave feedback about your experience.

• Navigate to the Store Locator section of the app and select the store you recently visited. Click on "Review" and click on "Add Reviews" button.
• You’ll be directed to the feedback page, where you can rate the store by selecting the appropriate number of stars.
• Add comments describing your experience and upload any photos if necessary to provide detailed feedback.
• Once finished, click on the “Submit Review” button to finalize your feedback.
• This feature encourages engagement and transparency, allowing stores to improve their services based on customer input.

Scenario 5: Account Settings

Imagine you want to check your account details or take advantage of loyalty rewards.

• Start by clicking on the Account Icon in the navigation bar, which takes you to the Account Page.
• Here, you can view and edit your account details, such as your name, email, and password.
• Explore the Loyalty Rewards Program to see your current points and available rewards. You can claim vouchers.
• Additionally, track your order history and manage notifications to stay updated on your purchases.
• The redesigned account settings ensure you have complete control over your profile and reward programs in a user-friendly layout.

I conducted usability testing for the high-fidelity prototype on Figma by engaging three participants. The testing sessions were held via Google Meet, allowing me to observe their interactions with the prototype and gather valuable feedback remotely. There 3 users to participated in the userbility testing:

1. Yin En

2. Lee Yee

3. Li Wei

Click HERE to view the Low-Fi Prototype User Testing Recordings on Figma.

Fig. 3.18 Recordings in Google Folder.

The following document is the feedback on High-fi Prototype:

Doc. 3.1 User Feedback.

Summary and Key Findings: Feedback on High-Fidelity Prototype

1. User Ratings and Overall Reception:

   • User ratings ranged from 8/10 to 9.5/10, showing a generally positive reception.
   • The high-fidelity prototype was commended for its seamless navigation, functionality, and visual design.

2. Key Strengths Identified:

   • Ease of Navigation: All users found the navigation intuitive and user-friendly.
   • Visual Design: Features such as cute icons and illustrations were well-received for adding a playful and appealing aesthetic.
   • “Get Directions” Feature: The integration with external maps for store navigation was widely appreciated for its practicality and user convenience.

3. Areas for Improvement:

   • Icon Size: Yin En recommended increasing the size of certain icons, particularly on the account page, to improve visibility and usability.
   • Colour Scheme: Li Wei expressed a personal dislike for the orange colour scheme, though she acknowledged its consistency with the brand identity.

4. User-Specific Insights:

   • Yin En: Highlighted the need to balance visual appeal with functionality, emphasizing adjustments to icon sizes for better interaction.
   • Lee Yee: Praised the prototype's polished design and seamless transitions, showcasing the importance of a professional and smooth user experience.
   • Li Wei: Suggested balancing practicality with aesthetic preferences, even when constrained by brand identity, to enhance the overall appeal.

5. Recommendations for Future Iterations:

   • Enhance Icon Visibility: Increase the size of key icons to improve usability and accessibility, especially for visually intensive pages like the account page.
   • Refine Visual Consistency: While maintaining brand identity, explore complementary colour variations to soften the aesthetic impact of the current colour scheme.
   • Highlight Practical Features: Continue to prioritize practical additions like the “Get Directions” feature, as they significantly enhance the user experience.

Further Refinement

I took the time to dive into the finer details of the design by experimenting extensively with various colour combinations and shades. This process allowed me to explore how different tones interact and contribute to the overall aesthetic and functionality of the design. By paying close attention to these small details, I was able to refine the visual elements, ensuring they align seamlessly with the app's branding while enhancing the user experience.

It’s essential to ensure that the flow of the design is smooth and intuitive, guiding users seamlessly through the app's functionalities. The layout should be well-structured, with careful attention given to the consistency of design elements across all pages. This includes maintaining uniformity in the placement and size of icons, ensuring text hierarchy is clear and visually balanced, and aligning all elements for a cohesive look.

Additionally, I focused on improving accessibility by choosing appropriate colours, optimizing contrast for readability, and ensuring the design is responsive across various devices. The alignment of buttons, spacing between elements, and the integration of interactive features were all refined to enhance usability. Every detail, from iconography to typography, was adjusted to ensure that the app feels polished and professional while remaining user-friendly and visually appealing. This comprehensive approach ensures the design meets both functional and aesthetic standards.

Fig. 3.19 Further Refinement Design Overview #1.

Fig. 3.20 Further Refinement Design Overview #2.

Fig. 3.21 Further Refinement Design Overview #3.

Fig. 3.22 Further Refinement Design Overview #4.

Fig. 3.23 Further Refinement Design Overview #5.

Fig. 3.24 Further Refinement Design Overview #6.

Fig. 3.25 Further Refinement Design Overview #7.

Fig. 3.26 Further Refinement Design Overview #8.

Fig. 3.27 Further Refinement Design Overview #9.

Fig. 3.28 Further Refinement Design Overview #10.

Fig. 3.29 Further Refinement Design Overview #11.

Summary of the Flows

Flow 1: Sign In/Sign Up 

The Sign In/Sign Up process begins with a redesigned landing page aimed at streamlining the user experience. The login process has been simplified to make it quicker and more user-friendly, ensuring users can access their accounts with minimal effort. Features such as a "Forgot Password" option and the ability to log in with social media accounts have been included to improve accessibility. 

Flow 2: Product Browsing and Purchase 

This flow focuses on the Home Page, Product Display, and Product Details. The redesign introduces a Virtual Try-On feature, allowing users to visualize products more effectively before making a purchase. The layout has been optimized to provide clear and concise information about each product, ensuring users can easily compare and select items. Filters and sorting options enhance the browsing experience, leading to a seamless product purchase journey. 

Flow 3: Claim Voucher and Purchase 

In the Category and Claim Voucher pages, a new feature has been added that allows users to claim vouchers directly within the app. Users can easily browse through available vouchers, select one that suits their needs, and apply it during the checkout process. This ensures a smooth integration of discounts and promotions into the shopping experience, encouraging more purchases. 

Flow 4: Rate the Store 

The "Give Feedback to the Store" pages have been redesigned with a focus on user engagement. A new feature has been added to allow users to provide detailed reviews about their store experience. This includes options to rate the store, leave comments, and upload photos, creating a more interactive feedback system. This feature aims to build trust and transparency between the store and its customers. 

Flow 5: Account Settings 

The Account Page and related sections have been revamped to include additional features such as a Loyalty Rewards Program and Store Credit options. These enhancements aim to improve customer retention by rewarding users for their purchases. The redesigned layout provides easy access to account details, order history, and personalized settings, ensuring a smoother and more efficient user experience.

Week 15 | Final High-Fi Prototype

Final Outcome 

Click HERE to view the Final Outcome on Figma.

Submission Links:

1. Guardian App: Final Low-Fi App Design Prototype

2. Guardian App: Final High-Fi App Design Prototype 

3. Gaudian App Redesign Prototype: Canva Slide

4. Low-Fi Prototype Navigation Demo Video: Link to watch

5. High-Fi Prototype Navigation Demo Video: Link to watch with explanation

6. Guardian App Redesign Prototype Presentation Recording: Link to watch.

Fig. 3.24 Final Outcome - High-Fidelity Prototype.

Fig. 3.25 High-Fi Prototype User Flow Overview.

Fig. 3.26 Guardian App Redesign Prototype Canva Slide.

Fig. 3.27 Guardian App Redesign Prototype Resentation Video.

Fig. 3.28 High-Fi Prototype Navigation Demo Video with Explanation.

***Remember to open 1080 HD mode to watch.

---

4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡

Week 13

Mr. Zeon advised me to include text labels alongside the navigation buttons, as not everyone may be familiar with the meanings of the design icons. Additionally, he suggested adding a "Search for Brands" search bar on the category page to enhance user accessibility and make navigation more intuitive.

Week 14

Mr. Zeon mentioned that the overall color choices are appropriate and gave approval to proceed with the current design.

---

5. REFLECTIONS ⊹ ࣪ ˖₊˚⋆˙⟡

Experience 

Working on the high-fidelity prototype provided a hands-on opportunity to delve deeper into the visual and interactive aspects of app design. This phase required a more refined focus on aesthetics, functionality, and usability. Using Figma to create the high-fidelity prototype allowed me to bring the concept to life with detailed layouts, colors, and interactive elements. It was both challenging and exciting to balance visual appeal with functionality while ensuring the design met user expectations. Conducting usability testing at this stage provided critical insights into how users interact with a more polished version of the app. 

 

Observation

I observed several key areas where improvements were necessary based on user feedback. For example, users appreciated the enhanced visuals but pointed out that some interactive elements were not as intuitive as expected. Additionally, while the overall color scheme was well-received, a few users suggested minor adjustments to improve readability and accessibility. Testing also revealed areas where the navigation could be streamlined further to improve the overall user flow. 

Finding 

Through analysis of the feedback, I discovered that the high-fidelity prototype significantly impacts how users perceive the app’s usability and aesthetic value. Small design elements, such as consistent button styles and well-placed labels, were highlighted as factors that greatly influence the user experience. Furthermore, the testing reaffirmed the importance of iterative design, as even minor adjustments based on feedback can lead to a more user-friendly and visually engaging product. Overall, this experience emphasized the value of combining user feedback with design expertise to create a well-rounded, high-quality app prototype.