UX / UI designer & researcher

Project Plantae

envisioning a digital design system data-driven botanical experiences

The Challenge

I was tasked with inventing a fictitious organization, designing its digital identity system, and then applying that system to a set of deliverables to demonstrate the organization's touchpoints. This project evolved quickly from a class project into a personal passion project.

Proposed Solution

I designed deliverables for Project Plantae, a fictitious  organization that illuminates plants' quiet complexity by translating plant biodata into multisensory displays, exhibitions and experiences.

My chosen deliverables included:

  • Responsive website design
  • Atomic web design pattern library

Project Details

Timeline - 6 Weeks

Capabilities - Responsive Web Design / UX / UI

Tools - Sketch / XD / Miro / Illustrator

Context - Class Project turned passion project

Project Plantae

Project Plantae is an organization that illuminates plants' quiet complexity by translating plant biodata into multisensory displays, exhibitions and experiences.

Discovering Project Plantae

I've long been fascinated by the intersection of biology, technology, and design.

I was given complete liberty over the subject of this project. I've always been inspired by nature, especially when I was a child. As I've gotten older, I've recognized technology's constant attempts to interfere with, and even sever that relationship. I began thinking about how technology might be leveraged to connect people to nature, rather than be the force that disconnects us from it. 

I narrowed my focus from nature to plants because plants, in many cases, are the most accessible piece of nature that would resonate with the most people.

It started with a question:

How might the organization leverage technology to connect people with plants in an unexpected way?

Envisioning a digital design system for data-driven botanical experiences

Research & Conceptualization

I let my inner biology nerd run wild

To answer this question, I first had to understand what makes plants so amazing in the first place. After several hours down the plant science rabbit hole, I came across the idea of biosignaling. Basically, biosignals are electrical impulses that occur throughout a plant. Pretty neat, huh?

I discovered that, by monitoring biosignals (electrochemical signals in plants), greenhouses and plant-keepers can monitor plants’ responses to their environment. Many devices exist to monitor and graph biosignaling data.

What if plants were artists?

But what if this data served a less practical, more artistic purpose? What if, by augmenting plants' habitats with biodata-controlled light & sound equipment, they became a sort of living data visualization? (of which plants would be the artists)

With further research, I was excited to find that Data Garden had a similar idea. However, Data Garden focus primarily on live streaming music generated by a single plant. I considered how this idea could expand to inspire a larger ecosystem of both physical and digital audio/visual experiences - all generated by plant data.

And that's how Project Plantae was born.

Mapping the Ecosystem

To get a better sense of Project Plantae's mission, vision, and core touch-points, I created a concept map.

From the map, I identified two primary primary touch-points by which people can interact with Project Plantae:

Physical - Exhibitions & Events, held at botanical gardens & public green spaces

Digital - Plant Live Stream (located on Project Plantae's website)

These touch-points would be represented on Project Plantae's website.

Project Plantae Ecosystem Map

Project Plantae Ecosystem Map

Web Design Strategy

Website Design Goals

Though Project Plantae is a fictitous organization, I wanted to treat it like a real client. This meant considering its business goals and users' needs. 

I started by identifying Project Plantae's value proposition and primary CTA, as the website's design would revolve around these ideas. 

Value Proposition - Speak Plant

Primary CTAVisit an Exhibit

Website Design Goals:

  • Craft a unique digital identity for Project Plantae
  • Explain the who Project Plantae is, what they do, and why they do it.
  • Design the website to function beautifully across all devices

Defining Information Architecture

With Project Plantae's mission vision, and primary CTA in mind, I inventoried and categorized content that would be necessary to support / demonstrate these ideas.

Card Sort

The primary goal of this exercise was to understand the website's structure and identify the the most important pages to create first.

I scoured the web for organizations with similar ideals / missions / subject matters. I made a large list of content items that Project Plantae might share with them. Then, I organized these with a card sort.  I ended up with 7 categories, which became tabs on the website's primary navigation bar.

Resulting Categories

  • Home
  • Events & Exhibitions
  • Plant Live Stream
  • Learn
  • About
  • Contact
  • Journal

I decided to focus on Designing the Home and Live Stream pages first, as these would best demonstrate the organization's touchpoints.

Project Plantae Website

Home Page

This page provides a high-level overview of what Project Plantae does, its value proposition, and call-to-action

Home Page Hero

Home Page Hero

Plant Live Stream Page

This serves as the home page for Project Plantae's digital touchpoint, a live feed of live data visualizations, streaming from plants across the country.

Plant Stream Page Hero

Plant Stream Page Hero

But wait, there's more!
full screen designs coming soon.
Identity & Visual Design Strategy

Visual Identity Design Goals

Project Plantae's visual identity would illuminate and support its messaging. I outlined the following goals:

  • Create a sense of blending between organic / natural & digital
  • Evoke a sense of whimsy & mystery
  • Convey a sense of natural energy / life force
  • Create a sense of immersion in the content

Visual Design Strategy

During this phase, I pushed myself to embrace experimentation and try tools and techniques I hadn't before. This led to quite a few happy accidents :)

Envisioning a digital design system for data-driven botanical experiences

Image Treatment

Plants x Data = Magic

One of the website's defining characteristics is its image treatment. By layering and blending photographs with vibrant colors, gradients, and line art, I developed a unique art style that blends the organic with the digital to capture the mystery and wonder of Project Plantae's installations.

Style Tile for Project Plantae's website

Style Tile for Project Plantae's website

Visual Design

Style Tile

Creating Style Tiles helped me formalize my visual experiments  and consider how they might work within a system. 

Design Decision Justification

Image Treatment - Evokes mystery & whimsy & merges the natural and digital in an unexpected way

Color Palette - Vibrant, bright & whimsical, yet accessible

Gradients - Convey movement, energy & light

Typography - FF Cocon’s organic, leaf-like curves have a lively energy about them that make this typeface function beautifully as Project Plantae’s display face. Source Sans Pro compliments it as a reliable, legible web text face.

Button StylingButtons with mixed corner radii evoke an organic energy & allude to FF Cocon's leaf-like curves

Designing a System

Atomic Design

Atoms, Molecules, and Organisms...oh my!

I designed Project Plantae's web design system based on the Atomic Design Methodology, ensuring that the system was accessible and could scale to accommodate a wide variety of content. The Project Plantae pattern library includes style guidelines like colors and typography, along with UI components (buttons, form fields, galleries, etc.

This project is a work in progress.

check back soon for more :)