Case studies & projects 



Click2Kube



Context
Oracle acquired Wercker (a startup CI/CD platform) in 2017 to kickstart it’s Oracle Developer Experience (ODX) initiative. The plan being to change Oracle’s image to a modern technology company, by winning hearts and minds of developers.

Problem
Click2Kube was a service to showcase the flexibility and efficiency of Wercker, by spinning up a Kubernetes* cluster in minutes (opposed to the usual 30 minutes approx. of configuration). The service was open to a limited number of users on a ‘Request a token’ basis, after the launch at CoreOS Fest in San Francisco (2017).

Solution 
Document all scenarios in a logic chart, use this to define user flows. Design a landing page that would serve as a homepage for the project, describing the service and what it does.
Users would begin a modal based user flow from here, to build their cluster.
If successful, a hidden status page would be revealed on the landing page. From here users would access their cluster’s settings.
Year 2017

Team 2 designers, 3 developers, 1 product manager, 1 architect  

Process Wireframeing, Prototyping, Responsive web 

Tools Sketch, Framer, Illustrator














 

Logic chart 

Once the project started the deadline wasn’t far away, so the team got to work in startup manner (lots of coffee and ideas).
We drafted all the possible scenarios (good, bad and ugly) we could forsee, creating a cluster from a modal flow, then requested feedback from the engineers in Amsterdam.


Once the sketches above we’re approved, we had a basis to start working from, that was open to change if needed.
I refined these sketches into the above Logic chart and this became the reference for the project.




Hi-fidelity user flows

The fonts, styles and colours were already defined by the style guide for Wercker, as were the modals on the site too. 
Some new additional components were required for this flow, like the colour highlight around the field and the animation for the cluster build. 







User flows prototype



Lo-fidelity wireframes



1. First iteration wireframe

2. Second iteration. Bigger hero, no features,
‘Do more’ is a toggle between Developers and Operators

3. Cluster Status page reveal (following cluster build)






Amsterdam