24.04.2025 - 15.05.2025 (Week 1- Week 4)
Gunn Joey / 0366122
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 1: Application Design I Self-Evaluation & Reflection
TABLE OF CONTENTS
1. Module Information Booklet
2. Lectures
3. Task 1
4. Reflection
MODULE INFORMATION BOOKLET
LECTURES
Week 1
Additionally, Mr. Razif introduced us to his custom GPT-powered tool called UX Lab Assistant. This innovative plugin is designed to support our design workflow by evaluating our app prototypes and delivering detailed, constructive feedback to help us identify areas for improvement. To facilitate the next phase of development, we also completed the registration process for FlutterFlow, which will serve as our primary platform for building and implementing our projects moving forward.
Week 2
Week 3
This week’s task involved exploring the user journey involved in purchasing
products or booking services via an app. Our group focused on designing a
wireflow specifically for a Hospital Appointment Booking App, outlining each
step a user follows to schedule an appointment. During the process, careful
attention was needed to position the back and forward buttons effectively,
ensuring users could navigate the app without difficulty. Once our wireflow
was complete, Mr. Razif reviewed our work and praised the overall structure.
He recommended enhancing the directional arrows to make it clearer which
buttons lead to subsequent screens, helping to guide users more
intuitively.
Click here to view our final wireflow.
TASK 1 : APP DESIGN I SELF-EVALUATION & REFLECTION
To-do List
The chosen flow and MVP Feature:
Scenario 2:
Imagine you're a user browsing the Sasa app. Your goal is to test the
process of selecting a product, adding it to your cart and wishlist,
reviewing ratings and reviews, applying a promo code, and completing the
checkout process.
Steps to Follow:
- Start by opening the Sasa app, where you will be directed to the homepage. Browse through the products listed on the homepage and click on the first product you see to view its details.
- Once you are on the product page, click Add to Cart to add the item to your shopping cart. Then, click Add to Wishlist to save the item for future reference. Scroll down to find the Ratings and Reviews section, and tap on it to view user feedback. Check whether the reviews load smoothly and if they are easy to read.
- After returning to the homepage, click the shopping cart icon to access your cart. Review the items you’ve added and ensure they are correct. Click View All Promos to explore the available promotions. Select the first promo listed and click Apply at the bottom to apply it to your order.
- Once the promo is successfully applied, return to the cart and click Checkout to begin the payment process. Click Select Payment Method and choose your preferred payment option. If you need to check the details of your order, click See Details to view the full order summary. After verifying that everything is correct, click Place Order to finalize your purchase and complete the process.
GPT Quick Design Score:
Total: 19/25
Summary by AI:
You have done a very good job! The app feels clean, easy to use, and follows good design rules. If you add a few improvements like bigger tap areas, small animations, and better color contrast, it will feel even more smooth and professional!
Reflection Paragraph:
A. Onboarding Pages
Things to Improve & Weaknesses I Agreed with AI:
Minor Disagreement Feedback by AI:
The AI suggested adding a progress indicator such as swipe dots to
help users understand how many onboarding steps there are. However, my
original design already included swipe dots at the bottom of the
screen. Because of this, I did not need to make any changes in that
area. The AI also recommended adding a “Skip” or “Log In” option on
the onboarding screens. I decided not to include this because I wanted
users to complete the introduction before logging in. I also kept the
same illustration style across all slides for a clean and consistent
look, even though the AI suggested using different visuals for each
screen.
Strength:
These screens now look more dynamic and appealing, with a brighter color scheme and improved layout. The forms have been animated with a push-up effect to make the experience feel smoother and more modern. This fits better with Sasa’s vibrant and youthful brand tone.
Things to Improve & Weaknesses I Agreed with AI:
In the previous design, the form fields were too close together and
the button was small with low contrast. GPT AI pointed out the lack
of accessibility and difficulty in tapping buttons. In the latest
version, I added more spacing between input fields, increased font
sizes, and made the Log In and Sign Up buttons easier to tap. The
button design uses bright pink with rounded corners to make it stand
out more and match the Sasa branding. I also added animation like
push-up effect to the form entry to make the experience more dynamic
and engaging.
Minor Disagreement Feedback by AI:
The AI recommended breaking the sign-up form into multiple steps to
reduce the amount of content on one screen. I decided to keep all
fields on one screen so that users could complete the sign-up
faster. GPT also suggested offering social login options like Google
or Apple, but I chose to focus on basic email and password sign-up
to keep the design simple and avoid overloading users with choices
at this stage.
Strength:
The product pages now use color and layout creatively to highlight products and improve user interaction. The background behind the product images uses soft colors with rounded corners, giving the design a more elegant and modern look that reflects the beauty product market.
In the first redesign version, the product layout was standard and
lacked visual focus. GPT noted that the hierarchy was weak and that
the reviews section was cluttered. In the new version, I changed the
background behind the product image to a soft pink tone with rounded
corners to highlight the product more clearly. I also redesigned the
review section using a clear card layout, allowing users to read
feedback more easily.
GPT recommended adding sorting or filter options in the review
section, like sorting by most recent or highest rated. I chose not to
include these features yet, as I wanted to focus on visual clarity and
brand consistency first. I also added a two-column layout for related
products, which was not part of AI suggestions, but I believe this
helps users see more products at once and improves browsing.
Strength:
The shopping cart is now better organized and easier to use. Each product is separated in a clear layout. The checkout button is now fixed at the bottom of the screen, so users can access it at any time without needing to scroll down.
Things to Improve & Weaknesses I Agreed with AI:
In the earlier version, the product layout in the shopping cart was very basic and did not feel visually engaging. The spacing was tight, and the overall layout looked plain. Users also had to scroll all the way to the bottom of the screen to find the “Checkout” button, which could slow them down or cause them to miss it. GPT AI advised improving the layout to make it more structured and ensuring that important actions like the checkout button were always accessible.
In the latest redesign, I organized each cart item into card-style containers with more space between elements, which improves readability and helps users scan their list more easily. I also set the “Checkout” button to fixed mode, which means it stays visible at the bottom of the screen even while users scroll. This makes the checkout process faster, clearer, and more convenient.
Strength:
The redesigned checkout section is now much more user-friendly and complete. Important details like delivery method, promo selection, and payment choice are all clearly shown in one view. The new fixed-position “Place Order” button stays visible as users scroll, which supports a faster and more convenient experience. By showing the applied promo and chosen payment method in the final summary, users feel more confident before completing their purchase. These updates improve both the clarity and usability of the checkout flow, while also matching the clean and stylish tone of the Sasa brand.
Things to Improve & Weaknesses by AI:
In the older version of the checkout page, some important steps were missing or not shown clearly. GPT AI suggested improving the way information is presented. I agreed with this and made changes to help users feel more confident when placing their order. I added a promo selection section in the checkout process. Before, there was no way to choose a promo on this screen, which could confuse users. Now, users can select a promo and see it clearly before checking out. I also made the selected payment method appear in the final summary, which helps users review their choices more easily. Another improvement I made was setting the Place Order button to fixed mode. In the old design, users had to scroll to the bottom to see the button. Now, the button always stays at the bottom of the screen, which makes the checkout process faster and more convenient.
The AI recommended using collapsible sections to shorten the screen and reduce scrolling. I chose not to follow this suggestion because I wanted all key information to remain open and visible. This way, users can check all their details at a glance without needing to tap or expand each section, which I believe offers a smoother and more transparent experience.
Strength:
The promo section is now easier to use and much clearer. The
layout helps users quickly understand their options, and the
selected promo appears in the final summary. These changes improve
both visibility and confidence, while the use of pink and grey
tones keeps the design soft and consistent with the brand.
GPT suggested turning each promo into a full interactive card or
button to make the selection feel stronger. I chose not to fully
follow this. Instead, I used a simple and clean selection layout
with larger circles and light pink highlights to show the selected
promo. This matches the Sasa brand style and keeps the layout calm
and not too busy.
Strength:
Things to Improve & Weaknesses by AI:
I improved the layout of the order summary to make it easier to scan. Pricing and product details are now separated more clearly, and I used soft pink accents to match the app’s tone.
Minor Disagreement with AI:
GPT suggested a more standard summary layout, but I chose to use a creative card-based structure that feels more in line with Sasa’s brand. I wanted the layout to feel less generic and more visually engaging.
I followed GPT’s suggestion to make the circle selection buttons for payment methods larger to improve tap accuracy.
Minor Disagreement with AI:
I did not make this section collapsible as suggested by GPT. I felt that keeping all payment options visible at once would help users make faster choices without extra steps.
Summary by AI:Your redesign shows strong improvement in both visual and functional design. You added key usability features like fixed action buttons, visible promo selection, and larger tap areas. The layout now feels cleaner and more aligned with Sasa’s brand. You kept interactions simple and made smart choices like not using collapsible sections to maintain flow. Button styles, color choices, and section visibility are all more refined, helping users navigate the app with ease. A few minor improvements (like adding review filters or confirmation states) could further enhance the experience, but overall, your work reflects thoughtful design decisions and solid UX thinking.
Working on this task was a great learning experience for me.
Redesigning the Sasa app helped me understand how important it
is to balance making an app visually appealing with ensuring it
is easy to use. Using tools like Figma and FlutterFlow allowed
me to bring my ideas to life, but also showed me how much
careful thought goes into every part of the design, from the
layout to the navigation.
During the process, I realized that clear navigation and well-organized information are key to a good user experience. The feedback I received from GPT pointed out that while the colours and overall look were attractive, some users had trouble figuring out where to go next. This insight made me revisit my design to improve button placement and add clearer visual cues so users could navigate the app more easily.
I also observed how important it is to consider different types of users. Designing with accessibility and clarity in mind meant I needed to carefully structure the app’s content to work for a variety of people. Receiving feedback from both my instructor and AI tools helped me identify things I had missed, showing me the value of getting multiple perspectives during the design process.
Overall, this task taught me that good app design is a continuous process of experimenting, learning, and refining. It is not only about creativity but also about understanding user needs and creating smooth, enjoyable experiences. I feel more confident now and look forward to applying what I have learned in future projects.
B. Log In & Sign Up Page
Strength:
These screens now look more dynamic and appealing, with a brighter color scheme and improved layout. The forms have been animated with a push-up effect to make the experience feel smoother and more modern. This fits better with Sasa’s vibrant and youthful brand tone.
Things to Improve & Weaknesses I Agreed with AI:
Minor Disagreement Feedback by AI:
C. Product Page
The product pages now use color and layout creatively to highlight products and improve user interaction. The background behind the product images uses soft colors with rounded corners, giving the design a more elegant and modern look that reflects the beauty product market.
Things to Improve & Weaknesses I Agreed with AI:
Minor Disagreement Feedback by AI:
D. Shopping Cart
The shopping cart is now better organized and easier to use. Each product is separated in a clear layout. The checkout button is now fixed at the bottom of the screen, so users can access it at any time without needing to scroll down.
Things to Improve & Weaknesses I Agreed with AI:
In the earlier version, the product layout in the shopping cart was very basic and did not feel visually engaging. The spacing was tight, and the overall layout looked plain. Users also had to scroll all the way to the bottom of the screen to find the “Checkout” button, which could slow them down or cause them to miss it. GPT AI advised improving the layout to make it more structured and ensuring that important actions like the checkout button were always accessible.
In the latest redesign, I organized each cart item into card-style containers with more space between elements, which improves readability and helps users scan their list more easily. I also set the “Checkout” button to fixed mode, which means it stays visible at the bottom of the screen even while users scroll. This makes the checkout process faster, clearer, and more convenient.
Minor Disagreement Feedback by AI:
The AI gave feedback to improve the layout and interaction design. While I agreed with most of the suggestions, I also made some design choices based on what I felt worked better for my app. One example is the Points Earned section. In the earlier version, the background colour was black, which made it stand out too much and took attention away from the main cart details. I changed it to a light grey colour so it still shows the information but does not distract the user. I wanted the focus to stay on reviewing the products and completing the checkout process. This small change helps keep the screen calm and easy to follow while still showing the rewards clearly.
a. Information
The AI gave feedback to improve the layout and interaction design. While I agreed with most of the suggestions, I also made some design choices based on what I felt worked better for my app. One example is the Points Earned section. In the earlier version, the background colour was black, which made it stand out too much and took attention away from the main cart details. I changed it to a light grey colour so it still shows the information but does not distract the user. I wanted the focus to stay on reviewing the products and completing the checkout process. This small change helps keep the screen calm and easy to follow while still showing the rewards clearly.
E. Checkout Process
The redesigned checkout section is now much more user-friendly and complete. Important details like delivery method, promo selection, and payment choice are all clearly shown in one view. The new fixed-position “Place Order” button stays visible as users scroll, which supports a faster and more convenient experience. By showing the applied promo and chosen payment method in the final summary, users feel more confident before completing their purchase. These updates improve both the clarity and usability of the checkout flow, while also matching the clean and stylish tone of the Sasa brand.
In the older version of the checkout page, some important steps were missing or not shown clearly. GPT AI suggested improving the way information is presented. I agreed with this and made changes to help users feel more confident when placing their order. I added a promo selection section in the checkout process. Before, there was no way to choose a promo on this screen, which could confuse users. Now, users can select a promo and see it clearly before checking out. I also made the selected payment method appear in the final summary, which helps users review their choices more easily. Another improvement I made was setting the Place Order button to fixed mode. In the old design, users had to scroll to the bottom to see the button. Now, the button always stays at the bottom of the screen, which makes the checkout process faster and more convenient.
Minor Disagreement with AI:
The AI recommended using collapsible sections to shorten the screen and reduce scrolling. I chose not to follow this suggestion because I wanted all key information to remain open and visible. This way, users can check all their details at a glance without needing to tap or expand each section, which I believe offers a smoother and more transparent experience.
b. Promos
Strength:
Things to Improve & Weaknesses by AI:
Minor Disagreement with AI:
In the old design, users could not see the selected promo in the
final summary. This could cause confusion about whether the
discount was applied. I fixed this by showing the selected promo
clearly in the final checkout screen, so users know it is
working. I also made the promo selection circle bigger to make
it easier for users to tap. This helps reduce mistakes when
selecting a promo. I redesigned the promo layout by using light
grey boxes to separate each promo. Before, it only used thin
lines, which didn’t look clear. Now, each promo is easier to
read and stands out more.
c. Order Summary
The layout shows product details in a clean and creative way that
fits the Sasa brand. Instead of using a plain list, I used a more
styled layout with light pink tones and better spacing, which makes
the screen feel more polished. This helps users quickly review what
they’re buying before placing the order, while also keeping the
design soft and consistent with the skincare and beauty theme.
Things to Improve & Weaknesses by AI:
I improved the layout of the order summary to make it easier to scan. Pricing and product details are now separated more clearly, and I used soft pink accents to match the app’s tone.
Minor Disagreement with AI:
GPT suggested a more standard summary layout, but I chose to use a creative card-based structure that feels more in line with Sasa’s brand. I wanted the layout to feel less generic and more visually engaging.
d. Payment Method
Strength:
All payment options are shown in a clean layout, making it simple for users to compare and choose. The larger selection circles make it easier to tap, especially on mobile. The layout is well organized and matches the clean, soft style of the Sasa brand, helping users feel confident when selecting how they want to pay.
Things to Improve & Weaknesses by AI:
All payment options are shown in a clean layout, making it simple for users to compare and choose. The larger selection circles make it easier to tap, especially on mobile. The layout is well organized and matches the clean, soft style of the Sasa brand, helping users feel confident when selecting how they want to pay.
I followed GPT’s suggestion to make the circle selection buttons for payment methods larger to improve tap accuracy.
Minor Disagreement with AI:
I did not make this section collapsible as suggested by GPT. I felt that keeping all payment options visible at once would help users make faster choices without extra steps.
GPT Quick Design Score:
Total: 22/25 - Excellent Refinement
Summary by AI:
My Refinement Conclusion:
The Sasa Shopping App redesign focused on improving clarity, usability, and visual alignment with the brand. Key refinements included changing all main action buttons such as checkout and place order to fixed mode for better accessibility while scrolling. A new promo selection section was added in the checkout screen, allowing users to choose and view active promotions in the final summary. The payment method selected by the user is now clearly displayed before confirming the order.
The product layout was updated using rounded backgrounds and a soft color palette to match Sasa’s cosmetic and skincare branding. Selection circles for promos and payment methods were made larger to support easier tapping on mobile. The promo page layout was redesigned using grey cards to separate each offer for better contrast and readability. Button text sizes were increased across the app for better visibility and touch accuracy.
Each screen now presents key actions and information more clearly, with layouts that support faster decision-making and a smoother overall flow. The final result is a cleaner, more user-friendly interface that better reflects the Sasa brand experience.
The product layout was updated using rounded backgrounds and a soft color palette to match Sasa’s cosmetic and skincare branding. Selection circles for promos and payment methods were made larger to support easier tapping on mobile. The promo page layout was redesigned using grey cards to separate each offer for better contrast and readability. Button text sizes were increased across the app for better visibility and touch accuracy.
Each screen now presents key actions and information more clearly, with layouts that support faster decision-making and a smoother overall flow. The final result is a cleaner, more user-friendly interface that better reflects the Sasa brand experience.
Figma Redesign Wireframe: https://www.figma.com/design/AcWyF1Gmyy4FZ8mJTH9DDp/App2-Task-1-Redesign?node-id=0-1&t=oGkFCTqKfTWRH36W-1
Figma Redesign Prototype: https://www.figma.com/proto/AcWyF1Gmyy4FZ8mJTH9DDp/App2-Task-1-Redesign?node-id=15-400&p=f&t=IratuhGpANqpBA0F-1&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=15%3A397
Presentation Video:
REFLECTION
During the process, I realized that clear navigation and well-organized information are key to a good user experience. The feedback I received from GPT pointed out that while the colours and overall look were attractive, some users had trouble figuring out where to go next. This insight made me revisit my design to improve button placement and add clearer visual cues so users could navigate the app more easily.
I also observed how important it is to consider different types of users. Designing with accessibility and clarity in mind meant I needed to carefully structure the app’s content to work for a variety of people. Receiving feedback from both my instructor and AI tools helped me identify things I had missed, showing me the value of getting multiple perspectives during the design process.
Overall, this task taught me that good app design is a continuous process of experimenting, learning, and refining. It is not only about creativity but also about understanding user needs and creating smooth, enjoyable experiences. I feel more confident now and look forward to applying what I have learned in future projects.
Comments
Post a Comment