Toolbox

Creating a smoother equipment checkout process for YSDN

toolbox-landing-v2

Role

Research, Ideation, User Testing, Visuals, Prototyping

Timeline

February-April (3 Months)

Team

Carson Young, Mohit Gupta, Zhen Li

Tools Used

Sketch, Invision, Illustrator, Photoshop, After Effects

Our team was approached by the Design department at York University to create a new platform for equipment rentals in the YSDN program. The solution, called Toolbox, allows an easy equipment booking process for students, a smoother check-in and check-out experience for staff, and a more informed and easily run inventory management system for administrators.

The Problem

The YSDN equipment rental program at York University allows students to select and rent out equipment to help complete projects requiring additional resources such as cameras, tripods and audio equipment. However, this system and process has yet to be digitalized, resulting in confusion policies, ineffective methods of enforcement, and unreported damage to equipment. As a group, we were tasked with creating a digitalized system for not only the students to book online, but also help the staff (also called lab monitors) and administrators easily oversee and run the program.

A design challenge emerged....

How might we design an easy equipment checkout process for both the staff and students of YSDN?

The Solution

Toolbox is an fully online web platform designed for the YSDN program that allows an easy equipment booking process for students, a smoother check in and checkout experience for staff, and a more informed and easily run equipment system for administrators.

toolbox-mac

The platform allows students to book items online in advance of pickup, eases the checkout and return flows for lab monitors, and creates an efficient and standardized system to ensure all equipment is accounted for for administrators.

Research

We began looking at this problem by interviewing the different stakeholders involved with the rental program. Due to the size of the program, there are many different parties we had to consult throughout the entire process including administrators, student lab monitors and students directly. These stakeholders helped us better understand the problems with the current system. From these interviews and conversations, we crafted user personas and a PACT analysis that easily summarized our research to that point:

We also had several major constraints we had to consider for our final solution. Some of these constraints included a lack of online payment system, a limited budget for development, and a limited amount of time for the project. To make the equipment loan process more intuitive on this platform, we focused on the core users needs for each:

Students want an easy booking and returning process. They want to make sure that the equipment they booked are ready to use when they need them. 

Monitors want to make sure that the equipment booked is in good condition when students come pick-up and drop-off.

Administrators want to make sure that all equipments’ location and conditions are tracked. If equipment is missing or damaged, they also need to know who is responsible.


Ideation

Our team spent a lot of time researching our targeted users before ideation began. It was important that the platform not only served these three, distinctly different user groups, but also make sure that the user experience was cohesive across each touchpoint.

I was personally responsible for developing and creating solutions for problems faced by the student lab monitors working at the school. Some ideation questions I had to work through during this process include:

How might we create a platform that rewards good behaviour, and identifies troublesome users?
How might we ensure that monitors are checking in equipment properly through this experience?
How might we build a better way for monitors to report issues to the administrators?
How can we ensure that this platform has a cohesive experience across all touchpoints?

Site Map

After we had brainstormed potential solutions and analyzed pain points, we created a detailed site map outlining where each of Toolbox's features would be developed. This allowed us to get a grasp into how the platform would work system-wide. 

For my monitor flows, this stage helped me distinguish the structure and constraints I would need to consider as equipment is checked in and out. Further, this allowed me to start designing a specific step-by-step checkout process that ensured equipment damage and other steps were completed by the monitors before being able to approve any transaction.

mapping-new-04

User flows and scenarios

Outlining the different use-cases of Toolbox

These flows provided clarity on where we should focus our efforts as a group, and the necessary steps we had to design for. This helped our group realize we had some discrepencies with the system-focused mapping of our platform above, and allowed us an opportunity to blend these two conceptual charts early. Additionally, these charts also allowed an opportunity to consider important non-visual aspects of the product, such as when confirmation and reminder emails would be sent out to students. 

Wireframes and Iterations

Key challenges when designing the equipment checkout process

2. proper steps

Ensuring proper steps are being followed

Currently, monitors will often skip or forget the steps necessary to ensure that all equipment is accounted for. With this new system, it was important that this was improved through a guided, step-by-step checkout process. Creating wireframes was especially important for solving this space in that there was a lot of variables to consider, which paired well with the quick iterations that wireframes are good for.

1. reputation

A new focus on equipment security

Currently, monitors often don't really know what type of student their giving this expensive equipment to: If the student was already renting a device, being penalized, or had been banned from the program, there was no real way to track this. To fix this, our team created a new way to track a student's "status," a short description that showed if a particular student is eligible for renting selected items.

3. cohesive

A system that works for all users

Wireframes were incredibly useful during this phase of the process as the team had been working semi-seperately on their own use cases at this point. By wireframing together, we were able to come back together and quickly figure out an adaptable dashboard system that works for all three user groups: students, monitors and administrators

User Testing

Our group had the opportunity to meet and test these different types of users, including students, monitors and administrators with our proposed solution. 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 a lot of unique perspectives on the problem space through this.

Overall, users were able to navigate within the created space fairly easily and intuitively understood the information architecture of the product. They were also excited with the features Toolbox had to offer. We found that there were some wayfinding and visual clarity issues, such as confusing labels on CTAs, ununified icons, and a lack of personalized features for the different user types. Through this testing, we were able to detect these issues early and quickly correct them.

 

Final Solution

Our solution to YSDN's equipment problems

After a long three months, our final solution is a collective effort that helps create a platform capable of making several significant improvements to the current rental program of YSDN. For monitors (the user group I was responsible for), this new system is an invaluable step up from what they currently have in many different ways:

a3311b64609117.5adcec74ae364

Toolbox allows students to request items online through the platform, and then pick them up at the rental office where a monitor can help get them their requested equipment. The experience shown above is what the monitor uses to check out these students.

Student Details/Status
This experience ensures that each student who wishes to checkout has their details reviewed by the monitor before getting their devices. The status includes updates such as overdue balances, frozen accounts, or anything else that would stop users from being approved. These details verify that the user who requested the items is currently in the program (through a barcode), and has no existing fees/bans placed on their account.


Drawer
After grabbing the requested items and scanning each, some items may have additional parts. This draw is another necessary step in the UX of the product to help ensure that all parts of the equipment are checked both in and out, and nothing has been missed.

2

In the rare time that a student does damage an item, the monitors can easily access a modal and send the damage report details to administrators who will then deal with the situation. The "Report a Problem" modal also has options if some pieces of equipment are missing upon monitor review. 

3

If a student returns an overdue item, the status will display an overdue state, highlight which order has been overdue, as well as tell the monitor the expected return date. The monitor then completes the return and an additional modal opens to confirm that the user has been told and accepts the overdue fees being charged to his/her account.

4

When designing for a complex product, it's important to also examine edge cases. In this case, if a lab monitor has a problem but this occurs outside of the check in/out experience, then they can easily report the problem through the side bar.

Toolbox Complete Walkthrough

If curious about Toolbox's full functionality, this is a walkthrough for the full platform! (All use cases)

Reflection

The context behind the platform is what made this project interesting: this experience demanded a very specific treatment as we had to design for very specific needs for specific users. Crafting the experience all the way from interviews, to testing, and to a finalized solution was an awesome learning experience.

A big thing I learned in this project was to pay special attention to the details when designing digital experiences. Before this project, my screens often wouldn't follow specific guidelines, but I quickly learned in order to work on a complex product, guidelines must be followed rigorously. A product can quickly become disjointed with so many moving parts around such as development, budgetary constraints etc. that it's crucial that these flows are ready for hand-off to developers.

Another important thing I learned through this project was how to properly recruit, schedule, host and facilitate formal testing sessions. Previously, my experience with user testing had been informal, often taking solutions to strangers and giving them instructions. I gained a ton of insight into testing from the project that will be valuable going forward.

Key Takeaway

Details matter when designing digital experiences. Take the effort to superfocus on the user experience. Your team and users will thank you.

carsondavidyoung@gmail.com

carsondavidyoung@gmail.com

carsondavidyoung@gmail.com