APPLICATION DESIGN 2 - TASK 01
21/04/2025 -12/05/2025 (Week 01-04)
Chan Suet Yee 0358427
Bachelor of Design (Honours) in Creative Media
Application Design II | DST60504 | Sec 01
Task 01 | App Design 1 Self-evaluation & Reflection
LIST
TABLE OF CONTENTS:
INSTRUCTIONS
EXERCISES
WEEK 2 - BOARDING PASS REDESIGN
In Week 2, we worked in a group to redesign a boarding pass. The goal was to make the information easier for users to read and understand. We looked at common problems like messy layouts and small text, then came up with a cleaner design that highlights important details like the flight number, gate, and boarding time.
Here’s our final redesign:
Fig 1.0 Week 2 Exercise - Boarding Pass Redesign
WEEK 3 - WIRE FLOW
In Week 3, we learned how to create a wire flow chart to plan user journeys through an app or website. After the lesson, we were given an exercise to design a wire flow chart for booking a room in a library. This helped us understand how to organise steps clearly and think from the user’s point of view.
Fig 1.1 Week 3 Exercise - Wire Flow
TASKS
INSTRUCTIONS
In this task, we are required to reflect on our final mobile app project from Application Design 1. The main objective is to evaluate the original app design, identify areas that need improvement, and suggest solutions to enhance both visual design and user experience.
SELF EVALUATION
What I think works well:
- Clean visual hierarchy that helps users easily understand the flow and actions.
- Effective use of white space for readability and simplicity.
- Clear labelling for buttons, tabs, and categories enhances usability.
- User-friendly cart and checkout flow with logical grouping of information.
What I think could be improved:
- Some interactive elements could be more intuitive to tap or recognize.
- Improve visual balance and spacing in a few areas to enhance alignment and clarity.
- Add more visual or interactive feedback to improve user engagement.
- Enhance accessibility by ensuring contrast, text sizing, and button tap areas are optimized.
- Consider ways to make certain screens (like Profile or Filters) more visually dynamic or informative.
FEEDBACK BY AI & REFINEMENT PROCESS
1. Home Page
Strengths :
- Clear navigation bar with icons and labels — great for usability.
- Greeting with user's name creates a personalized experience.
- Category chips and store icons are visually distinguishable and easy to tap.
- Product cards are clean and include pricing and action buttons.
1.Hierarchy and Visual Clarity
- The “Galaxy Unpacked” banner is visually dominant — but it's unclear whether it's clickable or just a visual. Add a CTA or a visual indicator (like a chevron or button) to clarify.
- “New Launching” and “Visit Stores” are close in visual weight, creating confusion about their relative importance.
- Vertical spacing between “Categories,” “Visit Stores,” and “New Launching” is a bit tight — could benefit from more breathing room to reduce cognitive load.
- While the bottom nav bar is well-labeled, some icons (like “Authorized Reseller”) under stores are less recognizable. Consider supporting them with labels for accessibility.
- Light grey chips may have insufficient contrast for some users. Test contrast ratio for WCAG AA compliance.
- Ensure buttons (e.g., add to cart +) meet the minimum tap target size (48x48dp).
Argument :
I made the “Galaxy Unpacked” banner visually dominant on purpose — it’s meant to catch the user’s eye like a real advertisement. However, I agree that some users might be confused about whether it’s clickable or not.As for the spacing, I admit it does look a bit tight and could use more breathing room.For the store logos, I chose not to add text labels because the logos already include the store names, and adding more text might make the screen feel cluttered.I also agree that the light grey chips might not have enough contrast and could be harder to see.
Refinement :
I also added a right arrow (>) at the bottom right corner of the banner to show that it’s clickable, so users won’t get confused.I increased the vertical spacing between “Categories,” “Visit Stores,” and “New Launching” to make the layout easier to read and reduce cognitive load.For the category chips, I changed to a darker background with lighter text to improve contrast and readability.Lastly, I made the “+” button bigger so it’s easier for users to tap or click
Fig 1.2 Refinement Process
2. S-Coin Page
Strengths :
- Strong branding of S-coin system — visually distinct.
- Incentive clearly stated: “Redeem up to 100%” is a motivating CTA.
- Good use of discount labels on products (20%, 15%).
Areas of Improvement :
1.Hierarchy:
- The banner dominates the screen, pushing actual redeemable items further down. Consider balancing the banner size with the product content below.
- “Categories” and “Stores” sections are repeated from the home page. Are they essential here too?
3.Call to Action Clarity:
- “Redeem Now” feels generic. Consider “View Redeemable Items” or “Use My S-Coins.”
4.Color Usage:
- The red banner and discount labels use the same red — it draws attention everywhere and reduces focus. Introduce secondary highlight color for clarity.
Argument :
The repetition of “Categories” and “Stores” is intentional for consistency and quick navigation. I want users to easily jump across pages without going back.
The “Redeem Now” CTA aligns with the marketing language used throughout Senheng’s campaigns — it's brief and familiar. I agree with the other suggestions.
Refinement :
I slightly reduced the height of the banner to give more space to the redeemable items, making them easier to see.
I also updated the discount badges by using a different colour to help users spot deals more quickly.
I also updated the discount badges by using a different colour to help users spot deals more quickly.
Fig 1.3 Refinement Process
3. Product Detail Page
Strengths :
- Clean layout and excellent use of visual hierarchy — product name, ratings, specs, and price all follow a logical flow.
- Color selection and storage options are well-grouped and tappable.
- Bottom CTA (Add to Cart) is prominent and visually strong.
Areas of Improvement :
1.Information Density:
- The product description (“AI Smartphone…”) is quite long — consider trimming it or adding line breaks.
- The three buttons (Reviews, Description, Others) look inactive. Adding a selected-state highlight or underline would improve usability.
3.Storage & Color Options:
- Currently, there’s no visual cue when an option is selected. Add a selected state (outline, color change, or tick mark).
4.Accessibility:
- Red price on red background (bottom CTA) may lack contrast. Ensure readability by testing it for colorblind users or increasing contrast.
Argument :
Agree with the suggestions.
Refinement :
I use a darker background for selected tabs (1TB &Reviews). Then I add a soft shadowto selected storage & color options. For long descriptions, I truncate with “Read More” to maintain layout cleanliness. Lastly,I changed the background colour for the price to black and make the add to cart button in red to make it stand out.
Fig 1.4 Refinement Process
4. Search Filter Page
Strengths :
- Clean layout with sufficient white space.
- Button hierarchy is clear: red (Reset) catches the eye, black (Apply) as secondary is appropriate.
- Well-categorized filters (Categories, Stores, Ratings, etc.).
Areas of Improvement :
1.Ratings stars:
- Only 1 star is filled, which can be misinterpreted. Consider using an interactive star selector with hover/fill feedback.
- Use slider instead of text fields for better mobile usability.
3.Accessibility:
- Use darker text for better contrast. Light gray on white may be hard to read for users with low vision.
Argument :
I wanted to keep the visual interface light and minimal to avoid clutter. The unfilled stars show the default state—users can then tap to choose higher ratings. I chose text fields over sliders because users might want exact pricing, which sliders can’t provide. I agree that light grey may be hard to read.
Refinement :
I use a darker background to replace the light grey background to enhance the contrast of the overall design for this page.
Fig 1.5 Refinement Process
5. Shopping Cart Page
Strengths :
- Strong visual clarity: product thumbnails, pricing, quantity controls are all well-placed.
- Total pricing and delivery charges are clearly shown at the bottom.
Areas of Improvement :
1.“All” toggle:
- Its function isn’t clear—does it select/deselect all items? A checkbox or clearer label could help.
2.Item spacing:
- Some products are too close vertically, which slightly affects readability.
Argument :
Agree with the suggestions.
Refinement :
I Increase the vertical spacing between items. Then, for “All” I use a checkbox icon to make its function clear.
Fig 1.6 Refinement Process
6. Checkout Page
Strengths :
- Payment methods are visually clean and familiar.
- Order summary is scrollable with thumbnails—very helpful.
- “Change Address” CTA is clearly visible and placed well.
Areas of Improvement :
1.Payment Method icons:
- Could use labels (e.g., “Visa”, “Touch’nGo”) for accessibility and clarity.
2.Spacing:
- The gap between sections (e.g., Payment → Order Summary) could be larger to distinguish content blocks better.
Argument :
I used payment method icons alone because they’re universally recognizable and reduce visual noise. Adding text would crowd the section. Agree with the other suggestions.
Refinement :
I slightly increase section padding for better segmentation.
Fig 1.7 Refinement Process
7. My Orders Page
Strengths :
- Good use of tabs (All, To Pay, To Ship).
- Order summaries are concise and easy to skim.
- Status tags like “To Ship” and “Shipped” are well-placed.
Areas of Improvement :
1.Visual emphasis on product:
- Product names and images are small; enlarging them a bit would improve clarity.
2.Order status:
- Could use color codes for better distinction (e.g., blue = to ship, green = shipped, red = to pay).
Argument :
Agree with the other suggestions.
Refinement :
I use color-code order statuses to increase at-a-glance understanding. I also Increase the image size of the product for better clarity.
Fig 1.8 Refinement Process
8. Profile Page
Strengths :
- Centralized user icon and branding offer strong visual identity.
- Settings options are clearly structured with good use of chevrons for hierarchy.
- Logout button is distinct and placed appropriately at the bottom.
Areas of Improvement :
1.Top section contrast:
- Black background with light text is good, but ensure icon contrast meets accessibility standards.
2.Visual gap:
- The white box looks slightly detached—maybe blend it with the background or use soft shadows to connect the layout.
Argument :
The black background is intentional to highlight the SENHENG brand and make the white card pop. I wanted to simulate a “membership card” feel.
Refinement :
No refinement was made.
Fig 1.9 Refinement Process
Presentation Slides
REFLECTION
Experience
This task gave me the chance to look back at the mobile app I designed last semester during Application 1. In this current module (Application 2), I got to check my old design and improve it based on what I’ve learned. It was a good experience because I could see which parts of the design worked well and which parts needed to be fixed. I learned that reviewing your own work helps you see things more clearly and make better decisions.
Observation
While checking my design, I noticed that some things like the layout, buttons, and spacing could be better. Some parts were already good, like the navigation bar and the general layout flow. But other parts were confusing or too crowded. I found that changing the spacing, making the text easier to read, and making the buttons clearer helped the app look nicer and be easier to use. I also learned how important it is to keep everything consistent.
Findings
From this task, I realized that evaluating and improving your own design is very helpful. I understood that even small changes can make a big difference in how users feel when using the app. This activity showed me how much I’ve grown as a designer and why testing and improving your work is so important. It helped me build a better design by thinking more about the users.
Comments
Post a Comment