Cartful

An iOS grocery shopping list app that helps you never forget anything you need to buy.

Cartful is a shopping list app that helps people become smarter grocery shoppers, plan shopping ahead and shop in the most efficient way.

Most importantly, with Cartful, you’ll never need to worry about forgetting anything you need to buy.

My Role
User Research
UX Design
Branding
UI Design
Prototyping
Usability Test
Duration
100+ hours / 3 weeks
(Independent project)
Tools
Figma
Adobe Photoshop
Product Type
Productivity

Discover & Define

User research

With the need for a lightweight handy tool to make and use shopping lists, I decided to explore the problems people may have with shopping lists. I did 2 rounds of user interviews with 12 people who shop groceries regularly and create shopping lists as a habit:
• The 1st round - to locate the areas of opportunities
• The 2nd round - to dig into these areas to find people’s needs and pain points.

Research insights: efficiency & being reminded

Secondary research
The pandemic this year changed a lot of people's shopping habits for social distancing. Research shows that people’s grocery trips have decreased to an average of only one trip per week. In this case, people have to be strategic so that they can combine small errands to one day and buy in bulk. They also want to avoid spending extra time in store so they need to shop efficiently.

Potential User Interviews
Here are 3 major insights from my interviews that led me to the solution:

1. People want to create accurate shopping lists with the least amount of effort.

“It’s annoying to type out the entire word.”

2. Double-checking lists before shopping and checking out doesn't avoid forgetting things to buy.

“Right after coming back from the store I remembered something I needed to buy.”

3. Inconveniences of using shopping lists can cause extra shopping time or forgetting items.

“I forgot to bring a pen so I couldn’t cross out items on my list. It’s really hard to check what I was missing.”

Meet Kaela: the strategic grocery shopper

I consolidated my research findings to a user persona that would help me to define the target audience of this app. It was a summary of the user and a reference to remind myself who I was designing for throughout the design process. With this persona, I was able to define the real problem I was going to solve.

The challenge

How might we ensure users never forget anything they need to buy?

With all the research findings, I wrote this problem statement to summarize all the needs and pain points people had. This statement is a good start of ideation, and distinguishes my app from its competitors.

To come up with solutions. I started brainstorming freely without any constraints and tried to incorporate interactions with other smart devices. I downloaded competitor apps and did a competitive analysis to see how I could borrow their strengths and avoid their weakness.

At the end of the ideation, I decided to create an app that supports fast and easy input, gives personalized recommendations and reminders, and provides navigation while shopping. I created a storyboard to further explore how users would interact with this app in a real-life setting.

The storyboard was too general and vague to be the starting point of creating a detailed user flow, so I brainstormed and listed all the features of the app that could be involved in the story I created. I checked these features against my competitive analysis to avoid any weaknesses, and apply any possible strengths. Then I categorized the features into 4 main groups:

The user flow started appearing when I had the storyboard and the features. I decided to make 2 user flows showing where the features would be applied and how they were used to make the best guide for creating wireframes.

Design & Testing

Set up the blueprint

With the user flows I was able to create the low-fidelity prototype of the app. I mainly focused on the functionality and usability of the flows and features. I also made sure to follow some common design patterns that my competitors use. To validate the solutions and find any issues I tested it with 6 users. Setting up the context was highly moderated to get users into the scenarios and push the plot forward.Here is the positive feedback I got throughout the testing:

Refine the features

Based on observations and the feedback from the testing, I updated the prototype, then created the high-fidelity prototype. I tried different layouts and effects to show each screen and made sure it meets the usability when I designed the UI.

I tested the high-fidelity prototype with 7 users. I let users test the app on their phones and used mostly one hand to do tasks, just to imitate the real context in grocery shopping. Most tasks were completed fine, but some of the last iterations didn’t do much to help reduce confusion. I discussed with users on possible ways to help them better understand the interfaces and made new changes. Here are the major iterations after 2 rounds of testing:

Iteration 1: Unique feature should be made in the patterns that users are familiar with

As one of the main features, BestRoute can plan the shortest route with everything you need to buy based on the layout of the store. The user only needs to follow the planned route and put things in the cart. The feature was not commonly used in competitors’ apps so I didn’t get many references, but I learned a lot from users’ feedback that I could still check on apps that have similar features, for example, Google Maps.

Iteration 2: Clear feedback from the app is important

The first round of usability tests did not show any problems around new items added by collaborators, so when some users from the second round did not understand the situation, I considered them exceptions. However, when I watched the recordings of the tests I realized adding more feedback from the app would make the interactions more self-explained to all users.

The best way to get your cart full

Lightweight app, start right away

Many people told me that they found it hard to be consistent with a shopping list on the phone even though they wanted to switch from paper lists to an app. One reason was that there were so many functionalities in the app that got them overwhelmed. Therefore the app is only focusing on creating and using grocery lists to keep the simplicity. The items you add will be categorized automatically and the category sequence can be reordered based on the store layout. To cross out an item on the list, simply click on the circle.

Add input effortlessly

From the research I learned that people want to create accurate shopping lists with the least amount of effort. Cartful offers a bunch of ways for users to add quick input to shopping lists, like autofill and scan a barcode to add an item. You can also scan a published recipe from anywhere to add ingredients all at once, so you don’t need to copy them one by one to your list.

Never forget a thing

During the interviews I found that it was hard for people to remember items that run out slowly, like cooking oil or sugar. The app will renew the shopping list as a draft based on your shopping history and ask for your review at a scheduled time. You buy cooking oil every 3 months, the app will add it to the list every 3 months. With Cartful you don’t need to make excel sheets and keep track of your inventory, the app will track it for you. On the other hand, just in case the user may forget anything on the list while shopping, the app will send notifications to remind the shopper of any uncrossed items so that the list can be double-checked.

Collaboration makes it easy

Good collaboration can make preparation and shopping super efficient. Users can send the lists to family and friends so that they can directly add items to the list instead of letting one person type everything down. When people split up to shop at the store, they can cross out items on the same list and it will sync immediately.

Follow the lead if you are lost

Never remember the layout of the store? The BestRoute feature on the app will plan the shortest route for you to get everything you need based on the store layout. Follow the path and you won’t get distracted by things you don’t need.

Looking further

Next Steps

Because of the scope and time limit, some nice-to-have features were not involved in the user flows, as well as some good ideas from users. These ideas will be considered as the next steps:
• Mobile home screen widget (make input, cross out items)
• Cartful app on iWatch
• Reminders based on Geolocation
• Make a welcoming and informative onboarding experience
• Show a wrap up (statistics) of what you bought every month.

Reflections

The most challenging part of this project was to iterate on the In-store Navigation feature. I thought the feature was innovative based on user reactions but it took me rounds of testing to realize that I didn’t have to use “innovative” design patterns that cause confusion. I learned that as a designer I have to set my ego aside and create an experience that caters to the user's needs. Experiences I was satisfied with could turn to confusion when users were testing them, and the problems could not be solved when users’ feelings were ignored. 

If I am doing this project again, I would test the prototype in a grocery store while shopping to better imitate the context of using the app. I’ll also evaluate the feasibility and effort of creating some features by getting feedback from developers.

Next case study
Forest Dream Studio