Java! Java! Coffee Co

Project Description

eCommerce Website Design and Development for Coffee Company Based Out of Washington State

Project Onset

At efelle creative, we love working with local businesses. Java! Java! Coffee was established in the Cascade mountain range of Washington State—right in the heart of Maple Valley. We were jazzed to have the opportunity to design and develop an ecommerce website for this emerging brand.

Website Design Inspiration and Special Features

With their products once only available for wholesale, Java! Java! is new to the B2C ecommerce scene; as such, we felt it crucial to design a homepage with a lot of “punch” to it. Our design opens on a full-screen masthead image of an espresso machine dripping with delicious-looking coffee; a dark green translucent brush stroke sits atop the image and is crowned with bold white and gold mixed-font text; the copy emphasizes the brand’s vibe, location, and mission in a few short words.

On scroll, users are treated to a product introduction, as well as invitations to visit the Java! Java! drive-thru, to learn more about wholesale opportunities, to discover what the roasting process is all about, and more. The many content areas are not only branded beautifully, they help place Java! Java! squarely within the PNW community.

To emphasize the community connections further, we custom designed an “About” section for the Java! Java! team that gives them space to talk about their history, their team, and their values. A user-friendly navigation menu sits below the masthead area of each of these pages, making it easy for users to dig into the site and learn more about this awesome brand.

Their “Roastery” page is even cooler. It features an interactive map of the world with countries from where Java! Java! sources its beans highlighted in deep green. Users can hover over these locations to learn more about the types of beans grown in each region.

BigCommerce Store Design and Functionality (Emphasis on the "Fun")

The store pages are neatly organized. On the category overview pages, hover effects provide separation within the product grid while a below-the-masthead navigation menu makes it easy for users to hop between different areas of the store. Bold use of vast white space makes sure that the products remain in the spotlight, while a “Compare” feature makes it easy for users to retrieve quick-glance information of multiple products at one time.

We added custom flair throughout the website in the form of parallax scrolling, fun hover effects, and on-scroll animations. These small details help will help set Java! Java! apart from other coffee websites—no small feat considering the world of coffee design and marketing has become singularly competitive.