Bit Relish Case Study

BitRelish-Header.jpg

Overview

Thought I’d share a quick wireframe and art asset kit I made for a pickle-themed technology company. The project brief called for wireframes, icons, and custom illustrations which play off the concept of pickles+technology. The copy had a playful tone and used several tasty food metaphors. There wasn’t a lot to the site, so much of the project would require supporting illustrations. It was suitably strange and exciting, so I wanted to post some of the process here.

Often times designers will only receive a logo and website copy (if lucky). Such was the case with this project. The only art asset provided was the company logo — a pickle.

 
The company logo, provided by Bit Relish.

The company logo, provided by Bit Relish.

 
 

1. Icons

The company logo is a literal pickle, so to help tie the design elements together I created a slice of pickle that could be used as a supporting motif. It could work well for repeating backgrounds, printed collateral, and if simplified further it would make a nice favicon.

 
pickle-slice@4x.png
 

The first three icons highlight the mission: …to provide Refreshing, Tasty, and Cutting Edge web and mobile applications to the world and to their clients. All icons and illustrations were sketched first out and revised if needed to get buy-in from the client.

 
Icon-Satisfying.jpg
Icon-Satisfying.png
 
Icon-Tasty.jpg
Icon-Tasty.png
 
Icon-Cutting-Edge.jpg
Icon-Cutting-Edge.png
 
 

The second set of four icons are more colorful and can be scaled up for larger display. These represent the secret sauce, or the company’s philosophical tenets if you will: Fun, Innovation, Community and Growth.

 
Icon-Fun-Sketch.jpg
fun-alternate@4x.png
Icon-Innovation-Sketch.jpg
innovation@4x.png
Icon-Community-Sketch.jpg
community-alternate@4x.png
Icon-Growth-Sketch.jpg
growth-alternate@4x.png
 
The   growth   vector illustration. Different skin tones were used in the final versions for diversity.

The growth vector illustration. Different skin tones were used in the final versions for diversity.

 

2. Color Palettes

There was no prescribed brand color other than ‘green pickle,’ so a set of vibrant gradients were chosen for versatility and visual impact.

Background-1.png
Background-2.png
Background-3.png
Background-4.png
Background-5.png
Background-Pickle.png
 

3. Key Illustrations

To tell the Bit Relish story a few key illustrations were needed. Without much to go on other than pickles and tech, I pitched the idea of giant pickles (Bit Relish) bringing technology to mankind. Everyone was excited to make things weird and memorable. Here are the final illustrations for each main area and some brief, strange, story notes.

 
Arrival-Sketch.jpg

1. The pickles have arrived and are enhancing technology through software development, big data, augmented reality, and more.

Illustration-1@2x.png
 
 
 
Illustration-2@2x.png
Guidance-Sketch.jpg

2. Even in the vast wilderness, pickles can show the way. Travelers get helpful guidance and companionship from the great pickle.

 
 
 
Services-Sketch.jpg

3. Pickles have become part of society, effortlessly merging with all walks of life. Technology from the mighty pickle strives to deliver satisfying and refreshing service to clients

Illustration-3@2x.png
 
 
Website-Mockup.jpg

4. Wireframes

The final deliverable was a wireframe to help organize the content and illustrations. These were put together with Adobe XD and collaboration was through InVision’s Freehand tool.

 
Wireframe-2.jpg
 

Wrapping Up

This is one of the few projects where I handed off the art and wasn’t involved in website construction. So rather than talk about the actual site build, here are a few live streams from the illustration process: