September 6, 2022
October 22, 2020

Design case study: On-demand grocery delivery app

Olena Zanichkovska
Founding Partner
Grocery delivery app

Expertise: UX Strategy, Product Strategy, UX /UI Design, User Testing, Digital Branding, Requirements Management, Product Management, Product Marketing.

Project Team: Agency Partner, 4 Product Designers, Business Analyst, Product Marketer.

Platforms: iOS and Android.

Local delivery apps gained enormous popularity in recent years. Postmates, Instacart, and Shipt are the biggest players in the food delivery business which established the main design guidelines for such applications.

Recently, we worked with one of our clients on building a local grocery delivery app for the UAE market that connects local stores with customers and handles the process of taking orders and product delivery. At first glance, it may seem that there’s no need to invent the wheel and just follow the established design patterns.

However, we were creating a product for a completely different market and had to take into account the possible cultural differences that could affect our design decisions.

In this article, we’ll talk about why designing the Swan app, we couldn’t just ‘copy and paste’ the existing products, about the importance of branding in product design and some of the challenges that we faced.

Product vision

Initially, the client approached us with an idea of building a Scan & Go mobile application which would allow customers to scan their items as they shop and check-out via the app.

Scan and Go mobile app

The vision for the product was to launch an application that will bring engagement and personalisation of online shopping to physical shopping. The app would guide the shopper through the store, recommend the best available options and at the same time save shopper’s time by skipping the line.

The target audience for the Scan & Go app were:

  • Shoppers — tech-savvy millennial consumers
  • Retailers — grocery stores and supermarkets, which are enthusiastic about bringing positive changes to their in-store experience.

After formulating the vision and goals for the project, the next important step research and search for insights. Our research process is focused on gaining insights on the market, customers’ pains and gains that we would later use to formulate our hypothesis to test and validate.

Research and insights

At the research stage, our goal was to understand the market, our target audience’s current shopping behaviour and habits, nutrition, and food trends. Our step-by-step research plan included:

  1. Global market research to uncover main trends in retail, nutrition, and food trends, and uncover how digital has redefined what it means to “go” shopping”.
  2. Local market research was aimed at learning about our target audience’s current shopping behaviour and habits, cultural specifics.
  3. User research, using both quantitative (online questionnaire) and qualitative research (deep user interviews) methods.
  4. Competitor research, where we looked at a few competitors or similar platforms, analyzing their user flows, UX/UI, and key features.

For our quantitative research, we analyzed the answers of about 80 participants from our target audience groups, based in Dubai and Abu Dhabi.

Questionary results
Typeform questionary results

Here are some of the things that we learned:

  • About 50% of respondents said the availability of their favourite products is a very important factor for them when shopping
  • 79,2% of people follow their shopping list
  • 59,4% of respondents want product recommendations during shopping, while 30,4% said they want a shopping assistance
  • 47,2% said they pay attention to discounts, while 40,3% said they are ‘maniac’ about discounts.

One of the important takeaways from the quantitative research for us was to understand the current negative aspects of shopping for consumers, to list them all, and brainstorm on how we can address them, both in the product and future marketing communications. For example:

User research insights
User Research insights

For the qualitative research, we conducted a series of remote user interviews aimed to better understand the experience that our customers have with grocery shopping.

  • Understand how users perceive the shopping process and what factors affect it.
  • Understand the underlying emotions that this process causes.
  • Identify the inconveniences encountered in the shopping process or negative emotions associated with it.
Remote userinterviews
Remote user interviews

Based on the results, we created a list of negative experiences the consumers have so that we try to avoid them in our product. On top of that, we created a map of positive emotions that people have when shopping that we would further transfer to the online shopping experience. The findings of this research would be later used in the Swan brand strategy, all marketing, and product communications, and UX copy.

Rapid prototyping and guerilla testing

Research and testing are an important part of our design process and give our team the ability to inform our designs with real data. Guerilla testing helps us to validate (or invalidate) critical assumptions at a cheap cost and with rapid speed.

For the Swan app, we created a quick prototype that could be tested with real people at shops and supermarkets. With guerilla testing, we had several goals:

  • Test our hypotheses and assumptions
  • Identifying critical usability issues early
  • Validating some of the main tasks in the app

The fastest way to do the testing was to do it locally, so we created a version of a Scan&Go prototype in Ukrainian language and added product names from one of our local stores.

Then we went to the store and asked customers to try using the app to scan their items as they shopped and to check-out via the app. After several tests, we’ve been able to track the main problems and identify some necessary improvements.

Guerilla testing

Our client at the same time was demonstrating the prototype to the retailers in Dubai and Abu Dhabi. Although retailers liked the idea of a self-checkout app, they did not show much interest in it, but instead were much more interested in online delivery service. This was a good example of the importance of testing the idea and researching real business needs.

After several negotiations with the team, it was decided by the client to pivot from in-store shopping to an online grocery delivery app.

Building MLP

After the pivot, we started to work on an on-demand online grocery delivery app, something like Instacart but for the UAE market. The vision was to build an app that would allow customers to order their grocery items from their favourite local stores and get them delivered right to their doorstep.

From the marketing and brand perspective, based on the previous research of the offline and online shopping experience, our vision was to create an app that would be “your loyal and friendly companion while you shop.” A digital assistant that makes shopping easy and fun. Keeping that in mind, we went through several brainstorming sessions and came up with Swan as a brand hero and a brand name.

“We use two heroes in our communication — shopper, and swan. Swan is someone who takes it under control and the shopper is just picking things he wants. Swan covers the rest, like a personal shopping assistant.”

We created some illustrations to create strong visual associations with the brand.

Swan brand hero
Swan Brand Hero

From the customer’s perspective, the expectations from using a delivery app are evident: the service should be fast and convenient, the flow in the app should be intuitive. That is why for our product design team, it was important to work through every step of the delivery process to ensure it would be seamless, taking into account all the participants, both online and offline processes and touchpoints.

From the delivery process perspective, Swan application has a slightly different model of work than Instacart. Unlike Postmates and Instacart, picking up the products and order assembling is done by different people. In the case of Swan, order picking is done by a Shopper, usually a store employee. Delivery of orders is carried out by Drivers.

Here we got our challenge number 1: how to ensure that a Driver would get the right order out of many prepared by a Shopper in the particular store. We did not want to add even more functionality to the application, but it was necessary to ensure we avoid possible errors in deliveries as much as possible. After some brainstorming, we decided to go with the simplest solution possible: using physical numbers (ones you may see in some restaurants) attached to the bag with the order.

Generally, the grocery delivery service consists of the following products:

  1. Customer app
  2. Picker app, for those who would pick up the order in the supermarket
  3. A driver app, for those who would deliver the order from supermarket to the customer
  4. Retailer portal
  5. NOC dashboard for Swan support team

For the customer app, our scope of work for MLP was a list of the most essential features of an on-demand grocery delivery app.

Swan delivery app

For Picker and Rider apps, to a large extent, we followed some of the best practices used by shoppers at Postmates, Instacart, and Shipt, taking into consideration our specifics. If we talk about the design process, we often made several design concepts for a particular feature, which product managers on the client’s side used to test and collect feedback from local retailers.

Picker and Driver apps
Picker and Driver apps

For example, one of the problems we had was how to avoid the delivery of the wrong products. In other words, what if the piker packs a different brand of the yoghurt than the customer wants or milk chocolate instead of a dark one? We knew this would be very annoying to the customers. Our task was to find a way to validate that the product chosen by the Piker is the same as that was ordered by the customer in the app. One of the ways we tried to solve this is by using barcode scanning: when a Picker scans the chosen product, our system would show if it matches with what product was ordered. It sounded like a great solution, but in reality, we received many complaints from the Pickers that it slowed down their work and decided not to implement it.

Our main take away from this is that testing and validating various ideas as early as possible is very important in terms of both design and business and all processes and their participants.

Product launch, improvements, and growth

After the successful launch of the MLP, we continued to work on improvements, optimization, and implementation of the shelved features that were not included in the first version.

An essential part of this stage of product design is to work with qualitative data and feedback from real users, understanding how users feel about using our product or if they have any frustrations or complaints. One of the great sources of such data is the support dashboard where we can look through users’ complaints.

For example, what we found the most common complaints from customers was products being out-of-stock very often. Customers sometimes had to cancel the order because 3 out of 5 products were missing. To address that problem, we came up with an idea to always show the user substitute options for items that are often low in stock or essentials. Now, when a user adds a hot item to the cart, Swan’s recommendation engine would provide a selection of substitutes.

Swan delivery app

The work on the recommendation engine was quite interesting: we aimed to build personalized product recommendations based on various conditions, such as the user’s path, what products that he is searching for most often, what products he buys regularly, the storage term for these products, the frequency of purchase, etc.

Swan illustration

As for product improvements, we worked closely with the client’s product team in various areas, including:

  • Optimizing the onboarding flow for the users
  • Expanding product pages with more details descriptions, a tagging system
  • Building a cashback reward system
  • Discounts and incentives programs.

For example, for the incentives program, we chose a different path than most delivery apps do and did not set the limit for a minimum order. If the customer wants his Oreo delivered to him right now, he can surely do it but for a specific delivery fee. From the business perspective, it is important to encourage the customer to order more items that he also might need. That is why we show message bar in the user cart that shows the user that if he also adds more items like mineral water and a baguette, he would get his order delivered totally for free. While working on these types of tasks we make sure that we think of both what’s the best for the user and and what is good for the business.

Shopping cart screen
Shopping cart

Talking about cooperation with retailers, Swan is regularly adding new stores to the application, from large well-known supermarkets to small and niche stores. In terms of design, it was important for us to give visibility to new stores and promote them in the app. Therefore, we display each new partner on the first screen of the app.

Home screen with stores list
Home screen with list of available stores

Marketing support

From the marketing side, after the launch of the app our team continued to work on email and social media marketing, and AppStore optimization.

For social media, we worked on the communication strategy, created visual assets as well as themed campaigns. Our focus was to provide useful content for our users around food and nutrition. We created shopping lists and healthy recipes, provided tips on how to save money when doing grocery shopping, and shared them with our users on our social media.

Templates for Instagram posts
Templates for Instagram posts

For themed campaigns, we created fun animated videos for specific holidays or occasions, for example, for Diwali holiday, Halloween, and Christmas. All videos feature our brand hero Swan and follow our brand guidelines and tone of voice.

Video production by AND ACTION video agency

Product launch is only a beginning

Swan brand hero

Many factors influence the success or failure of a product and good or bad design is just one of them. For a delivery app, the operational side of the business is much more important. After all, users do not rate an app in the App Store for its good design, but if their orders are delivered on time. That is why for us as a product design team it is important to work closely with the operations, development, business, and marketing teams to ensure customers get a consistent user experience throughout the user journey and through all channels, both offline and online.

Thanks for reading! If you have any questions about our work at The Gradient, we’ll be happy to answer them.

Interested in launching a product or transforming yours?

About author
Olena Zanichkovska
Olena is a Founding Partner and Director of Product Strategy at The Gradient.

More from The Gradient