Application Design · Project 2 · UI/UX Design Document
21 Sept 2024 - Oct 2024 / Week 5 - Week
YANG ZHI CHING / 0365154
Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2 · UI/UX Design Document
INSTRUCTION
Doc 1.1 MIB
Pre-project · Card Sorting Activity
Before starting Project 2, we had an in-class activity to learn
about Card Sorting. We were given a scenario: designing a Travel
Planning mobile app to help users plan and organize their travel
plans. We needed to sort the app's given features into categories
and were allowed to add new features to complete the app (Hybrid
Card Sorting - Wild-Card).
Fig 1.1 Activity Intruction
I was assigned to a 3-person group with my friends Yan and
Tze Wei. At the start, we identified some key categories: trip
planning, trip information, trip support, and journey journal.
After establishing these key categories, we began sorting the
features accordingly.
We had different ideas about how to categorize certain features,
but after discussion and researching detailed descriptions of
these features, we reached a consensus. After categorizing the
basic features, we started thinking about Wild Cards:
In the Trip Planning category, we added "Booking Management,"
which helps users manage all their bookings such as flight
tickets, accommodation, and vehicle rentals in one place. We
then added a "Food Finder" feature to Trip Support, allowing
users to easily find restaurants and view ratings and reviews to
help them have a worthwhile food experience.
We also created a new wild category called "Safety Assistance," as
safety is crucial during travel. We added "Emergency Services and
Contacts" to provide users with instant access to emergency help,
such as Police Hotline, Hospital Hotline, and Bomba Hotline at
their destination. We also included a "Medical Guide" with
self-help guidelines for emergency situations.
Fig 1.2 Physical Card Sorting
Fig 1.3 Card Sorting in Canva Slide
In the second App Activity, we chose a Car-Hailing App as our
theme. We created it in Canva Slides. We first brainstormed
features ourselves, then referenced Grab and AirAsia to ensure
we hadn't missed any significant features. Finally, we
presented our work to the class.
|
|
| Fig 1.1 Activity Intruction |
I was assigned to a 3-person group with my friends Yan and Tze Wei. At the start, we identified some key categories: trip planning, trip information, trip support, and journey journal. After establishing these key categories, we began sorting the features accordingly.
In the Trip Planning category, we added "Booking Management," which helps users manage all their bookings such as flight tickets, accommodation, and vehicle rentals in one place. We then added a "Food Finder" feature to Trip Support, allowing users to easily find restaurants and view ratings and reviews to help them have a worthwhile food experience.
|
|
|
|
|
|
|
|
In the second App Activity, we chose a Car-Hailing App as our
theme. We created it in Canva Slides. We first brainstormed
features ourselves, then referenced Grab and AirAsia to ensure
we hadn't missed any significant features. Finally, we
presented our work to the class.
Project 2 · UI/UX Documents
1. Card Sorting
Personal Card Sorting |
After understanding the basic concept of card sorting, I proceeded
to work on our redesign theme's card sorting. I initially created
my ideal Card Sorting in Figma, but later realized I needed to
first understand Moovit's original features. So, I redid the
original sorting before proceeding with my ideal features,
combining and adjusting them with the original ones.
Fig 2.1 Moovit Original Features
Fig 2.1 Moovit Original Features
I examined the Moovit app and listed all the features I found,
regardless of repetition. After listing all features, I sorted
them into categories. I reorganized the features to create clearer
categories and renamed them to avoid confusion. Based on my
previous analysis of the problem (inaccurate bus arrival times), I
developed a solution: adding an arrival time reporting system.
When users notice inaccurate vehicle arrival times, they can
report it. A signal indicator appears beside the live GPS vehicle
tracking - green for accurate times and red for inaccurate times,
and also showing the estimated delay.
Fig 2.2 Moovit Ideal Features
To increase user retention, I added eco and health functions to
the app. To encourage app usage, I implemented features that
highlight the benefits of public transportation through "Green
Impact Calculator," which shows users how their public transport
usage reduces carbon emissions. The health aspect is supported
through features like "Health Goals" settings, "Health Activity
Reminders," "Achievement Notifications," "Activity Statistics,"
and "Eco & Health Rewards." Similar to apps like Grab and
Keep, users can earn vouchers and gifts when they achieve certain
goals. By highlighting these advantages and incorporating
gamification elements, Moovit encourage public transport use and
improve user retention rates.
*Red: Issues / Service
disruption Notifications - Real-time updates on suspended or
under-repair public transportation
*Orange: Report System to
update delay times and other community reports
*Green: Eco &
health-related features
Final Version Card Sorting |
After sending the first version to Mr. Zeon, he explained many
deficiencies in a responsible and careful manner. I quickly made
changes and adjustments based on the feedback given by the
teacher. The following is the final version after the changes.
Fig 2.3 Moovit Card Sorting Features, Final Version
I also sorted the green features, which represent eco-friendly
and health-related features, into a column (not included in the
overall classification).
Fig 2.4 Green Features Part
|
|
| Fig 2.3 Moovit Card Sorting Features, Final Version |
I also sorted the green features, which represent eco-friendly and health-related features, into a column (not included in the overall classification).
|
|
| Fig 2.4 Green Features Part |
Card Sorting Survey |
In the card sorting survey, I first used optimal workshop to publish,
but after publishing, I found that I could only get the answers of two
respondents. The remaining three collected respondents could not be
viewed without recharging the provincial website package, so I had to
abandon this website and switch to ux tweak to redesign the survey. In
ux tweak, I successfully collected 7 respondents.
|
| Fig 2.5 Standarization Grid in Optimal Workshop |
|
|
Fig 2.6 Summary Review in UX Tweak |
Fig 2.7 Cards and Categories provided in UX Tweak
2. Online Questionnaire & Interview
To better understand user preferences, attitudes, and views regarding the moovit app, and also assist to identify user demographics, goals, and information demands. This questionnaire is performed online and come in a variety of durations and forms, with data gathered automatically and frequently examined by theGoogle Form.
Develop Survey Question |
Since the first draft was not saved separately, the following is the
version of the questions adjusted after the guidance of teacher Zeon,
which are the online survey questionnaire (target 50 respondents) and
the interview question (target 3 respondents)
Doc 2.1 Online Survey Question Desgin
Survey & Interview Results |
The detailed analysis results have been recorded in the final
submission slide section. The following are collected responses of Online Survey and Interview.
Doc 2.2 Excel Document of Online Survey
Doc 2.2 Excel Document of Online Survey
Doc 2.3 Interview Question and Collected Responses
3. User Persona
I created three user personas by integrating the survey questions and
representative users of the interview, namely, college students who
commute, workers who travel between Singapore and Malaysia, and
housewives who use moovit to avoid traffic jams.
|
| Fig 2.8 User Persona 1 |
|
| Fig 2.9 User Persona 2 |
|
| Fig 2.10 User Persona 3 |
4. User Journey Map
At the beginning, I didn’t know what is a user journey map. So I
interpreted it through the PPT given by the teacher, and then referred
to various user journey maps in online resources. I understood that this
is mainly used to simply explain the psychological journey, difficulties
and needs of users at each stage when using the basic steps of this app.
After completing this analysis, I, as a designer, can understand what
users need through their psychological journey.
|
| Fig 2.11 User Journey Map |
5. Information Architecture Site Map
This Information Architecture Site Map is mainly to make an icon to
represent the direction of the moovit app redesign. After the feedback
from users, its functions are integrated and a clear and organized
structure is sorted out, so that people can intuitively see the features
and functions of this moovit app.
|
|
Fig 2.12 Architecture Site Map in Figma |
6. User Flow Chart
The user flow chart is a flowchart made in the app to simulate the
user's use process, which is convenient for designers to intuitively see
where the link has a bug and fix it.
|
|
Fig 2.13 User Flow Chart |
7. MVP Features
The MVP features I chose for my Moovit app are route planning (the main function of the navigation app), issue report system (the main measure to maintain accuracy), and sustainable reward system (a reward system to encourage users to visit the app again).
Final Submission |
Presentation Video Link
REFLECTION
I spent a lot of time on this project and completed many challenging
things for me. For example, to collect 50 points of responses, I
distributed the link on the Internet and asked my friends to help fill it
out. This was my first time to complete such a public assignment. I felt
very fresh and challenged myself. Fortunately, my collection of data
quickly reached the target. I am really grateful to everyone who answered
my questions seriously and even went to experience this app for me. I am
very grateful to them.
In addition, teacher Zeon also provided great help in this project. He
teaches very seriously, and I can learn a lot of knowledge that I should
have learned in his class, and I benefit a lot. Moreover, he is very
responsible to students. He will write feedback very seriously for every
progress given to him, and it is amazingly detailed (the most attentive
teacher since I enrolled). I really thank Mr. Zeon for his infinite
tolerance and carefulness. I have learned a lot in this project, although
I often fail to keep up with the progress.
There is another important discovery for me. I have heard the word "pain
point" before taking this class, but I didn't know what pain point is for
a long time. Through this project, I realized that in order to meet the
needs of users, you need to find the user's pain point, and pain point
refers to the difficulties encountered by the target group and to be
solved. This is my understanding, and I am very satisfied that I have an
understanding of this word through this class.
Comments
Post a Comment