Dead River Coffee

January 10th, 2011

I’m very pleased to announce the roll out of an e-commerce web­site for Dead River Cof­fee. They are located down­town Mar­quette, Michi­gan and are the area’s pre­miere cof­fee roast­ers. Go ahead, ask any­body. For years, the only way to get your hands on their fresh roasted cof­fee beans was to drive down to their shop and pick it up. Now this great cof­fee is avail­able to the world at the click of a button.

Dead River Coffee

The site was designed with stark min­i­mal­ist inten­tion and a pur­pose­ful sim­plic­ity to invoke a sim­pler time. The color scheme con­sists of only black, gray, and cream. The back­ground is a tex­tured cream color. The logo at the top is the same logo they use to stamp on a plain brown bag before fill­ing it with the cof­fee beans of your choice. The logo, tag lines, page titles, and all other text are either black or gray.

Embell­ish­ments include the promi­nent use of tag lines in the header and footer, a large ring-shaped cof­fee stain in the upper left of the header, a cus­tom cof­fee cup with cof­fee stain under it that sep­a­rates the footer from the con­tent of each page, and the one pound and half pound bags full of beans that over­lap the pho­tos on the prod­uct pages.

Also fea­tured is a hor­i­zon­tal drop down nav­i­ga­tion menu located under the header, a three-column lay­out for the main page, and beau­ti­ful black and white pho­tos scat­tered through­out the site.

Word­Press was used as the CMS. Sev­eral things were made pos­si­ble by this includ­ing mov­able mod­ules and dynamic con­tent on the main page. The mov­able mod­ules are actu­ally text wid­gets that can be eas­ily rearranged or exchanged in the admin­is­tra­tion panel of Word­Press. Some of the con­tent on the main page is added dynam­i­cally by pulling con­tent from the “About” page and the “Order” page. Also, there is blog­ging func­tion­al­ity. The posts gets dis­played in the “lat­est news” section.

Dead River Coffee

I used some CSS styling tech­niques to make adding new pho­tos eas­ier. New pho­tos added to the main page are auto­mat­i­cally re-sized to match the width of the columns while still retain­ing their orig­i­nal ratio. Also, a thin dark bor­der is added to all pho­tos for consistency.

Last but not least, this is a fully func­tion­ing, fully inte­grated e-commerce site. The order­ing process works pre­cisely as one would expect. From each indi­vid­ual prod­uct page, or from the main order page that lists all prod­ucts, a vis­i­tor can select one-pound or half-pound as the size and hit the “add to cart” but­ton to begin the order­ing process.

A shop­ping cart opens up as a modal win­dow and dis­plays all items in the cart, quan­tity, price and subto­tal. It allows the vis­i­tor to mod­ify the quan­tity, and dis­plays an updated price and subto­tal. By press­ing the “check out” but­ton, the vis­i­tor is taken to the “check out” page which is fully inte­grated with the same look as the rest of the site.

From here, the vis­i­tor can securely enter their pri­vate infor­ma­tion. After fill­ing in the “City”, “State”, and “Postal Code” fields, ship­ping is auto­mat­i­cally cal­cu­lated and a new total is dis­played. By click­ing “con­firm your order” the trans­ac­tion is sent to be processed and the vis­i­tor is shown a receipt page they can print for their records. An email receipt is also sent to the visitor.

The lay­out was designed to be flex­i­ble and allow for growth of con­tent in the future. The site is being main­tained by Theo at Dead River Cof­fee so book­mark it and check back often for updates. Seri­ously, if you like fresh roasted cof­fee beans, this is the place for you!

Check out deadrivercoffee.com to see the web site for yourself.

Tags: , , , , , , ,

This entry was posted in the Web Design category.


Comments are closed.