ServiceTitan
ServiceTitan Inventory Management Application
ServiceTitan is a SaaS B2B company for the trades. Providing software solutions for trade businesses to manage various facets of their operation from dispatching field workers to creating estimates. One key part of many HVAC businesses is to manage and supervise the inventory of their warehouses. ServiceTitan created an inventory management web interface as a software solution. A mobile application was in development and I was tasked with updating the application with new features and getting it ready for launch.
Role Team
Sr. Product Designer Mobile Design Team
Product Development
Systems Designer
Duration Platform
1.5 Years iOS & Android
The Problem
The primary users for the Inventory management application are warehouse workers who are tasked with receiving and tracking all items and packages that are transported to the warehouse, as well as monitoring and keeping track of the inventory that is stored. Users also needed a feature where they could integrate their barcode scanner apparatus that they use in the day to operations within the application.
The Solution
I designed a barcode scanning feature that helped streamline workflows between the primary users’ day to day tasks and the inventory management application. I also redesigned the visual design of the application to integrate with a new design system that was to be introduced with the launch of the mobile applicaiton as part of a rebranding initiative.
Discover
The first step in my design process was conducting user interviews with warehouse managers to understand their workflows, particularly how they use barcode scanners and interact with the desktop system. I also surveyed managers from various locations for broader insights. I created a user journey to map their overall experience, and documented any pain points of the process. A key finding was that users primarily tracked inventory with barcode scanners but had to switch to the desktop application to finalize their objectives, revealing an inefficiency. My goal was to ensure the new feature would integrate seamlessly into their workflows and improve overall efficiency.
Information Architecture
After gathering insights from surveying and interviewing warehouse managers, I reviewed the existing application to assess how the new functionality could streamline this process. This evaluation allowed me to determine if any structural adjustments were necessary to support the feature while ensuring it fit seamlessly with user workflows and system requirements. I iterated and created different flows, which I used for prototype testing.
Version A: User has to enter quantity.
Version B: User has the option to enter quantity of items.
Prototype Testing
I developed low- to medium-fidelity prototypes for each version of the user flow to determine the most optimal and intuitive interaction. I conducted A/B testing with both prototypes, analyzing which version allowed users to complete the task in fewer steps while evaluating overall ease of use and task success rates. Based on the feedback, users liked the flexibility of the second version of the barcode scanner. However, they all mentioned that with their current workflow, when they scan an item, they scan the package of the item and count the quantity manually instead of using a barcode scanner for each piece. As a result, we decided to go with version A with the MVP and decided to explore the use case for version B for future releases.
Version A of Userflow for Barcode Scanning.
Version B of Userflow for Barcode Scanning.
High Fidelity Design
After testing and validating the overall user flow, I created high-fidelity designs based on the insights gathered. I collaborated closely with the mobile design and design systems teams to develop a new design system for the IMA app, the first in a series of mobile applications to be released on the App Store and Google Play Store. This process led to the creation of a design theme for the application called Anvil: Ember. We utilzied a token system for the style guide to make the designs adaptable for both light and dark mode for both operating systems. . The design system was built for native applications, which was informed by the Human Interface guidelines and Material Design Guidelines respectively to each operating system. As part of the rebranding initiative, we made sure that all design elements and library components adhered to WCAG guidelines for accessbility.
Light Mode version of high fidelity designs
Dark Mode version of high fidelity designs
Developer Handoff
When preparing the designs for developer handoff, I implemented a file organization system in Figma that separated features for both iOS and Android. Previously, all features were housed in a single file. Which was overwhelming for some developers to navigate. To improve navigation, I organized the files by feature using the naming convention: Application: Operating System: Feature. Each file was further divided into pages, with screens grouped by different flows for easier access and clarity. I created a group specific for the product, and included secondary and tertiary files. Such as a file for components, as well as an icon library, so that developers had ease of access to those specifics as well.
End Result
The Inventory Mobile Application Successfully launched its first iteration simultaneously to the App Store and Google Play store. It was the first native mobile application launched for the company. The Barcode scanner feature reduced the overall time for warehouse works to finish their task by atleast 40%.