Application Design | Project 2 : UI/UX Design Document
21.10.2024 - 01.12.2024 Week 05 - Week 10
Tracy Angeline Tio / 0362222 / Bachelor of Design ( Honors ) in Creative Media
Application Design / Taylor's University
PROJECT 2 : UI/UX DESIGN DOCUMENT
There are 15 features were given in the activity and we need to categorize it, making it looks like an application with their own pages. We're using sticky notes to create it and place it into board. View the images for our final arrangements.
On the next steps, we also had to do one more card sorting practices using online tools like Miro. My group decided to work on Diet Tracker Application as our topic.
On the next week, we do our presentation regarding on our card sorting method results. Mr. Zeon gave us a general feedback regarding on the purpose of why it should be on these part and UI/UX should navigate user better when it comes to application.
Later after we finished the lectures, we got a group exercises activity. Our task is to create a user personas based on an application we do the card sorting on week 5. Our app was about diet tracker application and we did four user personas since our group consist of 4 members. View below for our user personas.
While User Flow is the user's path to finish a specific purpose. It includes each step, from the starting point to the endpoint.
At the end of the lectures section, we were told to started the user flow chart on this week and finished the previous part.
Mr. Zeon highlighted some key elements that would lead to a confusing part on my card sorting like for example on the search and applied job progress. Therefore, I manage again my card sorting especially the part that need to be refined. Here are the final attempt for my card sorting to be transferred on Optimal Workshop and UX Tweak.
MIRO Link : https://miro.com/app/board/uXjVLHcBHvY=/?share_link_id=60700296413
Application Design / Taylor's University
PROJECT 2 : UI/UX DESIGN DOCUMENT
TABLE OF CONTENTS
LECTURES
LECTURES 5 (WEEK 5 : Card Sorting)
During this week, Dr. Zeon lectures about Card Sorting method. Card Sorting is powerful method to understanding how user group and categorize information. It helps determine an organization scheme that aligns with users mental models.
- Card Sorting entails displaying users a collection of cards, each containing a piece of information like a page title, menu item or product category.
- There are 6 types of card sorting, such as :
- Open : Allows participants to create their own categories, revealing their mental models and preferred structures.
- Closed : Provides predefined categories, validating if users intuitively place items within them.
- Hybrid : Combines both, with existing categories but the option to add new ones.
- Moderated : Involves a facilitator guiding participants through the sorting process, allowing for real-time feedback and deeper insights.
- Unmoderated : Done independently by participants, usually online, making it efficient for larger samples but without real-time interaction or clarification.
- Remote : Conducted online, allowing participants to sort cards from any location, which makes it convenient and scalable. (Ex : using Miro, Trello, OW).
- Benefit of Card Sorting :
- Informs Information Architecture
- Usability Enhancement
- User-Centered Design
- Iterative Improvement
- Enhancing Findability
- Navigation Optimization
- Stakeholder Collaboration
- Content Prioritization
- Adapting to User Diversity
- Design Decision Validation.
- There are pros and cons on the card sorting method. Below showed on the positive and negative side on it.
Pros :
- Ease of Use and Cost-Effectiveness
- Efficiency in Gathering Data
- Direct User Input
Cons :
- Dependency on Participants
- Content-Centric Focus
- Time-Consuming Data Analysis
After we finished the lectures, we were instructed to practice using the card sorting method. In class, we were divided into group around 3-4 people and our task is about the Travel Planning Mobile App.
 |
| Fig 1.1 Group Activity Task Week 05 21/10/2024 |
 |
| Fig 1.2 Final Card Sorting Arrangements Week 05 21/10/2024 |
 |
| Fig 1.3 Group Photos Week 05 21/10/2024 |
 |
| Fig 1.4 Card Sorting on Miro Week 05 21/10/2024 |
 |
| Fig 1.5 Group Presentation Documentation Week 06 28/10/2024 |
LECTURES 6
This week, we were briefed by Mr. Zeon about upcoming task for Project 2. Before jumping to the task, our materials are about the user experience research.
User Experience Research is The process of understanding user behaviors, needs, and attitudes through various observation and feedback collection methods. Effective UX research entails employing the appropriate methods at the right stages of product development.
There are 5 steps of User Experience research :
- Objectives : what areas of knowledge require further explanation and understanding.
- Hypotheses : what assumptions do we hold about our users?.
- Methods : Considering constraints such as time and manpower, which approaches should we choose?
- Conduct : Implement the chosen methods to collect data.
- Synthesize : Address the knowledge gaps, validate or refute our assumptions about users, and identify design opportunities.
On this week (Week 6 ) Our task is to start designing a questions for survey and interview based on our proposal analysis we have from task 1.
LECTURES 7
Week 7, we were explained about User Personas. User persona is important to crafting a clear problem statement is vital for effectively addressing real user issues. It also could help understanding the needs and requirements of the user is essential in this process.
In user persona, we should include key important data as below :
- Demographic Information
- Personality Traits
- Goals and Objectives
- Behavioral Information
- Needs and Pain Points
- Scenarios and Use cases
- User Quotes
Example of User Persona provided by Lecturer :
 |
| Fig 1.6 User Persona Example Week 07 04/11/2024 |
Fig 1.7 User Personas on Diet Tracker Application Week 07 04/11/2024
By this week, we got a reminder to finalize start to find a participant for our survey and interview and create a user persona using real data (3 people).
LECTURES 8
Through our Indenpendent Learning Week, Mr. Zeon gave us a materials about User Journey Map and Digital Card Sorting. Our task regarding on this week is to create a user journey map based on our application and find 7 participant to do a digital card sorting. When creating the card sorting, Mr Zeon recommend us to use Optimal Workshop.
User Journey Map is Important for several reason :
- Provides a visual representation of the steps an individual takes to achieve a goal.
- Encourages designers and developers to consider the user's experience in a more organized and comprehensive manner.
- Fosters empathy by allowing the team to relive the user's journey in a narrative form, helping them grasp the user's emotions and frustrations.
- Identifies the pain points encountered by users when interacting with the product.
When creating a user journey map, we should identified the six criteria needed :
- Identify the persona
- Identify the goals needed / what I want to achieve
- Identify emotional and functional role
- Define the style of the journey map
- Sketch out the steps
- Do it digitally (decide the platform)
As for the card sorting, we refer to the previous materials that was given on week 5.
LECTURES 9
By this week, we were learned about the Site Map and User Flow Diagram. Site Map is a footprint showing how each page relate to the web/app's hierarchy. The function is to guides the user attention and organizes content meaningfully.
 |
| Fig 1.8 Site Map Example Provided by Lecturer Week 09 18/11/2024 |
 |
| Fig 1.9 User Flow Example From Google Week 09 18/11/2024 |
Regarding on User Flow and User Journey, we might wondering it would had the same function and similar to each others. But, both features were totally different based on it's scope, focus, components and coverage. View this images below for the comparison.
 |
| Fig 1.10 Comparison Between User Journey and User Flow Week 09 18/11/2024 |
LECTURES 10
On week 10, we were introduced about MVP (Minimum Viable Product) and Wireframe. Minimum Viable Product is a simplest version of a product that includes just enough features to be usable by early customers and gather feedback for future development.
The benefit of MVP are :
- Early Validation
- Cost Efficiency
- User Centered Design
- Risk Mitigation
Wireframe is a two dimensional blueprint and visual guide that represents the skeletal framework of a mobile application. Wireframe provide a clear overview of the page structure, layout, information architecture, user flow, functionality and intended behaviors.
The key of creating wireframe are :
- Keep it simple
- Maintain design consistency
- Information hierarchy
Two type of wireframe : Low Fidelity and High Fidelity Design prototypes.
INSTRUCTIONS
MIB BOOKLET :
PROJECT 2
UI/UX Design Document
With our app concept and idea now finalized, students are prepared to move forward with UX design. We are tasked with creating a detailed UX design document that will guide them in designing the app. By using the information collected in Task 1, we will need to complete several things.
Requirements :
- Identify and confirm the target audiences.
- Define the app’s content elements and utilize the card sorting method to establish an effective information architecture.
- List the app's features and determine the Minimum Viable Product (MVP).
- Develop wireframes for the main screens.
- Design the user interaction and interactivity through a flowchart.
Things to include in the proposal:
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 detailed 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.
---
1. Designing Survey Question
In week 6 class, Mr. Zeon told us to started on built our survey and interview question first. For the survey, we need to collect minimum of 50 responses while in the interview, we had to interview 5-6 peoples. By using google docs, I tried to think about what should I asked for user regarding on the UI and UX of the applications. I also looks from senior works as a references.
After Mr. Zeon provide the feedback on week 6, I quickly revised the question and add some suggested question.
Survey Questions : View HERE
Fig 3.1 Survey Questionnaire Week 07 04/11/2024
Later then, I moved the survey question to be designed on google forms. The pictures below show the progress when moving the question to forms.
 |
| Fig 3.2 Designing Survey Questions Week 07 04/11/2024 |
Survey Link : https://forms.gle/jn5FGcw4o62T44VY6
Once I got approvement to distributed the survey questions, I distributed it throught various platform (Whatsapp, Facebook, Instagram, Teams, Reddit, etc) starting from 13 November 2024. Below are some prove on distributed survey.
I waited around 3-4 days for the respondents to help me fill up my survey. Once it reached 51 respondents (Reached on 16th November), I began to analyze the data.
 |
| Fig 3.3 Survey Preview Week 08 11/11/2024 |
 |
| Fig 3.4 Suvey Distribution Process Week 08 13/11/2024 |
Survey Result :
 |
| Fig 3.5 Analyze the Data on Canva Week 08 16/11/2024 |
2. Designing Interview Question
lnterview question were designed at the same time like the survey question which is week 6. While create it, I had to make sure separate the information to the sequence for a better understanding for the participants when interview session.
Interview Question : View HERE.
Fig 3.6 Interview Questions Week 08 13/11/2024
Interview were conducted both physically and remote for one person. The first and second interviewee is a final year student and one of them is a part timer student who had working experience previously.
While on the third interviewee, It's a graphic designer on advertising company and also a freelancer as a side job. The interview for this person were conducted online using mix languange (Indonesian & English).
View the Interview result on this link :
 |
| Fig 3.7 Analyze Data on Interview Method Progress Week 09 24/11/2024 |
3. Creating User Persona (3)
3 user personas were created, same with people from the interview method. These 3 people had different opinions and different background as well.
User Personas :
- Priscelia Anggani
- Lee Jennsen
- Hengky Dwi Putra
 |
| Fig 3.8 User Persona 1 Week 10 25/11/2024 |
 |
| Fig 3.9 User Persona 2 Week 10 25/11/2024 |
 |
| Fig 3.10 User Persona 3 Week 10 25/11/2024 |
4. Creating User Journey Map (1)
The user journey map were created using Miro, highlighted the process of user when using Freelancer application. View this board for the details.
User Journey Map Link :
Fig 3.11 Freelancer User Journey Map Week 10 26/11/2024
5. Card Sorting (7)
While I'm waiting for the interview and survey responses, I do a card sorting method divided by 2 categories which is the current app and for the redesign app. The card sorting were done using Miro on the first step.
Mr. Zeon also suggest us to use Optimal Workshop or UX Tweak for the digital card sorting. We had to find 7 participants to help us filled the card sorting.
At first, I started by the current mobile application and list down all the features they had. Once I finished it, I move to create a new one with added features based on analysis on survey and interview.
 |
| Fig 3.12 Card Sorting on Current Application Week 10 25/11/2024 |
 |
| Fig 3.13 Card Sorting Attempt #1 Week 10 25/11/2024 |
 |
| Fig 3.14 Card Sorting Attempt #2 Week 10 25/11/2024 |
 |
| Fig 3.15 Final Attempt on Card Sorting on Freelancer Mobile App Week 10 25/11/2024 |
Fig 3.16 Card Sorting on Freelancer Mobile App Week 10 25/11/2024
Later then, I moved to the Optimal Workshop first to find my first 2 participants (Since it limited to two result only). After I got 2 responses, I analyze which card that is quite common to be removed to insert on UX Tweak. It could only insert 20 cards, so I remove 9 of my card as listed below :
- Log Out
- Languange
- Theme
- Filter and Sort
- FAQ on Job
- Membership
- Group Request
- Invite Friends
- Balance
 |
| Fig 3.17 Card Sorting Preview on Optimal Workshop Week 10 25/11/2024 |
 |
| Fig 3.18 Card Sorting Preview on UX Tweak Week 10 25/11/2024 |
OPTIMAL WORKSHOP
UX TWEAK
- Card Sorting Link : https://study.uxtweak.com/cardsort/vhtS1oLp0yVSxU4JkLWVx
- Card Sorting Result : https://app.uxtweak.com/cardsort/results/146538/overview
6. Information Architecture Map
After we analyzed the card sorting, we began to create the information architecture map using the information we collected from the card sorting activities and previous card sorting attempt.
Information Architecture Link :
Fig 3.19 Freelancer Information Architecture Map Week 10 27/11/2024
7. User Flow Chart
Once I finished the information architectures, I create the user flow chart using architecture map and card sorting analysis as the references. I used the freelancer app and tested / interact with the tools to gain a better insight for the flow ideas.
User Flow Chart Link :
Fig 3.20 Freelancer User Flow Chart Week 10 28/11/2024
FINAL OUTCOME PROJECT 2
Click HERE to view the proposal in Canva.
Fig 3.21 Final UI/UX Design Document Project 2 Week 10 29/11/2024
Youtube Link : https://www.youtube.com/watch?v=cQfzlUmx06k
Fig 3.22 Final UI/UX Design Document Presentation Project 2 Week 10 01/12/2024
FEEDBACK
Week 6
General Feedback : We need to pay attention to others presentation as well because we could learn something from them. Even if the task is same, There were a different about people perception regarding the apps on another.
Specific Feedback : For the survey and interview designed question, feedback could be shown in the file below.
Fig 4.1 Week 6 Survey and Interview Question Feedback Week 06 02/11/2024
Week 7
Specific Feedback : Once the survey and interview questions are approved, you are good to go to distributed it in order to collect data.
Week 10
Specific Feedback :
- The slides for survey and interview analysis were overall good
- On the card sorting, the invite friends section should be on the social
- Remove the list title on the manage part
- You need to figure out on how the search features would be connected to the applied job progress. You can introduces categories or filters like that, So it won't make user confused.
Final Improvement Feedback (W10) :
- Your work overall is a good effort and you can proceed to record your video presentation around 8 to 10 minutes.
REFLECTIONS
Experience
My experience with this project was exhausting. Since there are many modules that got a same timelines and deadlines, I was overwhelmed. But on the other sides, this project make me learned so much. Starting from designing survey, asked people to help my survey and even I got a change to interview an employee who got many experiences on Design and freelancer in Formally. Moreover, creating card sorting until user flow chart was a new thing for me.
Observation
I observed that this task were quite difficult rather than the first task. We did so many things and had to keep up with the timelines designed by Mr. Zeon. If we missed one week, we're gonna fall behind.
Findings
I found that design interfaces and experiences had a same ranked based on their important. Design is a first step that would determined whether user want to continue exploring and gain an experience in the application. If we mess up the design, the overall experiences user felt would be dissapointed as well.
Comments
Post a Comment