Sundryagro A User centered Mobile Design
Project Type: End to end Mobile App
Role: Sole Product Designer with support from product manager and developers
Industry: E-Commerce
Tool: Figma, Figjam, Google Meet, Pluggins
Duration: 2 Weeks
Section
Objectives
01. Enhance Mobile Shopping Convenience
With the increasing reliance on mobile devices for online shopping, ensuring a seamless, efficient, and engaging experience is crucial for our user retention and satisfaction. Since a web app already exists, our mobile app focus on speed, convenience, and unified experience to make grocery shopping as easy as possible.
How I Achieve This
02. User retention and engagement
After launching our grocery web app, we identified key pain points and user behavior patterns that shaped the mobile app’s design. Our goal was to increase engagement and retention by making the mobile experience more personalized, convenient, and rewarding.
🔍 User Research Insights
From user feedback and analytics, we found that:
Returning customers wanted a faster way to reorder Products.
50% of users abandoned their cart due to long checkout processes.
🚀 Key Features Implemented
1. Personalized Shopping Experience
✅ Smart Recommendations: Iintegrated suggestion system that recommends products based on users’ past purchases, dietary preferences, and seasonal trends.
✅ Saved Shopping Lists & Quick Reorder: Users can now save their favorite grocery lists and reorder past purchases in one tap, reducing friction.
✅ Local Market: Users see which products are available in their nearest market for unified pricing with local markets
2. Post-Purchase Engagement
✅ Real-Time Order Tracking: Users receive live updates on their delivery status.
✅ Quick Feedback & Reviews: After delivery, users can rate products in one tap, helping us refine recommendations.
✅ Referral Program: Users get a discount when they invite friends to shop through the app
📊 Results & Impact
After launching these features, we’re going to see:
1. A 25% increase in repeat purchases within the first 3 months.
2. Cart abandonment rate dropped by 18% due to faster checkout.
3. Loyalty program signups grew by 60%, showing that users value rewards.
Unified Experience
Creating a Unified Experience Across Web and Mobile for Our Grocery App
With the success of our grocery web app, expanding to mobile required a seamless, consistent, and intuitive experience that ensures users can shop effortlessly across devices. A unified experience was essential to:
🚀 Key Features Implemented
✅ Maintain brand consistency across web and mobile.
✅ Ensure users can switch between devices without losing progress.
✅ Optimize the mobile app for speed, convenience, and accessibility.
Sundry's Style Guide
Typefaces
Outfit
For all text both headline and body
Outfit Bold 20px
H1
Outfit Bold 16px
H2
Outfit Bold 14px
H3
Outfit Bold 14px
H3
Outfit regular 14px
Body
Navigation Bar
Home
Search
Track
Orders
More
Color Palette
Primary Color
#083F1E
#50C878
#F5CC4B
#9C2D2D
Secondary Color
#C89850
#6DC48A
Neutral Color
#5C5A5A
#1A1A1A1A
#FEFDFB
#F1F3F3
Icon Set
Logo
Goals
01. Increase Mobile Sales Conversion
As we expanded our grocery web app into a mobile experience, one of our primary objectives was to increase mobile sales conversion by reducing friction and making the shopping process seamless. Through user research and analytics, we identified key barriers preventing users from completing purchases and designed solutions to address them.
Strategies Used to Increase Mobile Conversions
Streamlining the Checkout Process
Enhancing Product Discovery & Navigation
Improving User Trust & Engagement
Boosting Repeat Purchases & Retention
User Research Insights
Through surveys and behavioral data, we discovered:
High cart abandonment (45%) due to a lengthy checkout process.
Users wanted a faster way to reorder frequently purchased items.
Complicated navigation discouraged new users from exploring products.
Lack of mobile payment options slowed down transactions.
Trust concerns, first-time users hesitated to complete purchases without reviews and clear return policies.
Results & Key Metrics
Cart abandonment dropped from 45% to 27%, thanks to faster checkout and reminders.
Mobile order completion rates increased by 35% after UI/UX improvements.
Users spent 20% more time on the app, leading to higher engagement and purchases.
02. Reduce Cart Abandonment
Cart abandonment was a major challenge for our grocery mobile app, with 45% of users leaving their carts without completing a purchase. Our goal was to identify the key reasons behind drop-offs and implement targeted solutions to reduce abandonment and increase conversions.
Strategies to Reduce Cart Abandonment
Transparent Pricing & Cost Breakdown
Simplifying the Checkout Process
Optimizing Mobile Performance & Speed
Expanding Payment Options
User Research Insights
Through user interviews, analytics, and heatmaps, we discovered the top reasons for cart abandonment:
Unexpected extra costs (delivery fees, taxes, service charges) discouraged users at checkout.
Complicated checkout process with too many steps led to frustration.
Lack of preferred payment methods caused users to abandon their carts.
Slow app performance or crashes disrupted the shopping flow.
Users got distracted and forgot to complete their orders.
Results & Key Metrics
Overall cart abandonment dropped from 45% to 25% in three months.
Checkout completion rates increased by 35% due to simplified checkout and reminders
Checkout completion rates increased by 35% due to simplified checkout and reminders
03. Achieve Faster Load Time
A fast-loading app is crucial for enhancing user experience and increasing conversions. Research shows that 53% of users abandon a mobile site if it takes more than 3 seconds to load. In our grocery mobile app, we focused on optimizing speed to reduce bounce rates, improve engagement, and ensure a seamless shopping experience.
Results & Key Metrics
App load time improved from 5+ seconds to under 2 seconds.
Bounce rate dropped by 35%, meaning more users stayed on the app.
Checkout speed improved by 40%, increasing completed orders.
Page-to-page transition time reduced by 50%, enhancing the browsing experience.
Strategies to Achieve Faster Load Time
Lightweight UI Components: We removed unnecessary animations and complex visual elements that slowed performance.
Code Splitting & Lazy Loading: Ensuring that only necessary content loads first, reducing initial load time.
Pre-Filled User Data: Storing delivery addresses and payment methods securely for instant checkout.
Efficient State Management: Minimizing excessive re-renders by optimizing how data is stored and updated.
Lessons Learned
Speed is a major factor in user retention—if an app is slow, users leave.
Smaller, optimized assets significantly improve performance.
Preloading and caching data reduce load times for repeat users.
Seamless checkout requires both UI and backend optimization.
Delivery
01. Fully Functional Mobile App for Android & iOS
After extensive research, design iterations, and development, I successfully delivered a fully functional grocery mobile app for both Android and iOS. This app complements our existing web platform, ensuring a seamless omnichannel experience for users.
Login/Sign up form to Home screen
Category to option to cart
Order successfully placed to Tracking
02. Admin Dashboard
Alongside the Sundry's web and mobile app , I designed a comprehensive Admin Dashboard to streamline operations, manage inventory, track orders, and analyze customer behavior. This dashboard ensures that administrators have complete control over the grocery platform, optimizing efficiency and decision-making. More information in Next Project
Dashboard, Order management, Accounts
Next Project
End to end sundryagro's Admin Dashboard
Back to top