<?xml version="1.0" encoding="utf-8"?>

FoodieBuddy - Online Food Order App 1

FoodieBuddy - Online Food Order App 2

FoodieBuddy - Online Food Order App 3

FoodieBuddy - Online Food Order App 4

FoodieBuddy - Online Food Order App 5

FoodieBuddy - Online Food Order App 6

FoodieBuddy - Online Food Order App 7

FoodieBuddy - Online Food Order App 8

FoodieBuddy - Online Food Order App 9

Tools used

Figma

Topics

Share

Share your insights — leave a project review and help others grow their skills

Reviews

1 review


Hello Dewni Amaya Jayasekara,

Your designs are very modern and visually appealing great work! They successfully capture user attention. However, there are a few areas that could be improved when looking at the details:

  1. Grid Structure - It’s noticeable that several elements are not aligned within the grid. Especially on mobile, designs usually follow a grid system with 16px margins, and elements are placed accordingly. In the current designs, the left side follows the grid while the right side does not. Ensuring proper grid alignment is essential for visual consistency. https://app.uxcel.com/courses/ui-components-best-practices/grid-best-practices-485
  2. Typography - Typography is not used correctly in many parts. For example, the text inside buttons appears too large relative to the button size. Best practices suggest using font sizes between 14–18px for buttons. Also, the header and subheader fonts are quite small. Font sizing is crucial, especially across different mobile breakpoints, so this should be carefully considered. I’m including a course link below that could be very helpful. https://app.uxcel.com/courses/typography-basics
  3. Input and Button Sizing - Make sure inputs and buttons follow best practices in terms of sizing: typically, 40–48px is recommended to match the average finger size. Also, ensure the text inside inputs is vertically aligned with the input field itself. Button- https://app.uxcel.com/courses/ui-components-n-patterns/anatomy-iii-298. input- https://app.uxcel.com/courses/ui-components-n-patterns/input-functionality-best-practices-822
  4. Add to Cart Interaction - Instead of using a cart icon for adding burgers to the cart, consider using a plus (+) icon initially. This creates a clearer UX pattern. After the user clicks the plus, the icon can change to a cart with a quantity badge (e.g. 1), which aligns better with common UX best practices. https://app.uxcel.com/courses/design-foundations

If you build your designs based on these UI/UX best practices, they will become both pixel-perfect and highly user-friendly. Wishing you continued success!🫰🚀

Thank you so much.

4 Claps
Average 4.0 by 1 person
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>