Role:
User Research, Ideation, Wireframing, Prototyping,
Visual Design, User Testing
Team:
Stephen Oakes, Amulya Yalamanchili, Urvesh Patel (Me)
Duration:
2 Months
September - October 2017
Tools Used:
Adobe XD, Illustrator, Photoshop, OmniGraffle, After Effects
The Innovative Media (equipment loan & rental program) at VCU provides an inventory of cameras, workstations, recording equipment, lighting, and tablets for students to select and rent out.
However, this system has yet to be digitalized, resulting in untracked information, constant overdue items, confusion policies, ineffective methods of enforcement, and unreported damage to equipment.
SimplyTrak is an online web platform that allows for an easy equipment booking process for students, a smoother check-in and check-out experience for technicians and a more informed and easily run inventory management system for administrators.
The platform allows students to not only book items online in advance, but also eases the checkout & return flows for technicians. It also creates an efficient and intuitive system to ensure all equipment is accounted for the administrators.
While we all worked together on the research, ideation and visual design phases, I was mainly responsible for creating solutions for problems faced by the workshop technicians working at the Innovative Media Lab. This included everything from sketching to wireframing as well as final prototype and user testing. I also connected twice a week with my team to make sure that the complete product experience was consistent.
Checking Out Items
SimplyTrak allows students to request items online through the platform, and then pick them up at the Innovative Media Lab where a technician can help them get their requested equipment. The experience shown on the right is what the monitor uses to check out these students.
Link to Adobe XD prototypeReturning Damaged Items
During an instance that a student returns an item with damage, the technicians can easily access a pop-up modal and send the damage report to the administrators with all the details. The administration will then handle the situation from there. The pop up also has options for inputting missing equipment upon review.
Link to Adobe XD prototypeReturning Overdue Items
If a student returns an overdue item, the status will display in red next to the students’ name and alongside the order with the expected due date. The technician can then complete the return after informing the user of the overdue fees being charged to their account and they have accepted these fees.
Link to Adobe XD prototypeReporting a Problem
During the case a technician has a problem outside of the check in/out experience, then they can easily report the problem to the administrators through the option from the side bar.
Link to Adobe XD prototypeWe began looking at this problem by holding formal interviews with the different stakeholders that would be using the product.
These stakeholders helped me define all the pain points and opportunities from a technicians perspective and helped the team better understand the current system.
Once we had all the research, we quickly dived into white-boarding the problem, listing down all the opportunities.
Taking insights learned from our initial research, we created a System Requirement Chart to specify priorities to help guide us to our proposed solution.
After listing down all the potential features to address the different pain points, we created a detailed site map outlining where each of the features for SimplyTrak would be developed. This allowed us to get a grasp of how the complete platform would operate and what each of us need to focus on.
For my technician flows, this stage helped me differentiate the structure and constraints I would need to consider as equipment is getting checked in/out.
The user flows made it clear where we should focus our efforts as a team and allowed us to consider elements of the product we hadn’t thought of, such as when the confirmation and reminder emails would be sent out to students.
For my technician flows, I worked on different user scenarios that addressed the core technician needs.
As a group, we created sketches to get an idea of what the interface would look like & moved on to making high-fidelity wireframes and visual mockups on Adobe XD.
Early sketches to plan out the application
Low-fidelity mockups
High-fidelity iterations
After the prototyping phase, we decided to make the visual design guidelines to make sure that all design elements were consistent throughout the design process.
Due to time constraints, we were only able to do one round of user testing.
User testing was carried out using a clickable desktop prototype and as a team, we tested our product with our stakeholders which included 8 students, 3 technicians, and 1 administrator.
Our users accomplished tasks with ease and had no issues with navigation or finding the information they needed. During this process, we were looking for any pain points that the user may have come across, and any suggestions they could make about the flow or options available.
Based on several responses, the major issues we found were:
1. Onboarding explaining some of the benefits and basic use of the product would be helpful.
2. Different users wanted different features so a potential for a customizable dashboard view may be the solution for future iterations of the design.
I learned how important it is to design something while keeping practicality in mind and understanding your constraints and working well with them. Your skill sets should not be limited by it and you should always be on your toes because you never know what challenges are bound to pop up. Crafting the experience all the way from interviews, to testing, and to a finalized solution was an amazing learning experience.
Collaboration is crucial
Each of us took responsibility and focused mainly with our own user groups but always made sure to meet up twice a week with each other to ensure the product was consistent.
Empathize the users’ experience
Some design decisions may seem too obvious as a designer but may not be very obvious to the user. User testing enlightened us in making informed user-centric design decisions.
Reimagining how solo travelers meet and have memorable moments.
View Case Study
A mobile app designed to help new international students transition to new environments.
View Case Study
Redesigning the web user experience of a global non-profit organization.
View Case Study© Urvesh Patel 2021. All Rights Reserved.
