Close

Project Background

In the simplest terms, eFowl is the Amazon of buying birds (fowl) and the equipment needed to care for them.

eFowl’s primary goal is to connect hatcheries and customers all over the country, and make it easy for anyone to begin owning and caring for chickens and other birds. With over 30 vendors already a part of the eFowl family and hundreds of thousands of customers, the website that had gotten their business started was quickly running out of steam.

Client Goals

A lack of responsiveness, clearly guided user shopping experiences, and a need for a refreshed user interface were the motivating factors that prompted eFowl to hire Fireant studio to rebuild their entire online infrastructure.

My Role

My role in the project was the lead digital Art Director. I was involved in the project from the beginning working with the rest of the Fireant team to strategize user workflows, whiteboard ideas, and address all difficulties that came with building information architecture at this scale.

Additionally, when design for this project began, I had just completed rebranding eFowl and used the branding project as a springboard to quickly identify and create a visual language for the project.

Project Process

As with most web-based projects I or Fireant studio takes on, the project workflow was a standard one that led our clients from initial ideation through the product launch.

Process Steps

  • Ideation / Discovery
  • Wireframe
  • Refinement / Testing
  • High-Fidelity Comps
  • Refinement / Testing
  • Development
  • Launch

INTERACTIVE WIREFRAME

The eFowl website began as an interactive, clickable wireframe that laid out the basic user interactions. This prototype was integral in testing user interactions, assessing weak points in the checkout process, and developing better a better user experience.

HIGH-RESOLUTION COMP

Once the wireframes were finalized, I moved into designing high-fidelity comps that became a full-site interactive prototype (built with Invision).

Development

After completing and testing the interactive prototype, we began the web development. The site was built in Wordpress and used SCSS for the styling. My role in this phase was to do much of the front-end development. I created all the site’s visual standards (from responsive typography to icons, to developing the individual components that were repeated throughout the site).

Project Highlights

Guiding the user into the right bundles of products.

There are specific points in this process that I believe deserve special attention as they were integral in making the user experience and overall usability of the site as streamlined as possible.

Among the most challenging parts of selling live birds on the internet are the shipping limitations presented by the USPS and the hatcheries. As example, a customer may be looking for Rhode Island Red Chickens, which are sold by Cackle Hatchery. But Cackle requires at least 3 of that specific breed be purchased together in order to provide safe shipping conditions (chickens need to bundle together in transit to stay warm enough to survive). But the USPS may require at least 3 more birds of any kind be purchased together for that specific travel route. But if the customer selects one that doesn’t travel well with the bird they’re looking for, it doesn’t help the situation at all.

All that said, these are nuances to chicken-buying that a customer doesn’t care about at all. They just want to know what chickens to buy and when they’ll be showing up. And they want to do that as quickly as possible. As much fun as ecommerce is for the customer, no one enjoys being on an ecommerce site any longer than they have to.

We helped users accomplish this need in numerous ways:

Highlight #1:

Quickly Adding Items To The Cart

We allowed customers to add products to their cart directly from the product landing without having to go to a detail page and go directly from there to checkout.

Highlight #2:

Modals Guiding The User To Purchase

When a customer does add a product to their cart, a slid-in modal appears confirming the product is in stock and in their cart and provides users with a list of all the other birds they could use to help meet their order minimum.

Highlight #3:

Pointing To Complimentary Products

On any product detail page, a list of products that would help fulfill that product’s order minimum appear at the bottom of the page. This allows users to successfully plan out their orders and have appropriate expectations before making a purchase decision.

Highlight #4:

Customizable Hatch Dates

When checking out, we give users the ability to confirm their hatch / ship date for each vendor they’re purchasing from so they can know exactly when the birds will arrive.

My Growth

Throughout the design and development process, I had numerous opportunities to grow and learn as a designer and developer.

Strategy

Strategizing and planning for an site infrastructure that could grow and expand over time gave me an opportunity to think of systems as an ever-expanding entity. Always plan for the future, don’t just meet the immediate need.

UI / UX Design

Designing for online shoppers that are often impatient gave me more experience in streamlining user journeys. I helped create a shopping experience that gave customers the easiest possible way to buy the product they’re looking for. The new UI / UX of eFowl gives them the best opportunity do so as quickly as possible.

Visual Language Development

Working on a digital platform immediately after finishing a rebranding project gave me the opportunity to put the branding to the test, expand the visual language, and put the brand standards I wrote into practice.

Want to see more?

Check out the portfolio quick-looks for the work I’ve done with eFowl.

Read Another Case Study:

Read about designing, developing, and launching Lisstr in one month.

Go top