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.
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:
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
Platform:
Industry Served: Restaurants and Grocers
Afresh has a simple ordering platform with limited visuals, creating an experience that is a light processing load.
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.
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.
To start with, we created the sitemap, noting our areas we would have time to develop within our scope and timeline.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Send ideas, inquiries, or even ASCII art.