By name: izinga-products-website-ui-ux-guide description: "UI/UX design skill for iZinga product websites. Use when auditing or redesigning landing pages to improve product clarity, hierarchy, CTA visibility, responsiveness, accessibility, and visual consistency while preserving iZinga brand character and core product links." argument-hint: "Provide the page path and whether you want an audit, redesign direction, or direct UI implementation guidance." user-invocable: true
iZinga Products Website UI/UX Guide
Outcome
- A clear product-first page narrative.
- Strong hero and CTA system.
- Consistent visual language across sections.
- Mobile-first responsive experience with desktop polish.
Product Baseline To Preserve
- Parcel and Furniture Delivery: https://delivery.izinga.co.za/
- Food Market: https://shop.izinga.co.za/
- iZinga Pay: https://pay.izinga.co.za/
- Driver Onboarding: https://onboard.izinga.co.za?type=driver
UI/UX Workflow
- Diagnose message clarity: can users identify all iZinga products in under 5 seconds?
- Restructure hero: one direct headline, one support paragraph, one primary CTA, supporting product options.
- Normalize hierarchy: heading scale, spacing rhythm, card consistency, button intent.
- Improve conversion paths: each product card needs one clear action and destination.
- Validate responsive behavior: desktop horizontal product layout, mobile stacked cards with readable text.
- Refine interaction polish: motion should support comprehension, not distract.
Decision Rules
- If page feels visually noisy, simplify background effects before adding more motion.
- If CTA competition exists, reduce to one primary action per viewport region.
- If product cards are unclear, prioritize product name + benefit + destination URL.
- If navbar is removed by request, ensure users still have orientation via clear section anchors and sticky action patterns.
Quality Criteria
- Product offering is explicit and complete.
- CTA labels are action-based and user-intent specific.
- Contrast and font sizes are accessible on small screens.
- Visual style feels cohesive rather than mixed from multiple systems.
Common Improvements
- Replace vague copy with product-oriented value statements.
- Use short labels and concise supporting paragraphs.
- Keep brand color accents focused on actions and key highlights.
- Remove placeholder links and dead sections.
Example Prompts
- "Audit this iZinga landing page UI and improve product clarity."
- "Redesign the hero for stronger conversion to all iZinga products."
- "Make product cards cleaner and consistent across desktop and mobile."