JamppBranding & Web design

Making the jump (ha, get it?) from B2C to B2B

We had worked with Jampp back when they were just a scrappy startup fighting for a place at the grown-up’s table. Our challenge was to re-think the brand we once knew into something bigger, more mature, and more professional. We worked on their logo and brand identity, as well as their mobile and desktop sites.

mobile-svg
Jampp Hero wave

A change of personality

Approach

Redesigning our own designs

We had to make certain adjustments and tweaks in order to convey a proper B2B image. We did as many tests as we could within the given timeframe and eventually came up with a lighter, smarter version of Jampp’s logo.

Jampp logo
Logotype wireframe

Color scheming

To go with the updated personality, we decided to take a look at Jampp’s former palette and came up with a couple of alternatives rooted on the wide variety of color that was present on their website.

#D6DAE1 C: 5% M: 3% Y: 0% K: 12%
#E9EBEF C: 3% M: 2% Y: 0% K: 6%
#CBEAFF C: 20% M: 8% Y: 0% K: 0%
#36355B C: 41% M: 42% Y: 0% K: 64%
#FF633D C: 0% M: 61% Y: 76% K: 0%

Type usage

We chose Roboto for the company’s new image because it’s a highly reliable typeface, proven to be perfectly readable in all sorts of screens and devices.

Approach
Approach Approach Approach Approach

Finding the right style

Show, don't tell

We used illustration as a friendly, clean way of communicating several of the site’s features, as well as a way of accompanying User’s throughout the platform. Deciding on a style was no easy task, but we were extremely satisfied with the end result.

Approach
Illustration style person Illustration style graph Illustration style icons Illustration style Illustration style

Iterate, iterate, iterate. (Iterate, iterate.)

We developed five style alternatives before landing on the right one for Jampp. The goal was to create a language that allowed us to share the abstract values, technical features, and concrete characteristics of the company, as well as meeting their aesthetic standards.

Iteration

Also for the icons

Mini illustrations

Due to their complexity and the way in which they were used, the platform’s ‘Icons’ turned out to be something along the lines of miniature illustrations. Their main purpose was to simplify much of the site’s technical speech and processes.

Icons Usage
Icons Usage Icons Usage Icons Usage Icons Usage

Hands on UX

Did we already say ‘Iterate’?

There was a ton of copy to work with. We distilled it and re-organized it to fit into more attractive content blocks that would make the site a compelling, friendly experience for users, even on mobile.

Approach

Of users, interfaces and User Interfaces

It’s UI time.

This time around we set out to give Jampp a more serious look, but one that still managed to build on the friendly spirit of the company. We accomplished this by finding the right integration between text and visual elements, as well as giving each section a defined, unique perspective that added to the overall storytelling of the site.

Demo UI Demo UI