Application Deisgn / Project 3 / Lo-Fi App Design Prototype

06.10.2023 - 22.10.2023 (Week 06 - Week 8)

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

---

INSTRUCTION

Outline of the Low-Fidelity Prototype Task:

1. Creating Wireframes

Begin by creating screen wireframes for the app using design tools like Adobe XD or Figma. These wireframes serve as the visual blueprint of the app's interface and interactions.

2. Prototyping

Using the chosen design software, students translate these wireframes into a low-fidelity prototype. This prototype should encompass all the key screens and interactions required for the app.

3. Usability Testing

Invite guests or users to test the low-fidelity prototype. During this testing, they observe how users interact with the app, note pain points, and collect feedback on the design and functionality.

4. Documentation

Document the entire process. This includes creating a video recording of the usability testing session and a detailed analysis of the feedback received. The analysis should highlight the observed issues and propose solutions for each.

5. Iteration

Based on the feedback and analysis, make necessary adjustments to the low-fidelity prototype. This iterative process may involve refining the design, improving user flows, and addressing usability issues.

---

Project 3 / Lo-Fi App Design Prototype

In Project 3, we will be creating a low-fidelity app design prototype to translate our UX and UI design concepts into a tangible product. This phase is critical as it allows us to visualize our design ideas and user journeys, putting theory into practice. By utilizing design software such as Adobe XD or Figma, we will arrange screen wireframes, actions, and visual feedback to simulate how the app will function. Moreover, we will invite users to engage in usability testing, enabling us to observe their interactions and gather feedback. The primary purpose of this project is to iteratively refine our app design based on real user feedback and ensure it aligns with their needs, ultimately fostering a more user-centered design approach.





[ Sketches ]

Fig 1.1 & Fig 1.2 - Physical Sketches on Notebook for rough planning(Week 8, 21th Nov 2023)

After having my project 2 approved and prepared, I started browsing around for ideas and inspiration. But before having the ideas, research plays a vital role in this project as all the good designs on market are practically what people have their designs revamped based on the markets’ needs after surveying. I referenced a lot of good design through websites like Pinterest, Bechance or any website that I came across.

[ Defined Sketches ]

Fig 2 - Digital Refined Sketches (Week )

As at the first stage (rough sketching), I have all my ideas there that have different artstyle and direction. After consultation, I settled down to one and picture them all down in details on my ipad before staring in Figma. Details as in all needed section such as, onboarding, homepage, categories page (using the results of card-sorting), every process page of purchasing ticket and payment. I included the settings and profile page as well to enhance the usability of the app. 

While sketching the section of purchasing ferry ticket, I found there's some mistake I have made while designing my initial user flow. To make the design more reasonable to use, I kept making changes among the page of time slot, ticket type and order summary. Besides, I removed the feature of seat selection as Cuti-Cuti Langkawi decide which ferry to send the passengers based on the sold tickets amount through their system. This is because they try to encourage environmental protection and save the unnecessary wastes. 

Color Scheme

Fig 3.1 - Chosen Color Scheme (Week )

According to survey data, several users recommended changing the colour scheme given that they felt the vibrating pink on the present app was causing them to have unpleasant experiences. Since eager is the representation of Langkawi, I decided to use the color of eager, brown, as the theme colour for the app's primary design. In addition, the colours in the first row in Fig. 3 are selected to complement my app while ensuring that the colours can draw attention to the crucial details.

Typography

Fig 3.2 & Fig 3.3 - YuKyokasho Yoko & Lantinghei TC

Typography: The inclusion of a different typeface serves the purpose of improving visual hierarchy based on user feedback indicating difficulties with the current app's lack of clear hierarchy. While the surveillance data didn't reveal specific complaints about the font, the decision to use a sharper typeface (Lantinghei TC) aims to enhance the contrast between titles and content while keep the original-like typeface (YuKyokasho Yoko) for the content, ensuring a more user-friendly and readable interface. Choosing YuKyokasho Yoko is because I couldn't find the exact same typeface that is using in the current app.

Icons 

Fig 3.4 - Navigation Button

Considering the various navigation buttons, the decision to prioritize the right button for frequent use, the left button for category pages, and the middle buttons for onboarding aligns with user behavior patterns identified in the survey data. This approach ensures that the most commonly used features are easily accessible, enhancing user experience and streamlining navigation.

Fig 3.5 - System Bar in Light and Dark Mode

Since I had trouble finding the default system bar I was after, I decide to create my own with the ideal shape and position without making a fuss.

Navigation Icons

Fig 3.6 - Navigation Bar

After studying the survey data and decided the layout and information planning of category, I then decided to have only four buttons on my navigation bar, which are button you can always access to the homepage, button to the category page where you can find basically everything there, button to check your order and, last but not least, button to manage or customize the app and your profile. . This streamlined approach aims to simplify navigation, addressing the complexity issues highlighted in user feedback and ensuring users can efficiently access essential features of the app.







[ Lo-Fi App Design Prototype ]

Following the defined sketch I have, I then proceed my digital wireframe and started to make the prototype but only the pages that related to my MVP. Personal preferences and advice, always start with sketches, even a rough, it will save a mountain of time in your design progress.

Pages That Available for The Low-Fi User Testing: 

Onboarding Page

The Onboarding Page is included to provide users, especially those new to the app, with a clear understanding of its purpose and the benefits it offers. This section aims to set the tone for a positive user experience by introducing key features and functionalities.

Registration Page

Serving as a gateway for users, the Registration Page allows new users to establish accounts, facilitating a personalized experience. Returning users can easily access their existing profiles, ensuring a seamless and secure login process, fostering user loyalty and engagement.

Home Page

The Home Page is designed to offer users a snapshot of relevant information and quick access to essential sections, addressing the issue of overwhelming clutter on the current homepage. By featuring menu items and providing shortcuts to critical sections, users can navigate the app more efficiently.

Ticket Type Selection Page

The Ticket Type Selection Page is a result of thorough research on pricing for different age groups and user identities (Malaysian, Langkawi resident, and non-Malaysian/foreigner). This page ensures a user-friendly experience by simplifying the ticket selection process and offering clear options based on user characteristics.

Order Summary (Including a modal window for user feedback)

To enhance user experience, an Order Summary with a modal window for feedback is included. This allows users to review their orders seamlessly and share their thoughts, contributing to continuous improvement and user satisfaction.

[ User Testing Testimonies ]

I make an effort to incorporate diverse pupils considering I wish to learn about the viewpoints of people other than just design students. The needs of humans are something I want to learn about and understand in order to produce better designs in the future.

[ Revamption ]

After having a through analysis of the user testimonia, I adapted some of the suggestion and made some changes. 

Fig 4.1, 4.2 & 4.3 - Component Set of Payment Method & Redesign of Order Summary (from the middle one to the right)

The page of time selection has been redesign as well as the order summary page as illustrated in the pictures below and above. 

      

Fig 4.4 & Fig 4.5 - Initial Design of Time Selection & After Revamption

Features Available In Additional Beside MVP:

Category Page 

In response to survey data highlighting user frustration with too many buttons on the homepage, the Category Page is introduced. This section categorizes app features, providing users with a streamlined and organized approach to locate functionalities without feeling overwhelmed.

Profile Page (Through profile icon or settings button)

Serving as a centralized hub, the Profile Page empowers users to manage account settings, view order history, and access personalized recommendations. This section enhances user engagement by providing a convenient and personalized space within the app.

Order History

This section is designed to empower users by ensuring they can easily access and review their past orders, fostering a sense of control and security. By organizing orders based on product types such as ferry tickets, transportation rentals, and accommodations, users can quickly locate and track specific transactions. The chronological arrangement by dates further streamlines the process, allowing users to efficiently retrieve information about their past activities on the app. This feature adds a layer of transparency and accessibility, aligning with the project's goal of improving overall user satisfaction and usability.

[ Final Project 3 / Lo-Fi App Design Prototype ]

---

REFLECTIONS

Project 3, the Lo-Fi App Design Prototype, has involved transforming abstract ideas for UI and UX design into a working prototype. Physical drawings were first made, experimenting with different concepts and design influences from websites such as Pinterest and Behance. The iPad then displayed the digitally enhanced drawings, which provided precise information on aspects including onboarding, homepage, categories, ticket purchases, and payment procedures. Based on survey results, the colour palette and font were selected with user preferences and readability in mind. Using design software such as Figma, wireframes were created and then translated into a physical prototype for the low-fidelity prototype assembly process. A crucial step in the process was the usability testing phase, which allowed consumers to interact with the prototype, pinpoint problems, and offer comments. Through incremental refinement based on actual user experiences, the design was made to better meet the requirements and expectations of users. Changes were made as a result of user testing observations, including reworking the order summary and time selection pages. The navigation icons, typography, and colour scheme were all thoughtfully selected to improve the user experience in response to criticism about the existing app's muddy hierarchy and colour problems. User feedback has identified clutter and navigation issues, which are addressed by the addition of sections such as Order History and Category Page. The project served as a reminder of the importance of user-centric design, which makes apps more productive and enjoyable by continuously improving and adapting depending on user input. It demonstrated how design is iterative and emphasised the value of adaptability and user demands throughout the design process.

Additionally, from rough sketches to a polished low-fidelity app prototype, it was a revolutionary experience that prioritised user-centric design and incremental improvement. The lively colour palette and other user problems were addressed in the digitally improved designs, which were informed by extensive research, including survey data analysis and platform references. The navigation icons, font, and colour scheme were all selected with the goal of improving user experience. Features that were deemed most important for low-fidelity user testing were included into digital wireframes and prototype development, providing insightful feedback. The project demonstrated its response to user testimony through iterative revisions, as demonstrated by the redesign of payment method components and the order summary page. In order to promote openness and involvement, more features were added, such as the Category Page, Profile Page, and Order History. These were developed in response to user requirements. In Project 3, the aim was not only to create a prototype but also to continuously enhance the design in order to produce a satisfactory user experience for the "Cuti-Cuti Langkawi" app.