Justin Scherer

Tl;dr

I used Adinkra symbols as a jumping off point for a series of generative illustrations that I built using Processing and the HYPE Framework. I intended the illustrations to welcome new developers to the Hover platform, as well as for community-oriented social media engagement.

The Challenge

While re-designing usehover.com, an opportunity arose for some illustrative elements on our sign in and login pages. The previous iteration of the page had a tiny, illegible screenshot of the core dashboard on a laptop mockup. I wanted to use the space as a welcome mat into the core product experience of the SDK after a developer had taken the time with our docs and primary information pages.

Approach

Whereas the stock photography on the landing page for usehover.com served as a broad vehicle for the brand, I wanted the first core product pages to feel more specific, technical, and gesture at the technical expertise of our developers.

I also wanted the results to be relevant to our team, the product, and the lived experiences of the developers who relied on our tools. It needed to reflect community and have callbacks to the indie dev cultures of sub-Saharan Africa.

Results

Concept: Adinkra

In a market in Accra during a field research trip, one of my colleagues showed me a book on Adinkra, a West African pictographic language. I didn't think twice about it at the time. Several months later, as I was looking for a unifying visual element for these illustrations, I fell down a particularly deep rabbit hole researching the immense linguistic diversity of sub-Saharan Africa, and I stumbled back upon Adinkra symbols and thought that they would be a starting point for visual elements in the piece. It also helped that a few of the symbols directly referenced features of our tools.

It wasn't enough to repackage Adinkra as branded symbols belonging to Hover. To do so would have been over-specific to West Africa and could have had whiffs of cultural appropriation. I needed to take it further.

During the same research trip where I encountered Adinkra for the first time, our research with indie devs highlighted over and over how important community is to the developer experience, especially early in people's careers. We heard dozens of stories of how a person taught themselves the basic of programming using free online tools, Udacity, MOOCs, and Youtube. Engagement with other developers became a primary way they extended their skills to a professional level and got their start as developers. Many of them expressed a desire to leave a legacy of other developers who they would support through the early stages of a career in software. Connection in technical communities became a constant theme.

The concept became human communities and technical opportunities creating something beautiful, complex, and not easy to pin down.

EXECUTION

I decided that a generative grid illustration would fit the concept. Generative illustrations reflect beauty in complexity and show how a simple thing can have generative impact in the contexts where it's used. That was our goal for Hover. Also, no two uses of Hover are the same. The process of creating generative art also creates a unique output every single time you run a script.

I found symbols that I thought would work well in a repeated grid, I abstracted them and balanced the forms a bit. Then I wrote a script using the HYPE framework and Processing.

I generated several iterations of the pattern tweaking parameters, deciding which aspects of the code would utilize mathematical chaos and order, as well as the scope of randomization would be. For colours, I created a vibrant, contrasting colour scheme based on the basic Hover colours, dark grey, orange, and our primary notification colours: green, red, and blue.

The best results resembled a hive or a circuit board, which satisfied the technical and community feel for the piece.