Case studies & projects

What is 
Helidon is an open-source project from a small team, within Oracle. It’s a set of Java Libraries for writing microservices in a quick, lean, agile way. Because the project is open source, it didn’t have to follow any styes from Oracle, to the point where we could make up our own styling from scratch.

What did they need and why?
The team required a style guide, website and branding to help them establish a name for the project within the open-source community and standout against competitors in the space. 
They also wanted to use a mascot for the project, given that Java had ‘Duke’, they wanted to have their own character that would play, parallel to that.

What does success look like? 
Successfully deliver and execute on: Responsive website, logo, style guide, driving user adoption of the Quickstart, Downloading and trying the product. All in time for the Java conference happening later that year.

Year 2018

Team 2 designers, 1 developer, 1 director 

Processes Strategy, Brand development, Style guide, Wireframing

Tools Sketch, Illustrator, Google Slides, 

Concept development process

Competitor Research
We began by researching websites of competitors

Mood board
Research and the project kick-off led us to start some image research

Creating the concepts 

Initially the project was going to be called ‘Java 4 Cloud’ or ‘J4C’, so early concepts were in that name.
The other designer and I came up with three different routes for the project, one based on what they wanted and two on what we thought would work well: Mascot, Patterns and Modularity.
I worked on Mascot route, while the other designer worked on Patterns and Modularity.

I focused matching the product mascot idea with the best aspects of the product, ‘Lightweight, agile, quick’. I thought a bird would be perfect as a mascot and personification of these qualities.
I researched sparrows, swallows and hummingbirds, the swallow was the ideal match of qualities and distinctive appearance.
Another benefit to using a bird as the mascot, was the elements from their environment you could include to mention other aspects of the product, to broaden the visual language.


Mascot route process

Concept One: Mascot

Concept Two: Pattern

Concept Three: Modularity 

What next? 

We presented and pitched these concepts to the team and gave them a few days to decide. Within a week they went with the mascot route. 
From then on both designers began developing this option, starting with typoography and colours. 

Colour Palettes






Desktop & Mobile 

Parallax Scroll