Project brief
Our team was approached by the Design department at York University to create a new equipment rental web platform for the YSDN program.
Research
Understanding the audience
We started with conducting interviews with the administrators, monitors and students in the program to get a deeper insight into the problems and opportunities.
The problem
The YSDN equipment rental program lets students rent cameras, tripods and audio equipment for their projects. But the process was never digitalized, resulting in confusing policies, ineffective enforcement, and unreported damage to equipment.
The key problems with the current system:
- Still using paper documents to check out equipment and report any damage.
- No digitized system for students to book equipment online.
- No proper database to track available, checked-out and damaged equipment, or any overdue student balance.
- Unreported damage to equipment, creating an inefficient management system.
As a team, we were tasked with creating a digitalized system not only for students to book online, but also to help the staff (lab monitors) and administrators easily oversee and run the program.
The need
Students
Want an easy booking and return process, and to know the equipment they booked is ready to pick up when they need it.
Monitors
Want to ensure booked equipment is in good condition for pick-up, and to easily report damage or late fees at drop-off.
Administrators
Want the location and condition of the entire inventory tracked at all times, with every missing or damaged report in one place.
Design challenge
How might we…
How might we design an equipment check-in/out process that is simple and efficient for students, monitors, and the administration?
The solution
Toolbox is an online platform that allows an easy equipment booking process for students, a smoother check-in and check-out experience for monitors, and a more informed, easily run inventory system for administrators.
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 by administrators.
My responsibilities
We all worked together on research, ideation and visual design. I was mainly responsible for the student check-out experience, from sketches to final prototype and user testing, and synced twice a week with my team to keep the whole product cohesive.
Since I worked on the student check-out experience, I'll walk through the collective process while mainly focusing on the student side of the project.
Research
Stakeholder interviews, user personas and PACT analysis, to list all constraints and opportunities for the next steps.
Ideation
Planning the sitemap and System Requirement Chart, prioritizing important features and preparing user scenarios.
Visual design
Helped create a visual design guideline so the design system is cohesive throughout the platform.
Prototyping
Built wireframes, prepared student user flows, user-tested the flows, iterated from feedback and designed final prototypes.
Motion design
Documented every flow in one product walkthrough video for the final presentation.
Research phase
User personas
User personas based on stakeholder interviews helped us list all pain points and opportunities from a student perspective.
We began by conducting formal interviews with the different stakeholders who would use the product (administrators, student lab monitors and students) and kept them in the loop throughout development.
These stakeholders helped us better understand the problems with the current system. From these conversations, we crafted user personas and a PACT analysis to quickly summarize our research.
Research documents: PACT Analysis · User Interview Plan
Research phase
Opportunities
After two meetups with the admins and interviews with students from our program, we listed the core student needs for the platform.
Easy booking and returning
Students want to quickly browse what’s available in the inventory and book the equipment they need.
Hold unavailable equipment
Put a hold request and get notified via email when the items become available.
Understand the rental agreement
The administration wanted to make sure students using the platform understand the rental agreement.
Check any overdue balance
The administration wanted a clear way to show if a student owed money for a late return or damage.
Office hours and location
Some students didn’t know where the studio was located and suggested it would be useful to have that info.
Research phase
Constraints
Our professor planned to pitch this project to the University for funding to actually build it, so understanding the real constraints was important. The interviews and research uncovered some major ones we had to design around.
No online payment
Due to technical constraints, the administration wanted to keep collecting late or damage fees at the office front desk.
Limited budget
We had to scope out some features, which helped us focus on building a simple MVP.
Time
We only had three months, so we made sure all the main problems were addressed in the proposed solution.
Ideation phase
Planning
With all the research in hand, we quickly white-boarded the problem and listed every opportunity. We learned the System Requirements Chart (MoSCoW) method and found it really helpful for prioritizing features by clarifying the rationale, content and function of each one.
Some ideation questions I worked through during this process:
- What problems do students experience with the current system?
- How might we create an easy, hassle-free checkout experience for students in YSDN?
- How might we educate students about the rental agreement before they request any equipment?
- What happens if the equipment a student needs isn’t available?
- How might we notify students about any overdue balance and damage fees they owe?
Ideation phase
Sitemap
After listing the potential features for each pain point, we created a detailed sitemap outlining where each of Toolbox's features would live. It gave us a grasp of how the complete platform would operate and what each of us needed to focus on.
Ideation phase
User scenarios
The user flows clarified where to focus our efforts and the steps we had to design for. They revealed some discrepancies with our system-focused sitemap, which gave us the chance to blend the two early. Here, I planned the user scenarios that address students’ core needs.
Visual design guidelines
Moving from ideation to prototyping, we collectively built a cohesive design system alongside the product. It was a work in progress: we added rules and components to one file as we iterated.
Scroll sideways to see all 23 →
Prototyping phase
Wireframes and mockups
We started with really low-fidelity sketches to get a general idea of the interface, then worked our way up to high-fidelity wireframes and visual mockups in Sketch.
Final solution
After three months, our final solution makes several significant improvements to YSDN’s rental program. Here are the user flows for the student checkout experience.
Quick and simple checkout
A simple, intuitive flow for students to check what’s available in the inventory and quickly request items after agreeing to the rental agreement.
‘On hold’ requests for unavailable items
If an item isn’t available, students can place an ‘On hold’ request and receive email alerts when it becomes available. A date picker lets them choose when to stop being notified.
Overdue balance, hours, location and settings
A pop-up alerts students who owe damage fees or have an overdue balance. They can also check hours and location right from the dashboard.
User testing
We tested the product with our stakeholders (6 students, 2 monitors and 1 administrator), which gave us a lot of valuable feedback and some unique perspectives on the problem.
Overall, users navigated the product easily and understood the information architecture quickly, and were excited about what Toolbox offered. Testing also surfaced way-finding and visual clarity issues (confusing CTA labels, inconsistent icons, and a lack of personalized features for the different user types) which we caught early and iterated on.
Platform walkthrough
Reflection
Toolbox was a third-year project, and the first where we could do detailed primary research before jumping into a solution, and test with real potential users. The research, interviews and testing helped us put away assumptions, focus on the core needs of our audience, and better understand the project’s constraints.
Collaboration is key
We each designed for a different user group, but reviewed progress together twice a week so the product stayed cohesive.
Seeing problems as a user
Some decisions feel obvious as a designer but aren’t to a user. Testing helped us make informed design decisions.
A new process for building product
Planning a sitemap and using a System Requirements Chart helped prioritize features and scope a simple MVP.
