Application Design II: Task 01
| 21.04.2025 - 12.05.2025 (WEEK 1-WEEK 4)
| Tang Chin Ting [ 0366473 ]
| Application II / Bachelor of Design in Creative Media| Self-Evaluation & Reflection
INSTRUCTIONS
LECTURES
All lectures and exercises are completed in this Blog.
SUBMISSION
Task 01: Application Design I Self-Evaluation & Reflection
Instructions:
- We must perform a self-evaluation and reflection based on our mobile application design 1 final project.
- This project aims to document the issues, problems, and difficulties and propose solutions to improve the aesthetic and user flow of the mobile app design.
Requirements:
- To submit a self-reflection blog post on the app design refining process with a clear comparison between the old and new design.
- Online posts in your E-portfolio as your reflective studies
- Presentation Video
To begin this task, I would like to revisit my work from Application Design I as a callback and reflect on the design refinements.
Figma Link:
Figure 1.1 App Interface Done by The Previous
Analysis for Each Page
Onboarding Page
Figure 1.2 Onboarding Page Interface
Self Reflection
- An excellent, high-quality images showcase the food well.
- Each screen has a distinct, understandable value proposition.
- Uniform text, logo, and navigation dots/buttons layout.
- The headings and descriptions are short and easy to read.
- The "Next" and "Get Started" buttons are straightforward.
- Heading Font: Serif font feels traditional; switch to a clean sans-serif for a modern, minimalist look.
- Button Style: Black buttons are heavy; consider subtler 'Next' buttons and a primary 'Get Started' button.
- Progress Dots: Solid dots feel heavy; use a subtle accent color for active, outlines/light grey for inactive.
- Logo Integration: Logo feels a bit large/dominant; aim for smaller, cleaner integration with the white background.
- Image-to-UI Transition: Sharp curve cut-off; try a softer, more blended transition.
- Grammar: "An Tailored Experience" should be "A Tailored Experience."
- I need to define the color palette, layout, and use clean typography to create the desired light, sophisticated, and modern feel, letting the food photos shine without overwhelming the UI.
Log-in Page
Figure 1.3 Login Page Interface
Self Reflection
- I think the logo is consistent and clear.
- Each page has a distinct goal with guiding calls to action.
- The flow is a smooth transition between welcome, login, and success.
AI Reflection
- Dominant Red: Overwhelming; needs a lighter background (white/light grey) with red as an accent.
- Typography: Inconsistent and less modern; needs a consistent, clean sans-serif font.
- Button Aesthetics: Heavy black buttons; opt for lighter, subtler styles.
- Whitespace: Lacking; more space around elements for an airy feel.
- Input Fields: Functional but can be simplified; use subtle borders/underlines.
- Illustrations/Icons: Can be too detailed; switch to minimalist line-art for consistency.
- Minor Copy: Fix "An Tailored Experience" to "A Tailored Experience."
Argument
- Yes, I strongly agree. These refinements are crucial for a minimalist, modern app with a seamless payment MVP.
- The current design's heavy red and busy visuals detract from a clean aesthetic. By adopting a lighter palette, clean typography, and more whitespace, the log-in experience becomes sophisticated and user-friendly.
Home Page
Figure 1.4 Home Page Interface
Self Reflection
- Functional Elements: Clear location/dine-in toggle, prominent search, useful promos, and easy category browse.
- Good Navigation: Consistent bottom bar for core actions.
AI Reflection
- Color Dominance: Overwhelming red and dark grey. Needs a lighter background (white/light grey) with red as a subtle accent.
- Visual Clutter: Header is dense; banners are busy. Requires more whitespace and simplified elements.
- Typography: Inconsistent and less modern fonts; switch to clean sans-serif.
- Icon/Element Styling: Bold/filled icons and strong shadows feel heavy. Opt for line-based icons and subtle depth.
Argument
- Yes, I strongly agree. The current home page is visually heavy. A lighter palette, improved whitespace, and cleaner typography create a sophisticated, modern feel. This minimalist approach enhances clarity and builds trust, making the path to ordering and payment more intuitive and efficient, crucial for your app's core functionality.
Order & Payment Page
Figure 1.5 Order and Payment Page Interface
Self Reflection
- Clear Success Indicator: The prominent green checkmark is universally recognized for success, providing immediate positive feedback.
- Clear Message: "Payment successful!" is direct, concise, and unambiguous.
- Positive Tone: The celebratory nature of the message reinforces the positive outcome.
- Minimalist Elements (Success): The screen is quite clean, focusing solely on the success message and icon.
AI Reflection
- Color Palette: The dominant red background persists here. While green is used for success, the overall red still feels heavy for a minimalist and modern design. A lighter background (white or light grey) would create a cleaner, more serene completion state. The green checkmark would stand out even more against a neutral background.
- Typography: The font used for "Payment successful!" is a basic sans-serif. While legible, it could be refined to match a consistent, modern sans-serif chosen for the rest of the app, ensuring consistency with the desired minimalist aesthetic.
- Lack of Next Action: While the message is clear, a successful payment screen often benefits from a clear "next step" button or link.
- Overall Brand Consistency (with suggested changes): If you adopt a lighter overall palette and refined typography for the rest of the app (as previously suggested), this page would need to reflect those changes to maintain a consistent, minimalist, and modern brand identity.
Argument
- Yes, I agree with this feedback. The suggestions for this "Payment Successful" page are crucial for achieving your minimalist, modern design and enhancing the experience of your payment MVP.
- Most importantly, adding a clear next action (e.g., "View Order" or "Back to Home") after a successful payment is vital for user experience.
Promotion & Activities Page
Figure 1.6 Promotions Page Interface
Self Reflection
- Strong branding & appealing food visuals.
- Clear page intent & calls to action.
- Functional layouts & consistent navigation.
AI Reflection
- Heavy Red: Dominant color, needs a lighter background.
- Typography: Inconsistent, not modern sans-serif.
- Clutter: Too dense; needs more whitespace, simpler icons.
- Element Style: Buttons, inputs, and shadows are heavy; need lighter, subtler designs.
- Empty States: Need guiding messages.
- Next Steps: Add clear actions after key tasks (e.g., payment success).
Argument
- Yes, I agree. The current design is visually heavy. The suggestions (lighter palette, clean typography, more whitespace, subtle elements) create a sophisticated, modern, and trustworthy app. This enhances user experience and efficiency for your payment MVP, making the app feel professional and easy to use.
Profile Page
Figure 1.7 Profile Page Interface
Self Reflection
- Clear Information & Functionality: Both pages effectively present core information (order status, order details, totals) with clear titles and relevant actions.
- Intuitive Order Tracking: The timeline on the Order Status page is an excellent visual tool for users to understand their order's progress.
- Direct CTAs: Buttons like "Order Summary" and "Report Order" provide clear next steps or support options.
AI Reflection
- Dominant Red Background: A lighter background (white or light grey) would greatly enhance clarity and visual airiness.
- Typography & Readability: While legible, the font choices and their contrast on the red background (e.g., in Order Summary) could be improved.
- Visual Weight of Elements: The sushi illustration on Order Status is charming but detailed; a simpler, line-art style would be more minimalist.
- Timeline: The red line and bold triangles are prominent. A subtler timeline (e.g., light grey line with small dots), using accent color only for active/completed stages, would be cleaner.
- Buttons: Solid red buttons, while clear, contribute to visual heaviness. Consider softer styles or ghost buttons for secondary actions to maintain a lighter feel.
Argument
Yes, I strongly agree. These refinements are vital for achieving a minimalist, modern design and bolstering your app's payment MVP.
The current pages, with their heavy red and dense elements, can feel overwhelming. By implementing a lighter, more refined color palette, clean typography, and increased whitespace, these crucial post-payment screens will become more elegant and user-friendly.
Reflection Summary
Figure 1.7 Interface Scored by AI
- To summarize, the overall design is highly interactive and user-friendly, with only a few grammar issues and some CTA buttons that need refinement and redesign. Based on the AI's evaluation, the design received a score of 21 out of 25.
- Additionally, the AI recommended incorporating a secondary accent color, such as grey, cream, or a muted sushi green, to help segment sections and reduce visual fatigue in areas with high-density red.
- For typography, I need to maintain a consistent typographic scale to ensure readability on mobile devices. A base font size of at least 16pt is recommended, with clear, proportional scaling for headings (H1–H3) and button text.
Refining Prototype
First things first, I needed to update the typography and color scheme. Using only two main colors felt too limiting, so I decided to introduce grey as one of the primary colors to add more depth and balance to the design. As for the typography, I realized the original typeface didn’t quite match the modern aesthetic I was aiming for, so I switched to a more contemporary style to make the overall design feel more engaging and visually appealing.
For the color tone and typography, I plan to customize them for each page to create a more dynamic and engaging visual experience. However, when it comes to refining the layout design, I will focus only on the MVP features — specifically, the login process and placing a sushi order through the app.
MVP Feature:
- Home Page
- Menu Page
- Payment Page
- Cart Page
- Ham Burger Menu Page
- Notifications Page
- Profile Page
I initially started by redesigning the menu page, changing the entire layout, and removing some of the shadows. I felt that the shadows made the layout and shapes appear too heavy. For the color scheme, I chose black, red, and gray as the main colors. I used gray primarily for the containers, while elements like buttons and titles were styled in either red or black to create contrast and maintain visual consistency.
Menu Page
Figure 1.8 Menu Page Redesign
I also made the navigation bar more visually appealing. Initially, I used red for the icons, but I found the color too bright, making the labels harder to read. To improve readability and balance, I changed the icon color to black. Additionally, I made the navigation bar transparent so it wouldn’t obstruct or overpower the content behind it.
Hamburger Menu Page
Figure 1.9 Hamburger Menu Page Redesign
For this page, I decided to redesign it so that it covers only one-fourth of the screen, instead of the full page like in the previous design. The full-page layout didn’t resemble a typical hamburger menu, so scaling it down makes it feel more appropriate and user-friendly.
Additionally, I moved the profile page link, which was originally placed in the bottom navigation bar, into this menu. This change makes the interface look cleaner and more organized. Now, when users click on their profile picture or name, they’ll be taken directly to the profile page where they can edit their personal information.
Profile Page
Figure 1.10 Profile Page Redesign
When it came to the profile page, I didn’t make major changes to the overall layout. Instead, I focused on subtle adjustments to better align it with the redesigned interface. I added containers to create a more consistent look and feel with the rest of the app. Additionally, I included a logout icon next to the button for clearer functionality, and I resized the profile picture to be smaller so it wouldn’t draw too much attention or distract the user.
Notifications Page
Figure 1.11 Notifications Page Redesign
For this page, I completely redesigned the layout, as the previous version was too simple and rushed. Based on reference designs I found online, I introduced a navigation bar to separate unread notifications from those that have already been read. Once a message is clicked, it automatically moves to the "Read" section on the next page, allowing users to easily track their notification history.
Sushi Details Page
Figure 1.12 Product Details Page Redesign
My redesign focused on turning the product detail page from a cluttered layout into a clean, modern, and minimalist experience. The original version had a bold red header full of icons like the menu, notifications, and categories, which distracted from the main focus—the food item. I removed this header and kept only a simple back arrow, helping users stay focused on the product.
I also improved how the product details were shown. Instead of plain text, I used ingredient icons and added calorie info for clarity and a fresher look. By using a mostly white layout and more whitespace, the page feels lighter and easier to read. This new design makes it simpler for users to understand the product and quickly add it to their cart, supporting a smoother and more efficient ordering process.
Cart Page
Figure 1.13 Cart Page Redesign
When comparing the new white-background design on the left to the original red and dark grey version on the right, there's a clear shift toward a cleaner and more modern look, which helps improve the payment MVP. The main change is replacing the heavy color scheme with a white background, making the design feel lighter and more in line with current UI trends. I also simplified the header, changed the bold "My Cart" button into a simple title, and displayed each product on a clean white card with updated quantity controls.
Furthermore, I also simplified the cart page by replacing the bold "My Cart" button with a clean title and showing each product in a white card with an improved quantity selector. The empty cart screen was made more welcoming, and I added clear breakdowns for "Subtotal," "Service Tax," and "Total" to improve cost transparency. These changes make the page easier to read, reduce clutter, and help users feel more confident before checking out, creating a smoother and more reliable payment process.
Payment Page
Figure 1.14 Payment Process Page Redesign
I redesigned the Payment Page (shown on the left) to make the process feel more secure, modern, and user-friendly compared to the original version (on the right). The old design used a heavy red header, dark backgrounds, and confusing input fields, which didn’t give users much confidence when entering payment details. I also used a clean white background to give the page a more professional feel and simplified the header to just a "Checkout" title and back arrow, keeping the focus on the payment section.
After payment, the success screen now clearly confirms the order, shows the order number, lists the items, and offers options to "Track Your Order" or "Continue Shopping." These updates make the whole payment process feel simpler, safer, and more efficient, improving the core experience of the app.
Home Page
Figure 1.15 Home Page Redesign
When designing the "Special for You" section on the home page of our Sushi King app, my primary goal was to offer a truly personalized and helpful experience for our customers who might feel overwhelmed by the extensive menu or simply crave something new. Instead of just presenting a static list, I envisioned a dynamic section powered by smart recommendations. The previous layout lacked a clear and engaging entry point for users seeking guidance.
Therefore, I created a dedicated "Special for You" area with a compelling visual and concise text like "Stuck on what to order? Your next favorite awaits!" coupled with a prominent "Get Recommendations" button. This approach directly addresses a common user pain point, "indecisiveness," and leverages our business intelligence to suggest sushi tailored to their likely preferences, based on past orders, popular choices, and other relevant data. This not only enhances user discovery and satisfaction but also strategically promotes items they might not have otherwise considered, ultimately aiming to boost engagement and order value.
Final Refined Figma Link
Click HERE to view my Figma Link.
Figure 1.16 Final Refined Figma Link
Presentation Slide
Click HERE to view my presentation slide.
Figure 1.17 Presentation Slide in Canva
Presentation Video on YouTube
Figure 1.18 Presentation Video on YouTube
REFLECTION
From Task 01 of the Application Design II module, I gained some valuable insights into how essential visual clarity and consistency are in user interface design. What was discovered was that among the primary problems was visual overload in the initial app design, primarily due to the widespread application of red and varied typography. The serif fonts, heavy text, and large logo all made it a messy and outdated appearance that damaged the user experience. I also discovered that minute things, even such as incorrect grammar like "An Tailored Experience," can damage the professionalism of an interface.
I truly felt the advantage of iterative design and positive criticism throughout. With self-criticism and critiques, I made the visual design more elegant by adopting a minimal color palette and dull sans-serif font, which immediately gave the interface a more modern and user-focused look. Simplifying UI elements and adjusting layout spacing dynamically improved visual hierarchy and usability overall. I also learned that judicious whitespace use improves readability and gives the interface a more elegant and even look.
As a whole, this project elicited the means through which small but intentional design modifications can develop effective improvements in user interaction. The exercise reinforced my understanding of user-centered design and challenged me to see how clean appearances, obvious communication, and actionable interaction are all pivotal in successful digital applications. It was a fulfilling experience that expanded my ability to analyze and optimize digital applications effectively.
Comments
Post a Comment