Overview:

Abstract is a new platform for modern design teams to work together. You can ideate, iterate, and integrate all of your design files into one place. Think version control for your design files (remember passing files back and forth, getting duplicates, having a 'project_latests_updated_final_copy.sketch', and not knowing which file is the most up-to-date design? Yup, no more!). Abstract is a secure, version-controlled hub for your design files. Engineers have Github, Sales teams in Salesforce, even Marketers have Marketo. Now, designers have Abstract. See project here

Brief:

The team over at Abstract asked me to create illustrations and a new design for the ‘How it Works’ page, an on boarding workflow to help familiarize users with the basics of how the platform works. The team wanted to incorporate and explore illustrations to communicate the project and make the site feel more thoughtfully branded. 

Our initial kickoff brainstorm, CEO Josh Brewer and Marketing Lead Hema Padhu pointed out that as a brand, Abstract needed a better set of guidelines to help users familiarize the platform (eg. master, tips for naming branches, best practices, managing merges, etc). They suggested going very literal and technical for design, while exploring creative and relatable illustrations for the brand. On top of that, using copy that Josh and Hema provide. For a product that is made for designers, it needed to speak to creatives while communicating complex problems in an engaging visual way ( eg. master, commit, merge). As a designer myself, this challenge needed to capture both my attention, as well as engage any other designer looking at the platform. It needed to speak our language. That is so to speak, visual, so I went all in.

I drew up a few sketches that approach these concepts through a more literal outlet. You ask yourself what is Abstract? What does Abstract enable that others didn't enable before? Why is it relevant now (how we worked before and why it's no good). How do you work with Abstract? Are there tips and tricks to make your life easier?

Perhaps communicating this was a simple side-by-side comparison of the old vs. new way? Or maybe a simple one-two-three step process? Was it just a wizard walkthrough? Visually, it needed to describe how each designer, anywhere, can individually contribute and collaborate to a larger unified whole together. That is, one single source of truth for your design files.

As we explored these quick iterations, the team started to lean towards the first and second options: wizard step-by-step walkthrough, and the simple, stress free environment of using Abstract. The next step was to iterate off of their feedback and come back with a few more options.

Funny thing about exploration is inspiration. You research. Draw. Repeat. You peruse through the internet like its no ones business. Whether you like it or not, you subconsciously sponge up ideas and backlog information. As a designer, it's kind of the nature of the beast.

A great example of this was one of the concepts I did was too similar to an existing idea on the market. So we did the classic pivot. 

The story:

While brainstorming, me and Josh started to talk about design teams. Who they are, what they're doing, and why. We slowly yet sporadically started to script out an alternate story to explore. Push that even furhter, me and Josh were in the kitchen talking shop when Kevin (CTO) walks by without conversation and says, "sounds like a comic strip guys." Boom! It wasn't just a feature list but a storyline for the user to follow. The concept: "Design team + others wanting a better way to work. They heard about Abstract and want to give it a try."

We created this narrative because it's the kind of story that we think represents Abstract. Designers are hackers in the best way: they create. They jump through every hoop possible just to get the job done. They're always looking for a better way. We thought, why not create an entire story around a design team using Abstract to find that better way?

Our first goal was to write a script and create a set of characters that represent this (fake) design team using Abstract in a comic form. At the same time, educate the (real) user with screenshots showing the basic light-weight workflow of the product.

Background:

Prior to my arrival the team had explored many iterations of what Abstract is as a brand. It's logo mark, aesthetics, and overall inspiration to how it came to be. An art movement by the name of De Stijl laid out a foundation for team inspiration. De Stijl advocated pure abstraction and universality by a reduction to the essentials of form and colour; they simplified visual compositions to vertical and horizontal, using only black, white, and primary colors.

I wanted these new illustrations to feel similar and push the evolution of the brand while advocating De Stijl. That is: simple compositions comprised of basic shapes, on top a collection of an ever-growing set of characters for the (fake) group of characters. 

Building the characters set

I went through many, many iterations trying to create this style. Abstract asked me to develop an inclusive and more representative set of characters that represent their core values. That meant a well rounded group of diversified individuals working together as a team. These values were a major part of this project.

To start off, I began to draw the characters to include different racial and cultural diversity backgrounds, as well as physical types and features - skin tones, hair color, body positions, etc. At this point, I wasn't focusing on Abstracts color palette and brand yet, but more so honing in on this initial character set. Who works at a design studio? What do they do there? What types of activities are they into? The team really helped hone in on this initial character set with specific hair styles suggestions and outfits to help match a diverse group of individuals.

With that in mind, I tried to explore a variety of line work for visual representation. As well as try different background and foreground styles. I wanted to evolve the current De Stijl movement, while incorporating a new set of guiding principles for this next stage.

We soon realized these drawings were coming off as forced. In fact, when the illustrations were paired with the story and screenshots, they were clashing. Both screenshot and illustration were battling for space rather than contributing and supporting one another. You think, how can one story work together using both product and illustrations in a unified way? First instincts and thoughts from Josh was moving away from abstract and being more literal on everything.

In the last moments of this project, very late at night in the studio I turned on Cut Copy and started to create some fun comic style illustrations. I was playing around with the characters I had, but filling them into a full comic book layout without relying on the screenshots. Bright, colorful De Stijl forms mixed in with its own narrative. It started to get really fun. This was the direction that finally clicked and we went with. This goes back to the research and inspiration backlogging in your brain. When the stars align, it happens quick up front, but it's truly brewing in the background. 

The Final

When it came time to design, we needed to look back at our mockups. The brand for one, needed to align with all the other web pages that were currently live, while introducing and evolving a new set of illustrations and components. At this time, Heather Phillips (Design Director) joined Abstract and we started to heavily collaborate on these next steps of design. I kept pushing the design layout while Heather took on building out all the workflow videos and fine tuning the narrative with Hema.

We were trying to figure out how to incorporate the comic narrative with the screenshots. Since we developed this entire fake design team, Heather had a great idea to push it further and open a (fake) design studio. 

We started to pull elements from my current illustrations and import them into (real) Abstract. We called the company Propeller. Prior to the name Abstract, Josh and Kevin were trying to think of names for the (real) company. One was Propeller. I took the logo they had and redrew it to fit the style. This bridged that weird gap of illustrations vs screens and helped promote and educate one another.

Final implementation, Heather finalized all the video's (amazing) while we passed over assets to Tim Van Damme (Principal Designer) to build out this page and make it real. They are champions! It's truly amazing to see a team like this come together utilizing each skill set to build something rad.

All said and done this project was a challenge like no other. I spent countless nights trying to develop this style and incredibly happy with how it turned out. See project here

Note: Designing the Abstract 'How it Works' story was a highly collaborative process. It started with me, Josh, and Hema brainstorming, but grew into a larger collaboration with me and Heather. It then pushed into final stages working with Tim. I can't thank the team enough for everything. I also can't wait to see how the product and brand develops over time and really thankful to have helped set a foundation for a new illustration guide.