Round 3: Design Consistency
The third round of revisions concentrated on polishing the workflow based on user feedback and making the application look and feel more consistent and well-defined. Elements of material design were incorporated to give the application a consistent visual language and to make donating multiple items easier for users to understand by using a card metaphor
Mid-fidelity prototypes showing the decision, camera, category choice and pickup location screens
The importance of iterating
Over and over, the number of touches a user had to use to donate an item was whittled down. Could the location of the donation be filled in automatically to save time? Could a default pickup deadline be suggested? Each iteration tried to minimize the effort to donate an item. The importance of prototyping a solution, testing it on potential users, discussing the results, and applying them to the next round of testing can not be underestimated. Flows we thought were easy to understand turned out to be challenging, and features we thought were superfluous, such as backward navigation through the flow, turned out to be vital to making users feel comfortable with the design.
Half the solution
The other half of this solution was a web page for reuse organizations to use to claim these donations. The design of that site is beyond the scope of this page, but that website can be viewed at reusecentral.com
Round 2: Features and Flow
We decided to consolidate the best of the paper prototypes into a second round of testing. Since users loved being able to use their mobile device to take a picture and make a donation, we went forward with a mobile solution but added features from the two web versions as well. To help users who wanted to drop donations off, we created a separate flow for drop-offs. The prototypes for rounds two and three were created using PencilCase.
Flow diagram for donation pickup task
Low-fidelity prototypes: a simple mobile app, a web form, and a wizard
Camera, item details and category screens
Reuse Central helps donors make donations of reusable material more easily by allowing them to post items for donation to a website that can be seen by all member reuse organizations. Donors do not have to find the right organization for their materials, and reuse centers can see all the available donations and choose what they want to pick up.
The design was revised in later prototypes to use a card metaphor, which users found easier to understand.
david ralley © 2015 | All Rights Reserved
Final high fidelity mockups organized into a flow diagram
With Jamie Crawford, Nicole Navolio, Prasannavenkatesh Chandrasekar and Ming Zhang for Summer MHCI Capstone at Carnegie Mellon University
david ralley © 2017 | All Rights Reserved
High-fidelity screens, showing changes in design from the mid fidelity prototype
99 West South Street, Worthington, Ohio 614.296.2415 firstname.lastname@example.org
Picture first or description first?
My team had a long discussion about what the best workflow would be. Was it better to have users take a picture of the item they wanted to donate, or describe it and then take a picture? The latter made it easier for the user to understand what the photo they were choosing was for, but the former matched workflows in other applications that included taking pictures as part of their design. In the end, we added text to the camera screen to make it clear to the user that they were taking a photo of what they wanted to donate.
Lists vs. Cards
Early iterations of the design used a list to show which items the donor had already added to their donation, but in testing we found that users were unaware that they could add multiple items to a donation. Changing the lists to cards, which are part of material design, made the process clearer because the final card always said "add item"
Early designs used a list to show the items that had already been added to a donation, but users had a hard time adding additional items.
Research and Design
For Donors, donating items requires time and effort. Conversations with customers donating items at a local reuse center revealed that there were a number of struggles with donation compared to discarding. Since reuse centers only accept a specific list of items and that list can vary by season or inventory finding the right reuse center is difficult. Transporting items is challenging because donors don't have transportation, or are not able to transport large items.
For reuse organizations, communicating needs is difficult. Interviews with donation managers at reuse organizations revealed that they spend a lot of time fielding phone calls and emails from potential donors. They need to assess if an items is appropriate for their store, what its condition is, and if it is easily accessible for the crews doing pickups. They often lack full contact information for a donor, require a photo to make a judgment and have to play phone tag to arrange an appropriate pickup time.
Based on our preliminary research my team realized that if donors didn't have to find the right reuse center but could simply post their items for donation, that would simply their process. On the other side, if donors could provide half a dozen key pieces of information, then it would be much easier for reuse organizations to decide which items they wanted and to arrange a pickup.
Round 1: Paper prototypes
With our analysis in mind, we created three possible solutions. The first was a simple mobile app that allowed a donor to take a picture of an item and post it for pickup. Contact information and location could be pulled from the phone, so there were no cumbersome forms to complete. The second solution was a traditional web form that asked personal information up front and then asked users to attach a photo of the items they were donating. The third was a conversational set of screens that asked specific questions based on user responses to walk them through the donation process.