JItto wholesale platform

BRINGING CONVENIENCE
TO THE CONVENIENCE STORE

In 2020 the pandemic shifted consumers to order groceries online, yet most of the small businesses that were hit hardest are still stocking their shelves by paper and phone. This is the story of how I designed Jitto’s web platform to provide these stores with a convenient digital solution.

I helped a b2b Startup create their e-commerce platform

Jitto is a Toronto-based wholesale distributor looking to digitize the ordering process for their customer base of rural stores.

They facilitate shipments of bulk, packaged, and processed produce while visiting client stores weekly to gain insight on how to improve inventory and logistics.

Skip To the Solution

Timeline

4 week remote internship with a wholesale distributor startup from June 2023 - July 2023

Tools

Icon and link to Figma
Logo and link for Google Workspace
Logo and link for Notability App

My Role

Experience strategy and design of the B2B e-commerce web app with order catalog and dashboard. Collaborated with a small design team. Led the UX research, concept design, and presented deliverables to the client in an agile development setting.

Content Guide

The Challenge

One platform in one month

Our team of three designers were contracted for one month to assist the startup, Jitto, with digitizing the wholesale distribution experience. Jitto was focused on launching a web application for wider accessibility with a prioritization on the screens for the dashboard, product catalog, and admin panel.
How do we augment the current services with a scalable web design that will grow brand trust?
Jitto started by fulfilling orders through mail-in forms, phone calls, and in-person visits. This analog approach built on human interaction has made Jitto into a business based on trust, customization, and flexibility. It was important that our design was a vehicle to enhance these relationships. Our goal was to augment the current services with a scalable web design that would grow brand trust.

The Approach

Function over Form

This being Jitto’s first digital platform, necessitated by their recent growth, we knew there would be many development iterations ahead. Our task would be to  build good bones for future growth, with certain caveats:

Easy Transition

Approximately 60% of the clientele have never used a website to order for their store. Our design needed to have a near flat learning curve.

Software Agnostic

Creating a platform that will work well on any device or operating system, no matter how old, ensures availability to a wider range of clientele.

Low-Code Design

Many customers are using older computers. It’s important to make sure the front-end design does not carry a heavy processing load.

Scalability

Jitto will be adding new products, customization features, and supplying restaurants. Modifiable design is important for their growth.

The Vision

Insights from the founder

In our kickoff meeting, we spoke with Jitto’s founder, Mani Siddiqui, to understand  his vision for the company and goals for the month ahead.

A Simpler Direction

Jitto is looking for an application with the highest functionality combined with an easy user experience. The focus should be on simplicity of use, not the graphical aesthetics.

Restaurants En Route

Many of the stores are using systems as old as Windows 98, Windows XP, or old mac computers. This will also be run on various devices, so flexibility is important.

Small Business Big Resources

Oracle’s ERP model simplifies supply chain management for large enterprises. Bring that functionality to smaller businesses with a smaller budget is the goal.

Digestible Data

Keeping the information simple and direct without customization options ensures that Jitto brings the most valuable insights to the forefront of the experience.

Scope & Timeline

After our kickoff meeting, we set expectations for what we could deliver by the end of the month. Collectively, we aimed for a high fidelity prototype of the dashboard with supporting structure for the web app.

The Discovery

Informing the Design

Before beginning our design, we aggregated the existing research, system requirements documentation, and determined the need for a comparative analysis of similar companies and services from ancillary industries.

A Need For This Service

Jitto had a UX team previously that validated the  existing market research,  contributed secondary research statistics, and developed a persona. We built our research atop this data, and note their key numerical insights below.

59.9%
of grocers use analog documentation for at least one part of the ordering process
56.1%
recognize that reducing manual ordering would give staff more time to rotate products
58.6%
of grocers experience multiple products going out-of-stock at least once per week

Designing For Generations

The majority of Jitto’s user base is middle-aged to elderly. In our initial sketches, we hadn’t taken these demographics into account, but in later iterations, this became a critical piece of information that would shape our design choices.

An Already Simple Ordering System

In order to ensure a smooth transition we needed to assess the current ordering process and create an aligned digital experience. There are two primary types of orders that customers will make:

The weekly Restock
The standard weekly restocking of items for a marketplace determined by the independent seller.
The Long Weekend
Increased stock or specialty items are needed for holidays so these shipments vary from the normal.

Jitto has made ordering as simple as possible with phone and text options. Jitto will also often reach out to their clientele with any promotions of interest. This person-to-person communication has built trust in Jitto with their clients.

“Repeat Order”
Customers frequently prefer to 
send a text message to restock their existing weekly shipments
Discuss Options
Businesses will call in to modify orders and Jitto also reaches out with promotions of interest

Balancing Time and Trust

While the analog aspect of Jitto has created a strong trust, it has also required the startup to spend much of its time repeating interactions across clientele through responding and filing orders. Our goal is to remove the administrative overhead.

Comparative Analysis: Alternative services Aren’t consistent

Top competitors showed inconsistency in the features they offered. While logistical approaches were similar, industries served differed, which naturally created a variety in the needs of their clientele.

Some offered saved lists, some the ability to quickly reorder, and some to be able to choose the supplier of certain foods, but no service offered all of these at once. 



The most robust logistics came from restaurant supplier software and those with their own operating system. They utilized the most data across supply, inventory, and reordering.

Below is an assessment of the differentiating features each service offered, with all offering basic onboarding, ordering process, payment and selections.

Beyond the features compared above, each competitor had their own style of presenting this information with their pros and cons described below.

The most robust logistics came from restaurant supplier software and those with their own operating system. They utilized the most data across supply, inventory, and reordering.

With a strong grasp on primary research, we moved onto defining our task further by identifying who we would be designing for and what features to implement.

Gordon Food Service

Platform:
Industry Served: Restaurants and Grocers

Extensive tutorials to both explain the depth of the application, and also compensate for an unintuitive, but informative interface. Functionalities include order lists, direct ordering from suppliers, and custom exporting.

NOtch

Platform:
Industry Served: Restaurants and Grocers

While Instacart doesn’t supply grocers, they have been at the forefront of grocery digitization in the last few years. We examined their presentation of information, categorization, and the purchasing process.

Instacart

Platform:
Industry Served: Restaurants and Grocers

While Instacart doesn’t supply grocers, they have been at the forefront of grocery digitization in the last few years. We examined their presentation of information, categorization, and the purchasing process.

Vori

Platform:
Industry Served: Restaurants and Grocers

Vori uses it’s own operating system to manage their ordering and inventory. They are one of the few companies that targets the grocer industry bringing technology to the forefront of the user process and utility.

Freshline

Platform:
Industry Served: Restaurants and Grocers

A grocer supplier that provides visibility to suppliers that businesses are ordering from. Freshline’s usability uses modal screens to view items leading to a roomier browsing experience.

afresh

Platform:
Industry Served: Restaurants and Grocers

Afresh has a simple ordering platform with limited visuals, creating an experience that is a light processing load.

Defining the problem

Distilling research into a plan

Compiling all of this research into something actionable was our next task. We needed to understand who we were designing for and what to include for them and for others. All of our research came down into the guidelines we would use.

Persona

Personas served as a reminder of who we were designing for. Unlike designing technology that works for people used to technology, we were designing for people who are older and with less time to browse leisurely. We used the persona from the prior research group for continuity.

existing guidelines in place

We compiled the features Jitto had tested with users with their previous design team. All of these features were compiled in a Software Requirements System (SRS). We combined this SRS with out analysis of competitors to get the most comprehensive list of features to choose to implement from. The main categories included: Login & Onboarding, Dashboard, Information Architecture, and Ordering Process.

The Framework

Articulating the Options

With the full feature checklist, we had created a theoretically new SRS, but we needed to focus on what categories customers would see. We shift from our research perspective to the customer-facing product.

The Sitemap

To start with, we created the sitemap, noting our areas we would have time to develop within our scope and timeline.

Ideating the user experience

The existing customer experience is an expedient one. This digital interface of Jitto seeks to create additional functionality without creating a time burden. So how do we make this experience preferred over sending a text message to restock? 


- Digitizing will allow orders to be processed immediately
- Providing a “Repeat Last Order”  button is equivalent to the text process
- By expanding the order process visually, we reduce time needed to communicate information between businesses.

Below are the sketches for a few of the screens we designed with a guide to features that were ideated throughout the brainstorming sessions.

Standardizing the Order History

We opted for a recognizable format with alternated shading on each inventory line. We also felt that it was important that a customer could be able to reorder from the order history as well. Invoice, packing slips, and order updates will be available in future iterations of the product.

Dashboards and Data

Our initial task was to create a dashboard with user analytics. Below is the amalgam of ideas we had to present those metrics. We created layouts that provided information in the most basic sense as well as denser layouts that would provide any information on request with expandable metrics.

Since this is the initial launch of the product, the team decided on simplicity so as to not overwhelm the customers with the new information. This also provided some time for Jitto to decide on what information they would provide.

Pivoting to the order Catalog

Dashboard designs focused on an idea of “opaque data” that was not yet ready for implementation. At this point, we realized that without a solid sense of business analytics ready to go, our focus would be most productively spent on the order catalog. This would provide Jitto with the quickest avenue to revenue.

Below are some initial designs for the order catalogue that included modal screens, categorizations to click through and deal listings.

maximizing pixels to minimize Process

With all of the features above for the marketplace, we realized we needed to make this a succinct five-minute shopping experience. Reorders are a simple button, but new orders needed to provide the most information visually while being clear and simple to use. We wanted to keep items fixed for an easier transition to a digital medium.

Our final sketch before prototyping yielded an interface that frames the marketplace items. The order process is reflected linearly on the right so the customer has transparency into shipment logistics.  Choosing the delivery date applies alerts for any item that won’t arrive in time.

Mapping the user experience

While creating our sketches, we also worked on our user flows. Below you can see three of them for major functions within the Jitto web app for login, repeat orders and new orders. We used these as a double check in our design process to be sure we incorporated all of the necessary components.

Login/Sign Up Flow
Repeat Order Flow
New Order Flow

Detailed Design

designing for small spaces

With our marketplace fixed layout set, our challenge now would be to fit everything into the space while maintaining visibility, clarity, and accessibility of the elements. Since this is a new product our goal was for the interface to be comfortable to transition to from analog processes.

responsive layouts for all devices

Being software agnostic was important, so a responsive layout was a must. We want users to access the service independent of the platforms they chose.

Wireframes & Mockups

These wireframes allowed us to view all of the information to scale. This allowed us to parse out what information was essential and how to present it for our users. Even with a fixed layout idea, we continued to ideate within our mockups as well, realizing that what we really needed was to design how information was presented in each market section would look.

Designing Information

Within the marketplace there are some key information groups we needed to keep clear and accessible. We had the main categories, product categories, the item sections, item categories, and the itemized cart. We tested a few different sorting types with the variations visible below.

Less Specific Means More Direct: Alphabetical Sort Vs. Filters

Keeping scalability in mind, we started with sorting the idea of item filtration through clickable buttons, however this required so many clicks to get to a product, that while specific, was also extremely inefficient. Given the size of the product catalog, alphabetical sorting provided users with a quick and direct way to their item.

Product information Card

We went through a lot of iterations with the product card: vertical? horizontal? Square? How would we indicate sale prices? Where would we even fit descriptions? We went through a number of iterations for this, but ultimately, we settled on a simple square card with a hover for information.

The Cart: Using Words Over Symbols

In designing the itemized cart we toyed with alternating colors like an inventory sheet, but ultimately modeled after many e-commerce platforms. Due to our users being older, using words where possible over symbols created a smoother experience. We found that the word “Remove” was easier and more intuitive than the trash can symbol.

The Style Guide

With designing the entire website, we kept the overall design clean using Jitto’s primary and secondary colors - purple and yellow for a clean style guide.

USability Testing

User Testing

Using the prototype you'll see below, we presented our high fidelity designs to our stakeholders receiving a strong positive response. We tested this prototype with eight users, going through the first round of testing.

The Product

Introducing... Jitto

With our research and designs complete we moved forward to creating a high fidelity prototype seen below. Disclaimer: This is not an official Jitto advertisement.
Digitizing Wholesale Produce
Try the interactive Prototype

The Impact

Reaching A Wider Audience

We were originally tasked with just the dashboard and marketplace, but went ahead and designed the order history, the onboarding process, and a full checkout process as well. Here’s a snapshot of what we accomplished:

Digital Transition

JItto’s basic customer interfacing has been completed sufficiently to be moved to development for launch!

Software Agnostic

Keeping the design simple and software agnostic, we’ve ensured that 100% of customers can access Jitto’s new service.

Scalable Design

This being Jitto’s first release of an online service means many more versions will come and we’ve designed for future features.

Reflections

Key Takeaways

Jitto is a unique service in the wholesale distribution industry, not only for reaching out to rural communities, but also for the community structure the service seeks to support. There are a few key takeaways from this experience that I’ll take forward.

OrderInG for business vs. Consumer

Unlike the normal consumer order process, businesses require items to be restocked at a specific date. The browsing experience is entirely different. Advertisements and lures are not necessary, instead the focus is on logistics.

Inclusive design for technical abilities

Most of Jitto’s customers are middle aged or older. Designing for generational expectations opened the service up to so many more customers. Digitization and modernization, if done well, should be fully inclusive.

Linear Thinking isn’t always the fastest

In designing the catalog experience we started with categorically sorted templates. This created excess visual clutter as well as a longer task analysis. Trusting the user to know what they wanted made alphabetical sorting the fastest.

The End

Thanks for reading!

If you have any questions, comments, or ideas be sure to send me a message.

Let's Make Things!

Send ideas, inquiries, or even ASCII art.

Thank you! Your message has been sent!
Oops! Something went wrong while submitting the form.