Application Design II - Task 1: Self Evaluation & Reflection
.jpeg)
22.4.2024 - 19.4.2024 (Week 1 - Week 4)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application
Design II
Task 1: Self Evaluation & Reflection
INSTRUCTIONS
TASK 1 - SELF EVALUATION & REFLECTION
Instruction
We are required to perform a self-evaluation and reflection based on our
mobile application design 1 final project. This project is aimed to
document the issues, problems, difficulties and propose solutions to
improve the mobile app design. Mobile app design is an iterative process
and this task will expose to students the constant improvements one can
make to their app.
Preview of Application Design 1 Project
Below is the previously designed Batik Air app from the earlier module
(Application Design 1). The artwork has been crafted based on users'
needs, ensuring a comprehensive flight app for travelers. This app
offers a seamless experience for booking flight tickets, checking in,
logging in, managing reservations, and accessing essential travel
information.
Fig. 1.1 - Final High Fidelity Prototype: Batik Air Mobile
Application
Link to Final High Fidelity Prototype:
Fig. 1.2 - Final High Fidelity Prototype - Batik Air Mobile
Application
USER FLOW
Previous User Flow
This is the previous prototype's user flow. Users are first
introduced to the onboarding page, followed by the login or
sign-up page, with an option to skip directly to the homepage.
Once they enter the homepage, they can explore the "Check-in"
page, "Book Flight" page, "Profile" page, and "More" page, as
indicated in the bottom navigation bar.
%20(1).jpg)
|
| Fig. 1.2 - Original User Flow |
New User Flow
Below is the new user flow, which reduces some of the screen pages
and removes the "Check-in," "Book Flight," and "More" pages from
the bottom navigation bar. These have been replaced with the "My
Trips" and "Profile" pages.
%20(2).jpg)
|
| Fig. 1.3 - New User Flow |
HOMEPAGE
Feedback from Claude AI
Mr. Razif recommended that we try uploading our work to Claude AI for
feedback and to make improvements to our app screen design. At first, I
had no idea what improvements I could make to the app. However, after
asking the AI, I found it very useful as the tool pointed out some
issues that I hadn't noticed.
|
| Fig. 2.1 - Feedback from Claude on the HomePage |
Claude provided me with some positive feedback and identified areas for
improvement, such as:
-
Unclear call-to-action (CTA)
I agree with the observation that the CTA button for booking flights should be placed on the home screen, as this is the main goal of the app.
-
Typography considerations:
The font sizes used for the "Recent Searches" section and the navigation menu at the bottom could be slightly larger to improve readability, especially on smaller screens.
-
Lack of visual balance:
The design feels slightly off-balance, with the main image taking up a significant portion of the screen, leaving less space for other elements.
**Argument: Due to the image I sent not being a full vertical scrollable homepage, Claude couldn't view the bottom section of the homepage and misunderstood that the top part image takes up too much space.
-
Lack of context:
The "Recent Searches" section displays only airport codes, which may not be immediately understandable to all users. Providing additional context, such as city names or flight details, could make this section more user-friendly.
**Argument: For this feedback, I personally feel that it is not necessary to add too much text in this part. It's just an overview of the recent searches. Users can click the section to view the complete information. This will prevent the homepage from having too much crowded information.
Redesign
Based on the feedback from Claude and Mr. Razif mentioned the need for
a "Book a Flight" CTA button on the home page, I realized that the
previous design lacked this important CTA button. Additionally, the
top section image was not very useful for the main goal of the app and
was primarily aesthetic.
Therefore, I decided to redesign the homepage to allow users to select
their flight destination and date directly from the homepage.
Consequently, based on the previous navigation bar, I have removed the
separate "Book Flight" page.
I spent some time exploring several designs for the homepage (Fig.2.2) .
Designs #3 and #5 were selected to be combined into an interactive
animation for the home page screen.
|
| Fig. 2.2 - Experiment several design for Home Page |
.png)
|
SIDEBAR MENU
Improvement
In the previous design, I added a hamburger menu on the homepage,
however, I did not design a sidebar menu page. Mr. Razif mentioned
that it is essential to have a sidebar menu page so that we can apply
an interactive animation when opening or closing the sidebar menu
panel. For the redesign, I added a soft transparent layer to the page
and a drop shadow for the panel when opening the sidebar menu. This
will help users focus more on the sidebar menu.
|
| Fig. 3.1 - Process of designing sidebar menu |
|
| Fig. 3.2 - Improvement of the Sidebar Menu |
FLIGHT SELECTION
Feedback from Claude AI
Below are the potential improvements suggested by Claude and my
arguments based on the feedback:
-
Pricing Transparency:
While the prices are displayed, it's unclear whether these are the final prices or if additional fees and taxes will be added later in the booking process.
**Argument: In my opinion, the main goal of this page is to select the flight ticket, and the additional fees and taxes should be displayed on the checkout page. Following the provided suggestion would cause the page to have too much cognitive load. The previous design indicates the price as "from RM220" instead of "RM200," meaning the price is not fixed yet.
-
Flight Amenities:
The flight details could be enhanced by including information about amenities such as in-flight entertainment, Wi-Fi availability, or meal options, which may influence users' flight choices.
**Argument: Based on the previous design, this information will be added to the cabin classes page, as different classes have different flight amenities.
-
Filter and Sort Options:
While the "MYR" and "SORT" buttons are present, their functionality and available options are not immediately clear. Providing more context or dropdown menus could enhance usability.
**Explanation: Based on this feedback, I decided to combine both and rename it as "Filter," with an icon on the side.
|
| Fig. 4.0 - Feedback from Claude on Flight selection |
Redesign
Based on my analysis of the previous flight selection page, I noticed
that strong bold colors were used incorrectly. The purpose of using
strong colors is to highlight important information that needs to be
noticed first, but I used them for the flight ticket design.
Therefore, I decided to redesign the flight ticket, using strong
colors for the time and price. I also redesigned the placement of the
date to make it easier to understand. I experimented with different
layouts for the top section, and in the end, I decided to choose
design #3.
.png)
|
| Fig. 4.1 - Experiment several design for Flight Selection page |
.png)
|
| Fig. 4.2 - Improvement on Flight Selection page |
SEAT SELECTION
Feedback from Claude AI
Below are the potential improvements suggested by Claude and my
arguments based on the feedback:
-
Seat Legend Visibility:
The seat legend (Your Seat, Available, Occupied, Extra Legroom) is somewhat small and placed at the top of the screen. Increasing its size and positioning it closer to the seat map could improve visibility and usability.
Argument: I believe that the seat legend's size is already adequate at the top of the screen, and its position is balanced relative to the screen size. Moving it closer to the seat map would make the interface too crowded and less organized.
-
Accessibility Considerations:
The use of color coding (red and gray) for seat availability could be problematic for users with color vision deficiencies. Exploring alternative methods of conveying information, such as patterns or icons, could improve accessibility.
Explanation: I agree that I should improve the seat legend by adding icons instead of relying solely on color, as this could be confusing for some users.
|
| Fig. 5.1 - Feedback from Claude on Seat selection page |
Redesign
The seat selection page is one that I planned to redesign last
semester, as I felt the interface looked very crowded and the user
will feel it was hard to understand what to do. So, I first redesigned
the top part of the page by adding a progress bar. According to UX
laws (Doherty Threshold), utilizing progress bars provides users with
system feedback and maintains their engagement.
For the seat legend, I redesigned it with both color and icon
indications: a cross icon for reserved seats and a tick icon for
selected seats. This will be better understood by users according to
their mental model. For the seat selection diagram, I redesigned it to
look like inside of a plane, allowing users to feel more engaged and
to imagine they are actually in the plane.
Additionally, I added an info panel at the bottom to show the cabin
class, seat, and price that the user has selected. After experimenting
with a few design versions, I selected design #3.
.png)
|
| Fig. 6.1 - Experimentation with Several Designs for the Seat Selection Page |
.png)
|
| Fig. 6.2 - Improvement for Seat selection page |
CHECKOUT & PAYMENT
Improvement
After receiving feedback from Mr. Razif, who mentioned that I needed to reduce the number of pages to prevent heavy load on the final project, I removed the filled passenger details and baggage selection pages, and combined them into one checkout page. The new checkout page allows users to double-check their information details before making the payment for their flight booking. As for the payment page, I kept the same design but included a progress bar at the top section.
.png)
|
| Fig. 7.1 - Redesign Checkout & Payment page |
CONFIRMATION PAGE
Redesign
For the confirmation page displaying the flight ticket, I wanted the
interface to look more lively and vibrant, making users feel satisfied
after making their payment. So, I redesigned the background and
selected design #2.
.png)
|
| Fig. 8.1 - Experimentation with Several Designs for the Confirmation page |
.png)
|
| Fig. 8.2 - Improvement for Confirmation Page |
PROFILE
Improvement
Due to changes on the homepage, I had to remove the "Book Flight" page
from the bottom navigation bar. Instead, I replaced it with a
"Profile" page, which is somewhat similar to the "More" page. However,
I redesigned the top section to include users' information.
.png)
|
| Fig. 8.3 - New Design of the Profile Page |
WIREFRAME
Click HERE to access figma file
FINAL SUBMISSION
Presentation Slide Link:
**Tip: In the Page 2 (Overview) , Click the title to jumps to the
specific page.
Presentation Video:
https://youtu.be/oWQjgLC5DBY
https://youtu.be/oWQjgLC5DBY
FEEDBACK
Week 3 - 08.05.2024
- You can improve or modify the Home Page. The most important task for the app is booking flights, so the top section should be dedicated to searching for flights instead of displaying welcome text or other images, as they serve no purpose. The top section of the homepage is the most valuable and important area to focus on what users are supposed to do.
- On the homepage, you can have a button to book a flight on top of the image, directing users to the flight booking page. Alternatively, you can add an input bar for users to fill in their departure and arrival destinations.
- Consider reducing the number of pages to prevent heavy workload for the final project.
- You can remove the passenger details page and the seat and luggage page. Maybe you can consider removing the payment card details page if there are too many pages.
- The new user flow should be: Select departure and arrival city > Flight selection > Seat selection > Summary/Confirmation details > Payment > Final ticket.
Week 4 - 19.05.2024
- You can combine the various home page designs that you experimented with into one, using continuous animation. However, you need to adjust the image size of the plane to be smaller. The animation for the loading home page can start with the plane flying into the center of the screen, followed by the panel moving up to cover it.
- Remove the onboarding and login pages to reduce your workload and focus more on other pages with interactive animation. You can add a splash screen at the beginning as well.
- The top part of the new flight selection page design looks busy and makes it difficult to focus on the main task. The image selection for the background is not the best choice, you can use the same background as the homepage.
- The "selling fast" color should be red or orange, and the "earliest" color should be green. This will be better understood by users according to their mental model.
- For the legend of the reserved seat, you can add icons instead of just using colors to differentiate them from others.
REFLECTION
When beginning the project, I actually struggled with how to start, as I
felt there weren't many improvements I could make to the previous Batik
Air app. However, once I sought feedback from Claude AI and Mr. Razif, I
realized there was still a lot of room for improvement in the app's
interface. Once I began redesigning the app, I felt motivated,
especially as I saw the interface looking much better. I started having
more ideas for redesigning nearly all of the pages until I realized that
the redesign process took longer than I expected. Through this project,
I learned that nothing is perfect and there is a lot of potential to
experiment and redesign to keep improving the app.
.jpeg)
Comments
Post a Comment