toolbox_header

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.

dashboards

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. 

brainstorm
moscow

Persona

Initial Research

(Click image to enlarge)

student-1
admin

Wireframes and Mockups

Initial Research

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.

Screen Shot 2019-03-08 at 2.26.46 AM

Early sketches to plan out the interface

Screen Shot 2019-03-08 at 2.33.07 AM

Low-fidelity mockups

hi-fi mockup_1

High-fidelity mockups

Visual Style

Student
Checkout Request 
On Hold Request 
Overdue 
Monitor - Check in & Return
Administrator - Management    

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

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.

solution

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    

flow-1-edit

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    

flow-2

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    

a3

Admin flow 4

Notifying a student for an overdue item

Student
Checkout Request 
On Hold Request 
Overdue 
Monitor - Check in & Return
Administrator - Management    

a4

Admin flow 5

Viewing an old damage report

Student
Checkout Request 
On Hold Request 
Overdue 
Monitor - Check in & Return
Administrator - Management    

a5

Admin flow 6

Removing an item from the inventory

Student
Checkout Request 
On Hold Request 
Overdue 
Monitor - Check in & Return
Administrator - Management    

a6

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

Design Offsite FestivalBrand Identity Re-design

Fortune CookieEditorial Design

I Can’t Sit Sadly by Your SideEditorial Design, Typography

Nature Pocket GuideEditorial Design

FemmeEye Film FestivalMotion Design

Data KnowsMotion Editorial

ZēnoDigital Poduct Design

YSDN ToolboxWeb System