Cartify: Decision-Making Process and Rationale

Introduction

The design of Cartify aims to deliver a shopping experience that is intuitive, visually pleasing, and user-centred. From the moment users open the app to the final confirmation of their order, every detail is carefully crafted to ensure simplicity, functionality, and satisfaction. Here's a detailed breakdown of each screen and its design rationale.

1. Splash Screen

• Purpose: Establish brand identity and create a professional first impression.
• Key Design Elements:
• Center-aligned logo for clear visibility.
• Clean white background to focus attention on the brand.
• Impact: Provides a smooth introduction while maintaining a modern aesthetic.

2. Login Screen

• Purpose: Enable quick and easy access for users.
• Key Design Elements:
• Input fields for email and password with clear placeholders.
• "Continue with Google" for single-click login.
• "Remember me" checkbox and "Forgot password?" option for convenience.
• The register link subtly encourages new users to sign up.
• Impact: Streamlined design ensures users can log in without hassle.

3. Home Screen

• Purpose: Highlight offers and promote product discovery.
• Key Design Elements:
• Prominent banner showcasing deals like "20% OFF on Selected Sports Style."
• Clean "Popular" section displaying products with consistent card design.
• Bottom navigation bar with intuitive icons for Home, Favorites, Cart, and Profile.
• Impact: Balanced visuals and functionality create an engaging browsing experience.

4. Search Screen

• Purpose: Make it easy for users to find products quickly.
• Key Design Elements:
• Search bar with placeholder text like "Search for products, brands, or categories."
• Recent searches are displayed for convenience.
• Personalized product recommendations tailored to user interests.
• Filter icon for easy refinement of search results.
• Impact: Simplifies the search process, reducing time spent looking for items.

5. Product Grid Screen

• Purpose: Display a wide range of products in an organized manner.
• Key Design Elements:
• Uniform product cards with clear visuals, pricing, and discounts.
• Sorting options for customization (e.g., by price, popularity).
• Ample white space to prevent visual clutter.
• Impact: Provides a clean and structured view of products, enhancing usability.

6. Product Detail Screen

• Purpose: Give users all the information needed to make a purchase decision.
• Key Design Elements:
• High-quality images are displayed in a carousel for detailed product views.
• Pricing breakdown with original and discounted prices, including percentage savings.
• Interactive size selectors, with unavailable sizes, greyed out.
• Prominent "Add to Cart" button for easy next steps.
• Impact: Helps users make informed decisions with confidence.

7. Checkout Screen

• Purpose: Ensure a seamless and secure checkout process.
• Key Design Elements:
• Step-by-step progress indicator showing Checkout → Payment → Confirmation.
• Multiple payment options with recognizable logos (e.g., Apple Pay, PayPal, Visa).
• Field for entering promo codes without disrupting the layout.
• The total price is prominently displayed to reduce uncertainty.
• Impact: Builds trust and reduces cart abandonment by streamlining the checkout process.

8. Payment Screen

• Purpose: Offer a secure and user-friendly payment experience.
• Key Design Elements:
• Clear labels and placeholders for card details (e.g., "Enter full name as it appears on your card.").
• Real-time validation feedback for errors (red for issues, green for success).
• Stripe badge for added security and trust.
• Impact: Simplifies payment while reassuring users about security.

9. Confirmation Screen

• Purpose: Provide closure and reassurance post-purchase.
• Key Design Elements:
• Success message with visual checkmarks to confirm order completion.
• Order details, including ID, delivery address, and estimated delivery time.
• Option to track the order with a clear call-to-action.
• Impact: Reduces post-purchase anxiety by keeping users informed.

10. Delivery Information Screen

• Purpose: Keep users updated on the status of their orders.
• Key Design Elements:
• Step-by-step delivery timeline with timestamps for each milestone.
• Highlighted the most recent update for clarity.
• Minimalistic layout to ensure easy scanning of information.
• Impact: Enhances user trust and satisfaction by offering transparency.

Conclusion

• Key Takeaways:
• Consistency: Uniform design elements across screens create a cohesive user experience.
• Clarity: A clear visual hierarchy ensures users can navigate and act effortlessly.
• Trust: Security-focused elements like validation feedback and the Stripe badge build confidence.
• Delight: Subtle design choices, such as intuitive navigation and clean layouts, make shopping enjoyable.

By prioritizing user needs at every stage, Cartify transforms online shopping into a seamless and delightful experience.