Application 2 Task 1 Figma

 The App I made in the first semester is called E le ma. Below you is the result of what I made in the first semester.

Dev Mode Link:

https://www.figma.com/design/NBfcz4vegspP0UFPJwjOmC/%E9%A5%BF%E4%BA%86%E4%B9%88-%E9%AB%98%E4%BF%9D%E7%9C%9F?node-id=0-1&m=dev&t=OWpQGh3JY51GzfBd-1

Prototype Link:

https://www.figma.com/proto/NBfcz4vegspP0UFPJwjOmC/%E9%A5%BF%E4%BA%86%E4%B9%88-%E9%AB%98%E4%BF%9D%E7%9C%9F?node-id=0-1&t=pidnBIyjSd1oVnNW-1

After that, I asked AI to give me the revised opinion.

The following is his opinion to me.

🔍 Preliminary observations and summary

Your design highly restores the core structure of Ele.me, with a good business visual style and intuitive interface, but there is still room for improvement in interaction optimization, information hierarchy, and accessibility.

✅ Good aspects

✅ Information density and content structure

The product card information is clear: image + name + sales volume/price, which is easy to browse quickly.

Using familiar layouts (such as bottom navigation + card flow) complies with Jakob’s Law (user expectations are consistent with existing experience).

✅ Color and visual style

The main visual color is consistent with the brand tone, and blue as the main button color has good guidance.

The use of icons and pictures enhances recognizability and is visually rich.

✅ Basic navigation logic is reasonable

The standard bottom navigation (Home / Category / Order / My) is used, which is easy to understand and use.

⚠️ Aspects that can be optimized + suggestions

1. The content density of the homepage is too high

Problem: There is a lot of information stacked on the product card, which may cause visual fatigue; it is difficult for users to make choices quickly.

Suggestions:

Use card grouping (e.g., recommended merchants, limited-time discounts) to form information partitions, refer to the Gestalt grouping principle.

Appropriately increase white space to reduce visual burden.

2. CTA (button) is not prominent or consistent enough

Problem: Buttons such as "Buy Now" or "Add to Cart" lack a unified style, and the size of some buttons is inconsistent with the touch area, affecting clickability (violating Fitts' Law).

Suggestions:

All key buttons use consistent colors, sizes, and corner rounding to enhance consistency.

Ensure that the button height is at least 44px for easy thumb clicks (refer to Apple/Human Interface Guidelines).

3. Product details page lacks feedback mechanism

Problem: No clear status feedback is provided after the user selects the specification (such as large/small), such as selection highlighting or price changes.

Suggestions:

Increase interactive feedback (select highlighting, instant price update) → Enhance user awareness of system status (Nielsen's first heuristic principle).

Micro-interaction effects can be used to enhance changes, such as small pop-up animations or color changes.

4. The navigation bar lacks current page highlight

Problem: The current page in the bottom navigation is not clearly highlighted/selected, and it is difficult for users to know which page they are on.

Suggestions:

Add color highlighting to the current page icon or bold text labels.

Use animations to guide page switching (micro-animation/Tab animations are available in FlutterFlow).

5. Lack of error state and empty state page design

Problem: There are no pages such as "Shopping cart is empty" and "No search results". Users may feel lost when there is no data.

Suggestions:

Provide illustrations + guide text for empty states (for example: "No products, go to the homepage!").

Lottie animation can be used in conjunction to increase fun.

🟢 Design Snapshot Score (as requested by you)

 (Rich information but slightly dense)

 (CTA style and status feedback need to be unified)

 (Navigation is clear, but the partition structure can be clearer)

(Touch area and status feedback need to be strengthened)

(Meets user expectations, but lacks complete status design)

The basic structure is good, it is recommended to focus on micro-interaction and page status optimization to improve the completeness of the experience.

✅ Next optimization direction:

Add interactive feedback prototypes (selected state, empty state, etc.) in Figma → Enhance user perception

Unify component structure and naming and create a Design System before entering FlutterFlow

Use FlutterFlow's page transition animation + button effects to optimize interactive perception

Start thinking about in-depth features such as personalized content recommendation or smart sorting 

After reading these modification suggestions, I found that there are still many shortcomings in my homework that need to be improved.

The following are the results of my revised homework.

Dev Mode Link:

https://www.figma.com/design/1xGJiPWiYJ4xNx6v6ZKNEo/%E6%96%B0-%E9%A5%BF%E4%BA%86%E5%90%97?node-id=0-1&m=dev&t=OoPIFAiYaSrA9ggh-1

Prototype Link:

https://www.figma.com/proto/1xGJiPWiYJ4xNx6v6ZKNEo/%E6%96%B0-%E9%A5%BF%E4%BA%86%E5%90%97?node-id=0-1&t=OoPIFAiYaSrA9ggh-1

I have modified the typesetting and color of the previous homework and some functions to make it more beautiful and convenient. I added the function of returning directly to the home page to him.

The following is the video of my homework speech:

https://youtu.be/DM-X0CZhcio



Comments

Post a Comment

Popular posts from this blog

Spatial 2 assignment 1

Image
Here are the project what we shuld do. 🧠 Assignment Overview: You are required to conduct a precedent study and analysis of two retail stores: One international (overseas) store – researched online. One physical store – that you can visit in person. This assignment is individual and counts for 20% of your final grade. 🎯 Objective: To apply design processes critically and creatively by analyzing real-world retail environments. You will propose innovative, context-specific solutions that improve spatial quality, customer experience, and brand identity. 📌 Analysis Areas to Cover: Store Overview Name, location, and type (e.g., fashion, electronics, lifestyle) Brief brand history or background Design Features Layout: Floor plan sketch; how the layout guides flow and interaction Materials: What materials are used and their functional/aesthetic effect Lighting: How lighting contributes to mood and experience Color Scheme: How color supports brand identity and ambiance Brand Identity How...
Read more

Embedded systems

Image
                                                       In this lesson, the teacher gave us a general explanation of what is called an embedded system. Then he gave us a general introduction to the tasks that we need to complete this semester and the courses we have learned. We were then given homework for the lesson, and the following is an example of an assignment. This is our first group assignment This class was supposed to be a public holiday, but the teacher was very responsible, so he gave us an online class to teach us how to use python, and under the teacher's step-by-step teaching, we had a rough understanding of python software In this lesson, the teacher continued to distribute some of the tools needed for embedded systems and taught us how to use them. Of course, the teacher also gave us a deeper understanding of what an embedded system ...
Read more

Spatial design 2 FINAL

Image
Starbacks Name:HE KEHUA Student ID:0379395 This is my spatial design. This is my sketch at the beginning. This is my initial modeling. The teacher asked me to modify it. Put the order area at the door. Add a little designed locker to the empty area. After the teacher gave feedback, I revised and improved the content. Light In the last class, the teacher continued to give me some feedback, asking me to continue to make changes on my existing basis, slightly increase the children's area, the bad material of the floor of the service area, and install a window at the gate, and put two small mats under my two apple core cabinets. Here are the final project i made
Read more