Toolit is a data-driven responsive web application designed to assist robotics instructors and educators in managing their tools and machines while seamlessly integrating with team and project management functionalities.
Users can effortlessly access detailed information about tools and machines, including availability, location, and quantity. Moreover, Toolit allows them to easily adjust their stocks based on their needs while logging all adjustment histories. Team and project management make Toolit stand out in the market unlike other tool inventory management applications.
Unorganized inventory management leads to miscommunication, inefficiencies, and project delays, particularly under tight project timelines.
Robotics clubs and teams often rely on their memories, spreadsheets or messaging apps like Slack to manage large amount of inventory.
Robotics instructors and educators
Users manage their tool and machine inventory with real-time visibility of its status. We implemented status chip to differentiate the levels of availability(In Stock, Low in Stock, and Out of Stock). I suggested that we should use both an icon and text for this status chip to achieve better accessibility.
This allows users to manage reported stock issues with prioritysers can set the priority of the tool that they want to report so they can visualize instantly when looking at Stock Issues page. We allow them to resolve issues given the situation where they have found or fixed a reported item.
For better usability, we separated tools and machines for stock issue reporting. Machines can be reported as out of order instead of damaged or lost. This makes more sense to real world environments.
This feature enables users to manage their teams and projects simultaneously unlike other simple tool inventory management system. Users can add, edit, and delete projects and teams whenever they want to. Once a project is done, they can complete it and add a new project.
This allows users to monitor their inventory to check the usagee decided to use cards with large-size numbers for better understanding of what is happening for Tool Usage.We used bar graphs to try visualizing a situation without reading text.
We used both qualitative and quantitative UX research methods to build Toolit.
One of the interviews I conducted revealed the absence of a streamlined inventory management system in the engineering field, which could lead to unnecessary schedule delays. This finding inspired the development of our final app idea.
After individual interviews, my team had the opportunity to interview a TEN TON ROBOTICS coach at West Vancouver Secondary School. During this interview, we observed how they managed tools and machines, identified their needs, and gained insights into the operations of the robotics club.
After conducting several interviews and market research, we aimed to understand how Toolit could stand out in the market. We discovered that most inventory management applications focus primarily on general inventory, such as office or construction tools. Based on this research, we developed a strong solution tailored specifically for our target users: Robotics Educators and Instructors.
To ensure a human-centered design, we first created a persona based on the interviews. I then developed a mood board to capture the overall ideas for the application, focusing on three key adjectives: clean, simple, and futuristic. Inventory management applications tend to be text-heavy, so I aimed to simplify our app design by eliminating unnecessary elements. During the mood board creation, I selected dark blue tones to represent the futuristic aspect of our app, which integrates team and project management, making Toolit stand out.
By conducting card sorting, we uncovered a clear hierarchical structure underlying how users organize information.
Site Map(Google Drive)
I was responsible for one of the features, Tool Inventory Management, where users can manage their tool and machine inventory with real-time visibility of its status. I tried to make this as simple as possible to achieve usability because this task might be the most used feature in our application.
Below is a part of our main user flow, highlighting one of our features, Tool Inventory Management. We tried to simplify the process of each action.
Complete User Flow(Google Drive)We followed material UI guidelines to establish consistency across all components.
We used multiple of 8 for spacing, aiming to pixel perfect design for both desktop and mobile.
To better align with our brand, we created custom icons using Adobe Illustrator and Figma. We chose rounded corners to convey a friendly look. Each icon has two stroke widths, and the original icon size is 24px by 24px.
We made sure that our chosen color had enough contrast for better accessibility.
We gained valuable feedback for both UX and UI aspects throughout both online and in-person usability testing sessions. Especially for labelling, it seems easy but words such as inventory, items, and stocks have similar meanings, and they can differ from person to person.
Our objectives included:
More details can be found in the link below.
Usability Testing Plan and Report(Google Drive)
Considering our brand's minimalist aesthetic and emphasis on strength, I selected Nunito Sans as the primary typeface for the Toolit app. Its clean lines and versatility ensure optimal readability across all text sizes, while maintaining a friendly and professional tone
What I did throughout the project was I personally messaged one developer or designer when I had something to clarify. However, I should have messaged in our group chat so everyone in the team knew what was happening or was being discussed. I learned making everything transparent is important for teamwork.
Even though I have a background in system engineering, I should have thought more about the back-end side at early stages, especially making user flow. Not thinking about things logically could ruin the entire user experience. I will definitely apply my logical thinking skills to the next project.
As a designer, I should consider everyone. I am still figuring out how I can improve accessibility while maintaining aesthetic aspects. I will conduct more research on this next time I work on a project.
Unlike developers, I felt that designers do not really have a standard version control system. When design is updated, I should have logged what was changed for references. From the next project, I will make notes for changes and make it easier for everyone to understand design changes.
After the alpha and beta demo, bug bash events were held. During these events, I found over 60 bugs, earning the Bug Buster award. It provided an opportunity for me to showcase my attention to detail skills. I will continuously pay attention to details when designing.
