Duration 7 months
Team 6 designers, 12 developers
Role User Research, Wireframe Design, Prototyping, Usability Testing
Tools Figma
Waymakers is a non-profit organization that guides crime victims through recovery by providing emergency supplies, crisis response efforts, and emergency hotline support.
I had a great experience learning and working with a team of designers and developers. Our project's goal was to design a system for Waymakers administrators to manage inventory, volunteers, and events.
Waymakers relies on paper records to manage inventory and volunteers. This is inefficient as only one person can access and update information at a time. An online management system can provide a better user experience by increasing access to information for multiple administrators at once, helping the organization work faster and more accurately.
How might we design a platform for administrators to effortlessly manage inventory, volunteers, and events?
.png)
To understand our users, we conducted user interviews with the Waymakers administrators to learn about their day-to-day actions and pain points. They revealed that they use paper records to track and update inventory at different warehouses. They also used paper records of volunteer data and contact information. When they needed to call or email a volunteer about their availability, they would have to search through their paper records.
From this, we determined the user needs below.
IDEATION
Based on the defined user needs, we brainstormed required system functionalities.
IDEATION
IDEATION
DESIGN
We learned that a typical user would update the inventory while going from aisle to aisle in the warehouse, and there were many item categories. To make switching between categories easy in one to two clicks, we implemented a carousel. We also added the All Categories section to give the user the ability to update inventory without selecting a specific category.
One consideration for future design is whether or not a user needs to view inventory from multiple categories at the same time. The search and filtering functionality can also be developed further. Below are different explorations for category designs and the final design we decided on.
DESIGN
For the inventory page, the user needed to edit and view items across divisions. Our final solution implemented a simple drop down menu. Since the user would typically work out of one division, we decided to hide inactive divisions to let them focus on the inventory underneath. We implemented the same drop down menu for warehouses to keep the actions visually and logically consistent.
Below are explorations for displaying the different divisions and our final design.
DESIGN
Another functionality administrators need is managing volunteer events. Our final design allows users to quickly sort the calendar by week and month, view each event's details, and add/edit events. Previous iterations omitted elements such as changing between day/week/month views and multi-day calendar events.
DESIGN
We created a dashboard to give administrators an overview of inventory, availability, and events. Through iterating, we decreased the number of actions available to the user, making the dashboard a launching pad to other pages in the platform instead of a page where actions occurred.
I facilitated 3 usability tests to get feedback on the admin dashboard designs. Below are some updates that occurred due to user feedback.
FEATURES
.png)
FEATURES
.png)
.png)
FEATURES
.png)
FEATURES
.png)
After working alongside users and developers, we created a web-based management system that is responsive on desktop and mobile. Accessible navigation allows users to jump between pages efficiently and multiple CTAs guide users to completing their tasks.
At the project completion, we handed off the system to the Waymakers staff and provided them with a user guide as documentation. It was a rewarding experience to see their excitement and know that this new system would help simplify their everyday work.
Importance of a Component Library
We created a library for navigation bars, drop down menus, buttons, and other frequently used components. This was my first time using a component library and I was amazed at how much time was saved. Instead of copy pasting changes to each component instance, we could change one parent component to change all child components as well. This also ensured that our components were standardized across all screens. Note to self: component library = must-have in future projects.
Involve the Stakeholders
I learned that involving the stakeholders when possible is important to get a fresh perspective. For example, the Waymakers team expressed high interest in the inventory page because it would allow them to log inventory on their phones instead of lugging around a large folder. Knowing this, we ensured the page (and the rest of the system) was responsive on mobile devices.
Communicate with Developers
Though we had weekly meetings with our developers, there were instances where the developers would get confused on what changes needed to be made. Since the design was constantly changing on Figma, it was hard to keep track of what was new and what was old. To solve this, we could have implemented a design handoff tool such as Zeplin, developed a schedule for handoffs, or separated different revisions within Figma.
Work as a Team
I’m grateful to have worked with my team of hardworking designers. In countless design meetings, we bounced ideas off each other, proposed our opinions, and collaborated on our designs. It was motivating to have multiple brains - when I got stuck, my team members stepped in to help, and vice versa. I truly enjoyed working on this team and I’m proud of the work we accomplished!