TUTV Equipment Checkout
Web application allowing members of TUTV (Tufts University Television) to request film and audio equipment.
Role: Designer
2019-2020
BACKGROUND
What is TUTV? JumboCode?
TUTV (Tufts University Television) is a film production club that allows students to request film and audio equipment for borrowing and checkout. Through Tufts JumboCode, I worked as a designer on a team alongside 10 developers.
PROBLEM
Managing hundreds of pieces of equipment
TUTV has hundreds of pieces of equipment that members can borrow for photo and film projects. The current request/checkout system is buggy and inconsistent with how equipment pieces are represented. It does not restrict access, and it has a hardcoded equipment list that cannot be modified and frequently experiences data loss.
SOLUTION
Creating a web app
We will build a web application to keep track of TUTV equipment inventory, allow members to perform self-service requests and returns of equipment, and offer E-board members an administration dashboard to manage equipment inventory and requests.
Key features of our product will include a calendar view for general overview of equipment demand and availability, images and descriptions for equipment, ability to duplicate previous request, and password protection so only E-board members can access the admin dashboard.
USER FLOW
Designing for both admin and members
Before diving too deep into the design, I decided that I wanted to really define the flow of the main pages we intended to create. I sat down with one of my developers and we talked through a logical flow.
With this user flow, we highlighted the main steps of the process for both admins and members of TUTV. These two user groups will have different experiences, as one is requesting equipment while the other is approving and managing the checkout process.
DESIGN
Wireframes
Next, I identified key functions and information for each stage of the request process and generated wireframes accordingly. My project manager and I opened tickets on Github for the developers to start creating pages with these desired components.
Prototype
I used Figma to prototype the interaction between the pages, illustrating the general user flow as well as the varied states of the Equipment Browser page.
Mockups
Next, I began translating the wireframes into mockups. What information do users want to know? How can we communicate request status through color? What additional functions or features might be useful for a member? These were all questions I considered when creating more detailed mockups for the following pages.
REFLECTIONS
What I learned
Through this project, I learned how to organize and coordinate work on a team with a product manager and multiple developers with varying skill backgrounds. I became more proficient with prototyping using Figma and experienced a product development flow and task management via Github Issues.
