Instacart Case Study
Freelance, 2020
When I joined Instacart, Covid had just inundated the world and people were doing everything they could to stay inside. Instacart, a company that employed contractors to buy and deliver groceries to its customers, was increasing in popularity. A 600% increase in demand in just a few months meant the company needed new Shoppers quickly, and ease of access to shop however users needed to shop. I focused primarily on their web product to modernize, better educate users, and better accessibility than the existing site which had not been updated in years.
Role
Senior Product Designer
Shopper and Growth teams
Projects
Shopper Landing Page [P1]
Homepage [P2]
Tasks
Web design
Shopper Landing Page
P1
Context and Process
Because the Shopper site had not been updated since its inception, I was given carte blanche to design everything from grid to content. In order to better define parameters for the project, I started with limitations: what was necessary, what was missing, what objectives did the new page and site need to address? The previous design had an input form we dubbed “the receipt.” There was no communication about the two types of roles a Shopper could have: full service delivery or in-store.
For context and onboarding, I took a few days to:
— Audit the overall brand to better understand their design system
— Break down the business and design differentiation between the core consumer and shopper sub-brands both in business objectives and in look and feel
— Create a trendscape of competitors and analogous companies
— Audit the in-app experience to determine common UX patterns and define modules that could be adapted for web.
With a better understanding of the brand, the company, and the industry, I then narrowed in on the problems to solve:
— 30% dropoff below the fold
— Confusing UX for setting country depending on the user’s location
— Confusing account creation
— Broken responsive design
— No differentiation or definitive look and feel for the Shopper sub-brand
Over the course of a month, I had weekly checkins with the Shopper design team and weekly checkins with my designated manager to capture feedback and ensure business objectives were met. As I was brought onto the next project and team, I provided a detailed handoff of my work including all audits, feedback, objectives, wireframes, auth considerations, explorations as well as final files and suggestions.
Design
For the design process, I started with the necessities and worked from there.
The first question to answer was whether the Shopper site would function as advertising or as a “hallway” to the app. With the first round of feedback, it was determined to be strictly utilitarian, but with a better education component than previously. Given the level of lift for dev building a new system in web, we gave ourselves some time padding by taking the existing designs and reskinning them.
As the explorations continued, the receipt was further finessed, and the resolution page for account creation and a CTA to download the Shopper app was further explored. Up until this point, the direction I was given by stakeholders was to keep things minimal and reuse existing assets as much as possible. However, upon seeing the second round of work, I was given free reign to design the pages how I saw fit so long as the receipt and a module delineating the two types of Shoppers were included.
By the third round, with opportunity to push the design further, I provided two layout options satisfying the design objectives each stakeholder desired. The first, a centralized / 2-column layout, was closer to the existing site and therefore would cut down on development time. The second, a full-screen / 3-column layout, consolidated the information better making for less scrolling, more modern, and easier to read content from left to right.
I recycled the type styles from the app design library, and tried to adhere to the spacing rules as well in the hope that the mobile UI could be one-to-one with the app.
Content
Content-wise I wanted to create an informational rhythm with the content experience where the receipt starts specific to the user getting through sign up, followed by wider contextual information about why the job is beneficial, more narrowly what it entails, how it works, and again broadly what shoppers generally want to know.
During this time the Shopper brand needed more definition, but the larger brand of Instacart was also undergoing a rebrand by Wolff Olins. This meant that I needed to come up with something that felt within the known world of Instacart with already existing assets, but still feel different. I chose to create new assets with the existing illustrations and photography by marrying them together, something the brand had not done previously. If the core consumer brand primarily used illustrations and photography for the merchandise, then flip it for Shopper’s sub-brand: illustrations for the merchandise, and photography for everything else, and make it about the people.
P2
Instacart.com
Milestone 4
Current Site
Context and Process
With a better understanding of the brand and company’s objectives at this point, I focused on my new task, redesigning the homepage. Instacart was continuing to grow at a phenomenal rate, and with everyone stuck at home for the foreseeable future, there was an opportunity to not only expand the in-app experience to web, but to recreate the in-store experience: that meditative, spur-of-the-moment inspiration stroll through a store where aisles and stands are curated for holidays and regional cuisines.
The entire process for the homepage took about seven months from start to finish. Unlike the Shopper Landing Page where I was working alone on a singular part of a larger initiative, the Instacart Homepage was primarily challenging because of all the teams, designers, and stakeholders I needed to work with to ensure the design met my brief, but also not disrupt other streams of work. I reported to two PMs and the Growth director; I met weekly with the Growth team, biweekly with the larger design group for reviews; and I had daily checkins on rotation with 3 different design teams: brand, ecomm, and auth/onboarding. I had to ensure that the shop-able components were to spec based on the ecomm team’s designs so I had jam sessions with the primary designer to ensure both our objectives were met. I met almost daily with my partnered content writer, and had weekly checkins with the web design lead for the brand team. Everything I made, he had to standardize, and everything he made I had to use as the jumping off point for the look and feel. It was a lot of give and take which made for a fun, collaborative experience, but also a delicate one.
Design
With a similar process to the Shopper Landing Page, I pulled past explorations from previous designers as well as a trendscape of Instacart’s competitors to determine content narrative and module types. The PMs came with very specific content they needed from their stakeholders, and I used that as a jumping off point. From the Growth team’s perspective, there was a desire to treat the homepage like a grocery store itself where you could “walk in” and displays and aisle types would be at your disposal. I once again did my best to find a happy medium for all stakeholders.
Through user testing various versions we narrowed it down to a singular design, then tested again for ordering. While the curated modules tested well, the primary use case of “get me only what I want” took priority, as expected. In the end we opted for most impactful and easiest to implement as our MVP, then created three additional milestones based on development and user feedback for continually building a more robust experience.
The homepage remains more minimal, but the more involved functionality has been improved upon since launch. The designs lent themselves easily to the rebrand Instacart launched almost a year later with updated type and imagery. From a design perspective, they reverted back to an initial exploration for better legibility and breathability of the design.
The part I didn’t expect to own, but ended up taking on because of my work across both the Shopper and Consumer experiences, was the footer. I got to work with the SEO and brand teams to design the only piece in the design ecosystem that marries the two sub-brands.
Reflection
Because my time with Instacart ended with the handoff of the homepage, I do not know the metrics of the homepage. I can infer success, however, because of the longevity of the design, and the adaptability of it even with a rebrand.
Before the rebrand, the Shopper page remained, and was recently updated to a more stylized approach with less educational and more testimonial components. As Instacart as reached international recognition, this adjustment in narrative makes sense.