Application Design II - Self-Evaluation and Reflection (Task 1)
23/9/2024 - 20/10/2024 (Week 1- Week 4)
Katelyn Tan Kye Ling
(0354148)
Bachelor Of Design In Creative Media (Application Design
II)
Task 1 - Self-Evaluation and Reflection
LECTURES
We were given the rest of the class time to create this website. Here was what I created.
Click here for link to High-Fi Lotus's Malaysia App Prototype.
Sections of the App:
Onboarding
Log in
Home Page
Member Page
Favourites
Cart Page
Profile Page
1. ONBOARDING
This part is the introduction of the app. It has brief paragraphs informing users about what this app can provide for users.
Self-evaluation:
- Clean design, very minimalistic.
- Fonts are legible.
- Good visuals.
AI Evaluation:
Strengths:
Clear Messaging: Communicates the app’s features effectively (welcome, shopping convenience, delivery).
Engaging Illustrations: Visuals reinforce the message and make the content more appealing.
Logical Flow: The onboarding moves smoothly from welcome to app features.
Prominent Call-to-Action: Buttons are clear, making navigation intuitive.
Weaknesses:
Font Legibility (Header): The shadow effect on the headers may reduce readability.
Visual Hierarchy: The illustrations are more prominent than the text, which could be better balanced.
Missing Key Benefits: Could highlight more unique features like exclusive deals or loyalty points.
What To Change:
- Remove shadow from heading to make text more legible.
- Add a page to show exclusive deals.
- Make text more prominent. (Increase font size, reposition elements, reduce illustration size)
2. LOG IN
For the log in part, it is very simple and straight-forward. However, it is the same as the Lotus's Malaysia App as I felt that it didn’t need any changes.
Self-evaluation:
- Easy to navigate.
- Texts are legible.
- Simple design.
AI Evaluation:
Strengths:
Clean and Simple Design: The layout is easy to navigate, with clear sections for login, registration, and password recovery.
Consistent Color Scheme: The teal buttons create a unified and recognizable brand identity.
Step-by-Step Registration: The multi-step registration process breaks down tasks, making it less overwhelming.
User-Friendly Prompts: Clear instructions and labels guide users smoothly through the process.
Weaknesses:
Overloaded Registration Screen (Step 3): The member registration form has too many fields, which might feel overwhelming.
No Social Login Option: The absence of third-party login options like Google or Facebook could limit convenience for some users.
What To Change:
I personally think that this section doesn’t need any amendments as it is already very simple and straightforward. To counter the weaknesses given by AI, I believe that the amount of information needed in the member registration is alright. It is the basic information an app would usually ask for and it isn’t too much to put it all in one page. Also I would not add other log-in options because this app is only for Malaysians and if it’s added, people from elsewhere might use it not knowing that only Malaysians can use the app. Furthermore, linking their phone number is necessary as this allows Lotus’s to contact the customer when delivery or sending information to their customers directly.
3. HOME PAGE
In this page, you can do your grocery shopping by searching for products or looking at the “Save more” “Best Sellers” “Weekly Promo” sections to view products. Of course there also is the categories section and the recommended items section. There is also a live chat where you can get instant help from Lotus's.
Self-evaluation:
- The buttons of “Save more” “Best Sellers” “Weekly Promo” look rather dull.
- Simple and straightforward.
- Good information hierarchy.
AI Evaluation:
Strengths:
Category Navigation: The categories (like "New Arrival," "Best Sellers," "Weekly Promo") are well-organized, making it easy for users to browse different sections.
Visual Consistency: The app maintains a consistent color scheme with teal highlights, creating a cohesive experience throughout the homepage.
Live Chat Integration: The live chat option is clearly accessible, providing real-time customer support and enhancing the user experience.
Weaknesses:
Lack of Search Bar Visibility: There is no visible search bar on the homepage, which is a crucial feature for users wanting to find specific items quickly.
Promotions Not Emphasized: While there are discounts highlighted, the promotion banners (like "10% off all fresh produce") could be more visually prominent to capture user attention right away.
What To Change:
- “Save more” “Best Sellers” “Weekly Promo”, redesign these buttons to look more appealing. (Maybe change colour or resize button)
- Redesign search bar to be more visible.
- Improve the weekly promo banners. (Maybe more prominent text to highlight the discounts)
- Add points card to the items page for more visuals, the amount of points you can earn is not very visible.
4. MEMBER PAGE
In this section, users can check their accumulated points, exclusive members only rewards as well as the rewards they currently have. Users can also check how they used their points in the pass and view member's exclusive campaigns. Lastly, there is a referral program for users to introduce the app to their friends and earn rewards.
Self-evaluation:
- The buttons of “Rewards Catalogue” “My Rewards” look rather dull.
- Easy to navigate around.
- Simple layout.
AI Evaluation:
Strengths:
Quick Access to Points Information: The points balance is prominently displayed in the center, making it easy for users to quickly check their points.
Straightforward Navigation: The "Rewards Catalogue" and "My Rewards" buttons are simple and easily accessible from the member homepage.
Referral Program Visibility: The referral program is highlighted with a clear incentive, encouraging users to refer others.
Weaknesses:
Limited Visual Appeal in Points History: The Points History page is quite plain, lacking engaging visuals or icons that could make the page more dynamic and interesting to users.
Overly Text-heavy Sections: The "Referral Program" section contains a lot of text, which might deter users from reading it fully or understanding the benefits quickly.
Small Text in the Exclusive Offers: Some of the text in the promotional offers is relatively small and might be hard to read at a glance.
What To Change:
- Improve points history page, make it more appealing. (Consider separating each order into boxes.)
- Lessen text in referral program.
- More visible text in exclusive offers posters.
5. FAVOURITES PAGE
This page is for users to save frequently bought items so that they don’t have to search repeatedly for products. It also allows users to create and name their own category to save different items in different categories.
Self-evaluation:
- Simple design and straightforward.
- Organised.
- Visible call to action buttons.
AI Evaluation:
Strengths:
Simple Layout: The minimalist design with clear folder labels ensures ease of navigation.
Large, Readable Fonts: The text used for categories, item names, and prices is large and easily readable, making navigation simple for all users.
Category Flexibility: The design allows users to create and name categories in a clean, organized manner, giving them flexibility in managing their favorite items without cluttering the screen.
Weaknesses:
No Clear Category Limits: It's unclear if there are limits to how many categories or items can be created, which could lead to clutter if users create too many folders.
Few Visual Indicators of Item Freshness: There’s no indication of whether the saved items are out of stock or if the price has changed, which could lead to user frustration when they expect to purchase a favourite item.
Lack of Item Count: The current design does not display the number of items saved in each folder, making it difficult for users to quickly gauge how many products are stored within each category.
What To Change:
- Show limit of folder a user can create. (E.g. “The Limit of Favourites Folder is 10)
- Add an example when a product is out of stock. (Lighten the opacity of the product and put an out of stock sticker on top of the product.)
- Display item count for each folder.
6. CART PAGE
This page is very straightforward. It’s where all the items the user added to cart are, this then leads to the checkout process where users do their payment and are then able to track their delivery status in real time.
Self-evaluation:
- Payment section looks very dull and plain.
- Though the cart page has lots of information, it has clear sections separating each section.
- Good use of icons.
- Order complete page is too simple, lack of enthusiasm.
AI Evaluation:
Strengths:
Clear Cart Overview: The cart page provides a detailed breakdown of items, delivery options, payment method, and total cost, making it easy for users to review their orders before proceeding.
Seamless Navigation: The progress from cart to payment and order confirmation is smooth, with clear buttons like "Place Order" and "Track Your Order" guiding users through the process.
Encourages Further Shopping: After completing the order, users are prompted with a “Continue Shopping” option, encouraging further engagement.
Consistent Design Language: The consistent use of fonts, colors, and icons across the different pages (cart, delivery, payment, and order tracking) creates a cohesive user experience, making the app feel polished and reliable.
Weaknesses:
No Item Count for Cart Overview: The cart page lacks a visual indicator for the total number of items, which could make it less intuitive for users to track the quantity of items added to their cart at a glance.
Track Order Page is Plain: The design of the tracking page could feel underwhelming as it only provides basic delivery information and a plain map, lacking further interactive elements or order details.
Order Completion Page is Sparse: The order completed page is very minimal, with little information or visual cues. More celebratory or engaging elements (e.g., confirmation message or special offer) could improve the user experience.
What To Change:
- Add an item count in the cart overview.
- More detailed delivery information page. (Show name and picture of driver, vehicle details)
- Improve order complete page as it is too simple. (Maybe a mascot celebrating, or a celebration animation.)
- More visuals in the payment method page.
7. PROFILE PAGE
This page is straightforward as well, it allows users to edit their profile and also view their past and current orders. They can also save information like a few addresses and also add shopping notes for future reference. This section is also where the setting is located.
Self-evaluation:
- Very simple and straightforward layout.
- Good use of icons to represent each feature in settings.
- Good addition of personal shopping notes so users can refer to shopping notes in future.
AI Evaluation:
Strengths:
User Information Visibility: The profile page neatly organizes personal information, saved addresses, and shopping notes, offering users quick access.
Profile Editing: Users can easily update their personal and contact information, with clear, labeled fields for addresses and other details.
Weaknesses:
Notifications Page: The notifications section appears empty and lacks detail or functionality. Providing clearer instructions or placeholders could enhance its purpose.
What To Change:
- Add colour to the icons in settings to differentiate each feature.
- Add a mascot from the order complete page (Linked to cart page), or add an animation.
- Improve previous order page, make it more appealing. (Consider separating each order into boxes.)
- Add order details page from previous order.
REFINING
REFLECTION
Experience
In the first few weeks of Application Design II, we went over HTML and CSS again, which was helpful since I hadn’t used them in a while. We did some simple exercises to remind us how to build websites. One of the exercises had us working with columns and rows, which I had forgotten how to do. It was a bit tricky at first, but the class tasks helped me get the hang of it. These exercises were useful and made me feel more comfortable using HTML and CSS again, and I was happy to see that I could still follow along pretty well. I do really hope that when we start to learn JS and start coding our app, I could still keep up and do well in this module.
While working on the exercises and looking back at my app design from last semester, I noticed that small details in design make a big difference. For example, how you arrange things on the screen and make the text stand out can really affect how easy it is to use an app. I realized my app worked fine but wasn’t as polished as it could be. The text could be clearer, the buttons could pop out more, and the flow of the screens could be smoother. These little changes made me see how important it is to pay attention to details in design. I also realized that coding requires skill and practice, I hadn't practiced it for some time and went really rusty.
What I found out from these weeks is that design is never really “done.” Even if something works, there’s always something you can improve. Doing self-evaluations and getting feedback helps a lot with spotting what needs to be fixed. I applied what I learned to make my app better by adjusting the layout, making the flow easier, and improving how things looked. Overall, this made me realize how much you can improve a design just by taking the time to go back and make it better, and I’ll definitely keep doing this in the future.
Comments
Post a Comment