Freshly Chopped
Summary
From recipe to grocery, all-in-one place. That was our team’s goal for the next six weeks after receiving a request from Salma, CEO of Freshly Chopped. With our minds together, we researched and brainstormed to find the best way to implement the new ingredient delivery function to the current recipe app.
Timeframe
6 weeks
Role
Research, Wireframing, UI/UX Design
Chapter 1
Research
The Problem
Cooking at home by following recipes gives you more control on the ingredients and nutrition. It also saves money and time spent deciding what to cook. But before that, we need ingredients from grocery shopping. And as we all know, it is time-consuming.
This is where the Freshly Chopped app lacks and Salma noticed it. Which is why she proposed adding an ingredients delivery function to increase return users. Providing inspiration is a first step, but it’s time to take the business to the next level.
Business Needs
Salma wanted to update the app with these changes while following the brand guidelines:
- Ingredients delivery service as main call-to-action
- Ability to search for ingredients
- Generating a grocery list to respect users who prefer doing their own groceries
She also encouraged not modifying too much the app’s design.
How do businesses handle grocery delivery?
Competitive Analysis
Food delivery, especially groceries, is not as simple as it sounds. We can’t choose the freshness of ingredients. Which is why we focused on competitors that offer grocery delivery. (They were also the biggest competitors according to Salma.)
Strengths
They offer a smooth and straightforward navigation and are neatly organized by categories.
Weaknesses
They struggle to provide an easy-to-use grocery list function. Instacart only allows users to add or edit items from the list itself. Doordash simply doesn’t have this function.
Opportunities
Freshly Chopped can increase its user growth and return users by providing both recipe suggestions and grocery list.
Insights
Respect Grocery Shoppers
Some people prefer choosing their own watermelon (and some are experts!) by tapping and looking for that resonant sound, for example.
Fresh & Secure
Nowadays, it’s a given being able to track an order and offer an easy flow to report a problem on an item to avoid disappointed users.
Don’t Reinvent the Wheel
With a lot of delivery apps, people are already familiar with the typical ordering process.
Chapter 2
Define
Target Audience
Salma provided 2 personas. Let me introduce you to Krishna, a curious international student, and Emma, a founder health-conscious mom.
To help us build the updated app with better user experience, we created a new persona that has high standards, filling what the other two lacked. Meet Marco, the efficient epicure. (No, this is not the same 3-minute Marco. Read his story here)
Getting to know Krishna, Emma and Marco made us understand their lives and what was important to them. This leads us to ask:
How might we...
add the delivery option to the app so that the app’s design remains the same?
provide reassurance for users so that they feel confident their orders are secure and fresh?
create a quick and easy process to offer replacements when an ingredient is unavailable?
Chapter 3
Ideate & Sketch
Because users care about the freshness of the ingredients and the security of their order, we wanted to make the ordering process as seamless as possible. Part of that means being transparent about product availability. Will users order low in stock items? Can users track their order real-time and ensure that they’re at home when it arrives?
User flow for ordering process
Low-Fidelity Wireframes
We then put the words into wireframes. This is where I found collaborating with others helps since there were some ideas I haven’t thought of or I forgot to include. Here are some of the core features:
Toggle to Grocery Store
Users can switch between browsing recipes and groceries from the home page.
Grocery & Wish Lists
Users can find their grocery and wish lists in the bookmarks page.
Low in Stock Alert
Users will be alerted when an item is low in stock, offering replacements related to the item.
Real-Time Map Tracking
Users can track their order via a map that shows the distance between the delivery truck and their address.
Chapter 4
Usability Testing
We prototyped our low-fidelity wireframes to use for testing so that participants can focus more on the function and not get distracted by the design.
Our main goal was to see how easy and smooth is ordering ingredients from a recipe and the grocery page. We also paid attention to their reaction to the grocery and wish lists.
User Feedback
Overall, users were able to complete the tasks. But they struggled to find the grocery page and were confused on the lists. Apart from that, we received a lot of positive feedback, especially on the navigation.
“Very clean, straightforward and easy-to-navigate.”
“I really like the Low in stock pop-up!”
“What’s the difference between Wish list and Lists?”
“Grocery icon is not clear.”
Iterations & Refinement
Replacing the grocery icon
Noticing that users were lost when trying to find the grocery page, we replaced the icon with a common fruit to make it more obvious.
Revising the lists
To make the lists more intuitive, we merged Wish List and Lists together and replaced the “shopping online using the app” or “on your own” experience with a toggle.
Adding the option to cancel an order
To give users a way to go back, with the business perspective in mind, we added the option to cancel the order with a timer in the order confirmation page.
Repositioning the Quantity selector and Add to Cart button
We noticed that users were confused between the cart icon and the Add to Cart button, so we integrated them into the product page and put the navigation back.
Chapter 5
The Result
After refining and updating our wireframes, we turned them into high-fidelity and presented to our client’s representative, Bruno (aka our teacher).
We received positive reactions! But here are some comments we got:
“I like the option to cancel an order, although it could give pressure to users with the timer.”
“I’m concerned with the Low in Stock alert. What value does it bring to the users?”
To answer his question, the Low in Stock alert is a way to bring transparency for the business, but we agree on his comment and think it can be further developed and improved.
The End?
Actually, no. I wanted to improve this project, especially that last comment. So, I embarked on another small journey.
Refinement
Redefining Low in Stock Alert
Because our current Low in Stock alert can possibly lead to user frustration, I decided to push the transparency even further.
I added a part that displays the number of stocks remaining so that users can make a quicker decision whether to add the item to their cart or not. The Low in Stock alert will only appear when the quantity selected exceeds the inventory.
Final Prototype
Note: To respect users who simply want to use Freshly Chopped as a recipe app, the cart button remains hidden until users enter the grocery screens or add an item to their cart. This ensures that users can browse recipes without distraction, while keeping the delivery feature as the main call-to-action only when there is intent to purchase.
Active across all screens
Active only on grocery screens
Active once items are added to cart
Takeaways
This was an interesting project where I was able to experience working with an existing brand and assets library. And learning the perks of collaborating as a team. While there are always things to improve (nothing is perfect), I think what we did is a stable first step for Freshly Chopped to venture into the grocery delivery market. The app includes the minimum tasks required to order ingredients.
Nice-to-Haves
These are features we would’ve added, but due to time constraints, we focused on the client’s needs.
Food Restrictions
Adding a food preferences/restrictions form that users fill out to create a more personalized experience, automatically suggesting recipes or ingredients that fit users’ needs.
Tooltips
Having tooltips only triggering the first time to call out the new feature of ordering ingredients to increase discoverability.
Cooking Time
Adding cooking time as part of the filters for time-constrained users who want to prepare a quick meal.