Dangle

An advertising solution that connecting brands with eCommerce stores to promote products

Product Research & Design

Brands struggle to get their products featured in the most prominent locations in the grocery store.

Grocery store merchandising has not evolved much in the last 150 years. Grocery store chains charge for positioning and have complicated relationships with representatives for the brands that they carry. Did you know that a typical grocery store has more than 10,000 products? That’s a lot of jockeying for the position.

About the project

Timeline

Jan - April 2021
(4 Months)

Client

Sponsored by Major Tom

Team

Joyce Xiao

Product Designer &
Scrum Master

Binyu Xu

Product Designer

Iris Zeng

Product Designer

Inda Macias

Project Manager &
Video Editor

Jasmine Wong

Developer

Sanket Redekar

Developer

My Contribution

UX Research
Concept Development
UX | UI Design
Usability Testing
Prototyping

Brands struggle to get their products featured in the most prominent locations in the grocery store.

Grocery store merchandising has not evolved much in the last 150 years. Grocery stores charge for positioning and have complicated relationships with representatives for the brands that they carry. Did you know that a typical grocery store has more than 10,000 products? That’s a lot of jockeying for the position.

about the project

about the project

Timeline

Jan - April 2021

Client

Sponsored by
Major Tom

Team

Joyce Xiao
Product Designer &
Scrum Master
Binyu Xu
Product Designer
Iris Zeng
Product Designer
Inda Macias
Project Manager &
Video Editor
Jasmine Wong
Developer
Sanket Redekar
Developer

My Contribution

UX Research
Concept Development
Interaction Design
Interface Design
Usability Testing
Prototyping

About the project

Timeline

Sep - Dec 2020

Client

Team

Joyce Xiao
Product Designer
Mary Wilson
Product Designer
Lan Wang
Technical Designer
Chenjie Whatley
2D Concept Artist
Ulisses D'Ávila
Game Developer

My Contribution

UX Research
Concept Development
Interaction Design
Interface Design
Usability Testing
Prototyping

Don't feel like reading? Watch our video.

The challenge

In the past five years, consumer behaviour has been shifting to online grocery shopping rapidly; and COVID-19 has only accelerated this trend. Partnering with Major Tom, the industry-leading strategy-first digital agency, we set out to discover the pain points of the current process for consumer packaged good(CPG) brands to get in-store listings.

Solution

An advertising solution would help bridge the gap between grocery stores and brands to meet each other’s demand.

Seamless connection

Finding their existing working partners is as simple as at the press of a button.

Connect with existing partners

Retailers can easily find and connect with brands that retailers carry in-store by importing from their Shopify store.

Similarly, brands can use Smart Match to find stores that are carrying their products.

Discover potential partners

Both brands and retailers can discover potential partners on the Dangle network to create new business opportunities.

Seamless connection

Retailers and brands can easily connect with each other.
Finding their existing working partners is as simple as at the press of a button.
Discovering potential retail partners and emerging brands has never been easier.

Straightforward ad process

Retailers create ad units

Create ad units of various ad formats for their storefronts to show their ad space availability.

Brands build ad campaigns

Select retailers and choose desired ad formats to build ad submissions.

Straightforward ad process

Retailers can create ad units of various ad formats for their storefronts to show their ad space availability.
Brands can select retailers and choose desired ad formats to build ad submissions.

Easy premium product placement management

Dangle is a one-stop-shop for both retailers and brands to schedule and plan ads in the dashboard.
* Retailers have the control to verify banner ads before going live.
* Brands can track the ad status and see their ad performance statistics.

Easy premium product placement management

Dangle is a one-stop-shop for both retailers and brands to schedule and plan ads in the dashboard.

For retailers

Have the control to verify banner ads before going live.

For brands

Track the ad status and see their ad performance statistics.

Complete quest to earn rare DigiPix & DigiGIFs

Children can use these DigiPix and DigiGIFs to their collection and use them in their stories. This gamified reward system encourage children to explore and try out different aspects of the app.

Okay. so what's your approach?

We started by validating that premium product placement is an actual problem. Then we followed the double diamond process to explore the CPG space to pinpoint the needs of stores and brands before jumping into design and testing.

1

First, validate the problems & find potential markets.

Lorum Ipsum

Domain research

Validated the problem space and potential market

We conducted research on various consumer packaged goods ad platforms to understand how the players in the industry works. We also conducted literature research to find out the shopping behaviour shift during covid-19.

This diagram explains the relationship between various CPG industry players and where Dangle comes in to allow brands to create and automate ad campaigns and connect brands with potential stores.

53%
74%
75%
$656

Billion USD

of U.S. respondents have shopped online for groceries during COVID-19 according to a survey conducted by Oracle.

of those they will order at the same pace or even more than they currently are going forward from the same study by Oracle.

of consumers have tried new brands and products, and most intend to continue it beyond the crisis from a study by McKinsey & Company.

According to IBIS World, this is the market size of supermarkets & grocery stores in the US in 2020. And $95.6 billion USD in Canada.

53%

of U.S. respondents have shopped online for groceries during COVID-19 according to a survey conducted by Oracle.

74%

of those they will order at the same pace or even more than they currently are going forward from the same study by Oracle.

75%

of consumers have tried new brands and products, and most intend to continue it beyond the crisis from a study by McKinsey & Company.

$656

Bn USD

According to IBIS World, this is the market size of supermarkets & grocery stores in the US in 2020. And $95.6 billion USD in Canada.

Key Findings

  • Consumers are open to continuing to buy groceries online.
  • Consumers are interested in trying new brands and products recommended by stores.
  • Shopify & Woocommerce are popular e-commerce builders for independent grocery stores with nearly 80K of Food & Beverage storefronts.
  • Most local grocery stores have an online storefront with ordering and delivery services.

Although people might shop less online after the pandemic, they might still embrace the convenience of having their weekly shop dropped off at their door in the long run. Therefore, we think e-grocery is a viable market worth exploring.

Key Findings

1

Consumers are open to continuing to buy groceries online.

2

Consumers are interested in trying new brands and products recommended by stores.

3

Shopify & Woocommerce are popular e-commerce builders for independent grocery stores with nearly 80K of Food & Beverage storefronts.

4

Most local grocery stores have an online storefront with ordering and delivery services.

Although people might shop less online after the pandemic, they might still embrace the convenience of having their weekly shop dropped off at their door in the long run. Therefore, we think e-grocery is a viable market worth exploring.

2

Get familiar with the world of CPG advertising from the lens of a grocery retailer and a brand manager.

Lorum Ipsum

primary research

The team conducted a total of 4 in-depth user interviews, including the following:

  • An interview with a grocery store owner who has over 20 years of experience managing a large grocery store chain
  • 3 interviews with brand managers from different brands

Stores

Key Findings

1

It’s hard to manage an online store without marketing and technical teams. Stores want to have an easier, time-saving, and convenient way to manage their online store.

2

They hope to increase their online sales and discover new brands and products that have a high shelf turnover rate.

3

There are brands that are currently spending more to promote their products in-store instead of taking advantage of online premium product placement.

Brands

Key Findings

1

It’s difficult in finding potential stores that are interested in carrying their products offline or online.

2

They spend a lot of money on promoting their products to be listed in stores and maintain a good shelves position in stores or supermarkets.

3

They want to increase brand exposure online and partner with more grocery store chains and independent grocers.

secondary research

The team conducted a survey to explore the new online grocery shopping behaviour & trends.

Online grocery shopping during the Covid-19 pandemic:

  • 47% of respondents would continue doing online grocery shopping even after the pandemic is over.
  • 72% of the respondents have been doing online grocery shopping.

Respondents shop the most at: 

  • Grocery store chains online (64%)
  • Grocery shopping apps (29%, ie Instacart, Uber Eats)
  • Independent or small local grocery stores (18%)

Ads that captures attention: 

  • Coupon or discount ads (49%)
  • Featured product ads (41%)
  • Banner ad with large image (31%)

Competitive Analysis

Analyzing core functionalities and features from existing ad auction platforms

  • Instacart Ads & Walmart Ads are grocery services that provide advertising options for consumer packaged goods brands.
  • Amazon Ads, Facebook Ads, and Google Ads are Ad-Tech services that provide advertising solutions to all brands.

Key Findings

Key Findings

3

Find the right problem to solve.

Lorum Ipsum

persona

After interviewing early adopters from retailers and brands, we compile the key insights into user personas.

Let's meet Rick. He's a local grocery store owner in Vancouver.

Let's meet Andrew. He's a brand manager of an emerging brand in Canada.

Problem statements

Aha! Brands need digital ad space to promote their products while stores want to monetize on their digital 'real estate'.

We matched pain points from both brand and store to meet each other's needs.

As a local grocery store owner with an online store, I want to provide digital ad space for brands that I carry in my store, so that our store can monetize on the ad space.

As an emerging brand manager, I want to promote products through affordable online advertisement, so that our brand can reach more potential customers.

Key opportunities are coming to the surface

1

How might we connect retailers and brands that are already working with each other?

2

How might we provide a straightforward advertising process for retailers and brands?

3

How might we provide the ability to review and control ad quality for retailers?

Aha! Key opportunities are coming to the surface.

UX benchmarkching

How did we track the success of the solution?

We researched a set of design metrics to measure and evaluate the quality of the user experience.

Business Goals

UX Metics

Revenue

  • Increase Shopify app adoption for store users
  • Increase web-app adoption for brand users
  • Micro conversion rate of key actions (ie. sign up on website, connect with Shopify app, connect with brands or stores users, create ad unit or ad submission)
  • Average time spent on creating an ad unit flow for store users
  • Average time spent on creating an ad submission flow for brand users

Engagement

  • Increase 7-day active users
  • Increase goal conversion rate of key actions
    (ie. creating an ad unit and verifying banner images on the Shopify app and building ad campaigns on the brand dashboard)
  • Key feature adoption rate
  • Page Views
  • Average session frequency and length
  • Number of new connected stores or brand per week
  • Number of new ad campaigns per week

Retention

  • Increase average returning users
  • Decrease churn rate
  • Customer satisfaction rating (measure in survey)
  • Task success rate (measure in usability testing)

01 Discover

Find out how children engage with stories

4

Time to brainstorm for solutions.

Lorum Ipsum

ideation

Prior to designing, the team spent time studying and testing other ad-tech platforms, noting down any interesting features. I ran an ideation workshop called “the worst possible ideas” to think of creative solutions.

At this point, the team was brimming with creative ideas. However, we knew we couldn’t do everything that we wanted to do. Therefore, we narrowed down to 3 key concepts.

Based on the feedback from users and the client, we decided to move forward with idea 1 as our main concept and explore how other promising features can be integrated into the concept to support the system.

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging experience

1. How might we connect retailers and brands that are already working with each other?

Challenge 1

Decide on what should we build for the retailers

The team identified a few options, including a Shopify app, Woocomerce plugin, and web app.

After inspecting about 50 grocery store websites, we found that most small and local grocery stores use Shopify or Woocommerce to build their storefront. Most mid to large grocery store chains have a custom-built website.

  • Shopify ( 79K Food & Beverages storefronts worldwide)
  • Woocommerce (80K Food & Beverages storefronts worldwide)
  • Custom-built  (~45% of the inspected grocery store websites in Canada)

Since Major Tom has more experience with Shopify and has access to a Shopify store for testing, the team decided to build a Shopify app for stores and a web app for brands.

Challenge 2

Efficiently connect retailers and stores that are already working together

After a discussion with our clients, we decided to focus on facilitating the connection process for retailers and the brands they carry in-store. Through research and user interviews, we found out all products have a retail barcode or Universal Product Code(UPC) like an ID for a specific product.

For retailers

Retailers can simply enter a barcode or scan a barcode for their products. With the unique barcodes, retailers can easily find brands that they carry in-store and are currently on the Dangle platform.

For brands

Before finding their retailer partners, brands need to upload their products in a CSV file with product details and barcodes. Then can smart match with retailers that carry their products at a push of the button.

Challenge 3

Exploring potential retailer and brand partners

During the research, we found that both retailers and brands were interested in discovering new partners. The team took inspiration from LinkedIn and created profiles for retailers and brands to help both users make informed decisions before connecting.

By showing profiles and connecting, retailers and brands can look for prospect partners and establish new business opportunities.

For retailers

Retailers can simply enter a barcode or scan a barcode for their products. With UPC or barcode, retailers can easily find brands that they carry in-store and are currently on the Dangle platform.

For brands

Before finding their retailer partners, brands need to upload their products in a CSV file with product details and barcodes. Then can smart match with retailers that carry their products at a push of the button.

2. How might we provide a straightforward advertising process for retailers and brands?

Challenge 1

Retailers need to create ad unit to indicate ad space availability

To create a holistic advertising process, retailers need to create ad space opening before brands can select which store and ad format they want to work with.

For retailers

Retailers can create an ad unit by: 
• selecting the ad format (banner vs featured product ad)
• providing ad location (home page vs category page
• giving ad instructions

Challenge 2

Brands can select a store and ad format and build an ad campaign

Banner ads and featured product ads have a different ad submission process. A dynamic progress bar helps to create a tunnelling experience while showing users where they are during the process.

For brands

The general requirements for both banner and featured product ads are: 
• select a store, ad format, and ad location
• enter campaign details
• selecting the product
• review and submit campaign

Banner ad campaigns require the brand user to upload a banner ad image after they won the bid.

3. How might we provide the ability to review and control ad quality for retailers?

Research revealed that traditionally all promotional materials in grocery store chains are produced by their marketing team. To get promoted by grocery chains, brands must pay expensive marketing fees to the grocery store.

BUT....

Small and local grocers don’t have a marketing team to produce any promotional materials. Since most brands have a marketing and design department, they can provide art assets for banner ad image. Hence, stores can simply review and approve banner ad images uploaded by brands.

Challenge 1

Retailers need to provide banner image guidelines to brands

For retailers

By providing these guidelines, brands have a better idea of what aesthetic the retailers want. Hence, their banner ad submissions are more likely to get approved.

Challenge 2

Retailers have the control to review a banner image

For retailers

During the user interview, the team learned that it is important for the retailers to have the freedom to review banner images since it takes up a large real estate of their online storefront. If a banner image is approved, it will notify the brand and schedule the banner ad. If a banner image is declined, retailers can select keywords of declined reason and leave a quick comment for the re-submission.

For retailers

By providing these guidelines, brands have a better idea of what aesthetic the retailers want. Hence, their banner ad submissions are more likely to get approved.

For retailers

During the user interview, the team learned that it is important for the retailers to have the freedom to review banner images since it takes up a large real estate of their online storefront. If a banner image is approved, it will notify the brand and schedule the banner ad. If a banner image is declined, retailers can select keywords of declined reason and leave a quick comment for the re-submission.

5

So, what did the stores and brands think?

Since both store and brand users were not as accessible as we wish, the opportunities to conduct usability testing with real users are limited. The team had a test session with a grocery store owner and three test sessions with brand managers. To test the usability and user flow, we conducted multiple test sessions with our fellow graduate students.

Validation

Validating the design through user testing

We conducted user testing sessions with potential store and brand users as well as graduate students to collect insights on how users behave. Below is a summary of the findings:

Brand web task success rate  

Look for a store and connect with it

43%

Not clear for all users on where they should go to look for and connect with stores that are on Dangle.

Accept a store invitataion

85%

Find store invitation easy to locate and straightforward to accept an invitation.

AutoMatch (Smart Match) with stores

43%

AutoMatch is too hidden to find. The name 'AutoMatch' is confusing and not sure what to expect.

Create a banner & featured product ad

85%

Find the process to create a banner ad and featured product easy and straightforward.

Shopify task success rate  

Look for a brand and connect with it

60%

Not clear for all users on where they should go to look for and connect with brands that are on Dangle.

Import a list of brands that are on Dangle from Shopify

40%

Most users struggled to find the import button. The placement is not obvious to find.

Create ad units for banner & featured product ad

100%

Easy for users to locate the ad unit tab and follow ad unit building steps.

Verify a banner ad image

100%

Easy to select a specific banner image request to either approve the image or decline with reasons.

Actionable changes

Making the key features easy to find and improve workflow efficiency.

From the user testing insights, we found that the major problems lie within the information organization and the efficiently of key tasks. I shared a few examples below to demonstrate the change we implemented.

1. Navigation is confusing and hard to look for critical feature.

Navigation for brand dashboard

Problem

Users couldn't find what they need right away on the navigation, leading to poor discoverability for key features.

Solution

I devised to conduct a card sorting exercise with potential store and brand users to see how they group menu items together that makes sense to them.

Inspired by the result, I modified the labeling and menu item grouping to reduce confusion and make it more clear for the user. 

Navigation for Shopify App for Stores

Solution

To avoid confusion between the two navigation menu in iteration 2, we added space to separate the two navigation menus in iteration 3. In doing so, the secondary navigation is closer to the content below, leading to clear information hierarchy.

2. AutoMatch sounds confusing for brand users. This feature is too hidden to find.

1

Solution

In iteration 3, AutoMatch(Smart Match)was in the Store Networks tab and it wasn't obvious for users to find. Since AutoMatch is a critical feature for new users, I suggested creating an individual menu item (2) , so users can easily access it.

2

Solution

When users were asked what they expect AutoMatch to do, they have no idea what it implied. Therefore, I suggested the name "Smart Match". Both user testers and stakeholders think it's more clear and appropriate.

3. The gallery view of a list of ad campaigns is not efficient.

Solution

I suggested changing the gallery view (iteration 3) to a list view (iteration 4) so that it's more efficient and delivers more information. Users can also sort the list by campaign status and ad formats.

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of a storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging experience

2. Define

Find the missing gaps of the storytelling experience

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test the storytelling learning app

04

deliver

Prototype an engaging experience

1. Tell a story without writing any actual words

"A picture is worth a thousand words". We want to encourage children to tell creative stories using images and child-friendly GIFs. By telling stories through multimedia, learners can develop skills in critical thinking, writing, research, and boost creativity.

2. Gamify the learning experience to achieve latent learning

Children come across new vocabulary in their daily life. Often, they are highly unlikely to look up words that they don’t understand. So, we built a word-image visualization feature powered by the Optical Character Recognition technology to help them learn new words in their space by simply scanning using a smartphone.

3. Craft a collaborative learning experience for children

Children can depict a creative story through co-authoring with their peers. We are inspired by an improvisation technique “Yes, and…” that encourages acceptance of the contributions added by others and builds on the previous story. They can play with peers to create a story with the structure: beginning, middle, and end.

6

Introducing…

Dangle

An ad solution that connects brands with eCommerce stores to promote products.

01

Discover

Find out how children engage with stories

02

DEFINE

Find the missing gaps of storytelling experience

03

design

Ideate & test a storytelling learning app

04

deliver

Prototype an engaging experience

4. Deliver

Prototype an engaging experience
Lorum Ipsum

More on larger browser.

Thanks for stopping by. 🙌

You are reading on a small browser or on mobile browser. For the full case study, please visit it on a larger browser. 💻

7

The Impact

What impact does Dangle have on the world?

Dangle has the potential to expand beyond grocery stores to all types of e-commerce, and even facilitate and coordinate in-store premium product placement by revolutionizing how stores and brands currently work together.

It allows for better product and store discoverability, more efficient and specific matches, and optimal deals for both stores and brands.

And most importantly...

making the good products that consumers want more accessible and affordable.

So...

Our clients decided to continue to build out features from our design and will use our prototype for investment pitching.

Future development

If I have more time, what would I work on next?

From the user testing insights, we found that the major problems lie within the information organization and the efficiently of key tasks. I shared a few examples below to demonstrate the change we implemented.

Onboarding

Since both the Import from Shopify and Smart Match are new behaviour to users, people won't be able to rely on familiarity. Hence, baby steps with tooltips are crucial to guide people to explore Dangle with confidence and increase their chancing of sticking over time.

Analytics

Having an analytic page to show both users the statistical results of using our product shows the outcome and value in our service to persuade users to continue to use our product.

Wallet or income

Both brand and store users could set up their payment methods on this page. Brand users could check the history of ad transactions they made. Store users could check their ad income transactions.

Profile

Both platforms can set their profile information so that stores and brands can have a better idea of each other when they are looking for potential partners.

Closing thoughts & takeaways

What challenges did I encounter?

From the user testing insights, we found that the major problems lie within the information organization and the efficiently of key tasks. I shared a few examples below to demonstrate the change we implemented.

Defining “just enough” research

Coming into the vague problem space, we had to conduct lots of research to understand what problem we were trying to solve and finding the right problem to solve. It honestly felt like walking in a dark room without direction. It felt like there wasn’t any clear direction from the clients. Therefore, instead of waiting to get the definitive solution, it’s worth going ahead to ideate solutions and present user flows to the clients to show them whether the solution aligns with their expectations and refine it instead of stuck in the research phase. In the end, they were happy with the user flows.

Aligning design components and patterns

Since it’s there are a few designers in the team, we could work on designing the interface collaboratively. However, every designer has their design style. Therefore, it was a challenge to align all UI components. I suggested conducting a component audit when the designs were done to ensure all UI components were consistent. In hindsight, instead of building our design library for the web app from scratch, I would find a UI library with a design kit. In doing so, all design components would be the same across designers. It would also save time during design component audits and front-end implementation. 

Testimonials

What did clients & supervisor say about the project?

"We are very impressed. We worked with digital projects for over 20 years. To see what this team is able to do in such a short period of time was incredible. Think back at the conversation at the very start, I was going “oh my goodness, nobody on this team knows what an ad network is”, and now to see what you produced is just exceptional. You should be really really proud.I’m blown away."
— Lyn Bryan
CEO of Major Tom
"I felt there is a real cohesiveness and togetherness with this team. It felt like you had this ship steer in one direction and you are all going in that direction together. Sometimes you don’t see that in projects, especially when you are innovating. Your documentation is second to none, I’ve never seen documentation like what your team produced. It’s truly remarkable from a business and a start-up standpoint to get this far in such a short span of time and not have killed each other."
— Chris Breikess
Founding Partner of Major Tom
"We are very impressed. We worked with digital projects for over 20 years. To see what this team is able to do in such a short period of time was incredible. Think back at the conversation at the very start, I was going “oh my goodness, nobody on this team knows what an ad network is”, and now to see what you produced is just exceptional. You should be really really proud.I’m blown away."
— Lyn Bryan
CEO of Major Tom
"I felt there is a real cohesiveness and togetherness with this team. It felt like you had this ship steer in one direction and you are all going in that direction together. Sometimes you don’t see that in projects, especially when you are innovating. Your documentation is second to none, I’ve never seen documentation like what your team produced. It’s truly remarkable from a business and a start-up standpoint to get this far in such a short span of time and not have killed each other."
— Chris Breikess
Founding Partner of Major Tom
"Joyce is an outstanding UX designer, leader, user researcher and Scrum master. She is very detail oriented while also focusing on the larger priorities. An active listener with clear and concise verbal/written skills, Joyce continually learns through her experiences, projects, e-learning courses, and certifications. She is very well versed in the rapid, iterative development and testing feedback loop. What I especially like is that Joyce leads by example and is a pleasure to work with. I would not hesitate to have Joyce on my team and strongly recommend her."
— Dr.Dave Fracchia
Professor at the Centre for Digital Media

BEHIND THE SCENEs

Mapping out a user scenario

Thanks for reading ❤️

If you’d like to hear more about my experience or chat about design, feel free to shoot me an email. ☕

Next Project

Next Project
Digitales
Bradfield Narrative Inc
A gamified learning app for young learners to practice the structure of storytelling through creating stories with peers.
research
interaction design
visual design
branding
prototyping