Instacart Redesign
Role - UX Designer
Discipline - UX Research, UI/UX Design, Visual Branding
Tools - Figma
TIMELINE - 3 months • Sept 2022
Background
What's the problem?
What are the constraints?
How does it work?
My Role
Final Prototype
Interface Evaluation
Comparative Study
User Profiling
User-based Evaluation
Supporting Studies
Ideation
Instacart is a highly popular grocery delivery app with over 500,000 active shoppers serving millions of customers across the US and Canada. The app enables users to order household items and groceries from local stores via their mobile devices, with personal shoppers handpicking and delivering the items to the user's preferred location. The app offers real-time updates and communication with the shopper if needed, allowing users to avoid the time and hassle of going to the store themselves while still receiving the products they need.
Instacart, the popular grocery delivery app, has been under fire for its subpar user experience. Numerous complaints have been raised, including the challenge of finding products, a confusing checkout process, a cluttered design, and overwhelming information on each screen. Users have also expressed frustration with the inconsistent experience, complex navigation, and unclear instructions during checkout. Given the highly competitive nature of the market, Instacart must prioritize and address these issues to enhance the user experience and remain competitive. Failure to do so may lead to a loss of customers and ultimately impact the company's bottom line.
1. User constraints: The new design must meet the needs and expectations of the target user group, which may limit the design options based on user feedback and research.
2. Time constraints: There is a tight deadline for the redesign, given that I only have 1 month to redesign the app which limits the amount of time available for design, usability testing and further research.
3. Limitation as a student: As a student, I have limited resources and access to a diverse user base. I also have limited opportunities to conduct extensive user research, such as usability testing or user surveys, to capture a broader range of user perspectives and feedback. This may limit the app's ability to address the needs of a larger and more diverse user audience.
The new Instacart has simplified the purchase and checkout process by removing unnecessary steps, allowing users to reach their goals efficiently. The related elements are now grouped together to avoid a cluttered interface. Additionally, new features have been added, such as filters, undo, and favourites, to assist users in shopping with ease and finding what they need quickly.
This new feature has been well received by users, with a 93% task completion rate, and 100% of users would like this concept to be developed.
Disclaimer: I am not affiliated with Instacart in any way. I do not claim ownership of any official design.
This project is split into two parts. As the team leader, I supervise and manage the team's research activities, taking into account each member's strengths and abilities in order to assign tasks and ensure their completion to a high standard. It is my responsibility to provide direction and support to guide the team towards successful outcomes. In the research section, I conducted the entire comparative study, which involved task flows, user profiling, and usability metrics. Additionally, I assisted my groupmates in carrying out the user-based evaluation. As for the design section, I created the entire design independently.
We employed UX-based interface evaluation to pinpoint usability issues in Instacart's interfaces, collecting user feedback on design, navigation, and functionality for potential improvements. We assessed three features (Home, Pickup, Recipes) to avoid redundancy, as many principles were common across multiple features, out of the app's five main features: Home, Pickup, Recipes, Ways to save, and Orders.
After our extensive interface evaluation of Instacart, we pinpointed areas for improvement within the app. To ensure our redesign meets industry standards and enhances user experience, we initiated a comparative study. Here, we assessed Instacart alongside leading delivery service apps, UberEats and Doordash, examining task flows, UI elements, interactions, visuals, store ratings, icon recognition, terminology, and overall consistency.
Task Flow
We meticulously created a flowchart to compare the task flow from the home page to checkout across Instacart, UberEats, and DoorDash. Our analysis revealed that Instacart's process is notably more intricate and time-consuming than those of the other two apps. This comprehensive visualization allowed us to identify specific areas where streamlining and simplification could significantly enhance the user experience.
We conducted a thorough evaluation, analysis, and comparison of the five primary task flows within Instacart, UberEats, and DoorDash. This comprehensive assessment was centered on various factors, including UI elements, visual design aesthetics, the number of steps involved in each task, and the overall flow of these processes. Through this rigorous examination, we gained valuable insights into the strengths and weaknesses of Instacart's current design in comparison to its competitors. These insights have played a pivotal role in guiding our redesign efforts to enhance user experience, streamline task flows, and ensure that Instacart remains competitive in the market.
I developed two user profiles to assist in shaping my design choices, targeting individuals who engage with the app at varying frequencies.
We will observe 7-9 participants completing a grocery delivery task while using the app. Participants will be given instructions before beginning the task and evaluators will observe the participant's actions from beginning to end without interrupting or asking questions during the task. The evaluator will time the participants, observe where they click, count any mistakes they make, and note their body language. Participants will be asked to add exactly 5 different items to their cart and think out loud during the process to better understand their mental processes and emotions. Afterwards, an interview will be conducted.
User-based evaluation results in terms of time and error rate
Participants had low overall satisfaction with the app, with 55% having neutral satisfaction. Around one-third of the participants found the icons/terminology very clear, while another 33% found them somewhat clear. A third of the participants thought the task took too long to process, while another third found it fast. 35% of the participants considered the app easy to understand, while 33% had a neutral opinion. Additionally, participants could only find what they were looking for 45% of the time.
Usability and User Experience Goals based on Usability Metrics
The usability goals for the Instacart app highlight concerns about task memorability, efficiency, error frequency, user satisfaction, and learnability. These issues arise from challenges in initiating tasks, distractions, and error-prone interfaces. User experience goals indicate functionality meeting needs but findability issues due to mixed item options. Trust is established through accessible customer service but marred by false information. Accessibility is ensured across devices, including support for visually impaired users. However, delight is limited due to complexity, while the app's value lies in efficient grocery shopping and swift delivery despite challenges.
In addition to the usability and user experience research, we conducted an analysis of the store ratings for the Instacart app on both the Apple Store and Google Store, comprising a total of 26 store ratings. This comprehensive approach allowed us to gain insights into users' pain points and satisfaction levels with the app.
Ten participants provided positive reviews during the second round of usability testing for our low-fidelity design. Our goal was to reduce the number of steps for users to purchase and checkout quickly, which we achieved according to the time it took participants to complete the process. Feedback revealed the need for additional features, like the ability to undo and more filter options. We will consider this feedback as we make changes and adjustments for the high-fidelity prototype.
Store Feature
For the Instacart app redesign, I aimed to improve the interface for a more streamlined look while keeping most existing features as users liked them. My focus was enhancing the user experience, such as adding a store information section on the store page to provide basic information about the store. This feature helps users make informed purchasing decisions and creates a more immersive shopping experience.
Search Feature
I made the Instacart search feature more user-friendly and efficient by adding a search history feature and the ability to add items directly to the cart. These changes eliminate two steps and allow for quicker and easier item addition. I also added a filter feature that does not exist in the original design, which allows users to sort search results by preference.
Solution
Favorite Feature
I reviewed feedback on the Apple and Google Play Store for my Instacart redesign. The favorite feature was requested by many users, so I added it back. Users can save items or stores by clicking the heart icon, and organize them into item and store sections. Clicking the icon again deletes the item and users have 5 seconds to undo it. This feature helps users keep track of their favorites and improves the shopping experience.
Cart Feature
In the original design, users had to select the store before entering the shopping cart if they shopped at multiple stores, resulting in inconvenience and inefficiency. In the new design, users can select the store they want to check out and be directed to the shopping cart with the selected store's items. Furthermore, to prevent accidental removal of items, I added a reminder and undo option based on Jakob Nielsen's third usability heuristic for user interface design, which emphasizes user control and freedom.
Usability Testing
Reflections:
Instacart Shopper — a grocery delivery and shopping app that empowers users to conveniently order groceries and household essentials from their favourite local stores. The app prioritizes a user-friendly experience for individuals of all ages, ensuring that shopping for daily needs is efficient and accessible to everyone.
Checkout Feature
I simplified the checkout interface by grouping related elements and added an undo feature to address the accidental removal of items. The order confirmation page was enhanced with a progress bar to track the status of the order and a map showing the driver's route. The original design lacked such features, and users were only provided with an estimated arrival time. These changes give users more control over their orders and help them monitor the delivery process closely.
Third Round of Usability Testing Result
We used both qualitative and quantitative usability testing on our prototypes. Qualitative testing identified user issues, while quantitative testing measured task completion time and errors. We recruited 9 participants, each with a unique user ID, to add 5 items to the cart and complete the order flow. Participants were asked to think aloud during the test, and we collected their feedback through a survey. The high-fidelity prototype reduced task completion time from 7 to 4 minutes and decreased errors from 0.88 to 0.33.
Conducted three rounds of usability testing with a diverse group of participants to identify and address potential user issues and improve the overall user experience.
Developed collaboration and communication skills by working together to solve design problems and create a cohesive final product.
Recognized and leveraged the unique talents and strengths of each team member, which allowed them to work more efficiently and effectively.