Week 01 - Week 04
Ahmad Firas Bin Ahmad Fisal | 0345121
Application Design II | Bachelor of Design (Hons) in Creative Media
Task 01: Application Design I Self-Evaluation and Reflection
INSTRUCTIONS
Task 01: Application Design I Self-Evaluation and Reflection
We are required to perform a self-evaluation and reflection based on their
mobile Application Design I final project. This project aims to document the
issues, problems, and difficulties and propose solutions to improve the mobile
app design aesthetic and user flow. Mobile Application Design is an
interactive process, and this task will expose us to constant improvements one
can make to their app.
Deliverables:
- Online post
- Presentation Video
--
|
|
AD1 - Figma Overview |
To make the flow easier and more efficient, I will list out things that are at
the highest level of priority to be reevaluated. They are mostly based on the
usability testing that I had performed the previous semester for my
high-fidelity app prototype.
- Colour Palette
- Iconography
- Usability of certain features.
Colour Palette
Upon reevaluating, it is important to note that colour palettes are highly
subjective to the designer and the intended brand's colour schemes that we
are required to follow as it is part of the branding identity.
There are two polar opposites of the feedback given on colours, some like it
and some don't. It is important to note that gradients are not everyone's
cup of tea.
However, upon looking at it in a bigger picture as a whole application. I
would prefer the landing page to be in the full gradient rather than having
it as a layering element.
|
| Colour - Before (Top) and After (Bottom) |
Changes that I've made include expanding the gradient to fit the whole
screen rather than just having it as part of the layering element. It is in
a more uniform-looking state and the harshness of the white background is
removed to prevent strains on the viewer's eyes. The layering elongated
squares layered behind the elements in those frames are now more contrasting
to ensure consistency from the gradient background to the layered smaller
background.
Usability - Error Prevention
To have buttons with similar designs and colour schemes throughout a
particular project proves consistency. However, it is necessary to utilise
colour psychology in certain buttons that are specifically for error
prevention. Putting the button in red colour would make it more efficient to
remark a certain button as a method for error prevention. This also proves
the Von Restorff Effect also known as The Isolation Effect, this effect
predicts that when multiple similar objects are present, the one that
differs from the rest is most likely to be remembered.
This is also evaluated to ensure this decision will be reflected through
necessary buttons where changes are due.
|
| Error Prevention Button - Before (Left) and After (Right) |
The image below showcases that after users have taken a photo (left image), they have no option to cancel it but only "Use Photo" and "Retake". It would be hassling for users to click Retake first and then cancel your action (like the left photo where it will lead back to). The symbol "X" should be in red as well for similar reasoning given above.
|
| Feature - 'Take a photo' |
Iconography - Social Media Icons
This is a rather clear evaluation. The icons are too large to be in a single
frame and it is highly recommended to be made smaller for smoother user
experience throughout the application. This applies to any other icons in
the future that are too large when looked through a device.
|
| Social Media Icons |
Application Flow
It is important to note that upon completing the previous final project,
application flow is one of the most important aspects of my redesigning
because of the nature of the original and official application that lacks
smoother navigation. When reflecting on the Paradox of the Active User law,
where users never tend to read the manuals (onboarding) provided but start
using a particular software independently.
Hence, one of my redesigning motives is to ensure that navigation won't be a
problem in the new redesign. That is how I played around with a looking
application for the purpose of navigation without losing the fun personality
of being not too minimal with the overall application design to fit in with
the branding of Fujifilm Instax.
|
|
Onboarding Frames |
Features Bar
Throughout the whole high-fidelity prototype, I've been having minor doubts to
rethink the whole features bar and the quality of the icon and typeface
placement that makes the combination look unprofessional.
|
| Features Bar |
MAIN MVP
|
| MVP 01 - Wireless Photo Printing |
Original Design Flow - MVP 01: Wireless Photo Printing
|
| MVP 01: Wireless Photo Printing |
This flow is chosen as the main flow of the MVP because the function of the
application Instax SHARE is to wirelessly print photos from your phone's
gallery. Among other features like taking live photos from the app and
template feature, this particular printing from the phone's gallery should be
the main highlight of the application.
After passing through the Application Design 1 final project, I was more
satisfied back then with the amount of knowledge I had. However, after
conducting usability testing for the particular final project and with newly
gained knowledge in Application Design 2, I feel certain things are worth
changing to reflect positive changes.
--> Better usage of the colour palette in the design of the
application
--> Quality of the navigation bar (iconography and typography)
--> Button design
I've also taken our lecturer's advice to check the frames with an AI platform
reflect on their answer and provide counter-arguments if necessary.
Claude AI
Feedback discussed below is highlighted in orange and opposes my personal
opinions. However, positive remarks made by the AI could be found in the same
screen capture image below;
Claude Part 01;
.png)
|
| Claude AI - Part 01 |
"However, the screens feel a bit text-heavy, especially the "Template and Filters" frame. You could explore using more visual cues or illustrations to communicate the steps."
I have to argue against this because currently in the onboarding frame for
the Templates and Filters, there are no other additional wordings for that
particular frame as the words that are in the images used are merely just
only for visual purposes.
Main (Home) Frame:
"You could consider adding more visual hierarchy or emphasis on the
primary actions (e.g., selecting photos, printing)."
This, I agree with because I had thought and have tried myself to introduce
stronger existing colours by increasing the intensity of the gradient
background to introduce visual hierarchy and design emphasis.
MVP 01 - Wireless Photo Printing:
"You could explore adding more customization options or settings within
this flow, if applicable to your app's functionality."
I currently have other secondary flows for this application. However, we
were advised by our lecturer to just focus on one main MVP flow for
Application Design 2.
Claude Part 02 and 03;
.png)
|
| Claude AI - Part 02 |
.png)
|
| Claude AI - Part 03 |
I totally agree with the following:
Colours:
"However, there could be more contrast between certain elements to
improve visibility and hierarchy."
Iconography:
"You could explore using slightly larger or bolder icons for primary
actions to make them more prominent."
Buttons:
"The button styles could be more distinctive, especially for primary
actions, to make them stand out better."
Visual Hierarchy:
"Use of colour, typography, spacing, and emphasis to manipulate the
visual hierarchy."
Updated Design Flow - MVP 01: Wireless Photo Printing
After reflecting on the old designs with personal reflection and also
analysing what Claude AI has given me; I managed to come up with the
modifications.
|
| Before and After: Redesigning (Overall) |
My approach to the redesigning is to have the colour intensity a little up a
notch as opposed to pastel and soft colour tones.
|
| Specific Redesigning |
And for the colours, especially the top button and navigation bar at the bottom, they used to be in gradient button colours. However, it feels too messy to have too many gradient elements because the background is already in gradient.
As for the iconography, I've decided to remove the wordings that used to be
under the icons to reduce the cognitive load required and for aesthetic
purposes.
Button design, size, and spacings are now much more consistent as opposed to
last time, one of the frames used to have a different button orientation which
makes it not consistent looking.
|
| Before: Icons |
|
| After: Icons |
Reflection
This was a great task as it taught me to view my past project more critically not to mention with newer knowledge I have now in the field of UI/UX. I looked at my project in terms of the adherence to the principles of UI/UX and it was a great learning curve to have this task. Best believe that tasks like these are what teach me more about UI/UX than hardcore over-the-top assignments that induce stress most of the time.
Comments
Post a Comment