Application Design I /Project 2: UI/UX Design Document
23.9.2024 -13.10.2024 /Week 6- Week 8
Angel Tan Xin Kei / 0356117
Application Design 1 / Bachelor of Design (Hons) in Creative Media
Project 2: UI/UX Design Document
⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆
- Instructions
- Lectures
- Week 5: Card Sorting
- Week 6: Introduction To User Experience Research
- Week 7: User Persona
- Week 8: User Journey Map & Digital Card Sorting
- Week 9: Site Map and User Flow
- Week 10: MVP and Wireframe
- Project 2:UI/UX Design Document
- Feedbacks
- Reflections
⋆ ˚｡⋆୨୧˚ Instruction ˚୨୧⋆｡˚ ⋆
Module Information Booklet
Project 2 : UI/UX Document
1. Introduction
- Purpose and Scope: Explain the purpose of the document and what it covers.
- Target Audience: Identify the intended users of the app.
- Problem Statement: Describe the problem the app aims to solve.
- Weakness of the apps: User experience and user interface
2. User Research
- Survey Questionnaire and Interview: Provide detail analysis.
- User Persona: Include detailed personas representing the target users.
- User Journey Map: Provide a map outlining the steps users will take while interacting with the app.
- Research Insights: Explain how user research influenced design decisions.
3.Information Architecture:
- Card Sorting Method: Explain the card sorting process used to organize content and its outcomes.
- Information architecture map: Outline the main content and features of the app.
- User Flow Chart : Describe how content will be structured for optimal usability.
4.MVP (Minimum Viable Product) Features
- Feature List: Detail all app features.
- MVP Identification: Identify and highlight the features that will be included in the MVP for initial development.
⋆ ˚｡⋆୨୧˚ Lectures ˚୨୧⋆｡˚ ⋆
Week 5 : Card Sorting
Card sorting is a user research method used in UX design to
understand how users group and categorize information. It helps
designers create information architectures for websites, apps, and
other products by revealing how users naturally organize information,
aligning the design with users' mental models.
There are three main types: open, closed, and hybrid, moderated and
unmoderated.
Moderated:
Facilitator present, used for qualitative insights (fewer
participants).
Unmoderated:
Facilitator absent, used for quantitative data (more participants),
faster, and less expensive.
Open Card Sorting:
Participants create their own categories for a set of cards
(representing information items). No predefined categories
involved.
Closed Card Sorting:
Predefined categories are provided, and participants sort the cards
into them. This tests specific groupings and is useful when a basic
structure already exists.
Hybrid Card Sorting:
A blend of open and closed, offering predetermined categories with
the freedom for participants to create new ones. This method is
particularly useful for revealing unexpected groupings and identifying
gaps in predefined categories. Wildcard categories are included to
allow for additional user input.
Wild Card Categories
- Purpose:
- Flexibility (users organize information naturally)
- Gain insight into user mental models
- User-centric design
- Benefits
- Capturing user language
- Identifying gaps in existing structures
- Enhancing creativity in design
Mr Zeon assigned us a group activity which is card sorting a
travel planning mobile app. The goal is to create an app that is
easy to use, he even encourages us exploration of wild card
categories for more functionalities.
Existing features include itinerary building, destination guides,
flight tracking, accommodation finding, expense tracking, packing
lists, currency converters, weather forecasts, travel journals,
checklists, local events calendars, navigation, travel deals, and
social sharing.The document details the functionality of each
feature.Then, every group had different ideas when comes to
categorization and presented their ideas.
|
| Fig 1.1 Card Sorting for Traveller App |
|
|
|
Then, Mr.Zeon assigned another topic where we can choose the topic
freely and we had chosen Education App then we discussed and listed
out in Figma.
|
| Fig 1.3 Card Sorting for Education App |
|
| Fig 1.4 Card Sorting Presentation 2.0 |
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
- 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.
1.Objectives
2. Hypotheses
3.Methods
4.Conduct
5.Synthesize
Quantitative Method
- Examples : Moderated Card sorting, Web / App Analytics, Online surveys and Eye-tracking Testing
- Focus: Measuring and quantifying user behaviors. Provides numerical data.
- Data Analysis: Statistical analysis, generating percentages, averages, correlations.
- Use Cases: Measuring usability, gathering feature feedback, assessing user satisfaction, objectively comparing design options.
Qualitative Method
- Examples: Interviews, Observation, User groups, Unmoderated Card Sorting and Usability testing
- Focus: Understanding the "why" and "how" behind user behaviors and motivations. Provides rich, descriptive data.
- Data Analysis: Thematic analysis, identifying patterns, trends, and underlying reasons
- Use Cases: Exploring user needs, uncovering pain points, gaining insights into user experiences and perceptions
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.
- 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.
- 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. They ensure the design is
user-centered and addresses user needs effectively.
Qualities of Effective User Persona
- Based on Real Data
- Focus on the Present
- Context-Specific
- Avoid Biases
- Actionable Insights
- Comprehensive
User Persona influence Product Decisions
- Increased Adoption
- Increased User Retention
- Better Prioritization
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 to boost and apply the lectures
knowledge:
Week 8 User Journey Map & Digital Card Sorting
User Journey Map
- Visualises the steps to achieve a goal
- Encourages comprehensive consideration of the user experience
- Fosters empathy by illustrating the user's journey and emotions
- Identifies user pain points with the product
Creation Progress:
- Conduct user research to gather data
- Identify and understand actions in a chronological way
- Build the map as a document that synthesise the research
- Identify the steps that a user will go through when completing a task
- Capture and understand user behaviour
- 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
6 Criteria for creating User Journey:
1. Who are the personas?
2. What goals or tasks do you need to do the journey for?
3. Identify emotionally and functionally.
4. Sketch out how you imagine you’ll visualise it.
5. Write/ sketch out the steps.
6. Decide on the best software/platform to use.
Week 9 Site Map and User Flow
Site Map
- Visual presentation of site / app content organisation
- Guides user's attention
- Organise content meaningfully
User Flow
- Visualisation tool: Represents all user interactions on a site/app
- Purpose: Designs efficient task completion Task-focused: Concentrates on specific user actions within a product
- Multiple paths: Includes branches based on user choices
- Benefits: Helps designers understand interactions, identify issues, and optimise usability and efficiency
How to create a user flow for UX design:
1. Research on customer
2. List the purpose and goals
3. List the possible steps
4. Create the user flow
5. Review and update
Week 10 MVP and Wireframe
MVP is the simplest version of a product that includes just enough features to
be usable by early customers and gather feedback for future
development. It aims to test and validate the product idea with minimal
resources before investing heavily in full-scale production.
Benefit of MVP:
- User-Centered Design
- Risk Mitigation
- Cost-Efficiency
- Early Validation
Wireframe:
- two-dimensional blueprint and visual guide that represents the skeletal framework of a mobile application.
- visually illustrate different steps in the user journey as a way to identify potential pain points before the dev team starts building.
- provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.
- simply early sketches that show how the app will be used.
Why is Wireframe important?
- fast, cheap and easy to make
- it aligns people
- it structures discussions
- detailed illustration of the app’s functionality and structure
⋆ ˚｡⋆୨୧˚Project 2: UI / UX Design Document ˚୨୧⋆｡˚ ⋆
Week 5 Card Sorting for the Bites Card App
I compiled a list of all the content or features in the The Bites
Application that should be included in the card sort:
- Search Products
- Product Categories
- Personalized Recommendations
- Nutritional Information
- Grocery List
- Self-Pick Up / Delivery
- Payment Methods
- Order Tracking
- Check Out and Payment Options
- Shopping Cart
- Store Locator
- Rating and Reviews
- Loyalty Reward Points
- Redeem Points
- Promotional Offers
- Discount and coupons
- View Vouchers
- Notification and Updates
- Membership Code Scanning
- Account Settings
- Contact Us
- Transaction and History
- Help Centre
- FAQs
- Member ID
- Member Card
I utilized Miro for this task, I reorganized it with the new
functionality which have been mentioned in Task 1 before which is in-app
order & purchase. I organised the cards into the following
categories:
- Shopping and Browsing
- Cart and Checkout
- Loyalty and Rewards
- User Profile and Settings
When I completed my card sorting, I organised a new feature and
category for the EasyBook app. This new feature should address the
problem I mentioned in Project 1.
Week 6 Card Sorting and Data Collection Methodology
Mr Zeon provided feedback suggesting that I should standardize the colors rather than using a different color for each category.
1.0 Quantitative - Survey Questionnaire
Target Respondent: 50
Questionnaire (4 Section)
Section A: Demographic Profile
Section B: Habits and Grocery Behavior
Section C: User Preferences and Behavior
Section D: Introduction to the Bites Application
Section E: Rating of the Bites Application
Week 7 Improvised of Data Collection Methodology
I emailed my survey questionnaire to Mr. Zeon for review. He
pointed out areas for improvement and recommended a better
structure to refine my survey questions.He commented that I
should put like back-up questions to let the interviewee
further elaborate more on the positive or negative experience
and should ask for the users' income to better understand how
much they spend on groceries each month and have correlations
questions.
Week 8 Data Collection and Analysis of Data
After implementing Mr. Zeon's suggestions, I transferred
all the questions to a Google Form for participants to
complete. I intend to reach out to respondents not just
from Taylor but also to those who are actively booking
transportation. My goal is to survey at least 50
individuals.
A. Google Form: https://forms.gle/en3LuvZQy4JpLhor7
The Bites App Redesign Sheet :
Responses Spreadsheet
B. Interview:
I have conducted physical interview with users that have uses
The Bites Application before and gain some of actual users
insights the Bites Application.
2.0 Qualitative -Interview Questionnaire
Target Interviewee: 3
Questionnaire (2 Section)
Section A: Basic Information
Section B: In-depth Experience with The Bites
Application
Here are the
interview video.
Interviewee #1
Interviewee #2
Interviewee #3
Findings:
Reward Systems and Functionalities:
Users have suggested the introduction of a wider range
of reward-earning systems along with additional
features that enhance the online experience. There is
a strong interest in elements that promote engagement
and simplify the process of earning rewards, such as
Check-Ins and gamified options like Spin the Wheel.
Navigation and User Profile Issues:
Feedback reveals that users find the app's navigation
challenging, which leads to frustration. Additionally,
some users report difficulty navigating the user
profile section, indicating a need for simplification
and better organization. A number of users mentioned
needing to uninstall and reinstall the app multiple
times, citing that certain features may be redundant
or not particularly useful. This highlights the need
for a more streamlined experience that increases the
app's value.
Membership Card Usability:
Concerns have been expressed regarding both the visual
appeal and functionality of the membership scanning
feature. Users find it cumbersome to use and suggest
enhancements to its design to improve the overall user
experience.
Overall Interface Design:
There is a general agreement that the user interface
design requires improvement. Users are looking for
increased functionality and usability, stressing the
importance of a user-friendly design that meets their
needs.
Basic Functionality Recommendations:
Users propose the incorporation of basic features to
enhance user-friendliness of the app. This includes a
straightforward method for tracking rewards
accumulation, enabling users to see how points are
earned with each purchase.
C. User Persona
We need to develop a minimum of three user personas
grounded in all research and factual data. By utilizing
tools such as interviews and surveys to collect precise
information about our audience, we can effectively
create these personas particularly for The Bites App
mobile user.
3 User Persona:
- Alicia Chong
- Will Yap
- Cai Yi
D. User Journey Map
Week 9 Analysis of User Research and
Development Architecture Information
This week, our emphasis will be on user journey
mapping. We will proceed with our card sorting
assignment by initiating the digital card sorting
process. After setting it up, we share the link to
participants and aim to collect feedback from a
minimum of 7 participants and I have utilized
UXTweak Workshop for the digital card sorting tool
and have gathered 7 responses so far.
A. Card Sorting
Below is the standardization Grid for the Bites Card Sorting:
B. Architecture Information
After analyse all the data from digital card
sorting that I have created, I reorganize based on
my information architecture map, outline the main
content and features of the app as specifically
mentioned the vouchers action such as "view" and
apply so to provide clear and intuitive
navigations..
C. User Flow Chart in
Figma
Week 10 MVP Features
MVP of The Bites App:
- E-membership Card
- Reward and Loyalty System
The app’s reward, loyalty system, and gamification elements are
critical for encouraging engagement and retaining users. By
combining tangible incentives with fun and interactive features,
the app appeals to "The Gamification Lover" , users can earn and
redeem points with every purchase. Features such as daily
check-ins, spin-the-wheel games, and streak rewards offer
playful ways to accumulate points and vouchers, while a
centralized voucher hub ensures easy access to all active
promotions and deals.
- Online Shopping and Order Tracking
The practical needs of "The Functional Seeker." Users can
browse and purchase groceries or related items directly through
the app, with delivery tracking to monitor their order progress.
Seamless integration with in-store promotions ensures a unified
shopping experience, whether online or offline. These features
together provide a solid foundation for the app, ensuring it is
engaging, functional, and user-friendly.
Submission of UI/UX Document
Final Presentation of UI/UX Document
UI/UX Document by Angel Tan
Final Video Presentation: https://youtu.be/E4Kvy7RySfA
⋆ ˚｡⋆୨୧˚Feedback˚୨୧⋆｡˚ ⋆
Week 5
We received a briefing on the UI/UX documents and conducted
card sorting for our app.
Week 6
My approach to card sorting should involve using the same
colors to distinguish between new and initial items, rather
than organizing the cards by categories. Additionally, can
begin developing our questionnaire.
Week 7
My interview questionnaire could be more in-depth,
including follow-up questions that encourage deeper
exploration, asking "why" multiple times or adding
supplementary questions if interviewee answers are
short,
Week 8
I made progress in collecting data and analyzing each
component.
Week 9
I will analyze the research interviews by looking at the
overall user research, not just the interviews and
suggestions, and consider creating more diverse user
personas.
Week 10
It would be better to include more details in the user flow
chart regarding how users make purchases, particularly
concerning payment checkout and the potential issue of
consumers not finding available pickup time slots for
pick-up.
⋆ ˚｡⋆୨୧˚Reflection˚୨୧⋆｡˚ ⋆
Reflecting on the preparation of the UI/UX document, I can confidently say
it has been an insightful and enriching experience. From the outset,
gathering user feedback through surveys and interviews provided a solid
foundation for understanding user needs and preferences. Creating the
survey questionnaire went smoothly, and I promptly adjusted it based on
the constructive feedback from my lecturer. After collecting responses
from 57 participants, I transitioned to developing user personas and
conducting interviews, where I explored their travel habits and gathered
direct quotes. This process illuminated the users' pain points and
desires, allowing me to create more accurate personas that truly represent
the target audience.
Analyzing this diverse feedback on the The Bites App was particularly
enlightening. Each participant brought unique perspectives, and this
variance helped me identify critical areas for improvement and informed
the design direction. As I crafted the user flow chart, I found it to be a
particularly engaging and challenging task. It felt like constructing a
large mind map, demanding careful consideration of logical sequences and
user interactions.
Moreover, actively using the app offered me invaluable insights into the
customer service experience. Through this hands-on exploration, I gained a
deeper appreciation for the nuances of user interaction and the importance
of a seamless experience. Overall, preparing this UI/UX document has
strengthened my understanding of user-centered design, and I feel more
equipped to create solutions that genuinely address user needs.
Comments
Post a Comment