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

Rationale Behind the Design Choices#

Simplicity and Clarity: Each screen is designed to be simple and uncluttered, focusing on essential information and actions. This reduces cognitive load and makes the process straightforward.

Progressive Disclosure: Information and actions are broken down into manageable steps. This helps in keeping the user focused on one task at a time, reducing the chances of errors and abandonment.

User Control and Flexibility: Options to modify quantities, change addresses, and select payment methods provide users with control over their purchase process.

Visual Hierarchy: The use of prominent buttons and clear labels ensures that users can easily identify and understand the next steps in the process.

Trust and Security: Displaying payment logos and providing a review step reassures users about the security and accuracy of their order.

In conclusion, this checkout process is designed to be user-friendly, efficient, and secure, enhancing the overall shopping experience and reducing barriers to completing a purchase.

Tools used

Figma

From brief

Share

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

Reviews

1 review


Hi Marek,

Firstly, I want to applaud your attention to spacing, grouping, and visual hierarchy. The overall design is clean and well-structured.

I have some constructive feedback that I believe will help improve the design:

  1. Success Page Illustration: The current illustration does not effectively convey a success state. Consider using green colors and symbols/icons that evoke a sense of victory or accomplishment, such as a badge or a check mark. The vehicle with the red light in the current design suggests warning or danger, which could be confusing.
  2. Stepper: Adding a stepper component will enhance usability by providing users with clear feedback about their current stage in the checkout process.

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