OVERVIEW
Background
DailyEats is an all-in-one meal solution service developed by Walmart.
With DailyEats, you can browse recipes, find grab-and-go meals, order from local restaurants, and shop for items you need to prepare for your meals.
In this project, I worked as the lead product designer on the Plan to Cart project, which aimed at streamlining the meal planning process and ultimately increasing the conversation rate.
Impact
⭐️ 10/10 users interviewed during usability tests prefers the new design.
⭐️ 9/10 users interviewed during usability tests were able to complete the tasks without the moderator's guidance.
⭐ This project has been identified as the top priority in the quarter for its potential business benefit.
PROBLEM
Users are unaware that product fulfillment is an option within this app, and even when they become aware, they still hesitate to proceed with the conversion.
In the Q4 roadmap planning, we discovered that the meal details page exhibited the highest drop-off rate, and the shopping list page followed as the second highest. What blocks users from taking the next steps?
Heuristic Evaluation
By doing an audit with my team, I identified a couple of possible issues:
-
Lack of flexibility in choosing items:
-
Users are not able to select the specific products they want.
-
Users can not see the price of each item before they enter the cart in the Walmart app.
-
-
Counter-intuitive flow of:
-
Moving meals from plan to cart.
-
Removing items in the cart before checking out.
-
-
Missing visibility of system statuses:
-
Users are taken to the plan screen without their own action or getting informed.
-
Users do not get a clear system reaction after adding items from plan to cart.
-
Learn from Users
With help from the marketing team, we collected some of our early adopter's feedback through interviews and surveys and found out these pain points:
-
Limited understanding of functionalities: "I didn't know that you can buy things from Walmart with this app."
-
No clear guidance for next steps: "How can I check if I did it successfully?"
-
...and some nice to have: "Can I pick multiple days?" "Is my order history synced from Walmart?"
Determine User Flow
GOAL
Spark users to uncover the app’s value proposition and encourage them to seamlessly engage with the holistic service.
💡 Define Design Principles
-
Flexibility: users should always be able to go back intuitively and edit what they’ve done.
-
System Visibility: users should see clear results on what they’ve triggered.
-
Consistency: the overall UX should match to Walmart app's experience as much as possible to reduce cognitive load and promote easy learnability.
📍 Define Success
-
Users should be able to perform the following tasks with less confusion than going through the current flow:
-
Path: add meal to plan → add to shop → check out
-
Path: add a meal to shop → check out
-
Path: review items → edit items → check out
-
-
Users report higher satisfaction with the new UX design
Leverage Business Goals
As a retail business, we want users to convert and perform transactions. How might we leverage user goals with business goals?
To emphasize a user-centric methodology, I brought up qualitative and quantitative analysis to the roadmap planning, and utilized it to inform product direction and align with cross functional teams.
EXPLORATIONS
Brainstorm Ideas
Leverage Technical Constraints
We can't solve all the problems at once. To ensure timely implementation that accommodate engineering resources, I introduced the concept of milestones, and collaborated with product and engineering partners to break it down into three phases. The goal was to define key improvements and prioritize development based on our OKRs.
Validate and Iterate from Usability Tests
To validate design iterations, I administered 10 moderated usability tests with Walmart+ users recruited from the Spark panel. Each participant interacted with prototypes representing the existing design and at least one new design concept. This process revealed additional UX pain points associated with the current design, enabling swift adjustments based on spontaneous user feedback.
SOLUTIONS
Increased Discoverability
The tier 0 problem to solve was to simplify the process of creating a shopping list. To address this, we introduced an express shop option, allowing users to quickly understand that they can make purchases directly from the app. This not only enhances users's awareness of the app's functionality but also provides them with a convenient way to explore it before fully committing to the comprehensive planning cycle.
Improved System Visibility and Better Guidance
A counting badge is introduced to indicate successful action of adding meals to the plan at the bottom tab bar.
A follow-up sheet is added to confirm the success addition of a meal.
Besides, we also added some nice to have features that would elevate users' willingness to use our service, such as personalized meal recommendations and multi-day calendar picker.
More Flexibility and System Consistency
Users now have the option to select their desired items and view the prices before adding them to the cart. While the Walmart app already supports this feature, it hasn't been integrated into DailyEats. Recognizing that this aligns with a prominent user request and is consistent with the UX of the Walmart app, the team has decided to prioritize implementing this change.
Elevate Design Excellence
While I focused on improving the major flow for this project, I also contributed in improving the overall design quality of the app. I partnered with two other designers to build up the framework of implementing UI improvements, including:
-
Borderless cards & pictures
-
Toast notification updates
-
Button placement updates
-
Font revamp
and more.
REFLECTIONS
Before I joined the team, the focus was on promoting the idea of planning for users, whether they preferred meticulous planning or spontaneous decision-making. This approach mandated planning before making a purchase, aiming for a behavior change. While I acknowledged the long-term goal, I believed we weren't ready to introduce this shift yet. Firstly, it restricted flexibility to accommodate diverse user needs, and secondly, our product hadn't reached the baseline to encourage such a behavioral change. At this stage, our priority is to attract the initial user base, enhance user engagement, and reconsider the exclusive emphasis on planning.
The biggest challenge of this project was data access. Given that our app is a standalone application, dependency on the Walmart native app has both positive and negative aspects. While it allows direct access to product information from the Walmart core team, it also poses certain challenges and limitations. Looking ahead, our strategy involves increasing collaboration with the core team and emphasizing consistency between the standalone app and the Walmart native app. Moving forward, our next big challenge would be prioritization. With so much potential and interest groups' function requests, our team should identify top priorities and figure out the most crucial aspects to focus on.