BUSINESS ANALYSIS & UI DESIGN

Adding a feature to empower operations

To support BlueHarvest's* goal of undergoing a digital transformation, we multiplied app downloads and exponentially increased user sessions.

With nearly 50 years of legacy, BlueHarvest is a nationwide grocery distributor headquartered on the East Coast whose primary knowledge areas are logistics and supply chain management. In 2021, they named a new CEO who began a lofty transformation vision which included improving digital offerings.

Their strengths lie in their one-on-one customer service, through both their account managers and customer service representatives. They have a number of complex challenges including a lack of a communicated product strategy, disparate acquired systems, absence of competitor understanding in a very niche market, nonexistent user research or customer understanding, and – most impactful – siloed knowledge with no assigned product lead.

*Name changed and product white-labeled for client confidentiality.

Their native mobile app BlueDistribute provides transparency on delivery information so customers feel empowered to react to changes.

This includes support for estimated truck delivery times, current delivery progress, and customer service access.

The home screen of the BlueDistribute app, showing current deliveries and their statuses. This is mocked up on an iPhone. 7 multicolored circles containing different status icons surround the phone.
A Kraft Mac & Cheese box overlapped by an "item not shipped" tag.

The business desired to increase revenue by decreasing the likelihood that a customer will rely on a third-party supplier.

If BlueHarvest can alert customers immediately to which items aren’t fulfilled, customers have more time to reorder, reducing the risk of losing business to competitors.

In addition, the claims process, where customers report issues with their order, is also one of BlueHarvest's biggest headaches. It becomes more expensive to prove the issue when a claim is over a week old, so the company prefers for claims to be filed immediately.

BlueHarvest could increase customer confidence by providing a digital invoice and calling out unfulfilled items on their BlueDistribute app.

Invoices and claims are directly related to the delivery step in the customer experience, so our team was tasked with adding these features to the existing delivery tracker product. Traditionally, invoices were only accessible on BlueHarvest’s web application, which required a unique login ID and a desktop computer, typically reserved for store managers. Those who worked in receiving and ordering would not see the invoice until the truck arrived with a printed version attached.

Defined feature objective

Our decided direction was to surface which items are and are not coming on their order by referencing invoice data. Stakeholders determined business success could be measured through adoption (the number of store accounts using the app) and desirability (the number of user sessions conducted). Since this was a mobile app, it inherently required native experiences for iOS and Android operating systems, and the business put an expected release date within two months.

An Excel spreadsheet of an invoiced overlapped by the website's designed invoice interface.

Without direct access to users, account managers and customer service representatives would need to stand in.

We faced challenges in defining users due to restrictions on customer outreach for testing, as they were expected to react negatively to change. Limited feedback was collected through forms, potentially biased and difficult to generalize. Without budget for a sourcing company, we navigated the niche industry's complexities and varied customer types, risking significant user assumptions.

Yet, two internal groups, account managers, and customer service representatives, engaged with our customers daily. Despite their biases, their continuous customer interaction offered valuable insights. This allowed us to refine our user focus to two groups, representative of both large and small accounts.

A man scanning boxes on a table. He is in a warehouse.

PRIMARY USER

Receiver

Goal: Identify potential claims to be submitted so the store receives their desired products.

Responsibilities

  • Remove product from trucks
  • Track which items were and were not fulfilled
  • Determine claims to file

Motivators

  • Reduce time spent on each delivery
  • Clearly identify which items were not in stock, strongly suggested in customer feedback forms
  • More easily and accurately file a claim
A man putting packaged products onto grocery store shelves.

SECONDARY USER

Orderer

Goal: Identify items to replace / re-order so their store can be stocked.

Responsibilities

  • Keep designated section of the store appropriately stocked
  • Place new orders when stock runs low or desired products are unavailable

Motivators

  • Reduce lost sales potential by ensuring all shelves are filled
  • Spend less time placing orders
Icons in circles: Sketch, Jira, Confluence, and Teams.

I was the sole UX designer and an ad hoc analyst for the product, translating business challenges into design solutions, earning trust through consistent, high-quality work and also tackling analysis tasks.

Due to acumen gaps within the team, I took on more than just UX work and also played the role of analyst. Discussions with developers identified technical blockers and proposed backend and frontend revisions to support UI. In order to effectively gather requirements and dependencies, I lead initiatives to find knowledge gaps between teams and served as a strong partner between stakeholders, design, and engineering. I wrote and organized tickets, constructed Confluence documentation, and provided demos and Jira links to others.

Two complex host systems, “Legacy” and “Horizon”, had us working closely with parallel teams.

BlueHarvest had acquired many companies and systems over the past 15 years. Because of a lack of a central data lake, we had to account for two different host systems (or data sets), named “Legacy” and “Horizon”, and provide a uniform experience for each.

Thankfully, we did have the benefit of leaning on the existing Web app for reference. It already supported invoices and was forming customers’ expectations of how the system should behave and which patterns should be used.

Mobile would need a unique, simplified approach compared to its Web counterpart.

After speaking with account managers and customer service representatives, then further peppering the tech leads of the Web team with questions, we were able to start forming a foundation for the mobile invoice experience.

Most importantly, we knew that some invoices could have hundreds of items which could become overwhelming on a small screen, so the mobile experience would need to be intentionally unique to tailor to a Mobile user.

RECOMMENDATION

In the web app, the latest invoice is at the top, meaning that invoice sorting descends by date.

Mobile can also make invoice sorting descend by date.

Web has “no rhyme or reason” to sorting within invoices.

Items in printed invoice spreadsheets are listed alphabetically.

Recommended alphabetical item listing for invoices in BlueDistribute.

Sorting and searching functionalities are not available on the web.

Account managers said that “customers will print invoices by department.” The web team confirmed that this is the most-requested sorting they hear.

Strongly advocated for adding a search functionality.

We could provide sorting by brands and department for Horizon, but the data of the Legacy host system was unable to accommodate that.

Horizon’s invoice number would require 3 additional digits than Legacy’s.

research findings

Mobile can provide enough space to accommodate the maximum amount of digits.

Our conversations with account managers revealed that prices and discount codes are relevant to the ordering process and to users whose roles include billing/finance.

Since our primary goal is to surface items that did not come on the order, and ordering new items is performed in another product, we made the choice to omit item prices in the mobile app.

Account managers reported that the item name, UPC code, item code, amount shipped, and amount ordered were sufficient details for a user to easily identify the item.

These 5 pieces of data are available in each host system.

We could find a way to incorporate these 5 pieces of data for each item without overwhelming the interface.

Account managers hear from customers that they would like to see product images for faster scanning.

Work was ongoing to build a product image library.

We could future-proof the product by making room for images now, which could be hidden until the library was ready.

“I just wanted to say a huge THANK YOU for the work you've done! This information is so valuable – and as you know, something we haven't had access to before. I'm really looking forward to incorporating what we've learned into the designs.”

– UX DESIGNER, BLUEHARVEST'S ORDERING APP
A list displaying 3 invoices that are tied to the current delivery.

To call attention to unfulfilled items, we included a callout in the invoices list.

When an invoice had missing items, label with "# not shipped" would be added under the total number of items. This would direct a user to go into the invoice and investigate what was unfulfilled.

A GIF toggling between the "Shipped" and "Not Shipped" tabs.

To quickly identify unfulfilled items, we made use of “Shipped” and “Not Shipped” categories.

We implemented logic where if the number of units included on the shipment was less than the amount ordered, the item would be sorted into the “Not Shipped” category, displayed in a tab format. This provided flexibility to display items that were shorted as well as items that weren’t included on the order at all.

For the details of each item, we identified the column names for the item name, UPC code, item code, amount shipped, and amount ordered in each host system. I worked with developers to create API calls to fetch these and accurately populate them in the interface.

Constrained to design without user data, we asked lots of questions to try to test every assumption and make informed, if not proven, decisions.

To increase the usefulness of invoice information, we gave users options for their next step.

Further, our learnings allowed us to expand on the initial business ask. The next step after identifying unfulfilled or shorted items would be to file a claim or make a new order.

While our MVP feature could not include native functionality for these services due to time and engineering constraints, these things did exist in other BlueHarvest platforms. We included external links to the web app’s mobile-responsive claims workflow and to the ordering mobile application.

The bottom portion of the app, where a "+" button is very obvious. Two options are expanded from the "+" button: "Create a new order" and "Submit a claim".

“I really appreciate what you have brought to the team. The designs you have delivered are well-thought-out and high quality.”

– PRODUCT OWNER, BLUEDISTRIBUTE
A happy grocery store worker.

Over the 6 months following the release of this feature, our product owner recorded a 15x increase in app downloads and a 3x increase in user sessions.

Our business goals were achieved above and beyond.

Unfortunately, due to internal politics, the stats for satisfaction and support requests were never pulled during my time at the client. I will continue to follow-up with their team to discover if data is ever available.

This was an opportunity for me to learn how to navigate uncertainties and make informed decisions even if we don’t have all the details.

Additionally, I built considerable documentation for this feature and our research findings leading up to it. We were able to present these findings to stakeholders and other teams, which filled in gaps in their understanding of customer workflows and processes. Ultimately, knowing more about our users led to exciting brainstorm conversations of all the ways we could do more with this app, but that’s a case study for another time….

Next case study: Taking piggy to market

An arrow pointing to the right.