Jitto

Freshness Delivered

CLIENT PROJECT
‍
Designing a mobile wholesale ordering platform for grocery produce managers

ideation | competitive analysis | user interviews | user stories | affinity mapping | informational architecture | wire-Framing | visual design | usability testing | project management

Introduction

Jitto is an innovative Toronto-based startup revolutionizing B2B wholesale ordering with their mobile and web platform. Inspired by the convenience of Instacart for Businesses, Jitto aims to digitize and disrupt the traditional, labor-intensive practices of spreadsheet and pen-and-paper ordering. Their vision is to empower produce managers at independent grocery stores to effortlessly browse, order, adjust, and track their weekly inventory.

The Problem

The current ordering process for grocery store produce managers is burdened with tedium, prone to errors, and relies on outdated systems and methods. Frequent out-of-stocks and high food waste levels not only lead to dissatisfied customers but also impact the success of Jitto's customers—the produce departments of independent grocery stores.

Vision

Our mission was clear: to revolutionize the ordering process by creating an exceptionally user-friendly platform that ensures produce managers can maintain fully stocked shelves with top-notch products. This vision aligned with Jitto's overarching goal of driving sales and profitability for their business.

The Solution

Our design challenge was to transform the founder's vision into reality, taking a mobile-first approach. We embarked on a journey of understanding stakeholder needs through user interviews and competitive analysis, which informed the design and delivery of a seamless login, browsing, and checkout flow. By following a traditional human-centered design process, we successfully produced a high-fidelity prototype.
Link to Final Prototype

My Role

As part of a talented three-person UX team, I took the lead in designing the intuitive browsing flow and home screen. Additionally, I collaborated closely with two other designers to craft the checkout and login flows. In addition to my design responsibilities, I also played a pivotal role in project management, conducting market research, and performing competitive analysis.

understanding the industry

Key Challenges

Extensive upfront research was crucial for this B2B project, as we needed to immerse ourselves in the industry, understand its stakeholders, and grasp the key challenges it faced.

1. Out of stocks

A significant 58.6% of grocers experience out-of-stocks on a weekly (45.9%) or more frequent basis (12.7%). To combat this, one grocery leader expressed the need for:
“a better rotation of fresh food products so that we don’t have a shortage in the future.”
Grocery leader

2. managing high consumer expectations

Consumers hold high standards for fresh produce, with almost 75% expecting it to look enticing and delicious on the shelf, and nearly 70% expecting it to be consistently available. Over the past 1-2 years, 93% of grocers have witnessed an increased demand for fresh food, resulting in 84.1% investing in expanding their product offerings and 89.8% focusing on enhancing the customer experience in their fresh departments.

3. error prone and tedious methods

A staggering 59.9% of grocers rely on manual pen-and-paper documentation for at least one aspect of the ordering or forecasting process. These archaic methods lead to challenges such as organizing paper documents, transposing data, dealing with overstock due to inaccurate orders, and diverting resources away from crucial tasks that ensure product freshness and customer satisfaction.

4. high employee turnover

65% of grocers have been affected by higher-than-normal employee turnover in the last 1-2 years. This has led to a loss of fresh knowledge/ expertise for over 52% of grocers, and nearly 80% of grocery leaders say it is: extremely difficult (8.3%), very difficult (28.7%), or somewhat difficult (42.7%) to hire and retain qualified individuals to staff their fresh department(s).
Simple systems which are easy to use are key.

5. exorbitant food wastes

A substantial 71.6% of consumers would be more inclined to support a grocery retailer committed to reducing food waste.
Grocery stores contribute to a staggering 43 billion pounds of food waste annually.
- Afresh report 2022

6. A Trend towards Digitalization:

An overwhelming 89.2% of grocery leaders agree that increasing the accuracy of order quantities in their fresh departments would lead to increased sales, repeat customers, reduced food waste, fewer errors, and ultimately, improved profitability.

competitive analysis

Understanding the Key Players

Since we were designing the platform from scratch it was important to understand the user flows and UI Patterns of existing companies. I analyzed how Instacart, Gordon Food Services, AFresh, and Amazon Prime Whole Foods facilitated the ordering and browsing of products for their customers. The learnings from the competitive analysis helped me better understand the sector, and provide guidance for Jitto's app design.
Below are the key takeaways from each competitive company.
Link to Detailed Competitive Analysis in Figma

instacart

Instacart has traditionally been a consumer grocery ordering platform however they recently launched a business version. Instacart's layout featured a fixed navigation panel on the left side of the screen for the web. They had very detailed product pages and also had an interesting feature that allowed users to add specific instructions to each individual item prior to checkout. Adding notes to items was a key feature that we incorporated into our design.
Instacart has a unique green add button with a plus symbol in the product carousel page which is located in the top right corner. It seemed to interrupt the design and not follow the traditional “add to cart” format.

gordon food services

GFS is commonly used by many of Jitto's target customers. Upon analyzing the login, browsing, and checkout flow I found that the UI was very cumbersome, difficult to read, and followed a spreadsheet format that many industry operators are used to.

afresh

AFresh is a startup that digitalizes the produce manager's job by linking inventory management and ordering. They rely on sophisticated algorithms to improve forecasting accuracy. There are a lot of visual cues that help the user stay on track and not lose their place. They do not use pictures for products which is different from other companies.

amazon prime whole foods

Amazon Prime's Whole Foods grocery ordering system had the most influence over the design. Although the UI is very busy and consistent with the rest of their e-commerce style there were some interesting elements.

The add-to-cart overlay from the scrolling items section inspired our design since it was convenient for the user not to have to go to each product page to add an item to the shopping cart. 

The hierarchy of the product icons also inspired the final design. A clear add to cart button located underneath the text and product image conveyed all critical details in an elegant fashion.

During the checkout flow, there was a “before you checkout” section was very clever as it ensure's the user does not forget anything and leverages an opportunity to drive product sales.

user research

Key Findings

"Current systems were built for long shelf life products like cereal, not for fresh ingredients"
- Produce Department Manager
At the onset of the project, we did not have a clear understanding of the roles and responsibilities of produce managers nor did we understand their current processes. We interviewed 5 produce managers from local grocery stores. Our goals were to understand the challenges that fresh produce managers faced and the methods they currently use to address them.
“Users expressed their desire for a more user-friendly system, because many currently use spreadsheet-type SAP systems.” 
- Grocery Store Produce Manager

1. TIME-CONSUMING PROCESSES FOR TAKING INVENTORY

Many operators expressed frustration over current systems forcing them to take inventory of every single item which was time-consuming. They wished for a more intelligent system that could isolate individual items instead of the entire list. 

2. HUMAN ERROR AND TRANSFERRING DATA

A high rate of errors took place when pen and paper and busy spreadsheets were used.

When users transferred data from their inventory sheets to their computer systems, often, errors occurred without system alerts causing mis-orders from the warehouses and resulting in excess quantities and food waste.

3. BUSY UI AND OLD SYSTEMS

Inventory management Systems were not built for the fresh food department, rather they were designed for packed goods with 12 month shelf lifes and lower turn over / restocking rates.
“It is like taking a step backward.”
Grocery Store Produce Manager

Jitto Site Visit

We also tapped into the deep knowledge of the founder to better understand their vision for the digital product and understand their goals. Spending a day shadowing the client helped further clarify challenges and defining the products specifications.

‍THE IMPORTANCE OF REPEAT ORDERS

‍They shared that currently,  they receive phone calls, emails, or text messages with the simple word “Repeat” from the majority of customers. This means they just want a repeat order. 

Pushing sales to drive sales

‍Similar to a grocery store sale flyer, Jitto currently emails out a flyer for their weekly sales. They wish to integrate the flyer into the system in order to increase their individual orders and sales. 
“Not too fancy, not too overcomplicated” 
- Jitto’s Founder on their wish for the UI for the app.
Link to Detailed Research Presentation

synthesis

Persona

Meet Dave, our fictional persona developed after synthesizing our user interviews. He wants a simple easy-to-use ordering system that allows him to make quick and accurate orders so he can get back to focusing on the other critical aspects of his job.

Informational Architecture

Leveraging insights gathered from competitive research and the founder's vision, I embarked on structuring the various flows of the app. This collaborative effort proved instrumental in establishing a shared understanding of the project scope and facilitated the exploration and elimination of certain features, such as the sampling option. While the founder believed that offering free samples of new products would boost sales and increase future purchase probability, presenting the layout to the client sparked concerns about complexity for developers in cases where samples were unavailable or potentially abused by clients. By visualizing the entire layout, we were able to engage in meaningful discussions and make informed decisions regarding which design features would progress to the low-fidelity stage. This process enabled us to align our goals, streamline the development process, and ensure the final product would meet both user needs and technical feasibility.

reframing the problem

Complex and outdated processes lead to increased errors in orders.

The problematic design of current ordering systems increases the likelihood of order errors between the produce manager and the produce distributors. 
  1. Lack of system error alerts, causes unexpected quantities to arrive at the store and go to waste or donation, effecting the bottom line
  2. Difficult-to-read spreadsheet-like layout without pictures. 
  3. Disintegrated information requires users to check multiple data sources - “searching for the sales flyers” 
  4. Transferring information from handwritten inventory sheets to inputting into the computer increases the likelihood of human errors 
  5. Unreliable search results - All of these issues result in a frustrating and inefficient ordering experience for the produce manager which in turn hurts the sales of a distributor who is trying to maximize their sales.
All of these issues result in a frustrating and inefficient ordering experience for the produce manager which in turn hurts the sales of a distributor who is trying to maximize their sales. 
design goal

How Might We

"Design a simple and accurate ordering process for grocery produce managers”
Sub Goals
  • Driving sales and filled up pallets for Jitto
  • Designing a simple easy to use interface for produce managers
  • Everything in one place - ordering, inventory management, history, weekly sales
  • Minimize human errors

ux design

Wireframes

Three flows were designed for this project: [Onboarding, Browsing and Checkout]
‍
I designed the flows prioritizing user flexibility in search and add-to-cart options. The option for sampling was also added but later in the project this functionality was removed because of the complexity to the supply chain and user in the case there were no samples available.

Low Fidelity User Testing

Round one of user testing was that the user generally preferred the new layout and found it easy to use. Feedback from the low-fidelity user testing was very positive. Users liked the overall flow, only minor adjustments were made to further streamline the design such as removing a video at the home page and removing the processed foods group from the before checkout page to avoid confusion. Also in order to reduce the steps and complexity in the checkout process the sampling pages were scratched.

I designed the grid below to identify and assign priority to the testing feedback helping to make informed change decisions as a team.

Style Guide

Jitto already had a brand logo and a coinciding logo font style established. We helped to further build upon this with a style guide, introducing new standards for buttons, and new typography for body text, colors, and iconography. The brand personality is casual, approachable, and bold.

hIGH-fidelity design

Design

Through its simple and intuitive design, Jitto ensures that users can browse, shop, and manage their orders effortlessly, fostering a delightful and satisfying shopping experience for all.

Users can effortlessly browse through a wide array of products, exploring a curated selection that caters to their interests and preferences. The intuitive layout and intuitive search functionality make it a breeze to find exactly what they're looking for.Keeping customer satisfaction at the forefront, Jitto also offers the convenience of checking out weekly sales, ensuring users stay informed about enticing discounts and promotions. By providing this feature, Jitto enables users to make the most out of their shopping experience and seize exciting opportunities to acquire their desired products at attractive prices.

Additionally, Jitto understands the importance of seamless user management, allowing users to view their previous orders with ease. This feature grants users the ability to track their purchase history, facilitating efficient reordering and providing a sense of organization and control.By encompassing all these user-friendly features, Jitto strives to create an environment that is both visually appealing and functionally efficient.

User Testing 2

User testing was carried out after high fidelity design was created with 5 customers including Jitto’s founder. Again feedback was extremely positive. The need for a repeat order button was identified which would directly go to the previous orders page.

Designing an icon that would help users easily understand the reorder function was also requested by the users. In the checkout flow, the sales flyer element in the “before you checkout” section did not grab people's attention enough. Feedback was provided to try and further highlight this section.

Adjustments needed to be made to the calendar ordering page to limit the ordering window for the sale, as one user pointed out that they could potentially order with the same price several weeks or months into the future.
Users also reacted very positively to the help page a critical element for users that were not digitally fluent
The "adding a note" function in the order summary page was an important and well received design element which took several rounds of iteration between client and customer to get right
Screen 1: The user selects "add a note" from the order summary page and a blank note appears
Screen 2: Keyboard overlay to support typing
Screen 3: Special instructions are typed in and done button selected upon completion
Screen 4: "Add instruction" changed to "view instructions" after note is written. Users can read or edit message if required.
The addition of a new icon and button for the repeat order section, front, and center on the home page. The reason for this placement was due to that fact that 9 out of 10 current customers just communicate the word "Repeat" to Jitto as to repeat the prior weeks order.
Screen 1: The "repeat last order" icon and button created along with button.
Screen 2: Order menu pops up showing list of orders with a clear "add to cart" button to facilitate easy reordering.
Currently Jitto, distributes a simple flyer to their customer to communicate sales. Aligning with this critical business objective, I drew inspiration from the well-regarded design of Amazon's Whole Foods app to enhance the user experience.
I integrated the weekly sales flyer into the "before you checkout" section of Jitto. This placement ensures that users are presented with the opportunity to explore the latest deals before finalizing their purchase. Through a simple swipe gesture, users can effortlessly browse through the attractive offers and add desired items to their cart if they wish to take advantage of the discounted prices. Alternatively, users have the freedom to proceed directly to the order submission phase without any pressure or interruption.
By incorporating this additional step, Jitto aims to gently remind users of the weekly sales, enhancing their awareness without imposing any undue burden. This thoughtful integration encourages users to consider and benefit from the available promotions, ultimately fostering increased sales while respecting the user's autonomy.
Above is an example of the current flyer that Jitto sends out to its customers. They wanted to build this into the platform.

Screens show and expanded out walk in specials view of the banner which can be scrolled left and right
A very clear ordering sales window and checkout process are designed to help users know where they are in the checkout process and minimize confusion on the ordering window.
Screen 1: User can select a date
Screen 2: Once date is selected it is indicated as white and shown in the "Selected Date" cell

the wrap up

Metrics for Success

The design of the Jitto app on iOS resulted in a simple easy-to-use order management platform. The client as well as their customers were extremely pleased and are looking forward to translating the mobile-first design to a web version.
  • 100% - Improved satisfaction with ordering
  • 100% - Improvement in ease of use for operator with all user tests easily executed
  • 100% - delivering a style which resonated with the brand
  • Reducing employee training time to be quantified upon product launch
  • How the design imacts reduction and food waste are yet to be undestood

Closing Thoughts

I gained significant knowledge and valuable insights through my involvement in this project. The opportunity to collaborate with fellow designers proved to be truly enriching, as I actively absorbed knowledge from their expertise.

In particular, I witnessed substantial advancements in my proficiency with Figma, specifically in the realm of prototype interaction. Moreover, my experience working alongside clients has been invaluable, as it afforded me the chance to guide and educate them about the design process, effectively communicating our designs in the process.

Developing a web platform that seamlessly integrates with an app would be an excellent way to continue this project if more time was permitted. Additionally integrating the system with an inventory management tool would also alleviate some of the jobs to be done for the grocery store operator while keeping all data in one place. I would also like to experiment more with the manner in which the sales flyer integrates into the design. While the client was happy with this, I felt there was an opportunity for improving this.

Research Sources

  • Afresh Grocery Dive Opportunities in Fresh 2022 Report
  • Food Waste a Solvable Proble Afresh 2022 Report
LINKEDin