Pasiar: Tourism App UI Project

What is Pasiar App ?

Pasiar is a digital tourism platform aimed at simplifying the exploration and reservation process for both domestic and international travelers looking to tour cities. Through the Pasiar app, travelers can effortlessly discover intriguing destinations within the city, make reservations, and immerse themselves in the richness of local culture.

UI Design Process

Login / signup page, The design of the login panel adheres to the standard pattern found in mobile applications, requiring users to input their username and password before accessing the system, with a clear Call to Action (CTA) for login[1] . Additionally, it offers the convenience of logging in via Google  and a signup option for new users . The registration process collects essential information—full name, username, email, password, and confirmation—along with a human verification step [2]. This design aligns with usability heuristics, particularly Nielsen’s usability principles[3], by providing a straightforward and familiar login process, reducing cognitive load for users. By integrating Google login, it offers a quicker access option for returning users, while the concise registration form gathers necessary data, prioritizing simplicity and security without overwhelming users with unnecessary information fields. The inclusion of human verification helps mitigate potential bot intrusions, enhancing system security while maintaining a user-friendly experience.

home page, The designed home interface strategically incorporates several key elements to enhance user experience. Featuring a user avatar and notification button ensures personalized interaction and alerts [4], fostering a sense of connection and engagement within the app. The inclusion of a search bar facilitates easy access to specific content, aligning with Hick’s Law [5]  by minimizing the effort required for users to find what they’re looking for. [6] , allowing users to easily resume their recent engagements. The recommended places and promotional cards cater to user interests, applying the principle of content personalization [7] and increasing user engagement. Additionally, presenting nearby destinations in a list format utilizes the Gestalt principle of proximity [8], organizing information in a clear and easily scannable manner, enhancing usability. Overall, this design approach integrates key elements of user personalization [4], ease of navigation [9] , promoting a more engaging and user-centric experience within the app’s home interface.

Detail and Booking, The two-stage design of “Details” and “Booking” serves to provide users with a comprehensive experience when exploring and booking a tourist destination. The initial “Details” stage offers a holistic view of the destination, showcasing photos, descriptions, location shortcuts, ratings, available amenities, and entry prices per person. This aligns with the principles of information scent [10] and progressive disclosure [11], allowing users to absorb essential details gradually without overwhelming them. Moving to the “Booking” phase, users can smoothly transition from exploration to action by specifying booking details such as date, number of visitors, selecting discounts or promotions, choosing a payment method, and viewing the total payment before finalizing with a clear Call to Action (CTA). This two-tier approach amalgamates Norman’s concept of affordances [12] by clearly indicating actionable steps while catering to both exploration and transactional needs of users, ensuring a seamless and informed booking process for a delightful user journey.

References

[1] “Flow Cytometry Panel Design: The Basics - ID.” Accessed: Dec. 29, 2023. [Online]. Available: https://www.thermofisher.com/id/en/home/references/newsletters-and-journals/bioprobes-journal-of-cell-biology-applications/bioprobes-71/bioprobes-71-flow-cytometry-panel-design.html

[2] D. Wadden et al., “SciFact-Open: Towards open-domain scientific claim verification.” arXiv, Oct. 25, 2022. doi: 10.48550/arXiv.2210.13777.

[3] N. Bevan, “Usability,” in Encyclopedia of Database Systems, L. LIU and M. T. ÖZSU, Eds., Boston, MA: Springer US, 2009, pp. 3247–3251. doi: 10.1007/978-0-387-39940-9_441.

[4] A. Lin, Z. Zhu, J. Wang, and J. Caverlee, “Enhancing User Personalization in Conversational Recommenders.” arXiv, Feb. 13, 2023. doi: 10.48550/arXiv.2302.06656.

[5] “Hick’s law,” Oxford Reference. Accessed: Dec. 29, 2023. [Online]. Available: https://www.oxfordreference.com/display/10.1093/oi/authority.20110803095935267

[6] E. Tulving and M. J. Watkins, “Continuity between Recall and Recognition,” Am. J. Psychol., vol. 86, no. 4, pp. 739–748, 1973, doi: 10.2307/1422081.

[7] A. Bielozorov, M. Bezbradica, and M. Helfert, “The Role of User Emotions for Content Personalization in e-Commerce: Literature Review,” in HCI in Business, Government and Organizations. eCommerce and Consumer Behavior, F. F.-H. Nah and K. Siau, Eds., in Lecture Notes in Computer Science. Cham: Springer International Publishing, 2019, pp. 177–193. doi: 10.1007/978-3-030-22335-9_12.

[8] L. Izakson, Y. Zeevi, and D. J. Levy, “Attraction to similar options: The Gestalt law of proximity is related to the attraction effect,” PLoS ONE, vol. 15, no. 10, 2020, doi: 10.1371/journal.pone.0240937.

[9] “Navigation | Definition, History, Measurements, & Facts | Britannica.” Accessed: Dec. 29, 2023. [Online]. Available: https://www.britannica.com/technology/navigation-technology

[10] “Information scent - credibility and gaze interactions: an eye-tracking analysis in information behaviour. in SearchWorks articles.” Accessed: Dec. 29, 2023. [Online]. Available: https://searchworks.stanford.edu/articles/lxh__122106419

[11] “What is Progressive Disclosure? — updated 2023,” The Interaction Design Foundation. Accessed: Dec. 29, 2023. [Online]. Available: https://www.interaction-design.org/literature/topics/progressive-disclosure

[12] J. McGrenere and W. Ho, “Affordances: Clarifying and Evolving a Concept,” 2000.

More by Andreuw Lengkong

View profile