Application Design/Project 2: UIUX Document
23/9/2024-18/10/2024 Week1-Week 4
Jie Xuan/ 0356515
Application Design/ Bachelor of Creative Media/Taylor's University
Project 2: UIUX Document
TABLE OF CONTENTS
1. Lectures
2. Instruction
4. Feedbacks
5. Reflections
LECTURES
Week 5
Card Sorting
Card sorting is a user research method widely employed in UX design to understand how users intuitively group and categorize information. This technique aids designers in developing effective information architectures for websites, apps, and other digital products by aligning the structure with users' mental models.
Types of Card Sorting
There are three primary types: open, closed, and hybrid, each of which can be conducted in moderated or unmoderated formats.
Moderated Card Sorting:
- Conducted with a facilitator present.
- Primarily qualitative, offering deeper insights.
- Typically involves fewer participants.
Unmoderated Card Sorting:
- Conducted without a facilitator.
- Focused on quantitative data collection.
- Accommodates more participants, is faster, and generally more cost-effective.
Open Card Sorting:
Participants sort cards (representing information items) into categories they create themselves, without any predefined structure. This method is valuable for uncovering users' natural grouping patterns and identifying organic categorizations.
Closed Card Sorting:
Participants organize cards into predefined categories. This approach is useful for validating existing structures and testing specific groupings when a foundational framework is already in place.
Hybrid Card Sorting:
This method combines elements of both open and closed card sorting. Participants are given predefined categories but also have the freedom to create new ones. Hybrid sorting is particularly effective for uncovering unexpected groupings and identifying gaps within the initial category structure.
Wildcard Categories:
Wildcard categories are included in hybrid card sorting to provide flexibility and encourage participants to contribute freely.
Purpose of Card Sorting:
- Allow users to organize information in their own way.
- Provide insights into user mental models.
- Support a user-centric design approach.
Benefits of Card Sorting:
- Capture user language and terminology.
- Identify gaps in existing categorization structures.
- Foster creativity and innovation in design.
By doing card sorting, UX designers can ensure their information architectures resonate with user expectations, improving overall usability and satisfaction.
In class, Mr. Zeon asks us to form groups of 4 people. One person in each group will be the moderator, and the others will be participants. The moderator's role is to observe the participants' performance and ask why each feature is placed in a specific category. Participants need to categorize the features and come up with new categories and features based on the given topic: a travel planning mobile app. Using card sorting, we categorized features like itinerary building, flight tracking and social sharing. This group activity helped us see how the method works in practice.
Week 6
Introduction To User Experience Research
Role of UX Design
- Helps understand users' behavior, goals, motivations, and needs
- Reveals how users currently interact with a system and identifies their pain points
- Understanding user emotions during interaction is crucial
- Ensure that the design process is grounded in user understanding, ultimately leading to more effective and user-centered designs
- Collaborating closely with the product team to steer future directions
UX Research Duties
- Developing coherent research methodologies
- Selecting and recruiting targeted end-users for research endeavors
- Conducting individual interviews with clients
- Utilizing data analysis tools to enhance consumer products
Comparison of UX Researchs
- Good : involve end-users, listen to users, avoid biases, and actively engage users.
- Bad : exclude end-users, rely solely on personal testing, miss diverse perspectives, and outsource research without personal involvement.
Five steps of UX Research :
- Objectives
- Hypotheses
- Methods
- Conduct
- Synthesize
Quantitative in UX Research
Quantitative methods, such as moderated card sorting, web/app analytics, online surveys, and eye-tracking tests, focus on measuring and quantifying user behaviors to produce numerical data. Analysis typically involves statistical techniques to generate percentages, averages, and correlations, making these methods ideal for measuring usability, gathering feature feedback, assessing user satisfaction, and objectively comparing design options.
Qualitative Methods in UX Research
Qualitative methods, including interviews, observations, user groups, unmoderated card sorting, and usability testing, aim to understand the “why” and “how” behind user behaviors and motivations. They produce rich, descriptive data analyzed thematically to uncover patterns, trends, and underlying reasons. These methods are best suited for exploring user needs, identifying pain points, and gaining deeper insights into user experiences and perceptions.
Research Methods:
Interviews:
- Method: One-on-one conversations between an interviewer and a user. Can be conducted face-to-face, over the phone, or via video. Typically last between 30 minutes to an hour.
- Analysis: Thematic analysis of the recorded data to identify patterns, trends, and key insights
- Pros: Detailed insights, allows for clarification of misunderstandings, flexible and adaptable
- Cons: Time-consuming, requires skilled interviewers, smaller sample sizes, analysis can be subjective.
User Personas:
- Method: Develop detailed profiles that include demographics, goals, motivations, behaviors, and pain points. Often includes a name, photo, and a short narrative.
- Data Collection: Data synthesis from various research methods (interviews, surveys, etc.).
- Analysis: Identify common themes and patterns in user data to create representative persona groups.
- Pros: Provides a clear and concise picture of the target user, aids in making design decisions, improves communication within the team.
- Cons: Can oversimplify users, requires robust prior research, needs regular updates to stay relevant.
Online Surveys:
- Method: Online questionnaires with a mix of question types (multiple-choice, Likert scales, open-ended questions). Data is collected and analyzed automatically.
- Data Collection: Survey software (e.g., SurveyMonkey, Qualtrics) collects and analyzes responses.
- Analysis: Statistical analysis of responses to identify patterns, trends, and correlations. Often measures response rates, averages, and percentages.
- Pros: Rapid and inexpensive data collection, large sample sizes possible, anonymity can lead to more honest responses.
- Cons: Ensuring a representative sample can be challenging, poorly crafted questions can bias responses, lengthy surveys can discourage participation, may not provide deep qualitative insights. Avoid leading questions!
Usability Testing:
- Method: Users perform specific tasks while observers note their interactions (successes and struggles). Often recorded (video or screen recordings).
- Data Collection: Observations, user feedback, recordings of interactions, and notes.
- Analysis: Identify usability issues and areas for improvement. Analyze user behavior patterns and overall satisfaction. Qualitative data (observations and feedback).
- Pros: Direct observation of user behavior, provides actionable insights, identifies usability problems early.
- Cons: Can be time-consuming and resource-intensive, smaller sample sizes, requires careful planning and execution.
Week 7
User Persona
User Persona aims to create representative profiles of target users to guide design decisions. User personas represent the needs, behaviors, and goals of a broader user group, serving as a foundation for user-focused design. Help designers understand their target audience to address real pain points and align solutions with user expectations. They ensure the design is user-centered and addresses user needs effectively.
Key Attributes of Effective User Personas:
- Demographics
- Personality traits
- Goals and motivations
- Pain points
- Scenarios
Characteristics of Strong User Persona
- Context-Specific
- Avoid Biases
- Actionable Insights
- Comprehensive
- Based on accurate, up-to-date information
Data Sources built using research methods such as:
- Interviews
- Surveys
- User observations
Benefits of Using Personas:
- Improve user retention
- Prioritize features effectively
- Ensure design decisions are user-centered
Steps:
- Data collection
- Synthesizing insights
- Creating realistic and detailed personas
After learning the effectiveness of User Persona, we were assigned a task which each of the group mates create one user persona for the previous app that we have chosen.
Week 8
User Journey Map & Digital Card Sorting
User Journey Map
User Journey Map a visual representation of the steps a user takes to achieve a specific goal. It helps teams understand the user experience, highlighting key interactions, pain points, emotions, and motivations. By mapping out the journey, designers can identify pain points and areas where users face challenges, fostering empathy and guiding improvements to create a smoother, more effective experience.
Process:
- Gather data through user research.
- Organizes user actions in order.
- Identifies gaps and prioritizes development needs.
Phases Documented:
- Awareness
- Consideration
- Decision
- Experience
- Post-Experience reflections
The Value of A User Journey
- Identify the steps that a user will go through when completing a task
- Capture and understand user behavior
- Define what the user might think or feel
- Define the flow and order of these steps
- Identify high-level content and functionality needs for completing the task
- Define what to be aware of around these steps
- Provide a means for illustrating the vision of the app
Criteria for creating User Journey:
- Who are the personas?
- What goals or tasks do you need to do the journey for?
- Identify emotionally and functionally.
- Sketch out how you imagine you’ll visualize it.
- Write/ sketch out the steps.
- Decide on the best software/platform to use.
User Journey Map can improves user experience by identifying opportunities for optimization and enhancing product usability.
Digital Card Sorting
Card Sorting can enhances usability, ensures intuitive navigation, and aligns interfaces with user expectations and needs. This is a research method where participants group content into categories, showing how they naturally organize information. This helps designers create clear navigation and user-friendly structures, improving the overall layout and accessibility of a product.
Card Sorting Tools Recommended:
- UXtweak
- Optimal Workshop
Both user journey maps and digital card sorting are important when creating a user-friendly designs, improving usability, and ensuring products effectively meet user needs and expectations.
Week 9
Site Map and User Flow
Site Map is a visual representation of how content is organized within a website or app. It provides a clear structure, guiding users’ attention and helping them navigate content in a meaningful and logical way.
User Flow is a visualization tool that maps out all possible user interactions within a site or app. It focuses on designing efficient task completion by concentrating on specific user actions and accounting for multiple paths based on user choices. User flows help designers understand how users interact with a product, identify potential issues, and optimize usability and efficiency.
Steps to Create a User Flow in UX Design:
1. Research the Customer: Understand user needs and behaviors.
2. Define Purpose and Goals: Clarify the objectives of the user journey.
3. List Possible Steps: Outline key actions users will take.
4. Create the User Flow: Map out interactions visually.
5. Review and Update: Refine the flow based on feedback and testing.
By using site maps and user flow diagrams effectively, designers can create digital experiences that are not only functional but also enjoyable for users.
Week 10
MVP and Wireframe
Week 10 is the Submission of Task 2 week. In this week Mr. Zeon also conducted a lecturer session about MVP and Wireframe.
An MVP (Minimum Viable Product) is the simplest version of a product with just enough features for early customers to use and provide feedback. Its main goal is to test and validate the product idea with minimal resources before investing in full-scale development.
The benefits of an MVP include user-centered design, risk reduction, cost-efficiency, and early validation of the product concept.
A Wireframe is a basic blueprint that shows the structure and layout of a mobile app or website. It maps out key steps in the user journey to identify potential issues before development begins. Wireframes provide a clear view of page structure, layout, information flow, user interactions, and functionality. They are essentially quick, early sketches that show how the app will work.
Wireframes are fast, affordable, and easy to create, helping teams align ideas, structure discussions, and offer a clear picture of the app’s functionality and design.
MVPs and wireframes ensure a focused, efficient, and user-friendly product development process.
INSTRUCTIONS
Instructions:
UI/UX Design Document
In Project 2, we are required to produce a comprehensive UX design document which will provide better directions to design the app after locking down the app concept and idea. After getting approval from our lecturer, Mr. Zeon for Project 1, we are now ready to proceed to UX design.
Instructions:
- Identify and confirm the target users.
- Define the app’s content and use card sorting to organize it for the best structure.
- List the app’s features and highlight the Minimum Viable Product (MVP).
- Design wireframes for the main screens.
- Plan how users will interact with the app (flowchart).
Things to Include in the Document / Requirements:
1. Introduction
- Purpose and Scope: Explain why the document is needed and what it covers.
- Target Audience: Describe who the app is for.
- Problem Statement: State the problem the app will solve.
- App Weaknesses: Discuss issues with the current user experience and interface.
2. User Research
- Research Insights: Detailed description of user research
- Survey and Interview: Provide detailed analysis of findings
- User Persona: Include profiles of target users.
- User Journey map: Show the steps users will take while using the app.
3. Information Architecture
- Card Sorting: Describe the process used to organize content and the results.
- Information Architecture Map: Show the main content and features.
- User Flow Chart: Map out how users will navigate the app.
4. MVP Features (Minimum Viable Product Features)
- App features list
- Identify the MVP that will be developed
PROJECT 2: UIUX Documents
A. PROGRESS UIUX Document
Week 5/Research Methodology
In Project 2, we need to design survey questions for mobile application redesign questionnaire. Our module lecturer, Mr. Zeon required us to employ both research methods, which are survey questionnaire as quantitative methodology and interview as qualitative methodology. Conducting a survey helps us collect helpful data and valuable insights from a wide range of respondents. This helps me study more details about the selected mobile application. Moreover, there are 3 respondents participating in the interview. The purpose of conducting an interview is to learn more about user experience. This is part of my efforts to gather more data on user preferences toward the KTMB MOBILE Application.
In this week I also do my very first draft of my card sorting. I list down they have what features first than I add on the new features and reorganize the categories. Besides that, I also delete repeating features.
Week 6/ Questionnaires
I draft my first set of questionnaire and interview questionnaire.
First version survey questionnaire
First version interview questionnaire
Week 7/ Finalize Questionnaires
I consult with Mr. Zeon. He give me some feedback on my questionnaire and my interview. I also do some correction on my questionnaire.
Final Google Form Questionnaire
Final Interview Questionnaire
Week 8&Week 9/ Collect Survey & Interview & Card Sorting& User Persona& User Journey Map
Google Survey
In this week, I transferred all the questions to a Google Form for participants to complete it. I intend to reach out to respondents to those who are actively booking transportation. My goal is to survey at least 50 individuals.
Interview
I have conducted online interview with users that have uses KTMB MOBILE Application before and gain some of actual users insights KTMB MOBILE Application.
Target Interviewee: 3
Questionnaire
- Basic Information
- Experience with KTMB MOBILE Application
Evidence 1
Evidence 2
Evidence 3
Interview Analysis
3 interviewees Common Thoughts:
1.App Usage:
All interviewees use the KTMB Mobile App primarily for booking train tickets and checking schedules.
Real-time schedule updates and QR code ticketing are considered essential features.
2. Design Evaluation:
The app's design is functional but lacks simplicity and attractiveness.
Navigation is often unclear, making it challenging to find specific features.
The color scheme (blue and yellow) is not well-received.
3. Performance and Reliability:
Common issues include slow loading times, occasional crashes, and outdated schedule information.
These problems have led to delays, missed trains, and frustration among users.
Reliability is rated low, with scores between 2 to 3 out of 5.
4. User Frustrations:
Unclear payment options make the ticket purchasing process stressful.
Lack of real-time updates on train schedules leads to wasted time and disrupted plans.
3 interviewees Common Suggestions:
1.Speed and Responsiveness:
Improve loading times and overall app speed to reduce user frustration.
2.Real-Time Updates:
Ensure train schedules and notifications are accurate and updated promptly.
3.User-Friendly Design:
Simplify the app layout for easier navigation.
Redesign the interface with a cleaner, more appealing aesthetic.
4.Enhanced Features:
Provide clearer seat selection options.
Streamline the payment process to make it more straightforward.
5.Customer Support:
Add efficient in-app customer support to resolve issues without visiting counters.
User Personas
User persona 1
User persona 2
User persona 3
User Journey Map
Card Sorting
In the card sorting section, I have design and finalize cards and categories following features in Miro to conduct this activity. The card sorting is done using UX Tweak. Mr. Zeon recommended us to use this tool to complete the card sorting. There will be minimum 7 respondents participating in card sorting activity.
Week 10/ Finalize everything& Submission of UIUX Document
Final Interview Video
Interview Section
Card Sorting Result
After I collected 7 respondents. This is the result analysis.
Information Architecture
Final Flow Chart
This is the final flow chart.
MVP Features
Notifications
- Users receive notifications about ticket discounts, promotions, or important train service alerts. These timely updates keep users informed and encourage them to take advantage of special offers, increasing app engagement.
Payment
- The app allows users to pay for tickets easily using integrated e-wallets like Touch 'n Go, credit cards, or online banking. This convenience encourages users to complete transactions within the app, enhancing engagement by making the process quick and hassle-free.
Seat Selection Options
- The app allows users to choose their seats and travel class (e.g., Gold, Platinum, etc.) This feature gives users control over their journey, making the booking process more personalized and appealing.
Final UIUX Document Submission
UIUX Document By Jie Xuan
Video Presentation
Presented By Jie Xuan
FEEDBACK
WEEK 5
Briefing on the UI/UX documents and conducted card sorting for our app.
WEEK 6
The card sorting can use colors to differentiate between new and initial items, rather than sorting the cards by categories. Additionally, we can start drafting our survey and interview questionnaire.
WEEK 7
My interview questionnaire could be more detail, including follow-up questions that encourage deeper exploration or adding supplementary questions if interviewee answers are short.
WEEK 8
ILW
WEEK 9
-
WEEK 10
It would be better to include more details in the user flow chart.
REFLECTION
Observation:
At the beginning of this journey, I felt stressed and confused by the amount of detail and structure required to create a UI/UX document. The process seemed overwhelming, and I struggled to connect all the elements together. However, by the end, I realized how valuable this knowledge is and how essential it will be for me as a future designer. This shift in perspective helped me appreciate the importance of every step in building a strong foundation for user-centered design.
Finding:
Throughout this process, I learned the importance of defining the Purpose and Scope of a document to clarify its goals. I also discovered how to identify the Target Audience, present a clear Problem Statement, and highlight App Weaknesses to address user experience challenges effectively. Conducting Surveys and Interviews allowed me to gather meaningful insights, while analyzing these findings helped me uncover valuable patterns. Building User Personas taught me to empathize with target users, and mapping out a User Journey Map provided a clear visualization of user interactions. Additionally, I gained insight into organizing content logically through Card Sorting and representing the app’s structure using an Information Architecture Map. Creating a User Flow Chart helped me understand user navigation paths, and identifying MVP (Minimum Viable Product) features enabled me to prioritize critical functionalities based on observation and analysis.
Experience:
While the process was overwhelming at times, every step contributed significantly to my growth as a designer. I now appreciate how a well-structured UI/UX document serves as a foundation for creating intuitive, user-centered designs. This experience has given me a sense of confidence in my ability to approach future design projects with clarity and purpose. Overall, this journey has been both challenging and rewarding, equipping me with skills that will be invaluable in my future design career.
Comments
Post a Comment