Faster Browsing to Checkout in Grocery Shopping — A Case Study for Segari App
Hi everyone, I have written a few case studies in between my daily work but haven’t got a chance to publish them. I made my mind to share it with you and we can watch myself grow overtime. Constantly improving!
Disclaimer: I do not work for Segari. This is my self exploration as a loyal Segari user on features I wish they will add to maximize my online grocery shopping experience.
Background
In today’s fast-paced world, online grocery shopping has become a game-changer for those who juggle multiple responsibilities, including studying and working while preparing healthy daily meals.
Some key factors why it gives significant advantages are:
1. Time Efficiency: Eliminating trips to physical stores, delivered to their doorstep.
2. Freshness Guarantee: Ensures high-quality, fresh ingredients delivered to their doorstep.
3. Easy Meal Planning: Simplifies shopping lists and recipe access.
4. Waste Reduction: Ordering precise quantities, minimizes food waste.
5. Savings: Buy only what we need, with additional discounts and special deals
Segari is one of my go-to App for grocery shopping. As a loyal user, I have noticed areas of improvement that I can suggest to improve the overall user experience.
Overview
As users expect convenience, speed, and personalization in grocery shopping, Segari needs to cater this evolving customers expectations and increased competition from the market. There are similar pain points and hopes from Segari users that lies on Timely Order Creation (adding items to cart) and Getting Best Deals (saving more on their online shopping experience).
Problem Statement: Customers need to spend a lot of time and effort both inside and outside the Segari App in order to have an effective & cost-efficient grocery shopping checkouts.
Proposed Solution: Provide a faster in-app customer journey from shopping carts management to checkout process through easy cart summary view, personalized recipe inspiration, and auto-applied promotions.
Step 1: Understand
Maintaining a healthy lifestyle is one of the goals user seek in creating a happy and sustainable family life. This achieved through a well balanced of diet, workouts, and rest in between their daily activities.
Families who cook at home has proven that they can manage what they consume better, as they have more control of the menu variation and health nutritions. However, self cooking also requires meal planning activities and grocery shopping schedules that requires user’s attention, time, and effort.
Nowadays, customer relies on online grocery shopping industry where they still can shop for grocery items they need/want and have it delivered right on their doorsteps. These online services can help on easier meal planning, guarantee ingredients freshness, free and fast shipping, and also great deals for more savings.
To understand deeper how is the user’s behavior, wants and needs, and also their pain points, I conducted in-depth interviews with 3 users who have experienced online grocery shopping.
Then I synthesized all the valuable data I have collected into an Affinity Diagram using Figjam. Through the research, I gathered more insights around:
1. The users: are they the Cook or just the Shopper?
2. Consideration and behavior when grocery shopping: Get things done, Deals, Convenience.
3. Their pain points: Unavailable items and promotions, incomplete products
4. Their hopes on how to improve their Online Grocery Shopping Experience: More complete items, more deals, cooking inspiration
How the Existing Design Looks Like
To understand more, here I mapped out the Segari’s in-app User Flow & Customer Journey to tie the overall experience. Please note that these screens are taken on September 2023, so it may has been updated by the time you read this.
Then, I put these flows and touchpoints into a Customer Journey to learn the end to end process and challenged myself to improve the ups and downs on their journey.
Problems to Opportunities
I have discovered 2 main problem areas that users encounter in the online grocery shopping experience:
- Deciding what to Buy for a One Time Checkout: The items would be mixture of ingredients that are out of user’s possession, on attractive sale, or even haven’t crossed on users’ mind. This would take a lot of user’s attention & time if they don’t have their shopping list ready with risks of forgetful items and ingredients freshness longevity.
- Getting the Best Deal: Segari frequently offers seasonal ingredients discounts and various payment method cashbacks. However user have to check the promotions outside the app (browser articles and social media) and apply the code manually during their checkout. Those who are not aware or forgetful are at disadvantage due to missed opportunities of getting cheaper prices and saves up.
The repetitive needs of meal planning & groceries shopping have pushed users to become more creative and demanding in the process. Giving them a boost of inspirations and automation help would be a great aid.
1. Same orders, same input speed: What if we can automate what customers need to buy based on their customs & behaviors? (i.e. Buy Eggs & Milk every 2 weeks)
2. Same menus, boring appetites: What if we can spark ideas for interesting ingredients or recipes to try for the next meal?
3. Back and forth task: What if we can let users find deals at the right time, or even auto-apply them?
Competitive Benchmarks
Benchmarks to other apps help me a lot in these process. I remember using other apps with similar feature that may answer these problems and achieve the goals.
- GoFood Shopping Cart Behavior: Use of floating carts where user can see the Cart Quantity and Subtotal without having to move to different page yet.
- GoFood, GrabFood, and Cookpad: Spark Ideas through recipes that are easy to find and personalized. Additional Food categorization in Segari would be a aid to filter down the search process in finding a recipe that suits their taste, cooking proficiency, or even available cooking utensils.
- Grab Auto Apply Vouchers: Users may not need to check on the payment method promotions until they are on the checkout page. So to avoid getting back to previous page to check what are the promo codes, auto apply & easily access these vouchers TnC like Grab does.
Let’s Design!
I started sketching on my notebook to translate my ideas into some wireframes. I have also made the digital version so you can look at them clearly.
Let’s discuss them part by part.
First, I need to update the Homepage to include less scattered promotion banners, so Product Cards can show up above the fold in mobile size.
Also I would add a Cart Summary containing quantity & subtotal amount of the items in Cart. This floating cart shows up whenever user adds item to their cart. will be hidden when user is browsing (i.e. scrolling the page) to avoid distraction and maximize the viewport.
Second, I like that Segari already have the Recipe page. It has the opportunity to spark dishes ideas to the users, which leads them to buying the ingredients needed to create the dish.
For the improvements on this Recipe menu, I added more advanced Recipe Categorization, Search, Filter, and Save Recipes function. On the Recipe Details page, I also put options for watching video tutorials as it can be more engaging & easy to follow by users.
Last but not least, I also plan to improve the Voucher applying system. Previously users need view available voucher codes on the last banner on the Homepage, and apply them manually on the Cart page.
I want the users to browse and apply voucher codes easily without having to leave the Cart page. So, I decided that the system should help to automatically apply the best deals (saves the most) that the users are eligible for.
Introducing the Updated Interface of Segari!
Started with creating the atoms, I picked the Primary & Secondary colors based on Segari’s Brand Color. I also plan to make the icons style more consistent in the app, so I modified from my own set of icons.
Before vs. After the Redesign
Let’s cut the chase and see what are improved!
If you would love to see the prototype in Figma, you can also visit these links:
Iterations?
Well, as this project is only my exploration and not developed for real in Segari, I haven’t been able to go that far. However I have prepared some plans to track the metrics and what we can improve later on.
To rate how successful these feature would impact to the user journey, we can measure from:
1. Number of Cart Visits until user initiates checkout in 1 session.
2. Time Spent from discovery until checkout.
3. Time Spent on Recipe pages.
4. Number of Recipe Views and Saved.
5. Recipe Ingredients added to Cart Conversion Rate.
6. Voucher Codes Application Rate.
For next iteration, there are still a lot of room for improvements that can be done to further maximize the user experience. Saving these ideas for another day.
1. Maximize the Buy Again feature for repeat customers on Cart
2. Calendars and meal planning schedules in-app
3. Group selection (i.e. ignore Rice and Spices on Recipe Checkouts)
Thanks for reading!
This case study is intended for me to practice my design thinking and Product Design skills. I hope you enjoy reading this and find the proposed solution can answers evolving users need for convenience, speed, and personalization when doing online grocery shopping in Segari.
What do you think of the design? If stories like this are helpful for you, please let me know by leaving feedback on the comments. I also plan to post regularly so follow me for more updates!
At the time this post is published, I am open for Full Time Job or Freelance projects in Product Design!
With 5+ of experience in Product Design, I’ve had the privilege of working for leading companies in the education tech, e-commerce, SaaS, and financial sectors. I am also actively sharing my knowledge as Product Design Mentor.
If you know of any opportunities that align with my background and interests, I’d greatly appreciate your support and connections. Feel free to message me for further discussion. Your help in spreading the word would be invaluable.
