Application Design 1 - Project 02: UI/UX Design Document
APPLICATION DESIGN DST 60504
WEEK 05 - WEEK 09 (21.10.2024 - 11.11.2024)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Advanced Interactive Design / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 1 - Project 02: Interaction Design Planning and Prototype
1. LECTURES AND CLASS ACTIVITY
Week 5 // Card Sorting
According to the MIB and our lecturer, Mr Zeon, Project 02 focuses more on
analysis. The information architecture map represents how users think,
the user journey map depicts what motivates users to download and use the app,
the user flow chart illustrates how users interact with the app, and the MVP
feature encompasses the minimum set of features required to attract
early-adopter customers and validate a product idea early in the development
cycle. After the lecture, all groups were required to present their
card-sorting results in class.
Card sorting is a research method where participants group labeled cards based
on their own criteria. Types include open, closed, hybrid, remote, moderated,
and unmoderated. Mr. Zeon instructed us to form groups of 3-4 people, with one
person as the moderator to observe and question the participants'
categorization. We were tasked with identifying characteristics and creating
new categories and features for a travel planning mobile app.
I collaborated with Zhi Qing and Zhi Xuan. This is our group's completed work
on the card-sorting activity:
Click HERE to access the presentation slides of Card Sorting in Canva.
Figure 1.1 Group Photo for Class Activity: Card Sorting
Week 6 // User Experience Research
Last week, my group presented the results of a card-sorting activity in
class. Mr Zeon discussed user experience research, various research
methods, and how to conduct user research. He also summarized the previous
week's card-sorting activity. This week's task is to create a set of online
and interview questionnaires. The user-testing plan must include interviews
with 6 participants, and the survey must have 50 respondents.
Week 7 // UI/UX Design Document
Mr Zeon has prepared the lecture slides and supplementary learning
materials for us. We have a responsibility to finalise the questionnaire
questions (survey and interview), and commence the interviews, distribute
the online survey and begin developing at least three user personas.
A user persona is a profile that reflects a specific segment of your target
audience. User personas are created from real-life data and reflect the
desires and needs of your target audience. User personas are crucial because
they help you make informed product decisions and empathize with user
experiences and wants.
I constructed three personas with Zhi Qing and Zhi Xuan. Each person was in
charge of one user persona. The following is my group's completed work:
Canva Link: Click HERE
Week 8 // Independent Learning Week
This week is ILW, we have no class. But, we still need to study the
learning materials sent by Mr Zeon in our WhatsApp group.
Week 9 // User Journey Map and Digital Card Sorting
During this week, each group presented their 3 user personas that had been
done by Week 07 in the class (Class Activity).
Week 10 // Site Map and User Flow
The remaining componenets of Project 2 which are the Information
Architecture Mapand the User Flow.
2. INSTRUCTION
Module Information Booklet (MIB)
Module Information Booklet (21/10/2024)
To-Do List:
-
Students are required to work on their visual design and start
planning their website's interactive design elements and
features.
-
Unlike traditional static websites, interactive design with
animations requires a plan that includes not only the layout
visuals but also the animation examples or references.
-
Students can create their own animation or user-reference
animation to showcase the intended concept.
Submission requirements:
-
Walkthrough Video presenting the plan and showing the
animation examples and/or references.
-
E-portfolio should include online posts reflecting on your
studies, with links to any resources used in creating your
plan, such as Figma or Miro.
Module Information Booklet (21/10/2024)
To-Do List:
- Students are required to work on their visual design and start planning their website's interactive design elements and features.
- Unlike traditional static websites, interactive design with animations requires a plan that includes not only the layout visuals but also the animation examples or references.
- Students can create their own animation or user-reference animation to showcase the intended concept.
Submission requirements:
- Walkthrough Video presenting the plan and showing the animation examples and/or references.
- E-portfolio should include online posts reflecting on your studies, with links to any resources used in creating your plan, such as Figma or Miro.
3. PROJECT 02: INTERACTION DESIGN PLANNING AND PROTOTYPE
Required contents that should be included in the 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.
- 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 Features
- Feature List: Detail all app features.
- MVP Identification: Identify and highlight the features that will be
included in the MVP for initial development.
Week 6 // Card Sorting for the Chosen App
Card sorting is a method of research where participants are requested to
organize different types of information or content. This technique is most
effective when there are clear, information-focused inquiries.
Card Sorting for the PADINI App
First, for a better organisation and a smoother card sorting process, I listed
all the features in the PADINI app.
Figure 3.1 Original Features of PADINI app
Then, I started to consider what should be made changes, based on the last
assignment.
Figure 3.2 Adjustment Consideration of PADINI app
After that, I started to add and delete some features and recategorize the
features again.
Figure 3.3 Recategorize of Padini App categories and features (1st
Attempt)
Changes after Feedback session:
Figure 3.4 Recategorize of the Padini App categories and features
(2nd Attempt)
Click
HERE
to access to the MIRO board.
Week 7 // Refined Card Sorting & Questionnaire Design
After receiving Mr Zeon's feedback during Week 7, I have moved some features
into the suggested category and refined the card sorting, made the whole thing
more concise.
Changes after Feedback session:
.jpg)
Figure 3.5 PADINI App Card Sorting (3rd Attempt)
After showing to Mr Zeon, he said that the card sorting are still have the
room for improvement. I should minimize and combine same features together,
remain the main features.
Changes after Feedback session:
Figure 3.6 Finalised Card Sorting (Last Attempt)
Questionnaire Design for the PADINI App
As a requirement of the project, we need to conduct
Online Survey and Interview at the same time to
collect data. More detailed information are shown below the image:
Figure 3.7 Data Collection Methodology
The following is the first draft of the Questionnaire Design Document:
Figure 3.8 Questionnaire Design - 1st Attempt
After receiving feedback from Mr Zeon, I then made some changes to both Survey
and Interview Questions. The following document attach below is the
second and finalized document of the Questionnaire Design
Document:
Changes after Feedback session:
Figure 3.9 Questionnaire Design - 2md Attempt (Finalized)
Click
HERE
to access Google Form.
Week 8 // Finalised Card Sorting & App Research
During this week, I started to distribute online survey via WhatsApp and
Social Media (Instagram) and started to conduct interview with my friends.
Figure 3.10 Screenshots of Distribution Process via Social Media
(Instagram)
Requirement:
1. Online Survey (Quantitative Method)
- Target respondents: 50
2. Interview (Qualitative Method)
- Target respondents: 5 > 3
I have collected a total 54 responses with the survey form and also
interviewed 3 people.
đ Click
HERE
to access the Survey Responses in Google Sheets.
đ Click
HERE
to access the Interview Responses in Google Docs.
đ Click
HERE
to access the Survey and Interview Provement (Screenshots and Audio Recording)
Figure 3.11 Google Form
Week 9 // Analysis of Collected Data & Presentation Preparation
During this week, I started to analyse the collected data.
Analyse Collected Data
Figure 3.12 Summary of Collected Data (Secion B of Survey
Question)
Figure 3.13 Summary of Collected Data (Section C of Survey
Question)
Figure 3.14 Summary of Collected Data (Section D of Survey
Question)
Figure 3.15 Summary of Collected Data (Interview Question)
After finnish analysing the collected data, I then start to prepare the
presentation slides. As of this week, I still left the section below
haven't complete yet.
Things to do:
Things to do:
1. User Persona
2. User Journey Map
3. Research Insights
4. Card Sorting Method
5. Information Architecture Map
6. User Flow Chart
7. MVP Features
User Persona
The user personas ought to be based on research and actual data. After finnish
gathered exact information about my user through interviews. I then
constructed these user personas.
Figure 3.16 User Persona 1 - Alyssa
Figure 3.17 User Persona 2 - WanQi
Figure 3.18 User Persona 3 - Chai
User Journey Map
After finnished the user personas, I then started the
User Journey Map via MIRO. A user journey map visually depicts all the
steps a user takes while engaging with a product.
Click
HERE
to view the User Journey Map in MIRO.
Figure 3.19 User Journey Map of PADINI app
Research Insight
The following figure shows how user research influenced design decisions:
Figure 3.20 User Research Insights
Card Sorting Method
After finnish constructing the User Journey Map and Research Insights, I then
used UXtweak to conduct the Guardian app card sorting activity. The
detail informations were attached at below:
Figure 3.21 Card Sorting Activity of PADINI app
đ Click
HERE
to access to Card Sorting Activity via UXtweak.
Figure 3.22 6 Categories and 20 Features of PADINI app
I have collected 7 respondents for the card-sorting activity. The following is
the collected data:
Figure 3.23 Card Sorting Results Analysis 01
.png)
Figure 3.24 Card Sorting Results Analysis 02
Information Architecture Map
After that, I started to construct the
Information Architecture Map for the PADINI app. Information
architecture refers to the framework and organization you employ to categorize
and label content on your website, application, or product.
Figure 3.25 Information Architecture Map of PADINI app
User Flow Chart
Then is User Flow Chart, I have used MIRO to conduct it. The attached below is
my first attempt of User Flow Chart.
Figure 3.26 User Flow Chart (1st Attempt)
After receiving feedback from Mr Zeon via email, he said that my User Flow
Chart (1st Attempt) had did wrong, and I need to redo a new one.
Changes after Feedback session:
Figure 3.27 User Flow Chart (2nd Attempt)
đ Click
HERE
to access to User Flow Chart in MIRO.
Figure 3.28 Miro Board - User Flow Chart
MVP Features
Lastly was MVP Features, I have figured out
3 Minimum Viable Product Features of the PADINI app:
1. Product Browsing by Categories
2. Product Search Functionality
3. Product Details Page
Figure 3.29 MVP Features
Week 10 // Presentation slides of Padini App's UI/UX Document
During this week, we need to record a maximum 8 to 10 minute presentation
video to submit together with the presentation slides.
Presentation Recording Video
Video 01 Recorded Presentation Video for Project 02
Final Submission of Presentation Slide
đ Click HERE to view Presentation Slide in Canva.
đ Click
HERE to view
Presentation Recording Video in YouTube.
4. FEEDBACK
Week 05
General Feedback:
-
Our group did the card-sorting activity results with the
slide was a good idea.
- Our group did the card-sorting activity results with the slide was a good idea.
Week 07
Specific Feedback:
-
Some parts of my questionnaire survey should made some
changes to ensure that the questions were important and specific to
the application's problems.
-
For card sorting, it is better start with the app original features
before deciding on how to add and remove them.
- Some parts of my questionnaire survey should made some changes to ensure that the questions were important and specific to the application's problems.
- For card sorting, it is better start with the app original features before deciding on how to add and remove them.
Week 09
Specific Feedback:
-
The User Flow Chart is not meaning by include all the
features of the app.
Figure 3.30 Feedback from Mr Zeon on Week 09 about User
Flow Chart
- The User Flow Chart is not meaning by include all the features of the app.
Figure 3.30 Feedback from Mr Zeon on Week 09 about User
Flow Chart
5. REFLECTION
5.1 Experience
This project was challenging. It was an excellent chance to challenge
my creativity and problem-solving abilities while remaining dedicated to
creating something useful and significant.
5.2 Observation
While working on this project, I felt very very stres and often stuck when
the schedule wasn't work that smooth. Some of the features in the app were
hard to determined, it leads me to frustration many times.
5.3 Finding
By analysing the collected result from interviews and survey questions
really helped me see the app's design from their user perspective, which was
very important to making meaningful redesign process during upcomming
assignment.
QUICK LINK
Project
Project 03: Lo-Fi App Design Prototype
Final Project: High Fidelity App Design Prototype
Project 03: Lo-Fi App Design Prototype
Final Project: High Fidelity App Design Prototype
Google Drive Link: Click HERE
