Cocoa Casa

Chocolated website

CocoaCasa is a shopping website that I worked on throughout the past year. Focusing on a fictional chocolate seller's strategy and products, I imagined the company's identity and made a website out of it. You can check the result here.

cocoa casa logo-

Concept

For this project I had a precise planning and followed three main steps: prototyping, designing and coding. The main content was provided and it was my job to present it to help the service stand out. In order to do that, I was free to create a visual identity (colors, logos, typos) and had to imagine a series of logos to illustrate the production steps.

Cocoa website mockup on macbook

From wireframes..

The first phase of this exercice was to define a purpose. Beeing a shopping website, it seemed logic to me the purpose was to sell products, and get people to subscribe so they come back again. To accomplish this, I wireframed each pages to arrange the elements together and iterated a few times to find the right setup.

Home page wireframeProducts page wireframe

..to design and code

As a second step, I had to imagine the company's visual identity to be able to present it in a website. The first step I took was to create a logo for Cocoa Casa because it allowed me to start defining colors, fonts and a general feeling. Of course that same feeling would have to be persistent throughout the website.

Three logo design steps.

Next, I applied what I felt was the continuation of the logo to my wireframes. This allowed me to get a first look at the website as a whole and see what was right or wrong to make quick changes.

I also created a series of icons to present the company's production processes and made variations to use throughout the website.

Coded home page

If you haven't done so already, you can check out Cocoa Casa live.