Dangle is an all-in-one ad solution platform for both grocery stores and brands for them to connect and efficiently bid for available ad placements displayed on grocery stores’ websites. We works with independent grocery stores and growing independent brands to get their products into more online store shelves, while grocery stores earn an additional stream of revenue.

Client: Major Tom, an industry-leading strategy-first digital agency based in Vancouver.
Timeline: Jan, 2021 - Apr, 2021
UX Research | UX Design | Website Design | Web App Design

My Deliverables

Conducted user research and competitive research.
Developed user personas and user journey.
Designed and conducted user flow diagrams of the ad campaign bidding system.
Created low-fidelity, mid-fidelity, high-fidelity wireframes for brands dashboard (Web App), grocery stores dashboard (Shopify App), Landing pages for Dangle (Website).
Created interactive prototypes.
Facilitated user testing and user insights analysis.
Created style guide of Dangle.

Walkthrough Video

This video will show the user flow of how a brand owner creates a banner ad on our platform.

Testimonial from Our Client


Grocery store merchandising has not evolved much in the last 150 years as brands struggling to get their products featured in the most prominent locations in the grocery store. While in the recent decade, consumer shopping behavior has been shifting from physical stores to the e-Commerce world rapidly. Our client, Major Tom, who has envisioned the potential of connecting brands and grocery stores and helping both parties manage their online merchandising campaigns, intended to create a platform to increase their online margin streams.


1. The team had limited knowledge in e-Commerce and market practices, extensive research was established as an imperative part of the project. 

2. Limited access to user interview subjects due to the remote collaboration and time availability in the early stage of our research.

3. The scope of the project had to be narrowed down due to the limited time frame despite many possibilities that the team had discovered.

Design Process

Design Process Diagram

User Research

Based on our initial research, our user research were divided into three parts: we recognized two groups of target users: first is independent and local grocery store managers who are responsible for premium product placements on shelves, second is growing brand owners who will negotiate with the grocery store managers to promote their products. And the third group is online grocery consumers as our secondary users who will influence the online premium product placements for both parties.

User Interviews for Brands and Grocery Stores

The team conducted a total of 4 in-depth user interviews with Zoom meetings. Then, we used Dovetail to conduct a comprehensive qualitative analysis of all the interviews to conclude with some key findings. 

One of User Interview with Larry's Market and Insights Analysis on Dovetail.

Consumer Survey

The team created and shared a consumer survey regarding respondent’s online grocery shopping behavior, starting from week 2 of the project, and closed it on week 5. In total, there were 143 survey responses.

Key Findings

For Independent Grocery Stores:

It's complex for grocery store owner themselves to manage online advertising campaigns without marketing team or technical team. They are eager for a more convenient, time-saving way. At the same time, they want to discover new brands and increase online sales.

For Growing Brands:

Finding the grocery stores that potentially interest in their products is difficult. Yet promoting products to be listed in sores and maintaining profitable placements require them to invest a great amount of money. They are looking for a way to increase brand exposure online and partner with more independent grocery stores.

For Consumers:

70% of our respondents are involved in online shopping and nearly half of respondents would continually shop online even after the pandemic is over. Most of the respondents explore new grocery stores through social media like Instagram and Facebook.

User Personas

By analyzing the interviewees' insights, we created our user personas to represent brand managers, grocery store owners, and consumers respectively.

User Personas for Brand Manager and Grocery Store Owner

Domain Research

In order to understand the online advertising bidding process, the team also dived into related domain research. We chose 5 typical online advertising bidding platform and made a competitive analysis. There are several types of players in the ad bid auction space that work directly with consumer packaged good brands. Online advertising platforms are Dangle’s direct competitors.

Competitive Analysis of Direct Competitors (CPC: Cost per click; CPM: Cost per impression; CPA: Cost per action)

Design Principles

By conducting our research, several design principles had been summarized to guide the team as a baseline for our product design.

Easy to navigate -- The dashboards for both brands and grocery stores users need to be easy and quick to navigate and time-saving. The menu should be logical and understandable to both groups.

Simplifying the process of bidding -- During creating ad campaign process, the brands should be able to successfully submit their campaign even for the first-time users.

All-in-one application -- For both brands managers and grocery stores owners, they should be able to complete their missions in one application respectively.

Aligning the styles -- For the brands side, the style should be consistent with our landing pages, while for the grocery store sides, the style should follow the style guidelines for Shopify App.

User Journeys

Since brand managers and grocery store owners are direct users of our product, we illustrated the possible steps for those two groups to accomplish their goals in the user journey. It also became an important baseline for us to design the product.

User Journey Maps

Ideation Workshop

To align the full team with the project goals and start the project off on a creative note, the team collaboratively to expand our idea generation with a "Bad Idea" session. We selected some creative ideas from the collection and finalized our MVP with feature prioritization matrix in agile design.

Bad Idea Miro Board and Feature Prioritization Matrix in Agile

Minimum Viable Product

The team concluded the MVP for Dangle including the following features:

Landing pages for both grocery store users to learn about Dangle and brand users, sign in and log in system.

Dangle as a web App for brands where they can create ad campaigns based on different types of premium product placements on grocery stores' websites; manage their existing ad campaigns; discover and connect with other grocery stores.

Dangle as a Shopify App for grocery stores where they can create new premium product placements on their websites; manage existing placements; verify the ad requests from brands; connect or invite the brands.

User Flow

Bidding system as an essential part of Dangle, we illustrated the bidding system principles from both brands end and grocery stores end with the user flows below.

Advertising Campaign Bidding System Flows

Besides, the team members conducted some ideation sessions regarding the functionalities of Dangle on Miro board to finalize the process for each main user flow. We used sketches or wireframes to visualize our ideas before we put them into our prototype.

User flow ideation example on how brands and grocery stores connect with each other


We created three stages of prototypes from low-fidelity wireframes to high-fidelity interactive mockups on Figma. The UX team collaboratively made important design decisions and synced up with the team. During the weekly meeting, we would continuously update the newly designed prototypes with our clients and ask for their feedback to help us better follow the project objectives.

The process of prototypes developing and implementing.

Landing Pages

Landing Page Example - Brands

Brands Dashboard

Brands Dashboard Example - Discover Stores

The example dashboard interface showcases how users can browse for stores on the Dangle platform.
A top purple banner explains the intention of this page and what users can do on this section.  
With a gallery card view, users can find stores and connect with them. Finding and connecting with stores that brand users are already working with, is the first step for new users before building ad campaigns.
Tools like filters, sorting, and search bar are provided to help users find the stores quickly.
Lastly, if they don’t see the stores they are working with on our database, they can invite them directly with a personal note or a default note provided by Dangle.

Grocery Stores Dashboard

Grocery Stores Dashboard Example - Set Banner Ad Placements

The store dashboard will be in the Shopify dashboard. The example dashboard interface showcases the function of “Create banner ad units”.
On this page, users are able to customize the information that they want to provide with the brand users so that they can follow the banner ads instructions.
They can save the information as a draft and edit the information later.
Lastly, they can upload a sample image to better guide the brands to design their banner ads.

Style Guide

To ensure the Dangle brand web app aligns with the brand image, the colors are extracted from Dangle Logo. Purple is associated with creativity, vitality, and elegance which aligns with the vision of Dangle. The color palette below is applied across the content pages and brand dashboard. And the typefaces "Poppins" which we chose is also a web-safe font that can be acceptable for all the devices and users. The team designed the button and different interaction states to better facilitate users throughout the process.

Style Guide for landing pages and brands dashboard

The grocery dashboard is designed based on the Shopify official assets library. The typography, colors, icongraphy, grid system, spacings and buttons are following the instructions from the Shopify design guideline.

User Testing

Due to Covid-19, we can only conduct our user testing through Zoom Meetings. We invited 9 participants to our user testing in total, five of them have UI/UX design experience while four participants with extensive grocery store management and brand management experience.

The user testing are divided into three stages: 1. Structure the user testing flows on Miro board. 2. Zooming meeting with participants and facilitate them to do the user testing. 3. Analyze their behaviors and their key insights on Dovetail to finalize the possible improvements or refinements that we can revise on our product.

User testing plan on Miro board

Apart from usability testing, we also conducted card sorting sessions with some of our participants to help us better understand their logics on the navigation bars.

Prototype Refinement

According to our usability testing results, we identified some of the main confusions and problems that we had in previous prototype version and changed several screens of our product to improve the user experience.

Prototype before and after comparisons examples on Figma

What I Learned and Gained?

The project has great enriched my UX/UI design skill practical wise. I've learned many design matrixes as well as design thinking throughout the project. Besides, the remote collaboration experience helps me to improve my negotiation and communication skills. I also overcame many challenges during the projects. It's a well-worthy learning experience and it's my pleasure to meet my team, our clients, and meet the final product with our efforts.

© 2021 Designed by Youxi(Iris) Zeng. All rights reserved.