Orbtoberfest 2020

Illustration / Web
Orbtober 2020 swag mockup on shirt sticker and enamel pin

TLDR

Digital Ocean hosts a hackathon throughout the month of October. We partnered with the event and ran a side challenge called Orbtoberfest. When folks contribute to our orbs as their open source contribution they will also receive orbtober themed swag. I designed the brand, website, promotional assets, and swag for the event.

Explorations

To coincide with Digital Ocean's illustration we planned to share a similar color palette. Since we didn't get that information until closer to launch here were some explorations and directions shared with stakeholders with the previous year's color palette.

Explorations of orbtoberfest 2020 celestial graphic

Final Brand

Orbtober brand guide

Web design

Wireframes

This was the second year we ran this event and the second time I would be designing this for project but a few of the requirements of the page had changed so I wanted to encourage the practice of starting on a wireframe before adding in any styles.

Challenges

One of the challenges of this project was working with stakeholders new to the web design process. I worked with collaborators to educate them on writing a narrative, requirements, and bringing in copy writers and developers.

website wireframes and mockups

Lottie animation

Previously CircleCI had been using large file pngs, gifs, and mov files for illustrations on web sites. With this project I was able to introduce and implement the addition of lottie animations. I used this site to test and show validation of lottie. We now incorporate lottie and motion design in more of the designs we create today.

Final mock and site

Here is the finished mockups which I prototyped in Figma and shared with the developer. I helped QA and we launched the project in October 2020 .

orbtoberfest 2020 websiteOrbtober website hero sectionorbtober website