Case Study: Climate Design System

New 2019 Climate FieldView Web Style Guide (scroll to see more)

About Climate FieldView

Climate FieldView uses big data to help farmers sustainably increase their productivity using digital tools. I am a product designer who believes our UI should match our industry-leading scientific insights. I came to San Francisco to build meaningful products like this.

TL;DR

I inherited a disjointed web app and a designer’s 1-sheet component artboard. I taught the design team new design tools which improved synchronization. I designed a bridge system that codified existing patterns. I convinced engineers to build my system in code. After shipping the bridge system, I laid the foundation for a full visual refresh. A visual designer and I built this system using Figma.

Problem

After multiple product pivots, Climate FieldView’s inconsistent UI styles inhibited product development and customer success.

Project Goal

Identify the underlying user and company needs for a design system. Then go build that system.

  • KPI: With engineers, build a design system that reduces bugs, reduces time to market, and brings consistency at scale.
  • KPI: Farmers have greater understanding, clarity, and accessibility using Climate FieldView’s web app.

Discovery

I audited Climate FieldView’s web app. I built a 72-page slide deck of inconsistencies, including typography, buttons, icons, tables, and more. I surprised the design team with my findings. One designer said:

“I had no idea how bad it was until I saw these slides”

Sample of OLD buttons/icons from Climate FieldView — Design Debt

Design System Readiness

Climate FieldView was at a crossroads 2017. Our science-powered product was moving forward. Our designers were busy researching. But our core experience suffered from inconsistency and accessibility problems. We weren’t ready for a full redesign. I needed to solidify our design intentions and build strategies for short (6 months) and long term solutions (24 months).

Roles

Product Owner: I owned the style guide for our web app. I worked on design, education, governance, and evangelism.

Team Structure

The Climate Corporation is led by teams in Science and Engineering. Design is up and coming. Our vertically-integrated teams shipped the org structure. The app’s inconsistent styles foreshadowed the disconnected services beneath the veneer. I became the horizontal glue to bring us together.

Collaboration

The project started in the skunkworks. Nothing official. I knew if engineering would build this design system, it must do one thing for Climate Engineers:

The Climate design system must be faster than grabbing random components off Github.

I found one advocate in engineering. He saw the value. This influential person was the key to get Engineering’s support.

Solution Definition

I would build a component library for official styles in Sketch. Engineers would build React-based components into a shared online library.

System Design

I was now ready for the classical part of the design process. I defined a north star. When things get weird, aim for the north star.

Design System North Star

  • Clear and Accessible. Meets WCAG 2.0 standards.
  • On-brand: speak to our customer. Our app is consistent.
  • Goal-oriented: Help farmers make decisions.

Research

I conducting and participating in usability studies to improve the design system. Individual studies were task-oriented. Participants were asked to complete a goal related to other product features. I noted when UI issues inhibited their success.

Accessibility

I focused on accessibility as a core customer need. I made sure color and text combinations were WCAG 2.0 compliant. Small gray text and minimalist controls went away.

Design System Example. I documented, clarified, and added new interactive states to existing components.

Map Accessibility

Climate FieldView lets farmers monitor their farm’s field conditions using satellite map visualizations. Map layers include crop type, rainfall, disease risk, and more.

Satellite image of Crop Yield map by area (in bushels per acre)
“If we can make it work for people with arthritis, it could be good for everybody.”

Atomic Design

Atomic design describes a taxonomy of smaller parts that make up a collective whole. Atomic colors, shapes, and spacing improved system clarity. My system enabled another designer to quickly create a login screen using atoms I built.

Modal Guidelines

I wrote guidelines for common interface elements such as modal views. I based the spacing of elements on an 8-point grid.

Design Tool Upgrade

Climate designers previously built interfaces with Adobe Illustrator. After joining I helped the team transition to Sketch + Zeplin. My prior team Sketch training sessions were about to pay off. I built my library using Sketch’s Library system. Now our design team of six could synchronize UI components across the team. I exported the guidelines to Zeplin for engineers and product managers.

I built and organized UI components into a Sketch Library

Development

Our project’s big break came after several months. The Engineering team started a separate project to refactor the web app for our international launch. They needed new fluid content blocks to support language translation. I jumped on this chance to implement my design system across the site.

Checkboxes: React UI Components in our new browser-based library made by Climate engineers

Release Guidelines

How would we update our system? Design would stack “breaking” changes in a 6-month release cycle. This gave engineers time to consider the system-wide impact. Engineers could deploy new components at any time with a simple JIRA ticket as their guide.

Design System release version guide
  • Breaking changes: Updates to the system including CSS box model changes (width, height, border, etc). Design and Engineering must meet to describe needs.
  • Non-breaking changes: New or simple component updates. Continuous deployment. Design opens a JIRA ticket with the request.

Design System 2.0

A visual designer and I started work on the next version in early 2019.

System 2.0 Icons

I organized, labeled, and QA’ed accessibility and consistency. I built the system into a component-based Figma library.

Design System 2.0 Icon sheet

Bring it to Life

Our visual designer made static UI mockups like this loading indicator (left). I brought the loader to life with CSS animation (right).

System 2.0 Additional Examples

Results

We launched the bridge system in 2018. This included a Sketch Library and a React Component Library.

Lessons Learned

Find Advocates

I found one engineer who wanted to move closer to design. One engineer led to two. I got this project off the ground with their help. Why do we avoid collaboration with teams from unfamiliar disciplines? Ego. We want to feel smart. Our silos hide knowledge gaps. Tech companies solving “non-tech” problems can’t survive in isolation. This project made me a strong collaborator.

Document Document Document

An agreeable conversation between design and engineering won’t get a product on the roadmap. That’s an agreement without commitment. Write a proposal. Add diagrams. Show both the how and the why. Add this information to JIRA. Then watch your hallway conversations move to planning.

Living Design System

Your system needs help. Encourage your team to contribute. This is a living product. New patterns and ideas come from everywhere. Other designers can explore unique solutions without constraints. Their ideas often only need a few tweaks to fit with the family. Design governance is part of the job.

Future Plans

We should improve app production quality with visual regression testing. This includes automated snapshots of the app to find style inconsistencies.

Tools & Resources

Unlisted

--

--

--

Product Designer. San Francisco Bay Area.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ben Kennerly

Ben Kennerly

Product Designer. San Francisco Bay Area.