Fresh Tilled Soil Website

From fall 2016 through winter 2017, my team at Fresh Tilled Soil embarked on the toughest mission for any design agency: redesign our own website.

Live site here.

  • UX Design
  • Visual Design
  • Design System
Fresh Tilled Soil Process Diagram

Defining the Problem

Besides just needing a general refresh, the old Fresh website had become a Frankenstein of sorts. It contained years of random pieces being added on at will, with a lack of time to put enough thought into them.

Early on, we set expectations by discussing KPIs and general goals—the most important being to increase engagement (conversions) and to clearly explain who we are and what we do. Simple, right?

Fresh Website Home

Laying it out

Because we had a good foundational knowledge about our target users from past research sprints, the design team began with general site IA and navigation structure. After that, we sketched zone diagrams both collaboratively and independently.

Making Room For Play

While working on the website, we found ourselves in a unique situation, given the fact that we were evolving our brand at around the same time. We spent more time than we usually do (with client work) on the visual design phase, letting ourselves explore different aesthetic options.

Testing & Iteration

As soon as we felt we had a good amount of screens, we ran a few testing sessions with a mix of friends, past clients, and former employees. We tested for specific assumptions and known problems we were trying to solve. The feedback definitely kicked us in the right direction.

Fresh Website Testing
Fresh Website Broadridge Case Study

Building a Design System

One of my favorite parts of this process was taking the opportunity to flesh out the Fresh design language, which went hand in hand with my work on the Brand Guidelines. We almost always deliver a UI kit (static and/or coded) for client projects, so it was fun to redevelop our own.

Ours included base elements such as typography specs for desktop, tablet, and mobile sizes (created from a type scale), spacing specs (margin/padding), and the grid, as well as more complex modules found on specific pages.

Fresh UI Kit Modules

Adding a Layer of Delight

I spent some time on this project learning how to use Principle to demonstrate interaction/animation ideas to our developers who worked on the site. Most prominent is the Process Diagram, and there are a few on the case study pages as well. Many of them are still being added later this year (we launched with an MVP version of the site).

British Invasion Modules