Intern project for bitspire

Concept, Branding, Web

Mockups by GraphicBurger 
Photos by and Deathtostock

In 2014 I created a concept for a coffee based E-Commerce website.
The goal was to create a shop which can be used for storytelling E-Commerce, which means that it has well designed image rich content pages which include product placements. As I did not want to use any existing brand or product I decided to create my own product environment.
At this time I worked with the bitspire team, however the company was still called »magic labs*«.
This lead to »magic*coffee« for being the name of my newly created fictive coffee brand.

It was plannend that my design would serve as a developed demo for a mobile-first responsive storytelling webshop. Unfortunately it never went online at this point of time.

To be able to create a visual appealing webshop I needed to establish a fictive brand environment — therefore I created the logo, various mood pictures and product shots.
The mood images were important for creating emotional visuals. By using key elements like color, products and coffee related objects I crafted a consistent brand out of unrelated sources.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

In addition to the imagery I thought of other elements and concepts to use on the website. I produced product images for roughly 10 different products. Also I used the mood pictures to display that magic*coffee has a local coffee shop.
A new addition was a fictive cup design contest — a regularly contest inviting local artists to submit a coffee cup design. This was a great excuse for having many different cup designs (
because too much orange, duh). 
As you, dear reader, might realize by now, there were plenty of ideas for filling the website with cool content. 


I designed various screens with a minimalistic approach including full screen sections and large imagery. The shop was planned to be fully responsive, so I designed it to be mobile-first and used 3 example breakpoints (phone portrait, tablet portrait, large desktop).