How redesigning an enterprise product taught me to extend myself – Instacart

As designers, we want to work on problems that are intriguing and “game-changing”. All too often, we limit the “game-changing” category to a handful of consumer-facing mobile apps and social networks. The truth is: enterprise software gives designers a unique set of complex problems to solve. Enterprise platforms usually have a savvy set of users with very specific needs — needs that, when addressed, often affect a business’s bottom line.

One of my first projects as a product designer here at Instacart was to redesign elements of our inventory management tool for retailers (e.g. Kroger, Publix, Safeway, Costco, etc.). As I worked on the project more and more, I learned that Enterprise tools are full of gnarly complexity and often present opportunities to practice deep thought. As Jonathan, one of our current enterprise platform designers said —

The greater the complexity, the greater the opportunity to find elegance.

New login screen

As we scoped the project we found that the existing product wasn’t enabling retailers to manage their inventories as concisely and efficiently as they could. We found retailer users were relying on customer support to help carry out smaller tasks. Our goal with the redesign was to build and deliver a better experience that would enable retailers to manage their inventory more easily and grow their business with Instacart.

The first step in redesigning was to understand the flow of the current product. We mapped out the journey of a partner going through the tool and spoke with the PMs to figure out what we could incorporate into the roadmap.

Overview of the older version of the retailer tool

Once we had a good understanding of the lay of the land, engineering resources, and retailers’ needs, we got into the weeds. Here are a few improvements we made to the tool —

Aisle and department management for Retailers

We used the department tiles feature from our customer-facing product as the catalog’s landing page (1.0 above). With this, we worked to:

  • Refine our visual style
  • Present retailers with an actionable page on the get-go
  • Make it quick and easy to add, delete, and modify items
New Departments page for the Partner Tool. Responsive tiles allow partners to view and edit their Aisles and Departments quickly.

Establishing Overall Hierarchy

Older item search page
Beverages > Coffee returns a list of coffees from the retailer’s catalog

Our solution simplified a few things:

  • A search bar rests atop the product to help find and add items without having to be on this specific page. It pops up a modal that offers a search and add experience. This was visually prioritized since it’s the most common action taken by retailers
  • Decoupled search flow and “Add new product” flow to streamline the workflows
  • Pagination, which was originally on the top and bottom, is now pinned to the bottom of the page for easy navigation
  • We also rethought the information hierarchy on this page. In the example below, the retailer is in the “Beverages” aisle under the “Coffee” item category, which is on the top left. They are editing or adding the item “Eight O’Clock Coffee,” which is the page title. This title is bigger to anchor the user on the page and improve navigation throughout the platform
Focused view of top bar. The “New Product” button is disabled since this is a view to add products

Achieving Clarity

While it’s great that the older Item Details page was partitioned into sections, from an IA perspective, it offered challenges for two reasons:

  1. The category grouping didn’t make sense to retailers
  2. Retailers had to read the information vertically but digest it horizontally and vertically
Older version of Item Details page

To address this, we broke down the sections into what’s truly necessary. From there, we identified four main categories of information that the data fell under:

  1. Images — This is first to encourage retailers to add product photos
  2. Basic Info — Name, brand, size, and unit
  3. Item description — Below the item description field, we offered the description seen on the original package (where the data was available) to help guide them as they wrote
  4. Product attributes — help better categorize the product (e.g. Kosher)

Sources now pop up on the top right of the input fields so the editor knows who last made changes.


Takeaways

Seeking validation through numbers is always fantastic. We did a small beta launch of this product and saw an increase in weekly engagement and decrease in support requests.

I learned that designing enterprise products helps you extend yourself as a visual designer and deep product thinker. I approached this project as an opportunity to break down complex interactions and bring visual elegance to a product through thoughtful design. To this day, it remains one of my favorite projects at Instacart as it stretched my thinking and enhanced my visual design chops. Most importantly, it taught me to look at Enterprise tools in a new light; now when I look at them, I am able to appreciate the complexity within

Source: https://tech.instacart.com/how-redesigning-an-enterprise-product-taught-me-to-extend-myself-8f83d72ebcdf

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top