Case studies & projects 



Helidon.io

What is Helidon.io 
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






Typography

 


Logos





Icons





Illustrations




Desktop & Mobile 







Parallax Scroll







 

Amsterdam