Youdle
A mobile dashboard for grocers on the go
Role: UX/UI Designer, team lead
Timeline: 09/09/24 - 10/11/2024
Background
During times of crisis or celebration, people want to know where they can find the items that they need. Youdle has been there to help shoppers keep track of what’s in stock at their local grocery stores by providing a platform to search for goods and share updates. After focusing on the issue from shoppers’ perspectives for several years, they wanted to create a platform for the business side as well. They had a noble goal to “democratize grocery shopping for the small grocer”.
As a UX/UI designer, I assisted Youdle in this endeavor by creating a mobile dashboard that would meet the client’s 3 goals for grocers:
Manage their inventory
Analyze market trends
Engage with customers
As the team lead, I was the liaison between my team of designers and Youdle, overseeing meetings and the handoff of deliverables.
Thematic Analysis
The client had a lot of ideas for their dashboard, but given a 1-month timeline, I decided a thematic analysis would provide a sense of what was most important to the users. The client provided us with prior research about what their target audience is looking for in a dashboard. Using this raw data, I categorized these key needs into themes that I could use to prioritize big decisions later on.
Thematic analysis of Youdle grocer profiles
Competitive Analysis
To understand the tools small business owners currently use, I looked into one competitor that the client mentioned frequently - Google Merchant Center. Their dashboard allowed users to upload and track store inventory, market to consumers via Google’s various services, and learn about their company’s trends with Google’s analytic tools. These features line up directly with Youdle’s stated goals.
Strengths:
The overall layout is intuitive. Buttons and actions are where I would expect them to be.
The use of prescriptive colors and graphics aid in my understanding of the product.
Onboarding is quick and additional setup is laid out in simple-to-follow steps.
Suggests steps to improve my business.
Weaknesses:
Adding products can either be tedious if done manually or require advanced technical knowledge.
A lack of visual hierarchy cues such as font weight and shading lead to increased cognitive load to figure out what’s on each screen.
Cannot personalize the dashboard.
Sitemap
From what I’d gathered thus far between meetings with Youdle and the competitive analysis, I had a good idea of the primary sections Youdle’s dashboard would need to meet grocers’ needs. I then created a sitemap to reflect the 5 main sections my team would need to design.
Click to enlarge Sitemap
Dashboard: The homepage that provides users with a quick overview of the most useful information
Account: Review and edit your contact information and information about your stores
Inventory: See all of your available inventory and details about each item such as what is in stock, expiring, trending, etc
Analytics: General overview of data such as daily store visits, transactions, and revenue from sales over time. Subcategories of analytics specific to products and customers
Communication: Where users go to see messages/reviews from customers and respond to customers, as well as to release in stock updates and promotions
Upon reviewing the sitemap with the client, they had concerns about the Communication section. Busy business owners would not have time to respond to every message, so they would rather focus on the advertising feature which would integrate seamlessly with Youdle’s current consumer-facing product. I then reimagined the Communications section as a Marketing section.
Marketing: Where users go to manage their current running advertisements, determine which ads are successful, and plot new ads.
User Flow
When thinking of the flows I most wanted to design, I considered:
How can we include the 3 most important goals of the Youdle dashboard as stated by our client?
What flows will allow us to flesh out the most important pages in the dashboard?
Inventory User Flow
Flow 1: Onboarding will help us ensure that we ask all the necessary questions for a user to have a functional dashboard upon landing. It will also allow us to test the process for integrating external services during account setup
Flow 2: Inventory will demonstrate the layout of inventory and answer the question: what are customers buying?
Flow 3: Analytics will give us a change to test which data visualization techniques are most effective for users. It will also answer the questions: What are customers searching for that we don’t have? Where are our customers coming from?
Wireframes
Envisioning the screens for our 3 flows, I focused on the inventory page. In the inventory, users would need to see all of their available products, find out additional information about those products, and add new products.
On the first level of the inventory page, users can scroll through a chart of every item they sell, organized by important information such as the product ID and the current quantity. The categories are general rather than grocery specific so that this page can scale to include other business types. Since stores can easily have thousands of products, users can also easily search, sort, and filter.
Per the client’s vision, I included an option for users to upload their product information by integrating their dashboard with their Square POS account.
Users will see products in more detail on the product information page.
Usability Testing
My team and I ran 2 rounds of virtual usability testing - 1 round with our wireframes and a 2nd round with our first iteration of high fidelity designs. As it would be time-consuming to search for grocers specifically to test, I broadened my audience to small business owners since they would have some interests and needs in common.
Table of usability test issues ranked by most to least critical
Many of the issues participants faced were due to either confusing language or a lack of explanation before taking certain actions. Other concerns were in regards to processes that were inefficient or unnecessary given the actual needs of a grocer.
Final Designs
In my final iteration, I addressed the main concerns voiced about the Inventory section.
What does ID mean? Since users were confused about what types of product codes were encapsulated by the ID label, I clarified when editing or adding products that an ID refers to the UPC, SKU, PLU, and other common product identifiers.
Adding images is tedious. A small store can easily have thousands of products, so manually uploading each image takes too long. I added the option to select from an image database based on a product’s name or ID.
Emphasize advertising. The client wanted posting ads to be a more prominent feature of the platform. This would be mutually beneficial for the grocers who need to get rid of product, shoppers searching for a deal, and the client themselves driving engagement with their users. I added an Advertise CTA on the dashboard overview and at the bottom of each product page. Although we did not have the time for a full Marketing flow, I also created a Marketing page as a quick view of the most important insights a grocer would need.
Try the clickable prototype:
Outcomes
Throughout this project, the Youdle co-owners were passionate about their vision and goals, making it easy to match their excitement. Narrowing in on what was most important to achieve within the timeline was a balancing act of active listening and prioritizing users’ needs. Though I had to shift directions during the process, it taught me that early on I need to pay closer attention to what the client tells me vs what they spend time discussing to understand where their priorities lay.
With these designs of the Youdle dashboard’s minimum viable product, grocers will have a one-stop shop for all the insights they need to know about their store.