Popcorn,
get your groceries delivered within minutes, straight from our vans!
A design case for creating a grocery shopping product.
Popcorn is a small-scale Silicon Valley startup based in San Francisco, providing grocery and essential products to local residents. Popcorn offers over 1500 products in 23 categories. Through the app, you can place orders and track them on the app's map after ordering. Popcorn, a service that operates 24/7, delivers its products using minibus-like vehicles, setting it apart from its competitors. By carrying all its products in vans, Popcorn can deliver products to its users much faster.
Year :
2021 • 2022
Duration :
6 months
Team :
3 product designer • design manager • 2 product manager • 2 engineering manager
development team • customer success team
My role
• Led the end-to-end design process throughout all stages of the product development lifecycle, from initial discovery to final delivery
• Delivers impactful solutions that solve user problems and move business metrics
• Design a comprehensive, modular design system that helps us move faster in the future
• Design the interfaces that are functional, beautiful, and delightful
• Create detailed prototypes to test micro-interactions
• Lead quantitative and qualitative research
Problem statement
The Popcorn application was designed with a template application to make a quick entry into the market. As a team, our first task when we started was to identify priorities and problems and to create a roadmap for how to improve the product.
Problem
Lack of personalised experience
The application could not offer a personalized experience or product recommendations to its users. The fact that each user is unique and the application did not recommend products suitable for the user was affecting our conversion rates.
Problem
Inconsistent user experience
The application was far from providing a consistent experience to the user. As new features were added to the product, the lack of a design system and experience map continued to negatively affect the user experience and caused users to get lost within the product.
Problem
App experience does not match user behaviour
In our research, we realised that the existing application was far from the best practices that users are accustomed to and want to see. Users wanted to see more recognisable design elements, such as larger images and fonts. At the same time, they expected the application to provide them with more instructional information.
Project timeline
Timeline
Discovery
Product listing
Product detail
Product search
Order tracking
My cart
Checkout
Nov
Dec
Jan
Feb
Mar
Apr
Toolbox
Research
User Testing
We conducted a usability test with 11 users via UserTesting, assigning them 12 tasks to identify where they encountered difficulties.
User interviews
To gain a better understanding of user’s and their needs and concerns, We conducted 4 interviews. Some of our questions:
1 • How frequently do you shop for groceries per week?
2 • Have you ever tried online grocery shopping before?
3 • Which online grocery platforms are you familiar with?
4 • What do you consider to be the advantages and disadvantages of online grocery shopping?
5 • In what situations do you choose to shop for groceries online instead of going to a physical supermarket?6.
6 • How do you typically make decisions about which products to purchase online? Do you have any specific criteria or preferences?
7 • Are there any additional features or services that you would like to see in an online grocery shopping platform?
54%
of the respondents, some have tried online grocery shopping, while only a few are familiar with Popcorn
82%
of respondents have emphasized that the greatest values of online grocery shopping are the discounts and time-saving
46%
during the pandemic, a majority of respondents have expressed a preference for purchasing supermarket items online
Competitor Analysis
During the competitor analysis, we examined 25 grocery products, both domestic and global, to gather more information.
Early designs
User flow
We conducted brainstorming sessions on how users can easily find the products they are looking for, add them to their carts, and make purchases. In addition, by recommending similar/related products during their shopping and showing them suitable promotions, we aimed to diversify their shopping experience.
Design audit
In our team, we identified pain points across all channels by analyzing user flows. We then prioritized and documented these pain points, along with our potential solutions, based on their importance and ease of implementation.
Atomic design approach
During the wireframe phase after the research process and interface audit, we used the atomic design method. We started designing from the basic interface elements. We defined their functions and which interactions they should have. For example, you can see the product card designs.
Card design alternatives
Card design features
Wireframes
Design system
During the establishment of the design system, I managed the process by working with other designers and the agency designing the branding. The establishment of foundational styles and their active use in designs were particularly important for us. As the product was new and the branding had not fully settled, the situation of changing colors was a challenge we faced; having established a design system greatly helped us in maintaining the continuity of the project.
Final design
Discovery page
With the new homepage design, we aimed to offer users a more discoverable design. The initial design featured only categories on the homepage. In the new design, users can access a rich content including their previous orders, concept categories, campaigns, daily deals, and new arrivals. Additionally, the homepage's modular components technically provided us with an advantage in terms of the sustainability of the design.
occupied unnecessary space
weak legibility
categories do not effectively help users discover
cleaner design with improved hierarchy
categories
highlighted 
campaigns
the new way of showing products
Product listing
The first version of the app had accessibility issues. During tests, users struggled to read product information. They mentioned that the product images were insufficient in conveying the product. The hierarchy of product information also made it difficult for users to access information about the product at first glance. In the new design, we reorganized the hierarchy of information on the product card and revised the font and visuals of the product information to be more distinct and legible.
insufficient visuals and texts
the items in the cart are not visable
quick scroll navigation
improved interactions
revised the content hierarchy
shopping cart items are highlighted
Product detail
Similar to the product listing page, there were issues with information architecture on the product detail page. In the new design, we redesigned the information architecture to ensure product information is legible and understandable at a glance. We also supported user experience with auxiliary tags and similar products.
usage of spacing and design items is not efficient
users can not see the total amount when they add the product to the cart
the product image was higlighted
tag based
product information
new content hierarchy
Search
We designed a search flow that offers an experience similar to the product detail page and the discovery page. Through this, we aimed to assist users in their product search, offer different options, encourage discovery, and provide a consistent experience.
the page does not guide the user
recently searched products was added as tags
users can discover what people search mostly
users can discover popular categories
My cart
Increasing sales opportunities and conversion rates were of great importance in line with business objectives. As a new startup, we spent a lot of time as a team on how we can better reach our users, ensuring they don't miss our personal benefits and designing an experience they are sure to enjoy.
insufficient visuals and texts
colour does not help to differentiate the feature
use consistent components styles for the cart variations
users can discover similar products
after the A/B test, we changed the label text with 'Place Order”
Checkout
The page where we experienced the most problems with conversion rates and information hierarchy was the checkout page. On this page, users had difficulties in entering delivery instructions, adding, and changing payment methods.
Spaces and component sizes on the page make it difficult to use
tip the driver
apply and change the promotion with ease
see detailed transaction analysis and savings
Continues checkout
One of the most exciting flows we launched was continues checkout. With this feature, users had the opportunity to continue their shopping until the products were delivered to them after placing an order.
Since the products are delivered from vans, not dark houses, users can update their orders with products that are in stock until the van reaches the address.
users can add items from the Order Tracking screen
users can view newly added items at the top
User reviews
4.7
stars on the
ios app store
1M+
download 
on the google store
38%
conversion rate
increased
Usually very quick deliveries. I like that they are including a variety of new items on a rotational basis. App is easy to use.
5 stars
Jason Wong
... They offer a lot of my favorites, plus I found new, interesting items that I hadn’t seen before. The app easy to use, so today I got my usual added a new things, like a strawberry preserve, goat cheese and pasta shells made chickpeas. Can’t wait for dinner!
5 stars
Shelley Costantini
... I have been an alkaline vegan for some time now and I havent able to find great snacks that make me want to buy more tahn once... So as soon as I looked trough what they offer I did’nt think twice. At this very moment I am enjoying, relishing really on the existence of coconut milk, maple syrup, cacao and reishi mushroom isce cream!
5 stars
Jacky Golphin
Disclaimer
In compliance with the non-disclosure agreement I signed, I have omitted sensitive data and obfuscated figures. All information in this case study is my own and does not reflect the views of my clients.