Toolbox
YSDN Toolbox
UI/UX System Design
"Creating an intuitive equipment checkout and manage system."
Team
Zhen Li (me), Mohit Gupta, Carson Young
Timeline
February-April 2018
(3 Months)
Tools Used
Sketch, InVision, Illustrator and Photoshop
Project Brief
Problem
Our team was approached by the Design department at York University to create a new equipment rentals web-platform for the YSDN program. Toolbox is a web platform that aims to help students, work-study monitors and administrators in York/Sheridan Design Program ease the equipment rental process and inventory management.
Problem
Problem
The current equipment borrow process is recorded on paper documents. Because this system and process has yet to be digitalized, resulting in untracked equipment overdue, untracked equipment damages and losing documents. Administrators in YSDN complain about the difficulty and poor efficiency in management.
My Role
Problem
We worked closely on the research, ideation, visual design and user testing phases. As I was primarily reponsible for the administrator management experience, from sketches to final prototyping and user testing, while syncing twice a week with my team for critiques and alignment.
Constraints
Problem
We had several major constraints we had to consider for our final solution. Some of these constraints included a lack of an online payment system, a limited budget for development, and a restricted amount of time for the project. For the program, we decided to created a minimal viable product and limit the features to the core needs of our main userbase only.
The Need
Problem
Students want an easy booking and returning process. They want to make sure that the equipments they booked are ready to pick up when they need them.
Monitors want to ensure the equipment that is booked is in good condition for pick-up and is easily able to report damages or late fees during drop-off.
Administrators want to make sure that the location and condition of the entire inventory is tracked at all times. This includes having a database for all the missing equipment and damaged reports in one place.
How might we...
make the equipment borrowing system intuitive and efficient for student, monitors and administrators?
Solution
Problem
Toolbox is a web platform allows students to reserve items online in advanced for pickup, helps ease the checkout flow for lab monitors, and creates a manageable standardized system to ensure all equipment is accounted for administrators.
User Goals
Problem
Students: An easy equipment booking process.
Monitors: A smoother check-in & check-out experience.
Administrators: A more informed and easily run inventory management system.
Initial Research
Initial Research
We began looking at the problem by conducting formal interviews with the different stakeholders that would have the potential to be using the product. We have our users (administrators, monitors and students) participating throughout research and user testing process. These stakeholders helped us better understand the problems with the current system, in order to identify key emotions, opportunities and problems. From these interviews and conversations, we crafted user personas and a PACT analysis to quickly summarize our research.
Taking insights learned from our initial research, we created a System Requirement Chart to specify priorities to help guide us to our proposed solution.
Wireframes and Mockups
Initial Research
Visual Style
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
View full Brand Guideline.
Our group aim to develop a visual system for Toolbox allows users to understand the information in an easy way. One important element to achieve the goal is our card style and colour palette. The colour palette is a minimal off white scheme with a bold signature blue for visual emphasis. As a group, we find that these visual components and brand help effectively ease this process and elevate this experience even higher.
User Testing Feedback
User Testing Feedback
View full User Testing Sessions Analysis.
Our team had the opportunity to meet and test our product with our stakeholders, students, monitors and administrators. These testing sessions included 6 students, 2 monitors, and 1 administrator and allowed us to receive a lot of valuable feedback and insight. We gained some unique perspectives on the problem through this process.
Overall, users were able to navigate within the product fairly easily and intuitively. They were able to understand the information architecture of the product quickly. They were also excited about the features Toolbox had to offer. We found that there were some way-finding and visual clarity issues, such as confusing labels on CTAs, inconsistent icons, and a lack of personalized features for the different user types. Through this testing, we were able to detect these issues early and iterate on them.
Live Prototype
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Administrator | Monitor | Student - Checkout - On Hold - Overdue
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 1
Filtering the inventory based on their availability and categories
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 2
Adding a new item into the system and checking live view
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 3
Tracking the damage history of a checked our item
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 4
Notifying a student for an overdue item
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 5
Viewing an old damage report
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Admin flow 6
Removing an item from the inventory
Student
- Checkout Request
- On Hold Request
- Overdue
Monitor - Check in & Return
Administrator - Management
Video Walkthrough
User Testing Feedback
Reflection
User Testing Feedback
In this project, I was in charge of administrator flows and made sure admin had an intuitive and efficient management experience. With Mohit implementing student flows and Carson taking charge of the monitor flows, the overall collaboration of our team made me really enjoy working with them to build Toolbox from scratch. All the late night group meetings and video calls paid off with Toolbox being such a valuable and useful product in the end.
Collaboration is key
We each took responsibility and honned down the primary focus for the different user groups but always synced twice a week with each other to make sure the product is cohesive.
Focus on user’s perspectives
Some design decisions may seem too obvious as a designer, but may not be very obvious to the user. User testing englightened us in making informed user-centric design decisions.
Learning new way of designing
Creating a System Requirement Chart is new to our design practice. It was really helpful in prioritizing important features and scoping the product for a simple MVP.
Selected Works
I Can’t Sit Sadly by Your SideEditorial Design, Typography
Data KnowsMotion Editorial
“Racial Quotas are Weird”Motion Design
ZēnoDigital Poduct Design
YSDN ToolboxWeb System