Prototyping an interface

Keywords:

prototyping

For my user experience design class, I worked on a team to design a web platform for facilitating collaborative donation, Donatr. The interface saves donors time and energy, and makes donating goods to local centers a more accessible practice.

This project was my first time working through the interface design process, and familiarized me with wireframing, heuristic evaluations, cognitive walkthroughs, and usability testing. I quickly learned the difficulty of conveying complicated interactions through a paper prototype or even a wireframe, and found that the limitations of our various prototyping tools influenced what we presented in each prototype, and in turn how our users experienced the prototypes in testing. We also learned about the privacy and safety concerns that arise when developing an interface, including concerns around user-to-user communication channels and racism perpetuated through implicit bias. We did not have time to fully prototype and implement systems to ensure user privacy and safety, but this field would have been immediately necessary to research in future work.

The end product was a rough prototype of the interaction that would need many more hours of work to reach production-level quality. The interface wasn't anywhere near perfect, but I learned a lot and now feel more comfortable with the language and toolset used in the user experience design industry.

Conducting user research + developing personas

We conducted interviews with people who donate things and people who work for organizations that accept donations (think Goodwill, Habitat for Humanity ReStore, animal shelters, etc.). We found a recurring theme: donors were unsure of what goods donation centers accepted, and consequently, donation centers would receive goods they could not accept and were then responsible for disposing of those goods. We started to develop an interface that might ameliorate this situation by broadcasting the needs of the donation centers for potential donors in one central database, while keeping our user personas in mind.

Reconsidering the problem(s)

As we developed our user personas we saw there was a second need: the process of donating things needed to be generally easier. We pivoted our design concept to a platform that would allow users to find local donation centers, learn more about the centers and their causes, and then to schedule donation pick-ups by both donation center employees and volunteer drivers. We decided our project would most logically exist not as a mobile app, but as a website most frequently accessed on a mobile device.

Prototyping + evaluating our ideas

Our team developed a couple of these potential interfaces in tandem, then evaluated each using heuristics, cognitive walkthroughs, and usability tests. We eventually selected one concept to continue prototyping. Pictured here are interaction flow maps for two of our designs.

Learning new tools

Each prototyping tool we worked with had limitations: things that were difficult to visualize in a paper prototype or Figma prototype might be more effectively conveyed in our HTML/CSS/JS prototype, or vice versa.

Refining our designs

We simplified our designs and tried to make our interaction flows simpler and more intuitive. We thought critically about the hierarchy of information on each view. The end result was a rough prototype of the interface implemented in Javascript.