Application Deisgn / Final Project / Hi-Fi App Design Prototype

22.10.2023 - 03.12.2023 (Week 08 - Week 14)

Jacquline Lim Xin Ying / 0351304
Bachelor of Design (Honours) in Creative Media / Application Design
Final Project / Hi-Fi App Design Prototype

---

INSTRUCTION

---

Final Project / Hi-Fi App Design Prototype

In the Final Project, we'll be putting together all the knowledge I've gained from the previous tasks (Project 1, 2, and 3) to create a Hi-Fi prototype. This is the exciting part where we get to make everything visually come to life. I'll be integrating visual elements like high-quality images and refining the prototype to make it look polished and professional. It's about taking all the feedback and insights from users and incorporating them into the final design. This is where the app starts to really take shape, aligning with what users need and providing a great visual experience. We are expected to show the transformation from an idea to a fully realized and visually appealing prototype.

[ Revamption of UI Elements]

Fig 1.1 - Animation of Time Selection Button

In refining the button elements, adjustments have been made to enhance both their placement within the interface and the visual appeal of animations that activate upon user interaction. These modifications aim to create a more seamless and engaging user experience, ensuring that every click is not only functional but also visually pleasing, contributing to an overall polished design.

Fig 1.2 - Mobile Modal Design

Upon carefully perfecting the main functions, including choosing the location, the date, the type of ticket, and the time, I switched into the "Prototype" mode and combined all the properly created pages (frames). I became aware that adding warning and double confirmation modals would improve the user experience tremendously and serve as a preventative measure against unintentional misclicks that might cause problems with the ticket purchase process. Choosing a single, all-inclusive modal instead of balancing several alternatives in one has shown to be a more user-friendly method, guaranteeing that consumers remain aware of important messages without any chance of missing them. The goal of this well-considered design choice is to produce a more seamless and reliable user experience.

       

Fig 1.3 - Mobile Modal Presentation of Double Confirmation and Alerts

 Fig 1.4 - Mobile Modal of Notifications and Alerts with Colors

To elevate the user interaction, I crafted several versions of confirmation text. It's worth noting that the sizes of the modals showcased above are not final; I fine-tuned them after running the prototype to ensure a more polished and appealing presentation.

Fig 1.5 - Feedback Modal with Colors

In an effort to enhance the overall data collection process, a user-friendly feedback modal has been thoughtfully integrated into the redesign. Recognizing the pivotal nature of the ticket purchase process in this project, the addition of the modal aims to provide users with a seamless and engaging platform to share their insights and experiences. This thoughtful inclusion not only aligns with the primary focus of improving the ticket purchase journey but also emphasizes the significance of user feedback in refining and optimizing the overall user experience. To make it outstanding or stand out from other existing designs, which is why I drew an eagle, as the eagle is the representative of Langkawi, symbolizing uniqueness and capturing the spirit of the locale.

Fig 1.6 - Keyboard Slide-In on Feedback Modal

Following the insightful advice provided by my lecturer, Mr. Shamsul, I recognized the opportunity to elevate the realism of the project. In response to this suggestion, I decided to integrate a keyboard component, adding a touch of authenticity to the overall design. This not only aligns with industry standards but also contributes to a more immersive and realistic user experience. The function of keyboard will be added in the onboarding pages as well.

Fig 1.7 - Nav Bar Modification

Transitioning from fully rounded corners to a subtler half-rounded approach (corner radius of 22px) is a deliberate choice, aimed at creating a harmonious resonance with the previously designed widgets and the overarching aesthetic of the entire design.

Fig 1.8 - Modification of Purchased Ticket            

Before reaching the final iteration, I explored several versions of booking details, as depicted in Fig 1.9. I experimented with various layouts for ticket details, incorporating tourist information to enhance the overall design.

Fig 1.9 - Final Tickets Details

Once the widget size was confirmed, I proceeded to craft the other side of the ticket, elegantly displaying just the QR code and PDF. This thoughtful design not only optimizes space but also allows for the implementation of a user-friendly button, seamlessly toggling between different content views.

Fig 1.10 - Enlarged QR Code

In order to prioritize accessibility and improve user experience, a thoughtfully designed feature has been implemented—a user-friendly button that allows users to effortlessly enlarge the QR code. This addition aims to provide users with greater flexibility and convenience, ensuring that viewing and interacting with the QR code is a seamless and accommodating experience within the app.

[ Button Functionality ]

Fig 2.1 - Counter Button Interaction

As illustrated above, notice that the unclicked button maintains a subtle grey hue, but transforms into vibrant colors upon being clicked. However, when it reaches its maximum limit, it gracefully transitions into a softer greyish tone, elegantly signaling that it's no longer clickable and indicates the maximum allowable number of tickets for a single purchase.

Fig 2.2 - Radio Button Interaction

To guarantee a seamless user experience and avoid any potential confusion, I've meticulously designed a component set that ensures only one payment method can be selected at a time. This thoughtful approach not only streamlines the payment process but also adds a touch of simplicity and clarity, making the user journey more enjoyable and user-friendly.

[ Colors Arrangement ]

Fig 3.1 - Information Filling Without & With Colors

In the information filing section, I carefully considered the valuable feedback from my low-fi user testing. Following thoughtful consideration, I opted for a more user-friendly and aesthetically more pleasing look by having the column slide up instead of a sudden pop-up. Additionally, when selecting the colors for this section, I experimented with various versions, including a dark theme where the colors dynamically changed after information was filled in the column. 

You can explore these different versions and experience the visual variations yourself in the interactive interface below.

Fig 3.2 - Color Used for 

To add a touch of clarity, vibrant colors are thoughtfully employed to distinguish between different categories: transportation, activities and attractions, and accommodation. As illustrated in Fig 3.2 above, a sophisticated navy blue (#2F363D) gracefully represents 'TRANSPORTATION,' while a subtle light orange (#BB895E) elegantly signifies 'THINGS TO DO.' Completing the palette, a rich burgundy (#764244) warmly identifies 'ACCOMMODATION.'

Fig 3.3 - Final Tickets Details with Colors

The elegant hue of navy blue was meticulously selected for this widget, gracefully nestled within the 'transportation' section. Within this segment, users can effortlessly discover all the pertinent details they seek, from downloading the PDF file to seamlessly sharing it with utmost convenience.

Fig 3.4 - Time Selection Button with Colors

Despite the constraints of the free Figma account, I creatively employed colors and sizing to amplify the clarity of the selected time slot, bringing a vibrant and visually engaging aspect to the user experience.

[ Hi-Fidelity Prototype User-Testing ]

Keen on ensuring the accuracy of issue resolutions, I've retained all the questions from the low-fidelity user testing in the high-fidelity testing phase. Additionally, I've extended invitations to two participants from the low-fidelity test to join the high-fidelity testing session. This approach aims to ensure that the concerns they previously highlighted have been effectively addressed and that their experience with the improved design aligns with their expectations.




High-Fidelity User-Testing Summary:

In the high-fidelity usability test of the Cuti-Cuti Langkawi application, users engaged in tasks centered around ferry ticket purchasing, accessibility verification, and exploration of additional features. Overall, the feedback from diverse participants was largely positive. Users commended the app's design for capturing the essence of Langkawi through a vibrant color scheme and a visually captivating layout. Navigation through the app was described as seamless, with clear directions and intuitive icons. While some participants suggested minor adjustments in font size for improved readability, the overall usability and user-friendliness were well-received, earning ratings of 8/10 and 9/10. Users appreciated specific features such as animations during ticket selection and confirmation. Valuable feedback included suggestions for homepage icon additions and increased font size for certain sections. Notably, the app's design was considered user-friendly even by an international user, with a perfect 10/10 rating. The participants' experiences highlight the successful implementation of design improvements, resulting in a positive and enjoyable user interface.

Final Project / Hi-Fidelity Application Redesign Prototype

[ Figma / Hi-Fi Prototype]

[ Walkthrough Video / Application Presentation ]

[ Figma / Hi-Fi Prototype_Task Showcase]

---

REFLECTIONS

Throughout this final project, spanning from Week 8 to Week 14, I've embarked on a transformative journey in refining the Cuti-Cuti Langkawi application, transitioning from a conceptual idea to a fully realized Hi-Fi prototype. The process involved meticulous redesigns, thoughtful adjustments, and integration of valuable feedback obtained from low-fidelity user testing.

The journey began with a keen focus on refining UI elements, where considerations for the placement of buttons and the addition of animations aimed at enhancing user engagement. The incorporation of warning and double confirmation modals served as a preventive measure against unintentional misclicks during the ticket purchase process, contributing to a more user-friendly and reliable experience.

The strategic modification of navigation bar corners and the elegant redesign of the purchased ticket details demonstrated an attention to detail and a commitment to creating a harmonious visual experience. The enlargement feature for QR codes, coupled with the integration of a keyboard component for realism, added layers of accessibility and immersion to the design.

Button functionalities were meticulously crafted to provide clear visual cues, ensuring users' understanding of clickable and non-clickable states. The color arrangement, influenced by feedback from low-fidelity testing, added vibrancy to information filling and category distinctions, contributing to a more aesthetically pleasing look.

In the Hi-Fi prototype, the culmination of these design refinements was subjected to high-fidelity user testing. The positive feedback, particularly the commendation of the app's visual appeal, seamless navigation, and engaging features, was a testament to the success of the redesign efforts. The inclusion of international users in the testing pool further highlighted the application's universal user-friendliness.

As I reflect on this project, I am proud of the evolution from the initial sketches to the refined Hi-Fi prototype. The iterative design process, driven by user feedback and industry standards, has not only enhanced the visual aesthetics but also elevated the overall user experience. The creative solutions, such as the feedback modal with an eagle illustration and the thoughtful addition of a keyboard, showcase a commitment to user-centered design.

This project has not only honed my technical skills in UI/UX design but also deepened my understanding of the iterative nature of the design process. The balance between aesthetics and functionality, coupled with the integration of user feedback, has been a key takeaway. As I move forward, I carry with me the valuable lessons learned in creating user-centric, visually appealing designs that prioritize accessibility and engagement.