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

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. 

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. 

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.

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. 

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?

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.

Students:  An easy equipment booking process.
Monitors: A smoother check-in & check-out experience.
Administrators:  A more informed and easily run inventory management system.

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. 

(Click image to enlarge)

We started to create low-fidelity sketches to get a general idea of what the interface would look like. We worked our way up building high-fidelity wireframes and visual mockups on Sketch later on.

Early sketches to plan out the interface

Low-fidelity mockups

High-fidelity mockups

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.

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.

Admin flow 1

Admin flow 2

Admin flow 3

Admin flow 4

Admin flow 5

Admin flow 6

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.