Published on | Prototyping: From UX to Front End — Medium David Y. Soards

Representing a Unique Business Model Using Illustrations

Jared Wilkinson has a very unique business. He is a trained chef with 18 years experience. Several years ago, he fell in love with farming as well. Instead of just selling his homegrown produce, he began turning his harvest into fully prepared meals.

Goals, Needs & Design Requirements

The old website had too many pages, but not enough content.

Duck Duck Beet Farm & Kitchen was operating on a weekly opt-in subscription model. They had a website, but customers could not use it to place orders and it was not mobile responsive. Jared was switching to an À la carte style menu and needed a fully functional Ecommerce website. Processing all of the orders each week through back and forth emails had become overwhelming. He also wanted a website that worked on smartphones and tablets, as well as desktop computers.

I met with Jared in order to learn more about his business, customers, competitors and needs for a website. I compiled the following lists of Goals, Needs, and Design Requirements for the new site in my trusty OneNote app. The lists helped to keep me on track throughout the entire design and development process. I am happy to say that I was able to check every item off at the end.

Content Inventory

In addition to the Goals, Needs, and Requirements, I created a short Content Inventory in Excel. The spreadsheet lists the Pages and Core Assets of the website along with a short description and the items required for each one.

Wireframe

Next I drew a basic wireframe of my idea for the home page. One of our goals for the website was to attract new customers. I was searching for a way to explain Jared’s business to someone new in the most simple and direct way possible. My solution was to create three illustrations that represented his business model in three simple steps.

We Farm
We Cook
We Deliver

My wireframe shows the 1–2–3 concept for desktop and mobile with several Calls To Action and a basic navigation menu.

Illustrations

I knew that the illustrations, if done right, would be something that would catch people’s attention and hopefully peak their interest in Duck Duck Beet. My first attempts were in more of a Comic Book art style. They were fairly simple line drawings, but still a bit too detailed for the purpose of this home page. Eventually I settled on a more cartoony vector art style that is just abstract enough to make it extremely relatable but still obviously a caricature of Jared himself.

An early ink drawing before settling on the final vector art style.

I was searching for a way to explain Jared’s business to someone new in the most simple and direct way possible. My solution was to create three illustrations that represented his business model in three simple steps. We Farm, We Cook, We Deliver.

From Analog to Digital

My initial sketches were done on newsprint paper with a Conte Sketching Pencil. I then scanned in my sketches and traced them in Adobe Illustrator using shapes, the pathfinder palette, and the pen tool. I incorporated the green and magenta colors from the Duck Duck Beet logo where appropriate and complimented them with subtle shades of violet in the background.

Ironically, my illustrations for the Duck Duck Beet website were influenced by Jon Hick’s recent work for Duck Duck Go.

Iconography

After speaking with Jared and several of his customers, I determined that there were essentially four main reasons why people loved Duck Duck Beet. It is healthy. It is locally grown and sourced. It is convenient, and most importantly the food is delicious! In order to showcase these qualities I created four icons to represent the top four reasons customers love Jared’s business.

Pages and Content

Once the graphics were finished it was just a matter of creating the pages from the Content Inventory and plugging in the necessary content. Although I did make a few changes along the way, including the decision to not create a separate page for Catering Services. Instead, I opted to include information about catering on the home page.

I continued to use the same colors from Jared’s logo throughout the website. Magenta is the main color and green is used for links and buttons. The designer of Jared’s logo used two different weights of Gotham. I chose to use different weights of Montserrat for both the headings and the text of the site. Montserrat is a really nice Google font and is very similar to Gotham. I tried using a serif font that contrasted well with Gotham for either the headings or the text, but I did not like the result.

I built duckduckbeetfarm.com using WordPress and the Woocommerce plug-in. I used my absolute favorite theme, Beaver Builder, a large amount of custom CSS, and little bit of PHP to style the site. WordPress and Woocommerce made it easy to hand off the website to my customer once it was finished. After a single sit-down meeting my client, an amazing chef and very capable farmer but definitely not a computer engineer, was adding and removing menu items with pictures and text, and processing orders with no problem at all. At one point he even said, “That was a lot easier than I thought it was going to be.”

I’m very proud of the work I did on this project, and I’m very happy to have improved the User Experience of both the customers and the owner of Duck Duck Beet Farm & Kitchen.

Pro Tip: Always give the Add to cart button its own unique color.

Take a look at the site using the link below. And if you are in the Louisville, Kentucky area, you can try some of Jared’s delicious and healthy food.

duckduckbeetfarm.com

Thanks for reading!

You can view more of my recent work by clicking the button below.

Building an Ecommerce Website for a Farm to Table Business was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Building an Ecommerce Website for a Farm to Table Business

Cool stuff, every week

More Articles