Application Design I - Task 2: UI/UX Design Document
20.5.2024 - 1.7.2024 / Week 05 - Week 11
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.
Task 2: UI/UX Design Document
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
Reference:
Card Sorting: The Ultimate Guide (2024)
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.
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 |
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.
Lecture 8: Site Map and User Flow
Site Map
- Visual presentation of site / app content organisation
- Guides user's attention
- Organise content meaningfully
|
| Example of Site Map |
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
|
| User Flow Shapes |
|
| Example of User Flow |
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:
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 organise 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.
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 |
|
| 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.
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.4. 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 2.2. 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.
Google Form Link: https://forms.gle/zxtrmCESRUPv9v7h9
The total number of responses is 52. The quantitative research method
has provide a rich insights for my design decisions in redesigning PBe.
- Focus on Usability: Ensuring that the app is easy to navigate and visually appealing will be central to the redesign.
- Prioritise Layout and Consistency: The redesign will focus on creating a clean, well-organised layout with consistent design elements.
- Enhance Visual Appeal: Use a harmonious color scheme, appropriate typography, and engaging visuals.
- Improve Navigation: Streamline navigation paths, reduce the number of steps needed to perform common tasks, and make it easier for users to find what they need quickly.
- Ensure Readability: The redesign will focus on using clear, legible fonts and well-structured content layouts. This will help users easily read and understand the information presented in the app.
- Customisation Options: Include features like theme selection, adjustable font sizes, and customisable dashboards.
- Address Pain Points: Feedback on difficult navigation and inaccessible features will be considered. The redesign will aim to simplify complex processes and make all features easily accessible.
- Essential Features Integration: The redesign will ensure that the most essential features, such as Payments and Transfers, Account Management, and Account Security, are prominently featured and easily accessible.
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.
Interviewee 1: Jack
Fig 3.1. Interview with Jack
Interviewee 2: Callie
Fig 3.2. Interview with Callie
Interviewee 3: Gigi
Fig 3.3. Interview with Gigi
Interviewee 4: Eunice
Fig 3.4. Interview with Eunice
Based on their answers in the interview session, I summarised them for
easier documentation.
Fig 3.5. Key Findings of Interview
The redesign suggestions from the four interviewees are:
- Improve Navigation: Simplify the navigation structure, ensure clear labelling, and make essential features easily accessible.
- Enhance Visual Consistency: Standardise icon styles, improve overall layout, use larger fonts, and ensure good colour contrast.
- Implement Biometric Authentication: Introduce reliable Face ID and thumbprint authentication for quicker, secure access.
- Hide Notifications: Move notifications to the menu bar to reduce on-screen clutter.
- Customisation Options: Allow users to change themes, adjust font sizes, and customise their dashboard layout.
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 4.1. User Persona 1 |
|
|
|
|
|
|
User Persona 1: Amirul Rahman
Amirul went to a dinner with his friends and they shared the bill. He
wants to transfer his bill to his friend.
|
| Fig 5.1. Amirul's User Journey Map |
User Persona 2: Vanessa Low
Vanessa wants to pay for her workers' salary in her boutique.
User Persona 3: Tan Ah Meng
|
| Fig 5.2. Vanessa's User Journey Map |
Tan has retired and he monitors his transaction frequently to ensure he
has a savings every month. It's end of the week and he wants to check
his spending analysis in his bank.
F. Digital Card Sorting
|
| Fig 5.3. Tan's User Journey Map |
Referring back to
A. Card Sorting, now we need to conduct a digital card sorting activity with minimum
7 participants. I've used
Optimal Workshop
to conduct a hybrid card sorting activity.
First, I input all the features and categories into the workspace and
published it.
|
| Fig 6.1. Digital Card Sorting Activity |
After a few days, I got all the responses I need.
|
| Fig 6.2. Card Sorting Result - Standardised Grid |
A site map structures a website or app, and outlines all the main
sections and pages. It helps in organising content logically, ensuring
users can easily find information and navigate through the site
effectively.
Link:
Site Map
|
| Fig 7.1. Site Map |
A user flow is a visual representation of the steps a user takes to
complete a specific task within an app or website, helping to
understand and optimise the user experience. It maps out the
sequence of interactions and decisions, ensuring that the process is
intuitive and efficient for the user.
|
| Fig 7.2. User Flow Chart - Attempt #1 |
In my first attempt, I am quite unsure about my outcome as it doesn't
look like how a user flow chart usually look like, and it seems no
difference with the site map. I asked for Mr. Zeon's help then I found
out that my first attempt of user flow is too simplified.
Fig 7.3. Feedback from Mr. Zeon
I revised my first attempt of user flow and compared with the version
that Mr. Zeon gave.
Link: User Flow Chart
|
| Fig 7.4. Final User Flow Chart |
Lastly, we are required to list out the three most essential
features in our app.
1. Account Management
- View Account Balances: Users can check the balance of their various accounts, including savings, checking, and fixed deposits.
- View Transaction History: Users can view detailed transaction history, which helps them keep track of their finances, monitor spending, and identify any unauthorized transactions.
- Manage Fixed Deposits: Users can view details about their fixed deposits, including CD number, current balance, deposit date, maturity date, tenure, and interest rate. This feature provides essential information for managing long-term savings.
- Internal Transfers: Users can transfer money between their own accounts within the same bank. This is useful for managing funds across different types of accounts, such as moving money from a checking account to a savings account.
- External Transfers: Users can transfer money to accounts in other banks. This feature is essential for sending money to friends, family, or businesses quickly and securely.
- QR Code Payments: Users can make quick and easy payments by scanning a QR code. This feature is particularly useful for making payments at retail stores or for peer-to-peer transactions.
3. Bill Payment
- Utility Bill Payments: Users can pay their utility bills directly through the app. This includes electricity, water, gas, and other utility services, providing a convenient way to manage recurring payments.
- Credit Card Bill Payments: Users can pay their credit card bills through the app. This feature helps users avoid late fees and manage their credit card debt more effectively.
- Scheduled Payments: Users can schedule future bill payments, ensuring that they never miss a due date. This feature provides peace of mind and helps with financial planning.
Final UI/UX Design Document
Slides Link:
UI/UX Design Document
Fig 8.1. Final UI/UX Design Document
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.
Week 10
All looks good. Add an explanation of your result after the card
sorting.
Week 11
REFLECTIONS
Experience
Although conducting an interview is really time-consuming, engaging with real live users helped me understand their needs and pain points, making it clear how crucial user feedback is in the design process. This project has taught me the importance of putting attention on design document to understand what user really needs and priorities essential features that truly enhance the user experience.
Observations
Throughout the design process, I observed that users highly value simplicity and ease of use in their banking apps. Features such as quick access to account balances, easy fund transfers, and seamless bill payments are fundamental to their daily financial management.
Findings
I find out that users often request for the same thing. They emphasised the need for improved navigation, consistent design elements, and the inclusion of essential features like account management, fund transfers, and bill payments. These pointed out areas for improvement, such as reducing login complexity and enhancing app performance. These insights were instrumental in defining the Minimum Viable Product features, ensuring the app meets user expectations and provides a seamless banking experience.
FURTHER READING
Book Name: Professional Web Design: Techniques and Templates, 5th Edition
Author: Clint Eccher
Chapter 5: Gathering Requirements and Creating a Comp
10 general steps before building a site:
1. Gather and base a site on requirements
2. Create comps (=wireframe / sketch) for the client
3. Receive a decision on the chosen comp and make edits
4. Break up the comp into XHTML, graphics, and CSS
5. Test the page in most commonly used browser
6. Save components of the page as include file and test again
7. Build second- and third-level pages from the homepage template
8. Work with the client as the site is built
9. Test the entire site
10. Implement the site
# Creating a Source Directory
- Create a basic folder system that requires four directories:
- Web project name
- Images
- Sources
- Stock
 |
| Directory files using a consistent naming convention that identifies them in families. |
- Use a consistent file naming system, especially for images.
- Categorise images by type with the category first in the file name.
- Example: "bg_menu.gif" where "bg_" indicates background and "menu" specifies its use.
- This method helps quickly locate files within large folders.
- Use additional identifiers for different levels of a site.
- Example: "bg_menu_sl.gif" for a second-level menu background, where "_sl" stands for second level.
# Collecting and Documenting Stock Images
- Using stock images enhances a site's professional appearance.
- Stock photos for web design are cheaper than for print design.
- Example: A high-resolution image costing $600 for print might be $150 for web use (72 dpi).
- Prices vary from $1 to over $1,000, depending on the company and whether the image is royalty-free.
- Royalty-free images allow unlimited use in non-pornographic or non-defamatory ways.
- Check the usage agreement before purchasing as terms can vary.
- Images can be purchased individually or in bundles online.
- Individual images are cheaper but may not be reused.
- Bundles are more expensive but reduce the cost per image when multiple similar images are needed.
- Document all stock images, including details like cost, source, and photo ID, in a text file in the Sources folder.
- Use comp (watermarked) versions of images in design comps until final approval and payment are received to encourage timely client payment.
- Colour is crucial in web design for setting the look, feel, and usability of a site.
- Professional designers should understand colour theory.
- Colour guides the user’s eye and helps prioritise content.
- Various color schemes can be used:
- Black-and-white with spot colours
- Monochromatic (shades of one colour)
- Complementary (colours that complement each other)
- Split-complementary (two colours adjacent to a complementary colour)
- Designers should ask clients about the desired mood or feel of the site.
- Example: Blue conveys a secure, conservative look.
- Consider the audience’s cultural perceptions of colour.
- Example: White signifies weddings in the U.S. but funerals in China.
- Account for colour blindness, especially red/green colour blindness, in design.
- Colour Theory
- Color Harmony: A Guide to Creative Color Combinations by Hideako Chijiiwa (Rockport Publishers, 1987)
- Color Bytes: Blending the Art and Science of Color by Jean Bourges (Specialty Marketing Group, 1997)
- Colour Wheel: A good colour wheel will show the designer different combinations, such as complementary and split-complementary colours. Color wheels can generally be found in art stores and online.
# Deciding Layout
- Layout considerations include both aesthetic and technical aspects.
- Technical issues can cause future problems for designers and programmers if not addressed.
Key Layout Aspects:
1. Vertical vs Horizontal Space
- Assess content requirements before designing the site's framework.
- Wider design for content-heavy sites; narrow design for limited content to avoid a sparse look.
- Horizontal menus in headers maximize space for content-heavy sites.
- Vertical menus take up horizontal space, suitable for content-light sites.
- Adjust screen resolution if space is insufficient (e.g., 1280 × 800 offers more space than 1024 × 768).
- Use fixed content to fill excess space on content-light pages.
- Ensure vertical menus are wide enough to avoid breaking menu items into two lines.
- Shorten menu item names or widen the menu area as needed.
- Avoid reducing the body content area when widening the menu.
- Maintain consistent header height across all site pages.
- Balance header height based on content needs; avoid excessive height for content-heavy pages.
- Consider the requirements of all pages when determining header height.
- Rounded edges soften the site's look.
- Strategically place rounded corners to enhance the design.
Comments
Post a Comment