Application Design - Project2: UI/UX design document
21.10.2024 - 25.11.2024(week5 - week10)
Name: Itani Karen / Student ID: 0377243 / Course: Bachelor of Design in Creative Media
Application Design
Project 2 - UI/UX design document
.jpg)
LECTURES
-Week 5/ Card Sorting Method
In this week, Mr. Zeon briefed project2 at first. Also, we did card sorting activities to discuss and consider the content strategy, and learned types of card sorting. There 4 types of card sorting: open, closed, hybrid and remote. In this time, we did the hybrid card sorting which sorts cards in groups and add provide another categories. After this activity, we did a short presentation and shared our contents.
First task
We were told to divide groups from 3-4 people, and wrote down the features of Travel planning mobile App on the stick'n notes, then we started sorting. In our group, we divided the existing features into 5 categories at first. Furthermore, we discussed another features and add new categories and features.
(Our card sorting: physical)Cards with a star mark in the upper right corner are original cards.
(Team photo)
(Our card sorting: physical)
Cards with a star mark in the upper right corner are original cards.
Second task
After doing task 1, Mr. Zeon added a new challenge for us. We chose one type of app which different from task 1 and did card sorting again, but in this time we conducted it online using Miro. We chose pet donation app "Pet Hero", and divide functions into 8 categories.
Here is our card sorting of Pet Hero.
(task 2: e-card sorting)
In the last of the class we did presentation and share our result of card sorting and individual feedback of this activities. As for my own feedback, I felt difficulty to find commonalities, because at first, we intuitively separated cards with similar functions. However, we discussed why are cards classified into that category a lot and we did this activity successfully.
(Presentation)
-Week 6/ Introduction To User Experience Research
We learned about the two methodologies of UX research in particular, quantitative and qualitative, and Mr, Zeon outlined about project 2, UI/UX Design Document. Then, we started to prepare both Online Questionnaire and Interview Questionnaire.
-Week 7/ User Persona
In this week, we learned about user persona which is a rich description of a user, and the purpose making user persona is understanding user needs in crafting problem statements and aid in strategizing intelligent design decisions. Then we told creating 3 User persona by week 9 which are based on interviews and surveys.
Before we get started making user persona individually, we created another 3 user
persona in group using a app that we used card sorting in week5.
-Week 8/ User Journey Map and Digital card sorting
Week 8 was independent learning week, so we didn't have physical class, but Mr.Zeon provided us with a material for self-learning, which include digital card sorting and user journey mapping.
User journey map provides a visual representation of user's action, touchpoint, goals, user feeling and pain points until they achieve a goal, and it encourages designers and developers to consider the user's experience in a more organized and comprehensive manner.
Also, Mr.Zeon attached some materials to conduct digital card sorting such as UXtewak and Optional workshop.
-Week 9/ Site Map & User Flow Diagram
In week9, we were briefed site map and user flow. Site Map is a footprint showing how each page relate to the web/app's hierarchy, and it guides the user's attention and organize content meaningfully. User flow is the user's path to finish a specific purpose and a visual representations of all interactions a user has on specific site/app.
-Week 10/ MVP and Wireframe
In this week, we were told to finalize Design document, E-portfolio and video presentation. In the lecture, we learned about MVP features(Minimum Viable Product feature), which refer to the simplest set of features in a product that help define key areas for gathering feedback to guide future development. Also, we were briefed Wireframe which we'll do in project3. Wireframe is rough design to provide a clear overview of the page structure, layout, information architecture, user flow, functionality, and intended behaviors.
INSTRUCTIONS
Project2 - UI/UX Design Document
-Week 5/ Card sorting of my app
First, I wrote down the functions on the cards, then l sorted these into 7. Also, I named each group Making plans, Managing information & Navigation, Managing digital tickets, User profile & Support, Merchandise, Food, and Memory. After doing that, I considered some of new features and wrote down those idea on the deeper blue cards.
(first card sorting)
(add original features)
-Week 6/ Making Questionnaire and Interview Questions
I got feedback of my card sorting, and I was indicated some items were mistakenly color and remain deleted features by using different color, so I revised some card's color and categories. Then, I lined up the original card sorting and the card sorting that I came up with, and added an explanation of what each color represents. Also, divided the Making plans section into Payment and Making plans, and moved some cards again.
Here is final outcome of individual card sorting.
Research questions draft
First, I decided to divide the questions into 4 sections: .When creating questions I was careful to avoid leading questions and to choose appropriate response format, either a scale or a comment, based on the content.
-Week 7
Mr. Zeon provided me with feedback.
- Change the word "UI/UX", "Navigation" and "Feedback" into "User interface " or some other words and add descriptions of these words so that it can be understood even by people who are not familiar with UI/UX
- In sectionD, I need to attach some screen shots to clarify which phase I mentioned
- In interview question, Mr. Zeon suggested to add some easy task that require interviewee using the app and ask their feeling or feedback about the flow.
- Write introduction on the interview part also
I altered "UI/UX" into "User interface" and added descriptions of "User interface", "Navigation" and "Feedback" at top of each section first. Then, I attached screenshots on the sectionD of the survey questionnaire and introduction on top of the interview questionnaire, and finally I made choices.
Click Here to jump my final draft
-Week 8
Questionnaire
I made a google form which based on the final draft, the asked to fill the form to my Japanese friends, Disney funs and I was able to get answers from some of Taylor's students. I was able to 62 responses(As of November 11th) in the end and started analysis.
Click Here to jump google form
Click Here to jump Spread Sheet
Interview
As gathering Questionnaire's respondent, I also conducted interviews with 4 respondents first and here is the common user insights so far.
Commonality(Positive feedback)
- Simple design: overall design is organized
- Highly Brand Image: has Disney- themed color scheme and matches brand
- Checking wait times is the top priority: all participants emphasized attractions as their favorite activity, using wait time feature the most
Common Dissatisfactions
- Font size: some areas make it easy to miss important information due to a lot of characters
- Lack of excitement on the home screen: two interviewees suggested a more colorful and engaging design
- Slow loading time: respondents have frustration that it takes long loading time
- Icon design issues: particularly entertainment and others section on the home bar, icons were found unclear or unattractive
- Need for better categorization: entertainment and event information should be more clearly categorize
- Map usability issues: all interviewee mentions there is no name of facilities on the map and hard to find for users unfamiliar with the park
Then, created 3 user persona as refer to some respondents results.
User Journey Map
Afterwards, I kicked in making User journey map with miro while watching some sample videos, and filled actions, touchpoints, goals, emotions, pain points and possible solutions.
(User journey map)
https://miro.com/app/board/uXjVLEtPfDc=/?share_link_id=231007492400
-Week 9
At first, I conducted another one interview and the respondents became 5 in total and updated the common user insights .
Commonality(Positive feedback)
Checking wait times is the top priority: all participants emphasized attractions as their favorite activity, and using wait time feature the most. They are satisfied with this function because they can check wait time anytime, anywhere.
Advance research: two respondents(Naru and Rizuki) often use online shop and menu in advance to check inventory, lineup or menu, and an interviewee(Rizuki) has also used online shop after leaving the park to order delivery of goods.
Map visual: Four interviewee out of five like the real map and they said the map make it easy to identify their current location.(Mariko, Naru, Rizuki and Kazuaki)
Simple design: overall design is organized and have unique icons
Highly Brand Image: has Disney- themed color scheme and matches brand
Common Dissatisfactions
Map usability issues: all interviewee mentions there is no name of facilities on the map and hard to find for users unfamiliar with the park, thereforeIt is necessary to make navigation from the map and home screen more intuitive
- Font size: all respondents indicated that some areas such as purchasing tickets make it easy to miss important information due to a lot of small characters
Lack of excitement on the home screen: two interviewees(Mariko and Maria) suggested a more colorful and engaging design
Slow loading time: two respondents(Mariko and Naru) have frustration that it takes long loading time
Icon design issues: particularly entertainment and others section on the home bar, icons were found unclear or unattractive(Mariko)
Need for better categorization: entertainment and event information should be more clearly categorize(Maria)
Click Here to jump interview video
User flow chart
(User flow chart)
Digital Card Sorting
I started collecting data of digital card sorting by using UX Tweak, and set 20 cards which narrow to key features, focusing on those requiring restructuring and 7 categories.
I got 7 participants and started doing data analysis with categories and placement matrix. Almost all cards were placed at same category, but some cards such as Getting priority passes and Purchase history were placed in separate locations.
(Category analysis)
(Result matrix)
Click Here to jump UX Tweak
-Week 10
First, I created an information architecture map based on the results of interviews and card sorting. In interviews, many people said that the map sections were difficult to understand, so I set up the map screen as an independent section. Also, in card sorting, many people separated their purchase history into Merchandise instead of Profile, so I moved it to that section.
Afterwards, I kicked in making features list and MVP identification. In the feature list, I roughly divided it into important elements and added detailed functions to each section. Finally, I set Tickets purchase, Digital map & Waiting time and Get priority passes as MVP features and described why these features are essential for users .
Here is my finalized document
UI/UX design document
REFLECTIONS
In the group works, we were able to consider functions and User Persona of Pet Hero. Also, the categorization of card sorting and how to think about user texts and situations that I practiced in these activities were also useful when I did individual assignments.
Through the second project, I realized that research like we conducted this time are very important process in application design, not just visual beauty. I think the more time you spend researching users and UI/UX, the more you'll be able to create products that capture user needs. In this project, I was able to practice research such as card sorting and UX research to discover problems with the Tokyo Disney Resort app and points that users were dissatisfied with. I was also able to visually summarize information and analyze the collected data using services such as Miro and UX Tweak.
Comments
Post a Comment