Research

Improving air quality

Co-designing with doulas

Creating meaningful metrics

Adapting wayfinding


Design

Fostering slow conversation

Playing in public

Reinventing the library

Designing an exhibit


User Experience

Telling the Soofa story

Prototyping an interface


Art

Making eye contact

Printmaking





About

Gabrielle Clarke is a human-centered designer, design researcher, and strategist from San Diego, California. She graduated from Olin College of Engineering in 2018 with a degree in engineering and a concentration in human-centered design. She loves thinking about challenging problems at the system level, and also refining small details.


Resume / Linkedin

︎︎︎

Prototyping an interface

An introduction to the user experience design process.

A paper prototype shows a hypothetical flow starting at the website homepage.



Challenge

My user experience design class was intended to guide students through the interface design process, from user research through ideation, interface wireframing, heuristic evaluations, cognitive walkthroughs, and usability testing. We were asked to find a user group and prototype an interface that would address a need in their lives. My team sought to make the process of donating goods easier for donors and organizations.



Objective 

Develop an interface that eases the process of donating goods to local organizations.



Research approach

We conducted interviews with people who donate things and people who work for organizations that accept donations (Goodwill, Habitat for Humanity ReStore, animal shelters, etc.).



Key insight

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.



Design approach

To address this lack of effective communication, we developed an interface that broadcasted the needs of the donation centers in one central database.



Pivot

As we further developed 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.


Interaction flow maps for two of our designs.


Prototype evaluation

We simultaneously developed multiple interfaces, then evaluated each using heuristics, cognitive walkthroughs, and usability tests. We eventually selected one concept to continue prototyping. 


GIF showing a volunteer-side interaction selecting donation pick-ups.
We moved from paper prototypes, to clickable figma prototypes, to semi-functional JavaScript prototypes.

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. 

I learned that the limitations of our prototyping tools influenced what we presented in each prototype, and in turn how our users experienced the prototypes in testing.


An explanation of the hierarchy of information on a screen from our final prototype.

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.


Result

The end result was a Javascript prototype for  aweb platform facilitating collaborative donation, Donatr. The interface was intended to save donors time and energy, and makes donating goods to local centers a more accessible practice.




More details

Keywords: user research, environment and experience design, prototyping

User experience designer, 09/2017 — 12/2017
User Experience Design
Olin College of Engineering

Team: Sean Foley, Jordan Van Duyne, Rachel Yang