OVERVIEW
The Problem
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.
The Solution
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.
THE CHALLENGE
that is intuitive and efficient for students, technicians and the administration?
My Responsibilities
THE CHALLENGE
How might we design an equipment borrowing system that is intuitive and efficient for students, technicians and the administration?
My Responsibilities
FINAL SOLUTION
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.
Returning 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.
Returning 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.
RESEARCH
Who Are Our Users?
We 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.
THE PROCESS
Ideating the Experience
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.
Sitemap
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.
User Task Flows
Next, I created 3 main user task flows which helped to find 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 the technicians, I worked on different tasks/ user scenarios that addressed the core technician needs.
IDEATION
Designing concept sketches
When kicking off the design phase for this project, we identified and sketched a few design concepts that addressed our core issues. We got together as a team to brainstorm ideas and 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.
Wireframes and Mockups
Before moving on to the final solution, I led the team in creating high fidelity mockups but still fairly preliminary version of our wireframes. We explored different design possibilities. Here are the low-fidelity wireframes and high-fidelity mockups.
VISUAL DESIGN
Defining Style Guidelines
After creating the high-fidelity wireframes, we decided to make the visual design guidelines to make sure that all design elements were consistent throughout the design process.
Once our high-fidelity wireframes were complete, we all came together to create a quick design system for the platform. For SimplyTrak, we wanted to give it functional and trustworthy environment for our users, while following our university gold branding.
USER TESTING
Getting User Feedback
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:
- When it comes to the onboarding; maybe explaining some of the benefits and basic use of the product would be helpful.
- Different users wanted different features so a potential for a customizable dashboard view may be the solution for future iterations of the design.
REFLECTION
Project Takeaways
- 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. - Keep iterating.
Rushing into the final design only brings new issues. I learned that it is wise to plan and prioritize content and focus on designing one feature at a time and keep iterating on it until we reach to a reasonable and clear flow.