Application Design I - Final Prototype (High Fidelity)

on
10/11/2023 - 08/12/2023 (Week12 - Week15)
Teoh Gim Khoon (0361563)
Bachelor of Design (Hons) in Creative Media
Final Prototype (High Fidelity)



Link to others tasks
Task 1 - Project Proposal
INSTRUCTIONS


Go To Section

Final Prototype (High Fidelity)
Visual Design Concept
Research Inspiration
Fig.1:  Idea Brainstorm Figjam Board
Before diving into high fidelity prototyping, I utilized FigJam to map out the UI sections requiring enhancements or the addition of interactive elements and transitions throughout the application. This process also involved sketching out the UI components to ensure their creation within the design.

UI Interface
Fig.2:  60-30-10 Color Rules
I focused on applying color design to the UI interface. To ensure balanced aesthetics, I researched best practices for app UI color schemes. This led me to the 60-30-10 color rule, which promotes visual balance by allocating specific percentages to dominant, secondary, and accent colors.

Fig.3: UI Interface Color Design 

UI Component
Fig.4: UI Component color design
After applying color to the overall UI interface, I embarked on the meticulous task of applying the color scheme to each individual UI component. This involved carefully considering the function and purpose of each component and selecting colors that would enhance its usability and aesthetic appeal.

Application Features
Fig.5: Menu & Ordering
The Burger King app boasts a seamless menu and ordering experience that takes user on a delightful journey of culinary exploration. From browsing mouthwatering visuals to understanding the nutritional makeup of their choices, the app empowers user to make informed decisions and enjoy their Burger King experience to the fullest.

Fig.6: Order Customization
The Burger King app goes beyond simply displaying a menu. It empowers user to create their ideal meal with its customizable ordering section. This intuitive feature allows user to personalize their Burger King experience like never before.

Fig.7: Order Process & Tracking

The Burger King app goes beyond just ordering and customizing your meal. It also provides a convenient and informative order tracking feature with real-time updates available throughout the entire process. This feature aims to keep users informed and ease up the anxiety of waiting for their food.

Fig.8: Rewards System
The Burger King app doesn't just offer convenience and customization; it also rewards user loyalty with a motivating and rewarding system. Every delicious purchase user make earns their "Crowns", which can be redeemed for exciting rewards like coupons, vouchers, and even free food.
App Design Refinement
Area to Improve
Text and Font Size:
  • Consistent feedback about some sections having small text size.
  • Suggestion to increase the font size for better visibility, especially for users with potential readability issues or visual impairments.
Interface Clarity:
  • Some users recommend labeling customization pages more clearly and using progress bars during the ordering process for improved clarity.
Visual Overwhelm:
  • Feedback on feeling overwhelmed in the customization page due to excessive text and a lack of images for ingredients. Suggestion to balance text and visuals.
Refine & Improvement
Text and Font Size
Fig.9: Font size adjustment
Based on valuable user feedback gathered from the low-fidelity prototype, I implemented key improvements to the font size adjustment feature. These changes aimed to address user concerns of readability and enhance the overall user experience.

Onboarding Page

Fig.10: Onboarding page refinement
During the development process, I identified a critical issue with the interaction and transition on the onboarding page. Users were unable to navigate back to the previous page after proceeding to the second screen. This created a confusing and frustrating experience for users attempting to review or revise their choices.

To address this issue, I implemented a simple yet effective solution: adding a back button to the onboarding page. This readily accessible button allows users to easily navigate back and forth between the different screens within the onboarding flow.

Rewards Page
Fig.11: Rewards page refinement
While reviewing the rewards page, I observed that the initial coupon design lacked visual appeal and appeared unbalance with the overall aesthetic. This posed a potential user experience issue, as unappealing design elements can detract from the user's enjoyment and engagement. To address this concern, I embarked on a redesign process to transform the coupon design into a visually engaging element that enhances the user experience.

Tracking Map Customize Design
Fig.12: Map Customize Design
To further enhance the order tracking experience, I utilized Snazzy Maps, a website offering customizable map styles. This enabled me to personalize the map's color scheme to seamlessly integrate with the overall app design, providing a more unified and visually appealing user interface.

Fig.13: Final map design in app

Content Integration
Fig.14: Content Image
To elevate the app's usability and visual appeal, I propose a strategic design approach that leverages key elements from the official Burger King website. This involves not simply downloading and placing the website's menu, promotions, and coupon images within the app, but rather integrating them seamlessly into the user interface (UI) design.

Additional Design
Animation
Fig.15: BK Logo Animation Design
To elevate the visual appeal and engagement of the landing page, I implemented an animated Burger King logo using the logo vector and Figma's transition features. This animation adds a dynamic and captivating element to the user experience, drawing their attention and enhancing brand recognition.

Fig.16: BK Logo Animation

Button Functionality
Counter Button
Fig.17: Counter Btn Interaction
I create the counter button component to enable interactivity by incorporating functionalities for increasing or decreasing the order quantity, as well as adding customizable ingredients to the order.

Radio Button
Fig.18: Radio Btn Interaction
I've also designed the radio button component, allowing users to interact with it by simply selecting their preferred side and drink, as well as choosing their desired payment method.

Usability Testing
To gather valuable feedback on the usability and user experience (UX/UI) of the redesigned Burger King app, a user testing session was conducted. Utilizing Figma's prototyping tool, participants were guided through a series of tasks and then asked to respond to eight feedback questions. The insights gathered from this testing will be instrumental in further refining the app's design and enhancing the overall user experience.

Task Given
Task 1 (Registration)
Create a new account on the Burger King app. Provide necessary information such as your name, email address, and create a secure password. Once the account is created, take note of any challenges or observations during the process.

Task 2 (Order a burger - Delivery)
Navigate through the app to find your favorite burger and place an order for delivery. Pay attention to how easy it is to browse the menu, add items to your cart, and specify delivery details. Note any issues or improvements in the ordering process.

Task 3 (Customization order)
Customize a burger according to your preferences. This could include selecting toppings, adjusting portion sizes, or modifying any other customizable options available. Evaluate the intuitiveness of the customization features and report any difficulties or suggestions for improvement.

Task 4 (Place Order & Payment)
Proceed to check out and complete the payment for your order. Evaluate the payment process for clarity and ease of use. Take note of any issues encountered or any concerns related to payment information input.

Task 5 (Review Order History & Reorder)
After completing a transaction, navigate to the order history section. Review your recent order and explore options for reordering. Provide feedback on the visibility of order history, the simplicity of the reorder process, and any additional features you find useful or lacking.

User Feedback

Summary Feedback:
Users universally praised the high-fidelity prototype for its visually impactful design, delightful layout, and effective color consistency. Navigation was described as effortless and enjoyable, with well-placed buttons contributing to a smooth user experience. The integration of icons and text received positive feedback for creating a cohesive visual experience. The increased font size was recognized for improving readability and ensuring a comfortable reading experience.

The ordering process was deemed straightforward, visually engaging, and efficient. While users generally completed tasks efficiently, there were minor suggestions for improvement, including the implementation of a dark mode and enhancements to the cart visibility. Overall, the high-fidelity prototype was well-received, with users acknowledging the value of ongoing feedback for continuous refinement.
Final Project - High Fidelity Prototype
Application Video Walkthrough

App Mockup


High Fidelity Prototype

Final High Fidelity Prototype
REFLECTION

I would like to express my gratitude to my lecturer, Mr. Shamsul, and all the friends and users who actively participated in this project by providing recommendations and valuable feedback during user testing for the application design. Throughout the development of the Burger King application design, I thoroughly enjoyed the process of creating the final high-fidelity prototype and navigating various challenges along the way.

In this project, I applied color to the previously designed low-fidelity prototype and made necessary adjustments to enhance the overall user experience and UI interface design. Transitioning from the initial wireframe to the high-fidelity prototype presented me with several challenges that prompted me to think deeply and devise creative solutions. The journey from concept to execution was marked by these obstacles, contributing to a rewarding and insightful experience.

Comments

Post a Comment