Application Design I - Task 2: UI/UX Design Document

20.5.2024 - 3.6.2024 / Week 05 - Week 09
Tan Zhao Yi / 0363285
Application Design I / Bachelor of Design (Honours) in Creative Media
Task 2 / UI/UX Design Document


LIST

Lectures 
Lecture 1-3 refer to Task 1.
Lecture 4: Card Sorting Method
A. Card Sorting
B. Online Questionnaire and Interview Questions
C. User Research
D. User Persona
E. Findings 





INSTRUCTION



LECTURES

Lecture 4: Card Sorting Method
Card Sorting
  • A powerful method to understand how users group and categorise information.
  • Helps to determine an organisation scheme that aligns with users' mental models.
  • Informs the design of navigation menus, app structure, and content strategy.
  • Displaying users a collection of cards, each containing an information, such as the page title, menu item etc.
Types of card sorting: Open / Closed / Hybrid / Remote

1. Open Card Sorting
  • Participants create their own categories.
  • Ideal for understanding how users intuitively organise information.
  • No predefined categories involved.
Open Card Sort
2. Closed Card Sorting
  • Participant sort cards into predefined categories.
  • Useful for testing specific groupings.
  • Ideal when a basic structure is already in place.
Closed Card Sort
3. Hybrid Card Sorting
  • Blends Open and Closed Card Sort
  • Participants sort cards into provided categories but can also create new ones. 
  • Offers flexibility and deeper insights into user preferences.
Hybrid Card Sort
Wildcard Categories
4. Remote Card Sorting
  • Participants sort cards using online tools, such as Miro, UXtweak, Trello, or UserTesting.
  • Convenient for reaching a broader and more diverse audience.
  • Benefits:
    • Informs information architecture
    • Usability Enhancement
    • UCD
    • Iterative improvement
    • Enhancing findability
    • Design decision validation
    • Adapting to user diversity
    • Content prioritisation
    • Stakeholder collaboration
    • Navigation optimisation
Card Sorting using UserTesting


Pros and Cons of Card Sorting

Lecture 5: Introduction to User Experience Research
  • Understand user behaviour, needs and attitudes through various observations and feedback collection methods
  • Employ appropriate method at the right stage
Role of UX Design and Research Duties

A good UX research should:
  • Design Process: Involve end users
  • User Feedback: Listen to users
  • Approaches: Avoiding biases by considering diverse user perspectives
  • Participation: Actively engaging with personal involvement
Integrating UX Research
Integrated Process

The Value of UX Research
  • Product Benefits
    • Provides insights into the end user, their usage patterns, and core issues addressed by the product. 
    • Aids in decision-making regarding various design solutions. 
    • Direct customer feedback reveals: 
      • Preferred usage scenarios 
      • Pain points addressed by the product
      •  Opportunities for enhancing product design
  • Business Benefits
    • Expediting product development. 
    • Minimizing redesign costs. 
    • Enhancing user satisfaction.
  • User Benefits
    • Maintains reliability as it is uninfluenced by investors or company leaders.
    • Acts as a bridge between users and the company, fostering improved understanding and communication.
5 Steps of UX Research: Objectives ➡️ Hypothesis ➡️ Methods ➡️ Conducts ➡️ Synthesise

UI/UX Documents: 
- Card Sorting
- Online Survey
- Interview
- User Persona
- Information Architecture Map
- Flow Chart

User Research Methods: Quantitative VS Qualitative
  • Quantitative research uses numerical data from surveys and analytics to inform evidence-based design decisions and optimise user experiences.
  • Qualitative research in UX investigates user behaviours and motivations.
Quantitative VS Qualitative

Interview
Steps:
1. Develop a discussion guide or a list of questions to ask participants.
2. Choose a recording method (e.g., written notes, tape recorder, video).
3. Perform at least one trial run of the interview.
4. Recruit suitable participants for the interview.
5. Conduct the interview.
6. Analyse and report the findings.

Pros:
  • Users provide detailed insights into their attitudes, desires, and experiences. 
  • Allows addressing and clarifying individual concerns and misunderstandings immediately.
Cons:
  • Time-consuming
  • Requires preparation, conducting, analysis, and sometimes transcription. 
  • Limits sample size, which can be problematic. 
  • Data quality depends on the interviewer's skill.
Online Survey
  • Research tools with questions to gauge user preferences, attitudes, and opinions.
  • Commonly conducted online, available in various lengths and formats, with automatic data collection and analysis.
  • Help uncover user demographics, goals, and information needs.
  • Users may describe behaviours or preferences differently from their real actions, affecting the validity of findings.
  • Avoid leading questions, create neutral questions.
Steps:
1. Define the goals and objectives of the survey.
2. Develop the survey questions, considering gathered information on user satisfaction with the product, likes and dislikes, and suggestions for improvement.
3. Choose an online survey tool (e.g., SurveyMonkey, Qualtrics).
4. Recruit suitable participants for the interview.
5. Conduct the survey.
6. Analyse and report the findings.

Pros:
  • Conducted online, allows for rapid and inexpensive data collection. 
  • Anonymity often leads to more candid/honest responses.
Cons:
  • Ensuring a representative sample is challenging, particularly from social media or general forums. 
  • Poorly crafted or leading questions can bias responses. 
  • Lengthy surveys may discourage participation.
Usability Testing
  • Evaluates a product or service with representative users.
  • Participants complete specific actions while observers record notes.
  • Aims to detect usability issues, gather qualitative data, and assess user satisfaction.
  • Does not provide large feedback samples like questionnaires.
Steps:
1. Determine what needs testing and the reasons behind it (e.g., a new product or feature).
2. Define the target audience or desired customers.
3. Develop a list of tasks for participants to complete.
4. Recruit appropriate participants for the test.
5. Engage relevant stakeholders.
6. Implement the insights gained.
Example of tasks

Lecture 6: User Persona
Purpose of User Persona:
- Understanding user needs in crafting problem statement
- Strategising and guiding design decisions by increasing adoption, user retention, and making better prioritisation.

Qualities of Effective User Persona
  • Use real data: Incorporate both quantitative and quantitative insights
  • Focus on the present: Avoid stereotypes and assumptions
  • Context-specific: Priorities info relevance and specificity
  • Avoid Biases: Include only info directed linked to behaviour and thinking of buyer personas.
What to include in User Persona?
1. Demographic Information
  • Outline the background information 
  • Exp: age, gender, occupation, education, income etc.
2. Personality Traits
  • Characterise the user's personality
  • Exp: values, attitude, beliefs
  • What influenced their decision-making?
3. Goals and Objectives
  • What are the user's goals, both personally and professionally?
  • What are they trying to achieve?
4. Behavioural Information
  • User's behaviour, preferences, habits, and goals.
  • How do they interact with the product / service?
5. Needs and Pain Points
  • What the user lacks, and where they are vulnerable.
  • What are they trying to solve?
  • What frustrates them?
6. Scenarios and Use Cases
  • Describe specific scenarios where persona would interact with the product.
  • What task they need to accomplish?
7. User Quotes
  • Direct quotes from users and insights obtained from user research activities.
Example of User Persona
Back to top
Lecture 7: User Journey Map and Digital Card Sorting

Example of A User Journey Map
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
The Value of A User Journey
  • 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 criterias 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.





Task 2: UI/UX Design Document

After locking down our app concept and idea, we need to proceed to the UX design. We were required to produce a comprehensive UX design document which will provide better direction to redesign the app. Based on the insights gathered in task 1, we will:
  • Determine and verify the target audiences.
  • Outline the content element of the 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.
  • Plan the user interaction and interactivity (flow chart)
According to the lecture, this UI/UX design document should include: 
- Card Sorting
- Online Survey
- Interview
- User Persona
- Information Architecture Map
- Flow Chart

A. Card Sorting
We were requested to categorise the existing features in the app chosen to outline the content in the app and attain optimal information structure. I list out all the features in PBe in Miro using the sticky note, and categorise them into their relevant group. I think this is much more easier than the exercise because they are mostly categorised in the app.
Fig 1.1. Features in PBe
Referring back to the comments in App Store and Website #5 in Task 1, I came out with a new features of branch / ATM locator. Then, inspired by TnG Wallet, I added a virtual cards and cards management feature below the card services.
Fig 1.2. Virtual Visa card in TnG Wallet

However in the prototype of redesigned PBe, there will be multiple virtual cards like debit card or credit card, hence user can choose which card to use in just one page. This is similar to Apple Wallet.
Fig 1.3. Apple Wallet

Then, I came up with three idea features that are common across banking app. Firstly, the international banking including key features of international transferring, exchange rate info and multi-currency account. The international transfer simplified the process of sending money abroad, offering competitive transfer rate. Real time exchange rate info provides updated data for user and helps them to make decisions. Also, the multi-currency account enable customers to hold and manage funds in multiple currencies, while allowing seamless conversion between currencies within the account.

Secondly, integrating financial planning features into a banking app provides numerous benefits for both customers and the bank. By providing tools that cover saving, spending, investing, and planning for retirement, customers can get a clear and comprehensive view of their financial health. In the other hand, features like saving goals and budgeting tools help customers set and achieve their financial objectives, such as saving for a home, vacation, or emergency fund. Retirement planning tool also assists customers in preparing adequately for retirement, ensuring long-term financial security.

Lastly, by offering a one-stop solution for financial and insurance needs, PBe can provide a more comprehensive service, improving the overall customer experience. Insurance products often require regular management (renewals, claims, updates), leading to more frequent app usage. And, providing additional services like insurance management adds value to the customer, enhancing the customer loyalty.

Thus, the wildcards are:
1. Live Chatbot
2. ATM Locator
3. Card Services
4. International Banking
5. Financial Planning
6. Insurance Planning

Fig 1.2. Card Sorting in Miro
*Colourful Sticky Notes: Existed Features
*Black Sticky Notes: New Features

B. Online Questionnaire and Interview Questions
After listing out the desired features, we need to know what are the user really needs. First thing first, we were required to create a series of questions for both survey and interview. The participants of the survey will be generally users of all types of banking app, and the interview will just focus existing PBe users. 

After sending the draft to Mr. Zeon, he gave me his feedback and comments on my questionnaire.
Fig 2.1. Questionnaire Feedback from Mr. Zeon

Then I had my own set of questionnaire after editing according to his suggestions. I break out a few sessions for the interview questions because they serves as a guideline of my ideation on the questions.
Fig 1.3. Online Questionnaire and Interview Questions

C. User Research
I will be conducting the online survey using Google Forms to understand user preferences and priorities for the design and functionality of banking apps. We were requested to have at least 50 responses for the online survey and 3 interviewees to have both quantitative and qualitative research.


For the interview session, I managed to have different age groups of interviewee as a representative user to collect a diverse perspectives. Different age groups often have varied preferences, behaviours, and experiences. By including a range of age groups, I could gain a more comprehensive understanding of user needs and expectations across the entire user base.




D. User Persona
As the Lecture 6 mentioned, a user persona should include:
1. Demographic Information
2. Personality Traits
3. Goals and Objectives
4. Behavioural Information
5. Needs and Pain Points
6. Scenarios and Use Cases
7. User Quotes

#User Persona 1
Fig User Persona 1

#User Persona 2
Fig User Persona 2

#User Persona 3
Fig User Persona 3

E. User Journey Map

User Persona 1: Amirul Rahman
A. Define what will be happening

B. Define scenario

C. Define Goals

D. State of the process






















FEEDBACK

Week 6
Try to think about why are the new cards' feature like insurance planning, or international banking, needs to exist in a banking app. The lecture after this will explain what you need to do next because in the end the users will make the decision of the appearance of each feature. You will have more exploration then.

Week 7
Public holiday

Week 8
Questionnaire Feedback from Mr. Zeon

Week 9
For the research insight, just add a summary of your findings from the questionnaire. Same for the interview, write out the similar answers of those open-ended questions. The user personas have to refer back to the interview, such as the pain points, their needs etc. 


REFLECTIONS










FURTHER READING













Comments

Post a Comment