Improving Shopping Efficiency at EatStreet
As an online marketplace, optimal add-to-cart functionality is integral to the success of EatStreet. In a teardown meeting, the design team and I identified several weaknesses within the add-to-cart pattern in the iOS and Android experiences. This project encapsulates my process as the design lead from start to finish.
Previous Experience
Scoping the Problems
Users were only able to adjust the quantity of items in their cart from the cart page. This meant that if a user navigated to an item details page and added two burritos to their cart using the add-to-cart component, but then decided they only wanted one, they needed to navigate to the cart and remove one of the burritos from there. This could have been frustrating for users because the component did not allow them to easily fix mistakes they may have made or adjust quantities when their ordering circumstances may have changed. This was problem #1.
Additionally, users were forced to navigate to and from item details pages in order to add items to their cart within a merchant catalog. This led to a circular navigation pattern where users who were shopping for multiple items entered and exited item details pages constantly. This was not a smooth journey, especially if the user already knew exactly what items they wanted. The experience was inefficient and it unnecessarily restricted add-to-cart functionality by only surfacing it on item details pages. This was problem #2.
Improved Experience
Problem #1
The logic for the new A2C component required four states to allow for the use cases of editing and removing.
A full prototype and redlines document was created to provide a single source of truth on the design side. This helped with handoff and implementation.
An important note is that this flow shows the item details page. The implementation plan for the engineers was to code this logic into the existing experience (the item details page) to get a quick win, and then tackle the second phase of the project later.
Problem #2
After determining how the add-to-cart logic would work in phase one, I moved on to the second phase of the project: how to introduce add-to-cart functionality to merchant catalogs at the list level. To fully understand the problem, I plotted out a user flow for the shopping experience. This allowed me to have a bird's eye view of the problem, and it positioned me to ask the right questions during research. The dotted red line highlights the problem area.
I consulted some user interviews that had been done earlier in the year to better understand our users. The findings concluded that EatStreet users were familiar with add-to-cart “widgets” — a pattern where a button sits on an item card that triggers a modal element, allowing users to add that item to their cart without leaving the page. This is an example of an add-to-cart widget in a different app.
Revised user flow, with the add-to-cart component included.
After UX work was wrapped up, the UI ideation work began. The first part of this was to determine what the trigger button would look like. I made mockups of an item carousel with different items and explored different options for icons and visual style.
My process is highly iterative, hence the multitude of options. I try to get every idea out of my head and not judge them as good or bad until after this stage.
I experimented with copy as well as icons. Stylistic choices, like fill color, stroke color, and border radius, were also on the table at this point.
In the end, we chose to go forward with a plus icon as the trigger button as it most clearly communicates the act of adding to a cart.
When considering the second component of the flow, we chose to utilize a bottom sheet instead of the stepper seen in the example. This allowed for more room for relevant content and a greater sense of confirmation for the user. Designing the bottom sheet was fairly straightforward. Besides the product content, we added a link to the product’s parent category for quicker navigation.
The last step of the UI work was to build out the components for the desktop web experience.
To close out the project, we conducted some usability tests on PlaybookUX to validate our design decisions. The tests went very well, so the components and flows were shipped for development.
Special thanks to my design lead, Wes Garnett, and teammate, Jessica Ni.