Dathic Store Locator
Role - UX Researcher and Design Lead

Duration - 3 weeks
Tools - Figma, Notion, Canva
‍
Team Size - 4 members
BackgroundDefineEvaluationResearch
ProblemDesign ProcessHi-Fi PrototypeReflection
The client
Dathic is a New York based data insights and analytics company that provides actionable suggestions and AI driven recommendations to support small to medium consumer packaged goods (CPG) companies. They have a strong focus on Hispanic communities and aim to help CPG companies better market their products to consumers with specific needs. With a mission to help companies enter, expand, and market products to various communities in the US, they have developed a core set of tools to achieve this goal.
Understanding the project scope
Enter the Store Locator
To support clients (CPG companies), one of Dathic's primary tool is the Store Locator. The Store Locator falls under Dathic's data strategy of offering granular insights for their clients. In a nutshell, the tool allows CPG companies to upload and edit products, personalize information, and manage stores that show the location of where products are being sold.

Clients can embed Dathic's Store Locator into their own e-commerce website as a consumer-facing tool, to allow potential customers to easily locate nearby stores that sell the products they are interested in purchasing.
The Store Locator can be personalized to the style of a client that sells vegan dairy products
Defining the challenge
While the current version of the Store Locator worked,
Dathic expressed frustration regarding both the user experience and interface of their tool. They approached my team with three main goals:
Redesign the user interface to have a clean and modern style, which clients can further customize based on their needs and aesthetic
Allow companies to update and manage data within the settings interface in an easy to understand and intuitive method
Design a self-service onboarding interface for prospective clients to install the tool on their website, without the assistance of a specialist
The final product would showcase features for both
Client-Facing Side
CPG companies would use this tool to set up and customize the Store Locator based on their needs, such as adding or editing product, stores or personalizing the look and feel of the interface.
Consumer-Facing Side
Interface for what a prospective customer would see on an client's e-commerce website when searching for products to purchase in nearby stores.
Client-Facing Side
Consumer-Facing Side
Debriefing the information
By meeting with the Dathic team,
the team and I wanted to better understand how the Store Locator tool supported the company's business strategy. We learned that the Store Locator was an integral product offered as a service to clients, where they receive valuable customer insights including product sales rate, numbers, inventory, and store popularity. The clients can then use this data to leverage improvement in their marketing and supply chain strategies.

In essence, the Store Locator is a powerful tool for consumers to find what they want - easily and efficiently.
Conducting market research
We wanted to understand the competitors
and researched the list of companies that Dathic provided. These included Storemapper, Destini, Stockist, and StoreLocatorWidgets. Because many of these companies are subscription-based and only offer a limited free demo, it was difficult to determine all of the features they offered.

Nevertheless, with a little bit of digging, we were able to find that almost all direct competitors had responsive design, some sort of product and store management, customizability (font, color, icons), and technical customer support.
Evaluating the current state
We took a close look at the Store Locator tool
in order to determine what worked and or what needed to be improved. Because the scope of this project is a redesign, the team and I conducted a heuristic evaluation to better understand any issues the tool has in its current state. We referenced Nielsen Norman's Group list of "Usability Heuristics for User Interface Design".

After being granted a temporary administrative account, we were able to find the following violations:
Further insights
We interviewed Francisco,
who walked us through his frustration using the client-facing side of the tool. As the Marketing Manager, his main responsibility involves onboarding and setting up clients. He expressed concerns that the current user flow is not intuitive and requires the help of an specialist. Additionally, he stated that most clients ignore the features that are not clear - such as a "favicon" or "hot box".

He hoped that the copy could be improved so clients would be less confused, understanding exactly what features or settings they update.
Research summary
After understanding the value of the Store Locator tool, the team conducted additional research to help empathize client and consumer problem statements - and how we can solve for them
Secondary research
The client-facing problem
Dathic's CEO, Laura, presented us with the opportunity to join a meeting with a prospective client - Spero Foods. The Los Angeles based company specializes in plant-based dairy alternative products. Their current e-commerce website is built on Shopify, and the CEO (Kimi) expressed discouragement with her familiarity of the internal store locator. She claimed that Shopify's customer support line was slow and not helpful in her experiences.
Empathy Map
After articulating Spero Food's pain points of using Shopify's store locator tool, my team synthesized feedback and insight from the meeting to create an empathy map.

The map helped to visualize and understand the behavior, attitude, frustrations, and motivations of a real prospective client.
Client Persona
With this information, we were able to use the insights and create a persona - Paloma Fernandez, a Marketing Manager at a CPG company. We pulled the quotes directly from our client meeting, and matched her needs, goals, frustration and motivations to that of a typical user interested in Dathic's tool.
Tertiary research
The consumer-facing problem
For our consumer-side user interviews, we created questions surrounding the purchasing habits of online shoppers. These questions, including topics such as how often do you shop online, what brands are you loyal to, have you ever used a locator feature to find something you wanted, allowed us to receive insight regarding shopping behavior and habits.
User Interviews
We conducted a total of 5 user interviews and found that
Consumers preferred to start shopping online because it is a convenient, reliable and overall fun experience
In general, the biggest reason that someone chooses to shop in person is because they are interested in evaluating the product's quality before committing to a purchase
Consumer Persona
Similar to the client persona, the team pulled insights from the user interviews and created a persona - Eric Gomez.

Eric is a young adult working in a metropolitan area, and tends to research information ranging from specific niche products, to knowing what he prior to going to a grocery store.
Client
Problem Statement
Sales and marketing managers at CPG enterprises need to clearly communicate to consumers where their products are sold so that they can expand the reach of their products across diverse communities in the U.S.
Solution Statement
The Store Locator is a tool embedded in a CPG company’s website that shows which retailers carry their products. With the Store Locator, sales and marketing managers can create, update, and delete:

• Products for sale
• Brick-and-mortar stores that sell these products
• E-commerce businesses that sell these products
• Product and store reviews

The Store Locator will also provide the CPG enterprise’s sales and marketing teams with real-time analytics to guide their business strategy.
Consumer
Problem Statement
Everyday consumers need to know where their favorite food and beverage products are sold so they can satisfy their food cravings and feel connected to their home country through culinary experiences.
Solution Statement
The consumer-facing Store Locator provides timely and relevant information to consumers about where their favorite products are sold and how they can buy these products regardless of one’s location.

Through the Store Locator, consumers can identify the nearest store that sells the product that they seek, quickly find a store’s hours, read through store and product reviews, and get navigation directions to the store so that they can get their desired items ASAP.
To clients
How Might We
Leverage technology to increase product sales?
Lessen the burden for sales and marketing managers?
Use the company site to reach a wider consumer population?
For consumers
How Might We
Make it easy for consumers to find the products they need?
Determine what information is most valuable to consumers?
Design an experience for consumers of all backgrounds?
Design process
Beginning with a moodboard,
I was able to visualize examples of Dathic's brand guideline, including their logo, color palette, and typeface which we would match in our design. Additionally, we referenced some clean and modern dashboard to serve as inspiration for our product's user interface.
Wireframing
Using the existing tool as a structure,

I began the prototype at mid-fidelity. Since the general layout and core feature had already been built by Dathic's engineering team, we made sure to prioritize Dathic's request of designing a user interface that was clean and modern. This included making sure the alignment, spacing, and size of elements (icons, logos, buttons, text) were all clear.
From the mid-fidelity frames,
I began to add details to get an accurate vision of the visual hierarchy through the text and image elements. After creating each frame, I wired them together to conduct usability testing.
Implementing feedback
Iterations from mid-fidelity testing
After testing the clickable prototype with four users, I implented a few changes based on feedback.
Design system
Color palette and typeface
Dathic's main colors and font choice of navy blue, light blue and Poppins was already established in their brand guidelines. We built onto their visual language by adding secondary colors for button backgrounds and call to action feedback.

Additionally, we added Inter to perfectly compliment Poppins as the main font for the consumer-facing side of the Store Locator.
Component library
Our component library served as the home for the icons, search bar, buttons, headers, checkbox, and toggle that we created. These followed Dathic's style guide but taking it one step higher with a cleaner and fresh design.
View Component Library
Beginning the
Hi-Fidelity Prototype
The first iteration of our hi-fidelity prototype included color and visual elements to help breath life from our initial design wireframes. Additionally, we completed Dathic's request of a self-service onboarding interface for new clients.

After testing the version with users, I implemented the final changes to create the final prototype.
Final Hi-Fidelity Prototypes
Client-Facing Tool: Self-service onboarding
Click to open prototype in Figma
Consumer-Facing Tool: Desktop
Click to open prototype in Figma
Consumer-Facing Tool: Mobile
Click to open prototype in Figma
Reflection and takeaways
Don't overstress
Working with a client and 4 team members over a 3 week timeline proved to be stressful at times. While we were ultimately able to communicate thoughts, ideas and issues effectively, there were still moments where misunderstanding led to frustration and impacted our workflow. Keeping a calm mindset and knowing that everyone's' input is valuable helped us move toward the end goal.
Build, review, implement and repeat
Building upon an existing design system is a valuable skill. In a sense, the system is a living and breathing tool that's never complete. Adding components or colors, talking with the client and assessing the changes were all important steps that resulted in our desired outcome.
Organization is key
Keeping track of all our files - drafts, notes, and recordings, was very important in our design sprint. Utilizing Google Drive and neatly organizing all respective files into folders allowed our team to stay on track and be as productive as possible.
© 2024 Spencer Lin, fueled by Oolong Milk Tea🧋