04/26 - 07/26 / Week 1 - Week 14
Brendan Fedya / 0376283
Application Design I / Bachelor of Design
(Hons) in Creative Media / Taylor's University
Final Compilation
TABLE OF CONTENTS
I. LECTURES
➼ Levels of Mobile User Experience
Level 1: Functional (Utility)
Does it solve a core problem or fulfill a specific need (main task)
e.g. TnG app, to pay/transfer money
Level 2: Reliable (Performance)
Is it stable/trusted?
e.g. fast loading, error handling when data connection is disturbed, crash prevention
Level 3: Usable (Ease of Use)
Achieving goals without confusion
e.g. mobile target size 44x44 px, good typography, and intuitive navigation patterns
Level 4: Pleasurable (Delight)
Positive emotional connection
➼ Class Tutorial: AI Critique Student Designs
For this task, we are asked to reflect back on our final project of the first Application Design module, insert it into generative AI to gain professional-level feedback.
For that, I took a screengrab of my MUJI app redesign home page:
 |
| Figure 2.1: MUJI redesign - homepage screengrab. |
This is the feedback I gained and analyzed after inserting it into Generative AI:
1. Visual Hierarchy
While the 'sale banner' appears contrasting, it is too visually aggressive. It causes viewers eyes might not comfortably flow down to the "events" and "for you" sections. A good layout guides the eye naturally from the most important element down through secondary and tertiary information.
2. Accessibility
Placing thin, white text over a busy background photograph—even with a heavy red color overlay—creates contrast issues. Users with visual impairments or those viewing the app in bright sunlight might struggle to read the smaller dates or the "*online exclusive" text.
 |
| Figure 2.2: Sale banner design. |
The heart (favorite) icon on the "for you" card is floating quite close to the edge of the image. Standard accessibility guidelines (like WCAG) recommend a minimum tap target size of 44x44 px. Ensure interactive elements like that heart icon have enough invisible padding around them so users don't accidentally tap the product image when trying to save the item.
The icons in the bottom navigation and the top header are very thick and heavily weighted. Modern UI—especially for a brand like MUJI, which is famous for its extreme minimalism—tends to favor a strict adherence to a crisp line-art style. Switching to thinner, uniform line-weight icons without heavy fills will immediately modernize the interface and make it feel more elegant.
4. One Suggested Big Fix
Redesign the hero banner. Instead of a red-tinted photo of a busy store aisle, try using a completely clean, neutral background (like an off-white or light gray) with high-quality, minimalist product photography. You can announce the "40% OFF SALE" using crisp, stark typography—perhaps just black text on that neutral background, or a very refined, minimalist monochromatic badge. This will instantly align the app with a high-end, professional aesthetic and fix your contrast issues simultaneously.
Feedback Challenge:
Based on the feedback I gained, I decided the question the hero banner feedback. My reason to create a visually heavy hero banner is to draw viewers attention to that page — as based on user research, people tend to interact with sale products more than regular products when navigating through an app. And if I made it look less visually contrasting, it might weaken the effect that I intended to give.
You are confusing "visual noise" with "visual hierarchy." Right now, the banner is shouting. It definitely gets attention, but it does so at the cost of the user's visual comfort and the brand's identity.The challenge for a professional designer is to create that exact same level of contrast and priority, but to do it elegantly. You want to command attention, not demand it.
Here is how a professional
designer simplifies a high-priority element like a massive sale without losing
its functional impact:
1. Contrast Through Whitespace
(Negative Space)
Contrast isn't just about bold
colors; it's about difference. If the rest of the app has products and text, a
massive block of empty space immediately draws the eye. Instead of slapping a
heavy color multiply-effect over a busy store photograph, place the sale
announcement over a completely clean, neutral background. By stripping away all
the surrounding clutter, the user's eye has absolutely nowhere else to go but
your message.
2. Typographic Scale and Weight
You can make a banner feel
incredibly urgent and prominent purely through typography. A stark, oversized,
heavily weighted "40% OFF" in black or dark gray against an off-white
background is highly contrasting and impossible to miss. It retains the
functional goal of grabbing attention but feels incredibly modern and
sophisticated.
3. Strict Silhouette and Line
Art
If you want to use graphic
elements to frame the sale—like a tag or a badge—keep them brutally simple.
Avoid any 3D effects, gradients, or shading. Rely on strict line art and pure,
monochromatic silhouettes. A crisp, black-and-white graphic draws the eye
through its sharp geometry rather than overwhelming the user with a wash of
aggressive color.
4. High-Contrast Photography,
Not High-Contrast Overlays
If you must use a photo for the
hero banner, use a single hero product shot beautifully against a minimalist
backdrop. If the photo itself is clean and high-contrast, you don't need to add
an artificial red layer on top of it to make the white text readable. The text
will naturally pop if the photography is art-directed correctly.
Back to the question:
●
Did the AI catch something your teacher missed?
I believe it did, my
teacher did not question my choice of creating a visually heavy hero banner to
create contrast and emphasis. One thing he did mention in the AI feedback is
that contrast and emphasis does not necessarily come from a heavy strike of
colors, even unusual empty spaces could draw the viewers attention.
My teacher also
mentioned that my design has already followed MUJI’s brand identity very well.
But AI feedback recommends some improvements to make it better, thinner
iconography, strict lineart, and sharp geometries could enhance it futher.
●
Do you agree with the AI’s critique now that you are looking
at your work months later?
As for this, I
felt that I needed to try it out myself, and conduct user research again. It is
true that the hero banner caused slight discomfort when navigating the app
after, but I felt the tradeoff is much more worth it compared to the
disadvantages. A way to work this around could be utilizing negative spaces as
a point of emphasis, which will not sacrifice discomfort for the viewers. As for
brand identity, it is true that it could be improved even further, iconography
just felt off because I used icon templates rather than creating the design myself.
➼ Class Exercise: Flutterflow
Trying FlutterFlow and its AI features that could be used for this module.
 |
| Figure 2.3: Sale banner design. |
➼ App Design Self-Evaluation & Reflection
MUJI redesigned app is an integrated fashion e-commerce app to MUJI, similar to some of the brands out there that has their own integrated app (e.g., UNIQLO, Cotton On). The happy path flow includes the user to search the intended products, choosing the designated variations, and eventually purchasing the product. Additional features that could encourage this process is the AR try-on feature and detailed review checking to ensure product accuracy, and also parcel tracking to know the whereabouts of the product.
In regard of the app itself, I tried to emphasize more on simplicity as it reflects the identity of the brand, removing unnecessary details that might cause visual clutter.
In my opinion, I would say my app did well and could pass as a proper fashion retail application like its competitors, colors are minimalist, which makes it easier to maintain consistency. Layout is also easy to understand due to clear visual hierarchy created through different sizes of elements, where bigger elements (such as hero banner) will flow to the smaller ones (events, for you section, etc.) A feature that I included in this app is an AR try-on feature which allows users to try on the items virtually and eventually allows them to purchase the item with more confidence.
This is ideated through the insights gained after user research, where users always find confusion in matching their outfits or items turning out not as they have expected. To re-evaluate the design of the app, I would like to get back to my AI design audit. It states that even though my hero banner is contrasting and highlighted, it is too visually aggressive which might disrupt comfort when navigating through, as it will always lead our eyes to the banner itself.
One thing to fix this is to redesign the hero banner, using negative spaces instead of striking colors to give emphasis so the transition to the latter flow would be more natural. I tried to use negative space as point of emphasis, but it does not seem to work. It loses it’s MUJI identity instead. To work it around, I reduced the opacity, and darkened the red tone. This will help the hero banner to appear less ‘aggressive’. Another thing to fix are the icons.
During Application Design I, I just used icon templates on Figma, probably I could use icons that seems more similar during Application Design II. Later, extreme-minimalism icons will be preferred. Something with a crisp line-art style, thinner, uniform line-weight icons without heavy fills will immediately modernize the interface and make it feel more elegant.
For the cart page, quantity button needs to be redesigned with left/right arrows, this will lessen users’ cognitive load as they will already know what to do. ‘Delete’ button will also be moved to the same container without swiping because swiping means it’s not visible at first, which will again, sacrifice cognitive load. After adding to cart, products must first enter a pop-up confirmation, enterring preferred colors, sizes, and quantity of product before successfully moving to the cart page.
Payment options should also be in a separate page after pressing ‘checkout’ button in the cart page, showing various payment methods (could also add promo code forms aswell). At last, a dedicated login page for the app should be created to integrate it with firebase, so the app will properly function. In conclusion, 14 weeks of my Application Design I have gave me meaningful insights, especially its grounded through rigorous user research. I became more familiar in using Figma, have a base of what user expects of my own application, which serves as the drection in creating a fully functional app in this module later on. Some design aspects may not be implemented due to my lack of proficiency since this is my first time doing transition from Figma to FlutterFlow. Hence, I did not implement much complex design decisions onto my prototype.
➼ Main Task
In this task, we are required to successfully implement C.R.U.D operations onto our app already. Since it's time consuming to create pages from scratch in FlutterFlow, I utilized it's AI feature called FlutterFlow designer where it could generate pages based on our own prompts.
To make my prompts accurate, I screenshot my prototype, paste it on another Gen AI model, and ask them to give a detail prompt to put in FlutterFlow. Results are not that accurate, but still looks good enough. It saves time in order for me to proceed to the funcitonality part even quicker.
Figure 2.4: Generating prompts to FlutterFlow's designer.
Proceed to create all the pages required first, before attaching backend features to it.
Figure 2.5: Creating pages.
Then I implemented its firebase data, such as user schema, product schema, and others that relates to the whole user flow of the app.
 |
| Figure 2.6: Firebase schema.
|
More and more backend features to be implemented..... Sometimes it even goes until multiple layers inside one variable. Hence things would get complicated and require a lot of focus in order to not put in the wrong layer.
Figure 2.7: Setting to variable and custom functions.
In order to have more detailed functions, branching the options through action flow state is essential.
Figure 2.8: Customizing action flow editor.
Passing data from one onto another, everything requires variables to be set into those specific parameters.
 |
| Figure 2.9: Managing parameters.
|
Managing enabled and disabled states for certain buttons, (an example is to uncolor certain buttons when the required forms are not filled) which is part of doing micro-interactions. These are important so users would know exactly what actions are available to them at any given moment, preventing frustration and guiding them smoothly through a task.
When users interact with an interface, they rely on visual cues to understand how the system is responding to them. Micro-interactions like button state changes are the primary way an interface "talks back."
 |
| Figure 2.10: Managing micro-interactions. |
Then to the page transitions, which are part of macro-interactions. Macro-interactions refer to larger-scale interactions that occur across multiple elements or screens within the application. In this project, page transitions are used to create a smooth flow between different pages, such as transitioning from the product page to the cart page or from the cart to the checkout page. These transitions help users understand the relationship between screens while making the overall navigation feel more seamless and responsive.
 |
| Figure 2.11: Managing macro-interactions. |
Finally, polishing the designs so it would look as similar as it could according to my prototype.
Figure 2.12: Polishing designs.
After everything is finished, I compiled everything into the presentation, starting from showcasing the working app and the backend step-by-step according to the flow. All the C.R.U.D operations are also listed in the slides.
Here's the final compilation for the submission:
This module was not the how I expected it to turn out, I thought it will be very design heavy, but actually a lot of stuff revolves around back-end development. It is difficult, but I guess it's necessary for us since full stack developers have significantly more demand compared to only front-end UI/UX designers in the work industry later on. There are still a lot of challenges ahead in order to be proficient in back-end workflow, but I hope this could be the starting point for me to eventually be better in future tasks.
Comments
Post a Comment