I absolutely LOVE 🌱 plants ✨, and was so excited to be the primary UX designer for the HerbUX Project, aiming to make herbarium data easily accessible to the public online. In this ambitious project I was tasked with creating a proposal for a new interface rebuilding the plant specimen discovery mechanism from the ground up.
UI Designer
UX Researcher
March 2021 - Present
Figma
User Interviews
Linked Open Data
Patrick Rasleigh
Rebecca Kartzinel, Ph.D.
Timothy Whitfeld, Ph.D.
Herbariums are physical collections of preserved plant specimens used for scientific study, representing a critical material history of ecological state and environmental change through time.
Herbarium specimens throughout the world have increasingly been digitized and made available online. The HerbUX project aims to design a prototype interface that increases access to these critical collections for non-expert audiences to be used in classrooms, museums, and other public spaces.
My team and I organized group interviews with three major subgroups– herbarium specialists, science educators, and museum specialists. I sent out a survey to our last subgroup, students, to collect over 400 responses from throughout Brown University and Providence, Rhode Island. From their responses we grouped common themes and identified the following painpoints:
Big words are intimidating
Scientific names can be confusing and completely unintelligible by people without specialized knowledge, making it difficult for them to search and read existing databases.
Lack of visual engagement
Visuals are integral for student engagement; educators pointed out the importance of working with specimen images rather than just spreadsheets of metadata.
Lack of personal investment
Without a professional investment, people rarely have reason to be interested in or to care enough about plants to want to know more about them and their history.
Explorations galore! We sought for alternatives to searching for plants by name, and I conducted a design audit of existing filter interfaces on different websites within and outside of academia. Below are low-fidelity prototypes exploring different search and filter mechanisms.
Low-fidelity exploration modeled after Apartments.com, enabling users to specify physical boundaries within which to conduct their search
Low-fidelity exploration modeled after Zappos.com, narrowing down search results via product attributes like size, color, model, etc.
Educators voiced a need for digital herbariums to be much more interactive, in order to be visually and mentally engaging. We wondered, What if we brought the physical interaction with an herbarium into the virtual space? We continued to incorporate this physical metaphor into every part of this web application.
Low-fidelity mock-up enabling users to make "stacks" and shuffle specimens like they would in-person physically.
Low-fidelity mockup putting plant images at the forefront of users' interaction with the application.
I explored different "Choose your own adventure" stepper flows to help ease non-professionals into the world of herbaria, highlighting ways that they could learn the significance of plants in their lives.
Low-fidelity prototype of leading students into herbarium collection through food
Low-fidelity prototype of leading students into herbarium collection through houseplants
With these sets of possible directions, we ran by each version to botanists and science educators for user testing and feedback. From their interactions we gained valuable insight and critique that:
One of our most central critiques was that while the Food Stepper and Houseplant Stepper, along with the other "Choose your own adventure" explorations, helped curate an interest in plants, they didn't facilitate an interest in herbariums specifically. An interest in plants isn't the same as an interest in herbariums, and we would have to explore a different method of easing students into the herbarium.
Educators voiced that in their current curriculum, they curate a collection of specimens for students to look at, and that set serves as the first introduction to herbarium samples. I decided to bring this existing workflow into the digital space, to enable educators to create collections of specimen to show students to ease them into herbaria.
Provides students points of entry through the guidance and curation of their educators.
Here was our final user flow for discovering and browsing plant specimens.
Deconstructed filter makes it easy to toggle between search mechanisms. Attention paid to visual design principles makes this much easier to use than traditional academia search catalogs.
Enabling users to manipulate and handle specimens like they would in a physical herbarium. And add annotations!
Users can search by map selection, time period on a chronological graph, and visualizations of plant families
Enabling educators to curate the surrounding data and story of their specimens, as well as the incorporation of external databases and information into local workbench. Provides students endless points of entry
I had never worked on such a big project before, with so many different moving parts. It really taught me how to break down such a huge problem into smaller issues and solve them individually, while maintaining a solid grasp on the bigger picture.
There are some common UI patterns that are popular for a reason, and it wasn’t necessary to redesign an identical function from the ground up. I spent a lot of time analyzing existing designs and understanding why they worked, and incorporating those principles into other patterns that needed an update.
At the beginning of the project, I made the mistake of not making my ideas into Figma components early, and lost some efficiency by having to go back to update everything individually while still solidifying a design system. Finally creating a design system early on saved me countless more hours and made it much easier to mass-tweak visual branding decisions to establish a cohesive presentation.