Yuxing Wu
Tile image template img.png

SmartCart

Tile image template img.png
 

SmartCart

A solution aimed at improving the efficiency of shopping by making small upgrades to the hardware of grocery carts and utilizing the tools that we keep in our pockets everyday, smartphones.

 
 

 
 

Overview

While technology has come a long way in the last century, the process of in-store grocery shopping has remained somewhat stagnant. Grocery shopping is often a tedious chore that ends up taking longer than expected. Shoppers spend large amounts of time wandering around the store in search of the products on their sticky note, only to resort to asking for help from an associate after no success. Once the items are acquired, they still have to wade through checkout lines before leaving the store.

The SmartCart solution allows for quick, frictionless shopping experiences that values the shopper’s time and budget. Syncing the mobile app with the physical smart shopping cart, SmartCart provide features such as running total, instantaneous checkout, item locator, and smart shopping lists that include real time updates and item lookup to make that happen.  


 
 

Product & Skills

  • Rapid Prototyping
  • Mobile Application Design
  • Usability Testing
  • User Research

My Role

  • In a group of 7 students, I was a UX designer. I focused on user research, testing, wireframes and final mockups. I was also in charge of including user feedback in design through a rapid process.

Time Frame

  • March 2018 – May 2018
  • The final product was designed using an agile methodology in a hands-on rapid prototyping class.
 

 
 

The Challenge

To improve the grocery shopping experience and cater to diverse shoppers’ individual needs by helping shoppers complete their trip faster and make the overall process less stressful.

 

User research

To start, we created personas of users that shop at grocery stores and who would potentially use this product. These personas were created from online research and our understanding of the type of people who shop at these stores.

persona.png

We narrowed down the characteristics and attributes to these five personas: college student, family, couple, single adult, and elderly person. We believe that these are the most common type of people who shop at grocery stores and thus designed our solution to meeting their needs.

college student pic.png
  • Not spend over the allotted amount for groceries, stay on budget
  • Quickly grab the groceries I need

  • Find low cost alternatives to my typical groceries, stay within budget
  • Easily stick to and buy nutritious foods
  • Have a list that all of family members can add to
  • Be able to get in and get out in the least amount of time necessary
family pic.png

single adult pic.png
  • Purchase items based on recipes
  • Quick checkout process

  • Quickly purchase the items on the grocery list
  • Find low cost alternatives
couple pic.png

elderly pic.png
  • Purchase groceries habitually with ease
  • Pick up my prescriptions
 

Market Research

Along with understanding our target audience, we wanted to explore untraditional shopping experiences that are currently being implemented. Our exploration lead us to Amazon Go, where we learned more about the cashier-free checkout process and how individuals felt about the shift from the traditional shopping experience.

amazongo1.jpg
 

Let's jump into the design process.

In sprints consisting of two weeks, we followed IDEO’s Design Thinking process to ensure the actions we took were human-centered and validated through feedback and research.

 

Sprint 1 – Paper Wireframe

We started off ideating about both the physical SmartCart and the SmartCart App. We defined what the SmartCart would look like, first imagining it as a normal grocery cart with added features of a scale along the basket’s bottom and a tablet equipped with a scanner attached to the handle. We researched current models of shopping carts and tablets to see what would bring the best experience for the shoppers while keeping in mind the technical feasibility of our product. We then moved on to what the shopper experience would be when interacting with the SmartCart App.

Image uploaded from iOS (5).jpg
The first iteration of our physical cart prototype. Here, we have the tablet secured to the cart handle bars

The first iteration of our physical cart prototype. Here, we have the tablet secured to the cart handle bars

Based on the research we had conducted, the results of an initial interest survey, and the definition of our target audiences’ values, we made low-fidelity paper wireframes of the SmartCart app that ensured we had a product that was viable and met the needs of our user personas. We came up with a solution which included a mobile app and a tablet on the SmartCart.

The mobile app would allow users to sign up for an account, save their billing information, and create grocery lists. From a QR code located within the mobile app, the user would connect with the tablet attached to the cart. The core features of the SmartCart tablet were an in-store product locator, running cart total, synchronization between app and tablet grocery lists, and an instantaneous checkout.

The main screen of the tablet on the SmartCart where users see the items in their cart (left) and their shopping list (right).

The main screen of the tablet on the SmartCart where users see the items in their cart (left) and their shopping list (right).

A map view of the grocery store, with icons indicating the location of items in the shopping list

A map view of the grocery store, with icons indicating the location of items in the shopping list

 

User testing 1.0

Through interviews with users from the 5 persona groups, we were able to get validation on the core concepts and features of SmartCart, and the feedback was semi-positive. Along with comments on specific features of the SmartCart phone and tablet app, there was also feedback on the overall flow of the application based on the tasks we had them complete within the testing procedure. We found that this is where our testers struggled the most with our prototype. While they enjoyed the idea of the SmartCart and its features, the development of these features needed work.

 
interview_heuristic tests.JPG

Sentiment Analysis 1.0

We analyzed the general comments that users said in order to find the most commonly used words. Overall, there were more positive words said (ex: likes, would-use, interested, recommend) than negative words (ex: doesn’t-like, confusing, not-helpful). These results indicated that, since we were testing the overall flow and idea of the app, our users liked the initial concept of the SmartCart. The difference between positive and negative words is somewhat small, showing that we still have a lot of room to improve.

 
Snip20180623_8.png
 
 

Sprint 2 – Digital Prototype for Tablet

sprint2 .png

The feedback collected from the previous iteration validated our idea which allowed us to move from using paper screens to a digital prototype. We included screens to sign up, scan, and checkout items. We kept the checkout screens low fidelity because we knew we would make further edits to these screens compared to the sign up process. We also adjusted the way users would search for a particular item so it required less steps to get to the screen by having easier access to the search function. Finally, we reformatted the design of our overall application so it would conform to Google Material Design language.

 

User testing 2.0

Again, we tested users from a variety of persona groups and asked them to complete the entire shopping process with our prototype.

  • The ability to add items in quantity into the shopping list was not present. Users require a way to input quantity of an ingredient.
  • Although users liked the concept, interacting with the tablet was very confusing and people found it unintuitive to scan an item before removing it from the shopping cart when they decided to put it back on the shelf.
Image uploaded from iOS (2).jpg
 

Sentiment Analysis 2.0

We analyzed the comments that participants made and found that on average, more negative comments (ex: confusing, unnecessary, hesitant) were stated than positive words (ex: useful, likes, makes-sense). Comparing these results with those found from the first test, we can see that while users liked the concept of SmartCart, they didn’t like the implementation of the idea as much (seeing as how that is what we worked on this sprint).

 
Snip20180623_10.png
 
 

Sprint3 – final prototype

App Presentation PSD Mockup.png

Pivot - Shift to purely mobile solution

Based on our last user testing, interacting with the application every time to scan in/out items was a huge pain point for our users.

As a team we decided to pivot our idea to using solely the user’s phone instead. We decided to switch from a combination of a mobile and tablet experience to keeping all of the user experience on the mobile app to reduced the amount of technology involved. This pivot allow us to focus on the delivering a delightful experience with the most intuitive media (mobile phones) to the users.

pivot.png
 

Identify High Value Tasks

Using the data gathered from the user tests, we were able to identify the 4 high value tasks for the app. These are the 4 main features we would implement in the new mobile approach.

Checking the running total

Checking the running total

Creating shopping list

Creating shopping list

Locating items

Locating items

Auto-checkout

Auto-checkout

 

As we continued to face logistical problems for cases of keeping track of the items in the cart, with the pivot of the tablet to mobile phone, we also made changes to the hardware of the shopping cart.

Basing our design off inspiration from our Amazon Go experience, we fitted our shopping carts with 4 smart-camera sensors in the corners of the cart that are able to detect items which are placed within. With today’s technology stack, we deemed this as being feasible, in regards to Amazon Go’s store. In addition, we ensured all screens and features were successfully ported to the mobile app.

 

User testing 3.0

With our final round of testing, we found that switching to just a mobile platform improved the flow of the overall product and made it more intuitive for our users. The main feedback we received were small suggestions for the features we currently had that would improve the quality of the app.

The display of items on the routing page that allowed for easy distinguination was something we had to keep in mind, especially when the user has a lot of items they wanted to know the location of.

IMG_2294.JPG
 

Sentiment analysis 3.0

Once again, we analyzed the comments made by the users and found that on average, more positive words (ex: expected, like, would-use, easy) were stated than negative words (ex: misinterpret, confusing). These results, compared to those of the last sprint, indicate that the shift of our product design was the correct choice. This proves that we are able to successfully provide a solution that solves the problem we set out to and the users are happy with the result.

 
Snip20180623_11.png
 
 

Tunite’s final app

These mockups are our final deliverables–they convey what we learned over the course of the full design process. Here are some of our best screens.

iphone-mockup-okorkmaz.png
iPhone 7_Kalarmoon@gmail.com .png
 

Retrospective & Takeaways

In creating SmartCart, we practiced designing in sprints to iterate and refine your product based on your learnings, mistakes and a lot of real user feedback. Designing as a group pushed our team to learn how to delegate tasks and collaborate. In the end, we created something we're proud of!

Rapid_Prototyping_Group_pic.png
 

What I learned

  • Don’t be afraid of pivots and detach feelings from the original idea. As we received more data from our user testing, we realized that the physical implementation of our original idea caused a major pain point for our users and added a significant cost to our secondary users, the grocery stores. After this we had to make the detrimental decision to pivot our project from a tablet to a phone, thus making it easier for both the user and secondary stakeholders to adopt our product faster.
  • Good design has the most valuable and desirable features. Defining the high value tasks gave me a deep understanding of how to manage and prioritize product features.

 

What I would do differently next time

  • Evaluate our design with secondary users - the shop owner and grocery shops. Right now we’ve only focused on the main end users.
  • Include physical prototypes with the app. Have a physical shopping cart with our app would allow for more realistic user testing.

 

Thank you for reading!