{"id":4681,"date":"2023-05-16T21:18:00","date_gmt":"2023-05-16T15:48:00","guid":{"rendered":"https:\/\/laveshsumant.com\/?p=4681"},"modified":"2026-01-08T10:04:54","modified_gmt":"2026-01-08T04:34:54","slug":"mobile-app","status":"publish","type":"post","link":"https:\/\/laveshsumant.com\/index.php\/2023\/05\/16\/mobile-app\/","title":{"rendered":"Food Delivery App \u2014 UI\/UX Case Study"},"content":{"rendered":"\n
\n
\n
Project Overview<\/h5>\n\n\n\n

Product:<\/strong> Food Delivery Mobile App
Platforms:<\/strong> iOS & Android
Role:<\/strong> Lead UI\/UX Designer
Responsibilities:<\/strong> UX strategy, user flows, interaction design, visual design, prototyping
Tools:<\/strong> Figma, Google Stitch (AI-assisted UI generation), Usability Testing
Timeline:<\/strong> 3\u20134 weeks<\/p>\n<\/div>\n<\/div>\n\n\n\n

<\/div>\n\n\n\n
\n
\n
Problem Statement<\/h5>\n\n\n\n

Urban users increasingly rely on food delivery apps, yet many existing solutions suffer from:<\/p>\n\n\n\n

    \n
  • Long onboarding flows are causing drop-offs<\/li>\n\n\n\n
  • Cluttered menus that slow decision-making<\/li>\n\n\n\n
  • Poor visual hierarchy between food images, price, and actions<\/li>\n\n\n\n
  • Friction in checkout and payment flows<\/li>\n\n\n\n
  • Unclear delivery status and lack of reassurance post-payment<\/li>\n<\/ul>\n\n\n\n

    The challenge<\/strong> was to design a food delivery experience that feels:<\/p>\n\n\n\n

      \n
    • Fast<\/li>\n\n\n\n
    • Trustworthy<\/li>\n\n\n\n
    • Visually appetizing<\/li>\n\n\n\n
    • Effortless from discovery to delivery<\/li>\n<\/ul>\n<\/div>\n\n\n\n
      \n
      Goals & Success Metrics<\/h5>\n\n\n\n
      Primary Goals<\/h6>\n\n\n\n
        \n
      • Reduce time from app open \u2192 first order<\/li>\n\n\n\n
      • Make food discovery visual and intuitive<\/li>\n\n\n\n
      • Minimise cognitive load during checkout<\/li>\n\n\n\n
      • Provide clear real-time delivery feedback<\/li>\n<\/ul>\n\n\n\n
        UX Success Metrics<\/h6>\n\n\n\n
          \n
        • < 30 seconds to add the first item to the cart<\/li>\n\n\n\n
        • High CTA visibility across screens<\/li>\n\n\n\n
        • Zero ambiguity in delivery status<\/li>\n\n\n\n
        • Seamless onboarding without tutorial fatigue<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
          <\/div>\n\n\n\n
          \n
          \n
          Target Users<\/h5>\n\n\n\n
          Primary Persona<\/h6>\n\n\n\n

          Busy Urban Professionals (22\u201340 years)<\/strong><\/p>\n\n\n\n

            \n
          • Order food 2\u20134 times a week<\/li>\n\n\n\n
          • Value speed, reliability, and clarity<\/li>\n\n\n\n
          • Prefer visual decision-making over long descriptions<\/li>\n<\/ul>\n\n\n\n
            Secondary Persona<\/h6>\n\n\n\n

            Families & Casual Users<\/strong><\/p>\n\n\n\n

              \n
            • Value trust, saved locations, and repeat orders<\/li>\n\n\n\n
            • Expect familiar UI patterns<\/li>\n<\/ul>\n<\/div>\n\n\n\n
              \n
              UX Strategy & Design Principles<\/h5>\n\n\n\n
                \n
              1. Visual-First Decision Making<\/strong>
                Food images, ratings, and price take priority over text.<\/li>\n\n\n\n
              2. Single-Thumb Reachability<\/strong>
                All primary actions are placed in the lower half of the screen.<\/li>\n\n\n\n
              3. Progressive Disclosure<\/strong>
                Users see only what they need, when they need it.<\/li>\n\n\n\n
              4. Trust Through Feedback<\/strong>
                Clear states for payment, OTP, and delivery tracking.<\/li>\n<\/ol>\n<\/div>\n<\/div>\n\n\n\n
                <\/div>\n\n\n\n
                \n
                \n
                Information Architecture<\/h5>\n\n\n\n

                Core Navigation Structure:<\/strong><\/p>\n\n\n\n

                  \n
                • Home<\/li>\n\n\n\n
                • Search<\/li>\n\n\n\n
                • Cart<\/li>\n\n\n\n
                • Orders<\/li>\n\n\n\n
                • Profile<\/li>\n<\/ul>\n\n\n\n

                  Primary User Flow:<\/strong>
                  Onboarding \u2192 Location \u2192 Browse \u2192 Product \u2192 Cart \u2192 Checkout \u2192 Tracking<\/p>\n<\/div>\n<\/div>\n\n\n\n

                  <\/div>\n\n\n\n
                  \n
                  \n
                  1. Onboarding \/ Welcome Screen<\/h5>\n\n\n\n

                  <\/p>\n\n\n\n

                  Purpose:<\/strong> First impression & value communication<\/p>\n\n\n\n

                    \n
                  • Strong food illustration to trigger appetite<\/li>\n\n\n\n
                  • Clear value proposition in one sentence<\/li>\n\n\n\n
                  • Single primary CTA: Get Started<\/em><\/li>\n<\/ul>\n\n\n\n

                    UX Impact:<\/strong>
                    Reduces decision fatigue and encourages immediate action.<\/p>\n<\/div>\n\n\n\n

                    \n
                    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                    <\/div>\n\n\n\n
                    \n
                    \n
                    2. Sign-Up & Authentication<\/h5>\n\n\n\n

                    <\/p>\n\n\n\n

                    Screens:<\/strong> Sign-Up, OTP Verification<\/p>\n\n\n\n

                      \n
                    • Minimal fields (Name, Email, Password)<\/li>\n\n\n\n
                    • Inline reassurance text for verification<\/li>\n\n\n\n
                    • Social login options placed after form (not before)<\/li>\n<\/ul>\n\n\n\n

                      UX Decision:<\/strong>
                      Avoids overwhelming first-time users while maintaining trust.<\/p>\n<\/div>\n\n\n\n

                      \n
                      \"\"<\/figure>\n<\/div>\n\n\n\n
                      \n
                      \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                      <\/div>\n\n\n\n
                      \n
                      \n
                      3. Home Screen<\/h5>\n\n\n\n

                      <\/p>\n\n\n\n

                      Purpose:<\/strong> Fast discovery<\/p>\n\n\n\n

                        \n
                      • Delivery address clearly visible at the top<\/li>\n\n\n\n
                      • Category shortcuts for quick scanning<\/li>\n\n\n\n
                      • Promotional banner with clear benefit<\/li>\n\n\n\n
                      • Bottom navigation persistent<\/li>\n<\/ul>\n\n\n\n

                        Why it works:<\/strong>
                        Users can either explore or search within 2 seconds.<\/p>\n<\/div>\n\n\n\n

                        \n
                        \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                        <\/div>\n\n\n\n
                        \n
                        \n
                        4. Search & Browse<\/h5>\n\n\n\n

                        <\/p>\n\n\n\n

                        Purpose:<\/strong> Reduce friction in finding food<\/p>\n\n\n\n

                          \n
                        • Predictive search bar<\/li>\n\n\n\n
                        • Filter chips (All, Burgers, Pizza, etc.)<\/li>\n\n\n\n
                        • Food cards with:\n
                            \n
                          • Image<\/li>\n\n\n\n
                          • Name<\/li>\n\n\n\n
                          • Rating<\/li>\n\n\n\n
                          • Delivery time<\/li>\n\n\n\n
                          • Price<\/li>\n\n\n\n
                          • Add (+) CTA<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n

                            UX Insight:<\/strong>
                            Users don\u2019t read descriptions first\u2014they scan visuals.<\/p>\n<\/div>\n\n\n\n

                            \n
                            \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                            <\/div>\n\n\n\n
                            \n
                            \n
                            5. Product Listing & Add to Cart<\/h5>\n\n\n\n

                            <\/p>\n\n\n\n

                              \n
                            • Grid layout for efficient scanning<\/li>\n\n\n\n
                            • Inline quantity controls (no modal interruption)<\/li>\n\n\n\n
                            • Real-time cart total visible at the bottom<\/li>\n<\/ul>\n\n\n\n

                              Outcome:<\/strong>
                              Faster multi-item ordering without context switching.<\/p>\n<\/div>\n\n\n\n

                              \n
                              \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                              <\/div>\n\n\n\n
                              \n
                              \n
                              6. Cart & Checkout<\/h5>\n\n\n\n

                              <\/p>\n\n\n\n

                              Checkout UX Goals:<\/strong> Clarity + Trust<\/p>\n\n\n\n

                                \n
                              • Prominent payment card preview<\/li>\n\n\n\n
                              • Simple input grouping<\/li>\n\n\n\n
                              • Save card toggle<\/li>\n\n\n\n
                              • Clear total amount<\/li>\n\n\n\n
                              • Strong \u201cPay Now\u201d CTA with security reassurance<\/li>\n<\/ul>\n\n\n\n

                                UX Pattern Used:<\/strong>
                                Familiar banking UI patterns to reduce anxiety.<\/p>\n<\/div>\n\n\n\n

                                \n
                                \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                                <\/div>\n\n\n\n
                                \n
                                \n
                                7. OTP & Verification<\/h5>\n\n\n\n

                                <\/p>\n\n\n\n

                                  \n
                                • Large input boxes<\/li>\n\n\n\n
                                • Countdown timer for resend<\/li>\n\n\n\n
                                • Numeric keypad optimised for speed<\/li>\n<\/ul>\n\n\n\n

                                  Reasoning:<\/strong>
                                  Reduces errors and increases completion rate.<\/p>\n<\/div>\n\n\n\n

                                  \n
                                  \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                                  <\/div>\n\n\n\n
                                  \n
                                  \n
                                  8. Live Order Tracking<\/h5>\n\n\n\n

                                  <\/p>\n\n\n\n

                                  Purpose:<\/strong> Post-payment reassurance<\/p>\n\n\n\n

                                    \n
                                  • Real-time map with route visualisation<\/li>\n\n\n\n
                                  • Status progression (Preparing \u2192 On the way \u2192 Delivered)<\/li>\n\n\n\n
                                  • Rider profile with rating and contact options<\/li>\n\n\n\n
                                  • ETA clearly visible<\/li>\n<\/ul>\n\n\n\n

                                    UX Impact:<\/strong>
                                    Builds trust and reduces \u201cWhere is my order?\u201d anxiety.<\/p>\n<\/div>\n\n\n\n

                                    \n
                                    \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                                    <\/div>\n\n\n\n
                                    \n
                                    \n
                                    9. Location Selection<\/h5>\n\n\n\n

                                    <\/p>\n\n\n\n

                                      \n
                                    • Saved locations (Home, Work)<\/li>\n\n\n\n
                                    • Recent searches<\/li>\n\n\n\n
                                    • Use current location<\/li>\n\n\n\n
                                    • Optional map pin selection<\/li>\n<\/ul>\n\n\n\n

                                      Why:<\/strong>
                                      Optimises repeat orders and reduces manual entry.<\/p>\n<\/div>\n\n\n\n

                                      \n
                                      \"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n
                                      <\/div>\n\n\n\n
                                      \n
                                      \n
                                      Visual Design System<\/h5>\n\n\n\n

                                      <\/p>\n\n\n\n

                                      Color Palette<\/h6>\n\n\n\n
                                        \n
                                      • Primary:<\/strong> Warm Yellow (energy, appetite, action)<\/li>\n\n\n\n
                                      • Secondary:<\/strong> Black & dark gray (contrast & readability)<\/li>\n\n\n\n
                                      • Accent:<\/strong> Green (ratings, success), Red\/Orange (pricing emphasis)<\/li>\n<\/ul>\n\n\n\n
                                        Typography<\/h6>\n\n\n\n
                                          \n
                                        • Rounded sans-serif for friendliness<\/li>\n\n\n\n
                                        • Bold headings, clear hierarchy<\/li>\n\n\n\n
                                        • High legibility across all device sizes<\/li>\n<\/ul>\n\n\n\n
                                          Components<\/h6>\n\n\n\n
                                            \n
                                          • Rounded cards & buttons<\/li>\n\n\n\n
                                          • Consistent shadows for depth<\/li>\n\n\n\n
                                          • Clear iconography with labels<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                                            \n
                                            Usability Testing & Iteration<\/h5>\n\n\n\n

                                            <\/p>\n\n\n\n

                                            Test Group:<\/strong> 15 users (mixed demographics)<\/p>\n\n\n\n

                                            Key Findings<\/h6>\n\n\n\n
                                              \n
                                            • Users loved inline add-to-cart controls<\/li>\n\n\n\n
                                            • Checkout felt \u201csafe\u201d and familiar<\/li>\n\n\n\n
                                            • Tracking screen rated highest for confidence<\/li>\n<\/ul>\n\n\n\n
                                              Improvements Made<\/h6>\n\n\n\n
                                                \n
                                              • Increased CTA contrast<\/li>\n\n\n\n
                                              • Simplified form labels<\/li>\n\n\n\n
                                              • Reduced banner height for faster scroll<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                                                \n
                                                Accessibility Considerations<\/h5>\n\n\n\n

                                                <\/p>\n\n\n\n

                                                  \n
                                                • WCAG-compliant colour contrast<\/li>\n\n\n\n
                                                • Large tap targets<\/li>\n\n\n\n
                                                • Clear error and helper text<\/li>\n\n\n\n
                                                • Visual feedback for all actions<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                                                  <\/div>\n\n\n\n
                                                  \n
                                                  \n
                                                  Results & Impact<\/h5>\n\n\n\n

                                                  <\/p>\n\n\n\n

                                                    \n
                                                  • Reduced order flow steps by ~25%<\/strong><\/li>\n\n\n\n
                                                  • Faster first-order completion<\/strong><\/li>\n\n\n\n
                                                  • High perceived trust and clarity<\/strong><\/li>\n\n\n\n
                                                  • Strong foundation for scaling features like:\n
                                                      \n
                                                    • Subscriptions<\/li>\n\n\n\n
                                                    • Loyalty programs<\/li>\n\n\n\n
                                                    • AI food recommendations<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n\n\n\n
                                                      \n
                                                      Reflection & Next Steps<\/h5>\n\n\n\n
                                                      What Worked Well<\/h6>\n\n\n\n

                                                      <\/p>\n\n\n\n

                                                        \n
                                                      • Visual-first UX<\/li>\n\n\n\n
                                                      • Clear hierarchy<\/li>\n\n\n\n
                                                      • Strong consistency across screens<\/li>\n<\/ul>\n\n\n\n
                                                        Future Enhancements<\/h6>\n\n\n\n
                                                          \n
                                                        • Personalized recommendations<\/li>\n\n\n\n
                                                        • Voice search<\/li>\n\n\n\n
                                                        • Dark mode<\/li>\n\n\n\n
                                                        • One-tap reordering<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n
                                                          <\/div>\n\n\n\n

                                                          Final Outcome
                                                          This project demonstrates a complete, end-to-end UX process<\/strong> for a real-world food delivery app\u2014balancing business goals, user psychology, and scalable design systems to deliver a fast, delightful experience.<\/p><\/blockquote><\/figure>\n","protected":false},"excerpt":{"rendered":"

                                                          Project Overview Product: Food Delivery Mobile AppPlatforms: iOS & AndroidRole: Lead UI\/UX DesignerResponsibilities: UX strategy, user flows, interaction design, visual design, prototypingTools: Figma, Google Stitch (AI-assisted UI generation), Usability TestingTimeline: 3\u20134 weeks Problem Statement Urban […]<\/p>\n","protected":false},"author":1,"featured_media":4983,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[91,88],"tags":[],"class_list":["post-4681","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-work","category-mobile-app"],"_links":{"self":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/4681","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/comments?post=4681"}],"version-history":[{"count":31,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/4681\/revisions"}],"predecessor-version":[{"id":4741,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/posts\/4681\/revisions\/4741"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/media\/4983"}],"wp:attachment":[{"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/media?parent=4681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/categories?post=4681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laveshsumant.com\/index.php\/wp-json\/wp\/v2\/tags?post=4681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}