Application Design 1 Task 2: UI/UX Design Document

This week, Mr. Zeon introduced several types of card sorting and organized a group activity for us to apply these methods. Our group, consisting of four members, performed a hybrid card sorting exercise for a travel itinerary planning app's features.

Fig1.2 Card Sorting of OnDate and Presentation

After completing this task, we presented our grouping logic and rationale. Unexpectedly, each group was then asked to choose an app to conduct their own card sorting exercise. Our group decided to work on a dating app called OnDate and carried out the card sorting process using Figma.

Once everything was finalized, we presented the results of both card sorting exercises. During the presentation, we shared our reflections and insights, which helped us gain a better understanding and take valuable lessons from the entire process.

1.2 User Persona (Week 7)

Mr. Zeon provided us with an introduction to the concept of user personas, which are crucial elements in a UI/UX document. We developed user personas by first outlining basic details such as the user’s name, age, gender, occupation, hobbies, and location. Building on this foundation, we delved into more in-depth aspects, including user descriptions, characteristics, attitudes, motivations, goals, needs, pain points, scenarios, and user quotes. This comprehensive process allowed us to gain a deeper understanding of user behavior and preferences, ensuring that our designs are more aligned with the needs and expectations of our target audience.

2.1 Requirement for Task 2: UI/UX Design Document

The UI/UX design document consists of several key sections. It begins with an Introduction that outlines the document's purpose, identifies the target audience, explains the problem the app aims to solve, and highlights weaknesses in existing apps related to user experience and interface.

The User Research section provides insights from surveys and interviews, detailed user personas, user journey maps, and research findings that shaped the design approach.

The Information Architecture section describes the card sorting process, presents an information architecture map, and includes a user flow chart to ensure seamless navigation.

Lastly, the Features and MVP section lists all app features and highlights the Minimum Viable Product (MVP) for initial development. This structured document ensures a clear and user-centered design strategy.

2.2 Qualitative and Quantitative Method: Questionnaire and Interview

Fig2.1 Feedback on questionnaire from Mr.Zeon

This document contains my questionnaire and interview questions, divided into four sections:

Section 1: Demographic Information,
Section 2: Usage and Preferences,
Section 3: Introduction to the LFS Cinema App
Section 4: Design and Experience.

The questionnaire primarily consists of yes/no questions and rating-based questions, designed to be straightforward to gather large amounts of user data in a short time.

The interview questions, on the other hand, are more in-depth and are specifically targeted at users of the LFS Cinema App. The goal is to collect detailed and actionable insights directly related to the app. Follow-up questions are often asked based on the participants' responses for further clarification and exploration.

After creating the first version of the questions, feedback was received from Mr. Zeon during a review session. This feedback was used to refine the questions, resulting in the finalized version.

Fig2.2 Google Survey Form

Link: https://forms.gle/i27ngn5XHa9HZCZR9

This form was created using Google Forms and eventually received a total of 57 responses.

2.2.1 Interview

Part 1: Background Information

1. Can you tell me your name, age, occupation, and how often do you go to the cinema?

2. Which cinema booking apps have you used before? How frequently do you use the LFS Cinema App?

Part 2: User Experience

3. Can you describe your overall experience using the LFS Cinema App?

4. How would you describe the font size, color scheme, and icon clarity in the app? Are there any specific aspects of these elements that stand out to you, either positively or negatively, in terms of readability and ease of use?

5. What challenges or frustrations have you encountered while using the app?

6. Have you had any difficulties with navigation or understanding the app’s layout?

7. How would you compare the LFS Cinema App to other cinema booking apps, such as TGV or GSC?

8. Can you describe your experience with the Quick Booking System on the LFS Cinema App? How would you describe the Seat Selection and Booking process?

Part 3: Suggestions for Improvement

9. Do you think the Seat Selection and Booking feature could be improved in any way?

10. Are there any other features or functionalities that you feel are missing or could be added to enhance your experience?

11. Do you have any additional comments or final suggestions that could help us improve the app’s usability, especially in terms of booking, seat selection, and payment?

The interview questions were divided into three sections, with a total of 11 questions. I conducted interviews with three participants, all of whom were users of the LFS Cinema App. The insights gathered from their responses were analyzed and included in the UI/UX document to support the design process.

Fig2.3 Analysis of interview

2.3 User Persona

Fig2.4 User Persona

User Persona include user's basic details such as the user’s name, age, gender, occupation, hobbies, and location. Building on this foundation, we delved into more in-depth aspects, including user descriptions, characteristics, attitudes, motivations, goals, needs, pain points, scenarios, and user quotes. This comprehensive process allowed us to gain a deeper understanding of user behavior and preferences, ensuring that our designs are more aligned with the needs and expectations of our target audience.

2.4 Card Sorting

To explore the user experience and refine the information architecture of the LFS Cinema App, a hybrid card sorting method was conducted on the Optimal Workshop platform.

Participants were first asked about their familiarity with cinema apps to understand their background and preferences. They were presented with 26 cards, each representing different app features. Using a user-centered design approach, participants categorized these cards into six predefined categories based on their perception of where each feature belonged. If they felt the existing categories were insufficient, they could also create new ones to better reflect their understanding.

The main objective of this card sorting exercise was to enhance the usability of the LFS Cinema App by aligning its design with user mental models and needs. Participants' feedback was vital, as user-centered design prioritizes their preferences and experiences. By grouping features or elements into logical categories, this study sought to make the app more intuitive, user-friendly, and functional.

Hybrid card sorting was chosen because it allows for flexibility while also providing structure, making it an effective method to identify user expectations and improve the app’s navigation and usability.

Fig2.5 Card Sorting in Optimal Workshop

Link: https://3cz2b6hm.optimalworkshop.com/optimalsort/rtlxqf5g?_gl=1*mpytii*_gcl_au*NjAyNDgxNjIzLjE3MzE2ODczMDg.

Fig2.6 Card Sorting Categories and Card

I used Optimal Workshop to conduct the card sorting exercise, collecting a total of 9 results. Participants were asked to sort 26 cards into categories they deemed appropriate. The activity involved 6 predefined categories, allowing us to understand how users perceive and organize the app's content.

Fig2.7 Result and Analysis

The images above showcase the results and analysis of the card sorting exercise. They provide insights into how participants categorized the cards and the patterns that emerged, helping to refine the app's information architecture.

Fig2.8 Information Architecture Map
Figma Link: https://www.figma.com/board/5r9hlqkf8UAy4oYSCrdp5i/Application-Design?node-id=0-1

This is my information architecture map, which is based on the results of the card sorting exercise. The categorization reflects the feedback from the majority of participants, ensuring it aligns with user expectations and preferences.

Fig2.9 User Flow Chart

The next section is my user flow chart for the LFS Cinema App. It outlines the steps users will take to navigate through the app, ensuring a seamless and intuitive experience based on the information architecture.

2.5 Final Outcome of UI/UX Design Document

Finally, all the elements mentioned above are integrated into the comprehensive UI/UX design document. This includes the questionnaire and interview questions with their respective analysis, the card sorting results and insights, the information architecture map derived from user feedback, and the user flow chart for the LFS Cinema App.

Of course, the document also includes the User Journey Map, which outlines the steps users take when interacting with the app, providing a clear view of their experience. Additionally, the MVP Features section highlights the key features to be prioritized for initial development, ensuring a focused and effective approach to launching the app. Together, these components create a well-rounded and actionable document to guide the app’s design and development process.

Video Presentation Link:

Feedback

Week 6: The questionnaire and interviews gathered insights on user experiences with the LFS Cinema App. The questionnaire focused on ratings for app features and user familiarity, with improvements suggested for clarity and follow-up questions. Interviews explored navigation, feature usability, and potential enhancements, encouraging detailed feedback through prompts. Together, these methods provided valuable data to improve the app's design and user experience.

Reflections

This has been an interesting and essential process, especially as understanding user needs and challenges is crucial for a successful redesign. Addressing these issues and improving the app’s weaknesses can help retain users and prevent further attrition.

However, finding people to complete the questionnaire was challenging and time-consuming. The results were varied, but this diversity provided valuable insights into different user preferences, enabling the design to cater to a wider range of needs. Although the sample size reached the required number, it still felt relatively small. Nevertheless, the data collected was incredibly helpful for the future redesign.

Approaching people to fill out the questionnaire was a bit awkward, and I felt hesitant to bother them repeatedly. I am very grateful to those who participated and to Mr. Zeon for his patience and constructive feedback throughout the process.

Search This Blog

Lew Guo Ying (0365721)