Application Design 1 - Project 2: UI/UX Design Document
⭐ 21/10/2024 - 18/11/2024 (Week 5 - Week 9)
🎀 Yan Zhi Xuan | 0369425
💜 Application Design 1 | Bachelor of Design (Hons) in Creative Media | Taylor's University
📚 Project 2: UI/UX Design Document
TABLE OF CONTENTS
Week 5: Card Sorting
In class, Mr. Zeon said Project 2 is more about analysis. What we learned
today is information architecture map is about how the users think, the user
journey map is about what motivates the users to download and use the app,
the user flow chart is about how the users use the app, the MVP feature is
about what is the product with enough features to attract early-adopter
customers and validate a product idea early in the product development
cycle. After the lecture, all groups needed to present card-sorting results
in class.
Week 6: User Experience Research
My group presented last week's card-sorting result in class. Mr. Zeon told us
about user experience research and different research methods and how to
perform user research. He also concluded last week's card-sorting activity.
This week's task is to construct a collection of online and interview
questionnaires. The user-testing plan must interview 6 interviewees and the
survey must have 50 participants.
Week 7: UI/UX Design Document
Mr Zeon. has prepared the lecture slides and supplementary learning materials
for us. We have a duty to finalise the questionnaire questions (survey and
interview), start the interviews, distribute the online survey and start
developing at least three user personas.
Week 8: Study Week
This week we have no class. We need to study the materials which were
sent by Mr. Zeon in WhatsApp.
Week 9: User Journey Map and Digital Card Sorting
Each group presented the three user personas that had been done by Week 7 in
the class. (class activity).
During this week, we learned about the User Journey Map. User Journey Maps are UX visualisation documents that highlight the steps a user takes to achieve a goal. Personas are formed using data acquired from user and stakeholder interviews. As a result of these actions, we can determine the most crucial functionality that an audience needs.
Week 10: Site Map and User Flow
The two remaining aspects of Project 2 will be covered in this week's lecture:
the Information Architecture Map and the User Flow. Information architecture framework we can use to lay out the content of an app or website. User flow describes the steps involved for a user to complete a certain task. It lays out what needs to happen for a user to get from a starting point to a defined finish line.
2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡
Fig. 2.1 Module Information Booklet - Application Design 1.
Tasks:
- Lock down App concept and idea, proceed to UX design.
- Produce a comprehensive UX design document which will provide better
directions to design the app.
- Based on the information gathered in task 1, students will:
- Determine and verify their target audiences.
- Outline the content element of their app, and exercise card sorting method to achieve optimum information architecture.
- Listing the app features and identifying the application Minimum Viable Product (MVP).
- Create wireframes for main screens The Design School at Taylor’s University
- Plan the user interaction and interactivity (Flow chart)
3. CLASS ACTIVITIES ⊹ ࣪ ˖₊˚⋆˙⟡
Week 5 | Class Activity 1 (Card Sorting)
Card sorting is a research method in which study
participants place individually labelled cards into
groups according to criteria that make the most sense
to them. Types of card sorting: Open, Closed, Hybrid,
Remote, Moderated and Unmoderated. Mr. Zeon instructs
us to form groups of 3 - 4 persons. One person in each
group will serve as the moderator, while the others
will participate. The moderator needs to observe the
participants' performance and question why each
feature is assigned to a given category. Participants
must identify the characteristics and create new
categories and features depending on the specified
topic, a travel planning mobile app.
Fig. 3.1 Group Photo. (Week 5, 20/10/24).
I worked with Zhi Qing and Tze Wei. The following is
my group's report on the card-sorting activity:
Fig. 3.2 Application Design (Week 05) - Group Activity. (Week 5,
20/10/24).
Week 7 | Class Activity 2 (User
Persona)
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.
Empathise with user experiences and
wants.
I constructed three personas with
Zhi Qing and Tze Wei. Each person
was in charge of one user persona
The following is my group's
report:
Fig. 3.3 User Persona - Class
Activity. (Week 7, 11/11/24)
4. PROJECT 2: UI/UX DESIGN DOCUMENT ⊹ ࣪ ˖₊˚⋆˙⟡
The following are the required contents that should be included in the document:
Fig. 4.1 Requirements of the
Contents. (Week 6, 28/10/24)
Week 6 | Card Sorting for the Chosen App
Card sorting is a research approach in which consumers are asked to classify various pieces of information or content. It works best when we have precise, information-related questions.
Card Sorting for the Guardian App
I listed the features in the Guardian app and
categorised them into a few categories.
6 Categories:
1. Search and Shopping
2. Checkout and Billing
3. Customer Support & Assistance
4. Account Management
5. Alerts and Notifications
6. Deals and Rewards
Click HERE to view the Card Sorting via Figma.
Fig. 4.2 Guardian App Card Sorting (Figma). (Week 6, 29/10/24)
Fig. 4.3 Guardian App Card Sorting (First Attempt). (Week 6, 29/10/24)
Fig. 4.4 Guardian App's Original Features. (Week 6, 30/10/24)
The following is the second attempt to sort the features. I have added, deleted and edited some features or categories. I also included a short description or explanation in the image attached below:
Fig. 4.5 Guardian App Card Sorting (Second Attempt). (Week 6, 30/10/24)
Week 7 | Refined Card Sorting & Questionnaire Design
After receiving the lecturer's feedback, I have
moved the mentioned features into the suggested
category. Regarding the Shipping Information, I
still believe it belongs under Profile Settings
because the checkout and billing sections already
include shipping and billing addresses. The Shipping
Information I am referring to is more about default
shipping settings, which I think falls under address
management, similar to an address book, and is
therefore included in Profile Settings.
Fig. 4.6 Guardian App Card Sorting (Last Attempt). (Week 7, 5/11/24)
Questionnaire Design for the Guardian App
I did user research with online survey and interview. The details are included in the image attached below:
Fig. 4.7 Data Collection Methodology. (Week 7, 5/11/24)
The following is the first draft the of questionnaire design document:
Fig. 4.8 Questionnaire Design - Draft 1.
(Week 7, 5/11/24)
After getting feedback, I made some changes to the questions. The following is the second draft the of questionnaire design document:
Fig. 4.9 Questionnaire Design - Draft 2.
(Week 7, 6/11/24)
Week 8 | Finalised Card Sorting & App Research
During this week, I finalised the card sorting and started doing app research via survey and interview.
Fig. 4.10 Finalised Card Sorting. (Week 8, 15/11/24)
Online Survey
Target Respondents: 50
Google Forms: link
Title: Guardian App Research Survey
Section 1: User Background & Demographics
Section 2: Usage and Preferences (Guardian & Other Company Apps)
Section 3: Guardian App Research - Feature Preferences, Usability, and Design Feedback
Section 4: Overall Experience and Suggestions
Interview Questionnaire
Target Respondents: 5
Title: Guardian App User Interview
Section 1: User Background and App Usage
Section 2: Guardian App Experience, Usability, and Improvement Suggestions
Click HERE to view the finalised questionnaire design questions.
Fig. 4.11 Final Questionnaire Design.
(Week 8, 15/11/24)
I distributed the online survey form on Instagram and WhatsApp. I collected 54 responses with the survey form and also interviewed 5 people.
Guardian App Research Survey Responses (Google Sheets): Link
Guardian App Interview Responses (Google Docs): Link
Click HERE to view the Interview Recordings.
Fig. 4.12 Screenshots of Distribution Process. (Week 8)
Click HERE to view the Google Form.
Fig. 4.13 Survey Google Form. (Week 8, 17/11/24)
Week 9 | Analysis of Collected Data &
Presentation Preparation
The user personas should be founded on research and
actual data. After gathering precise information
about my audience through interviews and surveys, I
constructed these user personas.
Fig. 4.14 User Persona 1. (Week 9, 22/11/24)
Fig. 4.15 User Persona 2. (Week 9, 22/11/24)
Fig. 4.16 User Persona 3. (Week 9, 22/11/24)
After conducting the user personas, I constructed a user journey map via MIRO. A user journey map is a visual representation of all the actions a user performs when interacting with a product.
Click HERE to view the User Journey Map via MIRO.
Fig. 4.17 User Journey Map of Guardian App. (Week 9, 22/11/24)
The following are the research insights into how user research influenced design decisions:
Fig. 4.18 User Research Insights. (Week 9, 24/11/24)
After constructing the user journey map. I used the UXtweak to conduct the Guardian app card sorting activity. The details are included in the image attached below:
Fig. 4.19 Card Sorting Activity of Guardian App. (Week 9, 23/11/24)
Click HERE to view the Card Sorting Activity via UXtweak.
Fig. 4.20 6 Categories & 20 Features. (Week 9, 23/11/24)
I collected 9 respondents for the card-sorting activity. The following is the collected data:
Fig. 4.21 Card Sorting Results Analysis. (Week 9, 24/11/24)
The following is the analysis of the results:
Fig. 4.22 Card Sorting Results Analysis. (Week 9, 24/11/24)
After conducting the card sorting activity, I constructed the information architecture map for the Guyardian app. Information architecture is the system and structure you use to organize and label content on your website, app or product.
Fig. 4.23 Information Architecture Map. (Week 9, 24/11/24)
1. Product Search and Discovery
2. Streamlined Checkout Process
3. User Profile and Order History
Fig. 4.24 MVP Feature1. (Week 9, 24/11/24)
Fig. 4.25 MVP Feature 2. (Week 9, 24/11/24)
Fig. 4.26 MVP Feature 3. (Week 9, 24/11/24)
By doing the work upfront to create great information architecture we can create great user flow. The following is the user flow chart of the Guardian app:
Click HERE to view the User Flow Chart via Figma.
Fig. 4.27 User Flow Chart. (Week 9, 24/11/24)
Week 10 | Presentation of Guardian App's UI/UX
Document
During this week, we were instructed to record a 10-minute presentation.
Contents in the slides:
1.0 Introduction
1.1 Purpose and Scope: Explain the purpose of
the document and what it covers.
1.2 Target Audience: Identify the intended
users of the app.
1.3 Problem Statement: Describe the problem
the app aims to solve.
1.4 Weakness of the app: User experience and
user interface.
2.0 User Research
2.1 Survey Questionnaire and Interview: Provide detailed analysis.
2.2 User Persona: Include detailed personas representing the target users.
2.3 User Journey Map: Provide a map outlining the steps users will take while interacting with the app.
2.4 Research Insights: Explain how user research influenced design decisions.
3.0 Information Architecture
3.1 Card Sorting Method: Explain the card sorting process used to organize content and its outcomes.
3.2 Information Architecture Map: Outline the main content and features of the app.
3.3 User Flow Chart: Describe how content will be structured for optimal usability.
4.0 MVP (Minimum Viable Product) Features
4.1 Feature List: Detail all app features.
4.2 MVP Identification: Identify and highlight the features that will be included in the MVP for initial development.
Presentation Recording Video: YouTube link
Click HERE to view the Guardian App UI/UX Document.
Fig. 4.28 Guardian UIUX Doc. (Week 10, 29/11/2024)
5. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡
Week 5
Mr. Zeon said we did the card-sorting activity results with
the slide was a good idea. We needed to pay attention to other
groups' presentations for more insights into Project 2.
Week 6
Mr. Zeon said that the card-sorting activity
results with the slide were a good idea. We needed
to pay attention.
Week 7
Zeon mentioned that some parts of my questionnaire survey should ensure that the features being asked about are actually present in similar apps before asking users. Additionally, the survey questions can be reduced and made more specific to better understand the problems users have encountered and their feelings. For the card-sorting section, it's important to first identify the features that the app originally has before deciding how to improve or reorganize them.
Week 8
I emailed Mr. Zeon during this week and he constructed a
detailed feedback in the document:
link to the document. The feedback highlights areas for improvement in the
app's user experience, including resolving technical issues
like unexpected logouts and cart emptying. It emphasizes the
need for a more seamless and intuitive interface, better
functionality, and enhanced overall reliability to improve
user satisfaction.
Week 9
No feedback was given.
Week 10
Mr. Zeon said the overall effort is commendable. For the presentation, it's important to focus on key insights that will influence upcoming design decisions, given the 10-minute time constraint. In user flows involving linear processes, adding an "End" node will help clarify the conclusion of the process. Additionally, the flowchart must be revised to include the missing arrows, as highlighted in the screenshot.
6. REFLECTIONS ⊹ ࣪ ˖₊˚⋆˙⟡
Experience
Working on this app design prototype was both challenging and rewarding. It gave me a chance to step into the shoes of the users and think deeply about what would make their experience smoother and more enjoyable. From sketching out the initial ideas to refining them into a functional prototype, I learned how small details can make a big difference. It was also a great opportunity to test my creativity and problem-solving skills while staying focused on making something practical and meaningful.
Observation
While working on the prototype, I noticed that users often got stuck when the navigation wasn’t straightforward. Some features were hard to find, and the design didn’t always guide them naturally to the next step. It became clear that even small inconsistencies could lead to frustration, which highlighted the need for a simpler, more intuitive design.
Finding
I discovered that by simplifying the layout and making navigation more user-friendly, the app became much easier to use. Clear labels, consistent design elements, and a focus on accessibility had a big impact on the overall experience. Listening to user feedback really helped me see the design from their perspective, which was key to making meaningful improvements.
Comments
Post a Comment