Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
28th December 2012

The art of selling chocolate online

Florida-based Station Four reveal the secrets behind revamping and adding consistency and functionality to the Peterbrooke Chocolatiers brand

The art of selling chocolate online
L-R: Sean Collins – UX Engineer, Mac Grossman – senior designer, Chris Lahey – director of development, Chris Olberding – partner and CEO, Katharine Berry – production manager

Project – Peterbrooke Chocolatier | Web – www.peterbrooke.com | Company – Station Four | Web – www.stationfour.com

Chris Olberding: “Earlier in 2012, another client of ours, Hickory Foods, completed the purchase of Peterbrooke Chocolatiers, and they brought us in to discuss the state of their new acquisition’s web presence.
“The Peterbrooke website Hickory Foods inherited had inconsistent brand usage, confusing organisation, and a weak overall design. The site ran an old version of Magento Community Edition, which bloated the database so badly the host would shut the site down every few days.
“Peterbrooke was preparing to show a chocolate high-heel on Good Morning America to promote the Oscars afterparty, and came to us needing something fast.
“Our first step was to stabilise the current website long enough for us to create a new one. We wrote a script that cleaned up the database nightly, which at least ensured the website wouldn’t regularly crash.
“The project posed a challenge, as we were working on a tight deadline with a recently acquired brand undergoing a transition in management. We were fortunate to have worked with Hickory Foods before. Their trust in our talent and ability to deliver a polished product allowed us to streamline our typical process.
“Given the constraints, we used Magento’s hosted eCommerce solution, Magento Go, which would allow an easier migration of product data from the current site, making for a smooth transition for the admins, and simplify deployment. Given Peterbrooke’s long term goals and Go’s limitations, we understood this to be a temporary solution.”

The art of selling chocolate online

CONCEPT

Ensuring that visitors understood the brand was critical to the ethos behind the site. Station Four decided to go ‘big’ on the brand’s gourmet aspect
Olberding: “Peterbrooke has an ever-growing number of franchises and store locations, so in addition to increasing online sales, the website needed to establish and promote the Peterbrooke brand. Also, as you would expect, Peterbrooke’s sales are highly seasonal. Early on, we knew we wanted to do something ‘big’ that would quickly convey the fun yet gourmet aspects of the Peterbrooke brand. High-quality chocolate is an emotional buy for individual customers. In most cases, it’s being purchased for a loved one for a holiday, a birthday, or an anniversary. Our goal was to show the final presentation of the products and try to get users to connect with the brand. In a lot of ways it’s similar to marketing jewellery – the higher quality and price represented by the brand is sometimes as important as the gift itself.
“Station Four took the lead on the strategic and creative direction for the new website. Mac and I brainstormed and sketched out some concepts, and eventually decided a large 3D shelf that the products would sit on would allow us to showcase a continually changing product line. We also liked the idea of changing colour in the type and navigation to fit with the background colour of each individual slide.”

The art of selling chocolate online

DESIGN

The core focus had to be the product, and a host of assets from a catalogue photoshoot accompanied by targeted promotions, ensured a well-presented products
Mac Grossman: “Our first design step, as it is on most of our web projects, was to create a set of wireframes that would help us envision both the layout and tone of the new website. Right from the start, we knew we’d want to put the focus on the products, so we structured the homepage to feature a large banner that would rotate through seasonal chocolate and promotions. We were provided with a ton of assets from their catalogue photoshoot, and we put them to good use by developing a cache of holiday banners so we can drop in a new one when the seasons change. After we nailed down the overall look of the design with the homepage, we worked on translating that aesthetic across the board. Since this was an eCommerce project, there was special attention paid to both the category and product pages. We put a particular importance on the selection of chocolate type (ie milk chocolate, dark chocolate, etc) at the category level and developed a selectable filter that allowed a user to search for just the right product. We organised the product detail page to be as user-friendly as possible, by featuring a big product image as well as an easy ‘add to cart’ process. This light product detail approach we believe helps to convert users in to sales.”

The art of selling chocolate online

BUILD

The Peterbrooke Chocolatier eCommerce presence was built with the Magneto Go platform. A separate HTML/CSS standalone site provided an easy option for dropping in styles and markup
Grossman: “Due to our established project constraints, we knew we would be working within the structure of a hosted environment. So to make sure we could integrate the details we outlined in our designs, we quickly coded an HTML/CSS standalone site. This would aid us later by giving us the ability to drop in existing styles and markup within the Magento Go platform to achieve a spot-on design integration. In addition, many hosted eCommerce solutions don’t offer great support in terms of development environments. Having the standalone website allows us to tweak and perfect the skeleton of the website before we start mucking around with the extra code generated by Magento Go.
“Magento Go being a hosted solution meant we didn’t have access to as many files and folders that were necessary in making changes to the core functionality. This was both beneficial and difficult in a few ways. We took our standalone HTML pages and implemented them through their themes editor rather quickly; however, working with the WYSIWYG and CSS editor can be a pain, because it isn’t as easy to save and view changes as it is when you are using your local machine. Some other complications we ran into regarding the hosted environment were dealing with additional functionality such as cross platform @font-face and custom jQuery. These took some extra time to implement and debug because we were working with a server that we didn’t have full access to, as well as dealing with issues regarding the HTTP and HTTPS portions of the secure checkout.
“Furthermore, required custom development wasn’t possible out of the box, but we were able to modify and work with the solutions offered through the Magento Go extension library to achieve the project’s initial requirements. Overall, we are happy with the outcome. We were able to successfully transplant our design and the backend of the site runs perfectly, allowing Peterbrooke to have full control over the multitude of eCommerce resources provided by Magento.”

THE LAUNCH

Olberding: “The launch of the store was fairly painless, which is one of the reasons we went with a hosted platform. When we use the off-the-shelf version of Magento to redesign an existing eCommerce website, we insist on weeks, if not months, of testing to ensure a seamless transition to avoid any hiccups.
“Hickory Foods has been cross-marketing Peterbrooke with their other brands at events around the country, distributing coupons that are redeemable on the new website. Combined with increased sales through the website and higher brand recognition Peterbrooke is planning to expand their stores and franchises nationally. We have received a lot of positive feedback from administrators of the website and the management at Hickory Foods, as well as customers using the new site. Over the next year we plan on working with Peterbrooke to migrate the website to a more sophisticated platform that will allow for better integration with their order management process and social marketing efforts.”

The art of selling chocolate online

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.goodchocolatemagazine.com Good Chocolate Magazine

      Interesting article with useful advice for chocolate companies wanting to sell online. As a regular Pinterest user my advice to websites selling chocolate would be to use good quality photographs that can be easily shared. There are many chocolate companies missing out on traffic from Pinterest and other social sites because they either have poor quality pictures which are not attractive to pinners or they are using technology which does not allow pinning (flash for example).

    • http://webdesigncompany24x7.com/ web development us

      Wow. Great information that you have shared.Thanks for sharing your website.

    • http://www.facebook.com/desmaakrepubliek Julie

      Would be interested to know how well this new site is working. To me it seems to be missing various essentials,
      Details of ingredients… for health conscious people.
      Details of weight offered… for price conscious people.
      Option to continue shopping from the checkout page.

      But it looks good, wish I could afford that sort of team.