.png)
.png)
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
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.
Product Designer &
Scrum Master
Product Designer
Product Designer
Project Manager &
Video Editor
Developer
Developer
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.
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.
.png)
.png)
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.
.png)
I 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.
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.
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.
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.
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.
The team conducted a total of 4 in-depth user interviews, including the following:
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.
They hope to increase their online sales and discover new brands and products that have a high shelf turnover rate.
There are brands that are currently spending more to promote their products in-store instead of taking advantage of online premium product placement.
It’s difficult in finding potential stores that are interested in carrying their products offline or online.
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.
They want to increase brand exposure online and partner with more grocery store chains and independent grocers.
The team conducted a survey to explore the new online grocery shopping behaviour & trends.
Online grocery shopping during the Covid-19 pandemic:
Respondents shop the most at:
Ads that captures attention:
After interviewing early adopters from retailers and brands, we compile the key insights into user personas.
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.
How might we connect retailers and brands that are already working with each other?
How might we provide a straightforward advertising process for retailers and brands?
How might we provide the ability to review and control ad quality for retailers?
We researched a set of design metrics to measure and evaluate the quality of the user experience.
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.
.png)
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.
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.
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.
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.
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.
.png)
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.
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.
.png)
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.
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
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.
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.
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.
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.
.png)
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.
.png)
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:
.png)
Not clear for all users on where they should go to look for and connect with stores that are on Dangle.
.png)
Find store invitation easy to locate and straightforward to accept an invitation.
AutoMatch is too hidden to find. The name 'AutoMatch' is confusing and not sure what to expect.
Find the process to create a banner ad and featured product easy and straightforward.
.png)
Not clear for all users on where they should go to look for and connect with brands that are on Dangle.
.png)
Most users struggled to find the import button. The placement is not obvious to find.
.png)
Easy for users to locate the ad unit tab and follow ad unit building steps.
Easy to select a specific banner image request to either approve the image or decline with reasons.
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.
.png)
Users couldn't find what they need right away on the navigation, leading to poor discoverability for key features.
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.
.png)
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.
.png)
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.
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.
.png)
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.
"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.
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.
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.
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. 💻
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.
making the good products that consumers want more accessible and affordable.
Our clients decided to continue to build out features from our design and will use our prototype for investment pitching.
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.
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.
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.
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.
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.
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.
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.
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.
"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."
"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."
"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."
"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."
"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."
.png)
.png)
