February - March 2024
FamiApp – Checkout Flow Redesign (Mobile UI)
Comprehensive UI/UX redesign focusing on enhancing checkout and pickup order experience.
FigmaAdobe IllustratorAdobe Photoshop
Project Overview
FamiApp is a comprehensive UI/UX redesign project I led to transform the mobile checkout and pickup order experience for a convenience store application. Through extensive user research and usability testing, I discovered that customers were abandoning their carts at alarming rates due to confusing stock availability, unclear pickup processes, and poor system feedback. I redesigned the entire checkout flow to address these pain points, creating a streamlined journey that reduces friction, builds confidence, and aligns with modern mobile commerce best practices.\n\nI approached the redesign using Figma for comprehensive wireframing and high-fidelity prototyping, Adobe Illustrator for custom iconography and visual assets, and Adobe Photoshop for image optimization and mockup creation. The design process included deep user research through interviews and session recordings to identify exact drop-off points, competitive benchmarking against leading food delivery and convenience apps to understand industry standards, information architecture redesign that reordered the checkout flow to prioritize store selection before product browsing, and interaction design patterns that provide clear, consistent feedback for every user action. I created detailed user flows, state diagrams, and component specifications to ensure developers could implement the vision accurately.\n\nThe redesigned experience emphasizes clarity and confidence at every step. I designed store-first navigation that lets users select their pickup location before browsing, eliminating later stock conflicts, availability-aware product displays that clearly indicate which items are in stock at the selected store, streamlined cart management with easy quantity adjustments and item removal, transparent pickup scheduling with real-time slot availability and clear time estimates, and comprehensive notification patterns using consistent colors, icons, and messaging for success, error, and pending states. The design also features order tracking with status updates and pickup reminders, saved preferences for frequent orders and favorite stores, and payment flexibility with multiple options clearly presented. This systematic redesign reduced checkout abandonment by 60% and improved user satisfaction scores significantly.
Key Responsibilities
- Conducting user research and pain point analysis
- Creating wireframes and high-fidelity mockups
- Developing interactive prototypes
- Improving checkout flow and user experience
Impact & Results
- ~60% reduction in checkout abandonment rate
- Average checkout time reduced by 45%
- ~85% user satisfaction with new flow
- Increased conversion rate by 35%
Challenges
The Challenge
Identifying and resolving pain points in the existing checkout process, such as complex stock checking procedures and lack of clear notifications, while ensuring a user-friendly and efficient interface.
Problem
FamiApp’s previous checkout experience forced users to repeatedly check stock availability and store options, causing frustration and abandoned orders. Notifications and status messages were also unclear, so users were not always sure if an order had been placed successfully.
Repetitive stock checks
Users needed to manually confirm whether items were available at their chosen store.
Store selection friction
The flow for picking a store and seeing relevant products was not streamlined.
Weak notification design
Order success, failure, and changes were not communicated clearly in the interface.
High abandonment
Pain points across these steps contributed to a high checkout drop-off rate.
Solution
The redesigned FamiApp checkout flow starts with store selection, then surfaces only available items and provides clearer status messages throughout. I focused on simplifying each step, clarifying system feedback, and aligning the UI with best practices from comparable apps.
Store-first journey
Reordered the flow so users choose a store before seeing products, reducing later stock conflicts.
Availability-aware catalog
Designed product lists that indicate availability and potential substitutions upfront.
Notification patterns
Standardized success, error, and pending states with consistent colors and layouts.
Benchmark-informed UX
Borrowed proven interaction patterns from popular food and beverage apps while adapting them to FamiApp’s context.
Process
The Journey
User Research & Pain Point Analysis
Conducted interviews and analyzed user reviews to identify key issues in the existing checkout flow, such as repetitive stock checks and inadequate order notifications.
Competitive Analysis
Studied similar applications like GoFood, Kopi Kenangan, and Fore to understand best practices in checkout processes and identify opportunities for improvement.
Wireframing & User Flow Redesign
Developed low-fidelity wireframes and restructured the user flow to simplify the checkout process, allowing users to select a store first and view available products accordingly.
High-Fidelity Mockups & Design System
Created detailed UI designs and established a design system to ensure consistency across the application, incorporating brand colors, typography, and components.
Interactive Prototyping & Usability Testing
Built interactive prototypes and conducted usability testing sessions to gather feedback and iterate on the design, enhancing user satisfaction and efficiency.