Application Design 2: Task 1
App Design 1 Self-Evaluation & Reflectionㅤ
Table of Contents
✿ Lectures
Module Information
Lectures
Week 1
➜ Module Information Briefing
During the lecture, Mr. Razif briefed us on the module information
booklet and the assignments we will have to submit throughout
completing this module. Besides that, he introduced us to Flutterflow,
a no-code app development tool, and UXLab Assistant in ChatGPT to
assist with user experience design tasks
Week 2
➜ Public Holiday (No Class)
Week 3
➜ Absent
Based on what other's have learnt, there was a class exercise to
replicate a boarding pass.
Week 4
➜ User Flowchart (Booking App)
Objective: The objective
of this activity was to create a comprehensive user flow for the
Booking App, including all essential booking processes from
login to payment confirmation. The focus was on ensuring a
logical flow, intuitive wireframes, and clear interaction
pathways for users.
My group decided to go for a travel booking app based in
Taiwan, known as Starlux.
After presenting in class, Mr. Razif suggested refining the
flow to better segment each process, ensuring a smoother
navigation experience.
Task 1: Self-Evaluation & Reflection
Todo:
- Write a reflection on the outcome of App Design 1's work
- Determine what should be changed and updated
Instructions:
Students must perform a self-evaluation and reflection based on
their Mobile Application Design 1 final project. The goal
is to identify issues, propose improvements to the app’s
aesthetic and user flow, and document the refining process.
Students are required to submit the documentation via Google
Docs for feedback purposes.
- Write a self-reflection blog post comparing the old and new app designs.
- Refer to example blogs from past students for guidance.
Previous High-Fi Prototype of Temu App (Application Design
1)
Figure 3.1 High-Fi Prototype (Wireframes)
Self-Reflection
Last semester, I redesigned the Temu app and realized that good app design isn’t just about looking nice — it’s about making things easy and enjoyable to use. At first, I focused a lot on visuals, but through user research and testing, I learned how important usability really is.
I found issues like confusing navigation and cluttered layouts, which made me rethink how users move through the app. I also learned to pay attention to little things like loading feedback and button consistency — they really help make the experience smoother.
Overall, this project boosted my confidence in UX/UI design, and I’m excited to apply what I’ve learned in App Design 2. I started by identifying its strengths and weaknesses with the help of UXLab Assistant in ChatGPT which was provided by Mr.Razif.
Figure 3.2 High-Fi Prototype
UXLab Assistant
Below is the chat and response from UXLab Assistant, as well as a summary of the review.
Figure 3.3 UXLab Assistant Response
Sections
1. Log In & Register
2. Home Page & Navigation Bar
3. Home Page Shortcuts (Vouchers, Free Gifts, Credits, My Orders)
4. Product Page (Product Listing, Shop & Product Information,
Recommendations)
5. Checkout Process (Shipping Details, Payment, Order Successful)
6. Order Details (All Orders, Rate Product, Track Order)
7. My Profile (Profile, Settings, Vouchers)
UXLab Assistant Review
Suggestions from UXLab Assistant & My Argument
✅ Agree with UXLab Assistant
❌ Disagree with UXLab Assistant
1. Log In & Register
UI Review (Strengths & Weaknesses)
- Has a consistent orange theme that aligns with brand identity
- Layout is straightforward, with clean input fields and recognizable icons for social media logins
- The "Forgot Password" link is present, but its visibility could be enhanced
Room for Improvement:
- The button for "Log In" might have too much white space, shape of the buttons could be more rounded
- The placeholder text for "Email Address" and "Password" can be more subtle (light grey) to avoid visual clutter
- Include a "Successfully signed up" confirmation
- Login Page background could be white, and logo and buttons could be orange
- Include onboarding flow to explain app benefits
Enhancement Suggestions (Agreed & Disagreed):
- ✅ Highlight the password visibility toggle more clearly
- ❌ Suggestion to split the sign-up process into two steps (Personal Info, Account Setup) is rejected. A single-step form is preferred for simplicity and to reduce user friction. Users are more likely to complete registration when all required fields are visible at once.
- ✅ Smart field suggestions (like auto-fill) are helpful
- ❌ However, auto-formatting phone numbers is disagreed upon, as it may interfere with international inputs. A better approach would be to validate but not forcibly reformat user entries.
- ❌ Changing the background to plain white with orange buttons is partially rejected. While it increases contrast, it might compromise brand warmth. A card-style orange login box on a themed background maintains both clarity and identity.
2. Home Page & Navigation Bar
UI Review
- Card layout is used for categories and recommended products, making it visually organised
- The navigation bar uses icons with text labels, ensuring clarity in user navigation
Room for Improvement:
- The "Lightning Deals" section is visually prominent but lacks a defined call-to-action button (View All)
- The "Recommendations" section appears cluttered due to varying image sizes, maintain a consistent image ratio for better visual balance
Enhancement Suggestions (Agreed & Disagreed):
- ✅ Navigation bar hover/click color states would enhance feedback
- ✅ Include a scan icon on the search bar
- ❌ Auto-swiping promotion banners before the navigation bar may clutter the homepage and distract users. A static or user-controlled option would be clearer and less intrusive.
3. Home Page Shortcuts
UI Review:
-
The voucher section uses large, readable buttons and aligns with the theme
Room for Improvement:
- "Free Gifts" icons are too small; size increase would help
- The "Credits" section lacks clear CTA (Redeem Now, Learn More)
Enhancement Suggestions (Agreed & Disagreed):
- ✅ A "Share" button for credits adds engagement
- ✅ Adding "View Details" for each voucher improves transparency
4. Product Page
UI Review:
- Clean, grid-based layout with good spacing
- Recommendations effectively promote related items
Room for Improvement:
- Buttons and borders could be more rounded
- "Ask the Buyers" lacks visual distinction
- Buyer Gallery thumbnails are too small
Enhancement Suggestions (Agreed & Disagreed):
- ✅ Use of colour palette on borders and titles
- ✅ Quick-scroll indicator improves usability
- ✅ Add a border on the top that keeps the share, back, and like button accessible
- ✅ Include a "view more" button for reviews
- ❌ Adding more listing images below product details takes up excessive space and may cause users to miss key sections like recommendations, reducing overall engagement.
5. Checkout Process
UI Review:
- Clear step-by-step layout
- Radio buttons for payment types improve usability
Room for Improvement:
- "Order Successful" page could include "Continue Shopping"
- "Payment Processing" could use a loading indicator
- Could benefit from more humanizing visuals
Enhancement Suggestions:
-
✅ Display estimated wait times (e.g., “Takes ~10 seconds”) to reassure
users during loading or processing.
✅ Enlarge product prices slightly for better visibility and emphasis.
✅ Keep Shipping Address & Delivery Options on the same page for convenience, but streamline the address input process to reduce steps.
❌ Avoid enlarging product images in the order summary excessively — it adds clutter without value and pushes essential info (like item details or payment) further down the screen.
6. Order Details
UI Review:
- Tracking system and feedback options are clear
Room for Improvement:
- The "Rate Product" page layout could be more engaging
- ❌ Emojis in the rating interface are not necessary; they might distract from the feedback purpose and clash with a clean, professional design aesthetic
UX Enhancements:
- ✅ Enable photo uploads for reviews
7. My Profile
UI Review:
-
Clear layout with separated sections for settings, orders, and vouchers
Room for Improvement:
- Settings Page can be redesigned to look cleaner and have enough of white space to prevent buttons from looking cluttered
- Profile picture upload tools could be enhanced
UX Enhancement:
- ✅ Settings Page Redesign
- ❌ Privacy Checkup prompt is not essential; might be intrusive for a shopping app. Instead, place it passively in settings for users to access if needed.
App Design Changes
➜ Log In
I made changes to the log in page as the orange might be too overwhelming.
Based on what UXLab assistant mentioned, it is better to have the
background white, and the logo and buttons uses the primary colour which
is orange.
Initially, I kept the background white and make the text input border
orange. After consulting with my friends who use the Temu app, they think
its best to make the text input section a darker colour. So I made the
second version where the idea is to have a card background. But as the
card may be too long and that I want to seperate the text input details
and the other preferred platform sign in options better.
Hence the final version have the card background, but I removed the OR
border and include Temu logo graphics at the bottom to create a more
polished and unified identity for the app design.
Figure 3.4 Log In Process
Figure 3.5 Log In Screen Changes
➜ Register / Sign Up
I made some changes to enhance the app's visual appeal and create a more
welcoming atmosphere. One of the key changes I implemented was the icons
from the Temu logo. As this alteration can make the register process more
interesting. I also removed the sub-headers and changes the inner text
input as the titles. This helps to make good use of the white space and
make it look less cluttering.
Furthermore, I changes the title of the register page to create an account
(the difference between Register 1 and Register 2 wireframe), as I think
most users would prefer to know what this page is for instead of knowing
the title of the page. This shows the purpose of the page better.
Figure 3.6 Register Process
Figure 3.7 Register Changes
➜ Homepage
To improve the user experience, I kept the extended length of this page to
alleviate the cramped feeling of the all the features and information. I
included the Temu logo on the top left of the search bar to show brand
identity. Besides that I made the navigation bar more interesting by
highlighting the icons with shadows, button-liked borders so it looks very
inviting towards users to click and explore these pages.
Besides that, from what UXLab Assistant mentioned, which is to include
expandable sections so I added a arrow button for the recommendations
section. Besides that I added a heart wishlist button on the top right
corner of each listing to ease users into saving more listings into their
wishlist.
By making these changes, the app now offers improved usability, and
enhanced readability.
Figure 3.8 Homepage Changes
➜ Cart
For the cart page, I kept most of the things the same, but made changes to
the UI abit, for example the colour of the buttons, and the circle with
borders. This helps users differentiate selected or not selected items
easier.
Other than that, I changed the button of the quantity as the previous box
design is dark coloured and affects visibility. So I added the ease of +
and - buttons to change quantities easier. Besides that I added a border
to the delete button icon for enhanced visibility.
Figure 3.9 Cart Changes
➜ Product Listing
In this page, I made a lot of major changes. I updated the colour schemes,
mainly using one primary colour which is the orange. The "less" important
information would be in a light grey. As the previous design wireframe's
blue colour was overpowering and makes the page look very clutter-y. With
the new design on the right, it looks cleaner and more pleasing to the
eyes.
As for the top of the page, I added a border to emphasize on the buttons
which is back & wishlist button. Then the bottom add to cart button is
changed to white colour as it has a good contrast with the orange
background and the makes the button more eye catching.
The overall layout is almost the same but I did make sure to use the white
space and padding appropriately. I did added a few small details
like the rounded off top "card" as you can see that in other pages. So I
wanted to implement it into this page to match the overall theme and
design.
Figure 3.10 Product Listing Changes
The following wireframes are not part of the main flow but I just
made the changes to make the overall app theme in match and prettier.
➜ Profile
For this page, I changed the navigation bar to be the same design as the
home page's navigation bar. Then, I made the profile picture bigger and
included the other information inside My Profile instead. So this doesn't
take up a lot of space and is hidden privately just in case, and to make
users feel more comfortable using the app, as it respects their privacy.
Figure 3.11 Profile Changes
Figure 3.12 Edit Profile Changes
Figure 3.13 Profile Settings Changes
➜ Credits
I changed this page just a little bit, which is to make the wallet
design cleaner, and include new features like top up, and transfer
edits. This was recommended by UXLab Assistant.
Figure 3.14 Credits Changes
➜ Track Order & Rate Order
In the tracking pages, I updated the colour scheme of the cards
and buttons. This makes the text easier to read and would not sore
the eye so much.
Figure 3.15 Track Order Changes
Figure 3.16 Rate Order Changes
➜ Checkout
In the checkout page, I made the steps simpler by having
saved address and default address. In the same page, it also
shows the delivery options and i added estimated time arrival
for it so users have a clearer mind in choosing the right
option for them.
In the other checkout pages, the only change is the colour of
the buttons which is from blue to white.
Figure 3.17 Checkout Changes
Figure 3.18 Checkout 2 Changes
App Design 1 VS App Design 2
General Changes:
- Colour scheme
- Layout
- Shapes
Figure 4.1 Previous VS Final Design Screens
Figure 4.2 Final Design Screens with prototype interactions
Final Redesign of App "Temu" for Viewing
Feel free to try it out!
Figure 5.1 Prototype Testing
click
HERE
for the link to Figma file
Recording
As required, I recorded a video of me presenting the changes I
have made.
Figure 6.1 Recording Presentation for Task 1
Feedback
Week 3
Based on the feedback received from mr Razif, he mentioned that I
should focus on my main flow when redesigning the figma file. The MVP
should be the main focus as the flow is very important. Some design
feedback was given:
- Use of colour palette can be better, don't make the secondary colour overpowering the primary colour
- Rounded off corners for boxes
- Checkout process is okay, not too long
Reflection
In this task, I was initially confused on where to start, but
thanks to Mr. Razif's guidance in uploading our wireframes for App
Design 1 into the given ChatGPT (UXLab Assistant) chat, I was able
to get a grip on what to do with my app design. From then onwards, I
started redesigning my wireframes based on what UXLab assistant
recommended, as well as feedback from Mr. Razif.
There are a few things that I agree and disagree with the AI bot,
as it is not 100% accurate so sometimes it mention to change things
that are already there in the first place. Besides that I have my
own reasoning for keeping my previous designs which I mentioned
above in my blog too.
Overall, I was able to brush up my Figma skills as well as learn
how to analyse and improvise my first version of the app design of
Temu.