Anvil
Rebrand & Marketing Site
Problem • Anvil’s visual brand attributes were not aligned with their aspirational brand attributes. The rebrand established clearer, more consistent brand recognition in preparation for scale.
Responsilities • Lead visual designer
Anvil
Rebrand & Marketing Site
Problem • Anvil’s visual brand attributes were not aligned with their aspirational brand attributes. The rebrand was intended to establish clearer, more consistent brand recognition in preparation for scale.
Responsilities • Lead visual designer
Anvil
Rebrand & Marketing Site
Problem • Anvil’s visual brand attributes were not aligned with their aspirational brand attributes. The rebrand was intended to establish clearer, more consistent brand recognition in preparation for scale.
Responsilities • Lead visual designer
Anvil
Rebrand & Marketing Site
Problem • Anvil’s visual brand attributes were not aligned with their aspirational brand attributes. The rebrand was intended to establish clearer, more consistent brand recognition in preparation for scale.
Responsilities • Lead visual designer
Anvil
Rebrand & Marketing Site
Problem • Anvil’s visual brand attributes were not aligned with their aspirational brand attributes. The rebrand was intended to establish clearer, more consistent brand recognition in preparation for scale.
Responsilities • Lead visual designer
01. Overview
What is Anvil?
Anvil’s mission is to accelerate existing business processes from artifact-first to data-first. This manifests as a suite of APIs and no-code tools that enable engineering and business teams to automate their PDF processes across industries. Anvil has helped Vouch automate insurance quotes, Seso Labor streamline hiring paperwork, and Carta digitize corporate documents.
Existing Brand
Anvil’s existing brand was in the midst of an identity crisis as showcased in the logo. An aggressive, all caps, sans serif wordmark paired with a cutesy logomark didn't play well. With decorative sparkles, it was hard to convey Anvil as the trustworthy business partner they sought to be.
Ideal Customer Profile
Many personas use Anvil, but marketing focuses on those who will introduce Anvil to their org. These champions are Engineers and PMs looking for a PDF API solution to incorporate into what they are already building. Once they test out Anvil and see it fits their needs, they are the ones who advocate for procurement in their company.
02. Research
Stakeholder interviews
Step one was surveying stakeholders and clients to understand the aspirational perception for the brand.
Market positioning
Most players in the e-signature space unsurprisingly focus on signature collection. Anvil’s goal is to help users collect clean data that they can integrate with their internal systems. The emphasis on data, APIs, and integration skew toward engineers. They come looking for an API PDF solution they can incorporate into what they are already building.
Brand Attributes
Based on these inputs, the following brand attributes guided further design decisions:
Trustworthy
At our core we are dependable and robust. Our users should feel confident that we are able to solve their most complex problems, securely and compliantly. We understand that this trust is earned and so we lead with empathy; listening to our client’s needs and meeting them where they are.
Approachable
We understand that for critical daily operations most businesses rely on paperwork and we respect the decisions and constraints of how that paperwork is collected today. However, we believe there is a better way to enable these operations and our job is to bridge that gap in a way that is approachable and accessible. We want to build better processes together and believe our users shouldn’t have to adapt their business to ours.
Engaging
We are enthusiastic about enabling others to do their most meaningful work, caring deeply about the people behind the paper. While we are professionals, we have a zest for what we do and a flair of personality that separates us from the pack.
03. Logo Development
Logo & Wordmark
As the centerpiece of the rebrand, the logo and wordmark were the first priority. The design principles set here would cascade to the rest of the visual identity.
Design feedback during this phase was from internal stakeholders and marketing advisors.
Visual references Solid, geometric, paper punches
Analog exploration A small sample of many forms
Digital explorations Digitizing promising forms & exploring wordmarks
Decision point critiquing a final round of concepts
Refinment marrying the logo and word marks together in a proper grid
04. Visual Identity Development
Select visual explorations
Building off of the new logo, the next step was to define the visual identity that would go with it.
One through line was references to analog paper processes to build familiarity and warmth with technology.
Focusing on the home page, attention to typography, illustration, and color explorations would set the tone for the rest of the site.
In the end, illustration focused on layered geometric shapes as a nod to die cut paper. This style was also simple enough to create dozens of assets for the entire site quickly.
01 Diecut layering Typeface: Barlow to match wordmark
02 Newsprint Graphic elements: editorial photograhpy
03 Overprint Typeface: Gibson to match existing brand • graphic elements: data 'pipelines'
04 Materiality • winner Graphic elements: solid, geometric illustration
Color & physics
Drop shadows derived from the idea that digital 'pieces of paper' were siting on top of each other. The foreground would 'slide' over the background as if moving a piece of paper across a table.
Color was trickier with the decision early on to keep the existing primary as a constraint. Inspired again by analog printing processes, variations on CMYK were explored. Fully saturated hues were too stark and unapproachable. Instead, tinted values provided a softer feel with green reserved for primary CTAs only.
05. Marketing Site redesign
Information Architecture
With a clear brand identity and visual style coming together, attention turned to the entire marketing site.
Before, pages were added to the marketing site ad hoc without any organizing principles. Many pages had their own, differing navigations leaving users confused and lost.
The goal here was to think about grouping marketing pages for simplicity, scalability, and to match the user's jouney through the site:
User Journey
Current IA • Hidden & unorganized
Proposed IA • Follows the user's journey
Prioritization
20+ unique pages would simply be too time intensive to build individually. Instead, by defining common page types, they could all be addressed with 6 common templates.
Further cutting down design and engineering time, components were defined to use across pages. Using the decided illustration style, page level assets were quick to execute.
Page types • Defining page templates for easier development
Page widgets • select page components for faster development
06. Outcome
Brand Story
Anvil’s goal is to maintain all the good things about paper and PDFs while solving the bad. Anvil’s visual style takes this to heart with playful nods to the paper processes of the past, alluding to our role as a bridge between the analog and digital world. We use design elements that reference real paper in the physical world to create a digital experiences with familiar tactile warmth. Shapes are simple and familiar so that compositions and concepts can be complex.
Brand Story
Anvil’s goal is to maintain all the good things about paper and PDFs while solving the bad. Anvil’s visual style takes this to heart with playful nods to the paper processes of the past, alluding to our role as a bridge between the analog and digital world. We use design elements that reference real paper in the physical world to create a digital experiences with familiar tactile warmth. Shapes are simple and familiar so that compositions and concepts can be complex.
Brand Story
Anvil’s goal is to maintain all the good things about paper and PDFs while solving the bad. Anvil’s visual style takes this to heart with playful nods to the paper processes of the past, alluding to our role as a bridge between the analog and digital world. We use design elements that reference real paper in the physical world to create a digital experiences with familiar tactile warmth. Shapes are simple and familiar so that compositions and concepts can be complex.
Anvil is Trustworthy, approachable, & engaging
Primary Logo & Mark
Trustworthy: solid, weightly, balanced
Approachable: Familiar forms, simplicity, Rounded
Engaging: logo and wordmark pay together nicely
The anvil logo is comprised of both a word and logomark. The Horizontal lockup in #222222 is the primary permutation of the logo and should be used if the application allows. The logomark and wordmark should always be the same color if used together.
Primary Logo & Mark
Trustworthy: solid, weightly, balanced
Approachable: Familiar forms, simplicity, Rounded
Engaging: logo and wordmark pay together nicely
The anvil logo is comprised of both a word and logomark. The Horizontal lockup in #222222 is the primary permutation of the logo and should be used if the application allows. The logomark and wordmark should always be the same color if used together.
Construction
The logomark is constructed on a 3x8 grid with only rectangles and circles. The logomark has ball corners to soften the otherwise rigid geometry. It is nearly symmetrical, balanced vertically and horizontally so that it can be centered in all scenarios.
The wordmark is based on the font Laca Text, adjusted to align x-heights and counters with the 3 row division of the logomark
Construction
The logomark is constructed on a 3x8 grid with only rectangles and circles. The logomark has ball corners to soften the otherwise rigid geometry. It is nearly symmetrical, balanced vertically and horizontally so that it can be centered in all scenarios.
The wordmark is based on the font Laca Text, adjusted to align x-heights and counters with the 3 row division of the logomark.
Clear space
Ample white space should be a staple of any Anvil layout. In order to maintain maximum visibility, the Anvil logo must appear with a minimum area of clear space around it. This area should be free of any type or graphic elements. The minimum clear space for the Anvil Logo is the x-height, which is equivalent to the height of the V or ⅔ the height of the logomark
Clear space
Ample white space should be a staple of any Anvil layout. In order to maintain maximum visibility, the Anvil logo must appear with a minimum area of clear space around it. This area should be free of any type or graphic elements. The minimum clear space for the Anvil Logo is the x-height, which is equivalent to the height of the V or ⅔ the height of the logomark.
Typography • Barlow
Barlow is a slightly rounded, low-contrast, grotesk type family. Drawing from the visual style of the California public transit, Barlow is a highly legible typeface that is approachable and friendly. It is a Google hosted font, meaning that it is accessible across the google products and easily implementable by development. Barlow features a wide range of weights, though the lighter end of the family should be avoided to ensure contrast and legibility.
Material
• In a nod to the tacticle world, elements should interact as if they are paper sliding on top of a work surface.
• The background surface may have secondary elements and 'inner workings'
• The top layer is for the primary work surface
Color
• The primary palette is a nod to traditional CMYK printing process
with less saturation for the screen
• Color should be used an accent paired with ample white space
• Text should always be in greyscale and high contrast
• Anvil green is reserved for special attention and calls to action
• Anvil green should be used rarely in illustration and decorative elements
• Illustration colors can be used together in any combination, paired with shadow to create depth as if shapes are layered pieces cut from paper
Color
• The primary palette is a nod to traditional CMYK printing process
with less saturation for the screen
• Color should be used an accent paired with ample white space
• Text should always be in greyscale and high contrast
• Anvil green is reserved for special attention and calls to action
• Anvil green should be used rarely in illustration and decorative elements
• Illustration colors can be used together in any combination, paired with shadow to create depth as if shapes are layered pieces cut from paper.
Illustration
Foundation
simple geometric shapes, layering rectangles, circles, and triangles together, each with its own drop shadow, to mimic paper cutouts in physical space.
Illustration
Foundation
simple geometric shapes, layering rectangles, circles, and triangles together, each with its own drop shadow, to mimic paper cutouts in physical space.
Composition
• When using illustrations, leave ample white space with other elements
• Anchor compositions to the edge of a frame when possible
• Illustrations are typically abstract, but can depict simple forms
to convey more concrete concepts
Composition
• When using illustrations, leave ample white space with other elements
• Anchor compositions to the edge of a frame when possible
• Illustrations are typically abstract, but can depict simple forms
to convey more concrete concepts
Iconography
Graphic Icons
Two-toned icons for use in marketing materials or at larger sizes to communicate concepts. Our new style currently relies on abstract compositions of colored ‘paper.’
Iconography
Graphic Icons
Two-toned icons for use in marketing materials or at larger sizes to communicate concepts. Our new style currently relies on abstract compositions of colored ‘paper.’
Product Icons
Priviously inconsistant product icons now match the new brand identy. Solid shapes with square edges continue to mimic punched paper shapes. Input Fields are the exception as outlines to mimic the empty nature of an input field and need for it to be filled.
Product Icons
Priviously inconsistant product icons now match the new brand identy. Solid shapes with square edges continue to mimic punched paper shapes. Input Fields are the exception as outlines to mimic the empty nature of an input field and need for it to be filled.
Product Icons
Priviously inconsistant product icons now match the new brand identy. Solid shapes with square edges continue to mimic punched paper shapes. Input Fields are the exception as outlines to mimic the empty nature of an input field and need for it to be filled.
Breakpoints
All marketing site pages and components have 6 breakpoints across desktop, tablet, and mobile. 77% of visitors are on desktops with the majority on screens wider than 1440px. With this in mind, content is optimized for the 90em breakpoint.
07. Applications
Marketing site
With a new IA and brand identity, the entire marketing site is now built to navigate prospective users questions.
Marketing site
With a new IA and brand identity, the entire marketing site is now built to navigate prospective users questions.
Before & After
Features
Pricing
Industries
Submissions
Index + Content
Docs
Content covers
A primary driver for site traffic is Anvil's blog. In particular, engineering posts bring potential users in with educational content leading to brand discovery. With a regular blog posting calendar from everyone on the Anvil team, 1-2 covers per week were not uncommon.
Ad spots
Another driver for brand discover are ad placements. Linkedin, Twitter, and Reddit Ads require a regular output of brand assets. In addition, several print ads were run on San Francisco Trolleys & Muni Buses coinciding with tech conferences with ICP audiences.
Swag
The Anvil brand continues to classic promotional items from shirts, to hats, to bags. With regular conference attendance, hiring, and customer appreciation new items are constantly in development.
Swag
The Anvil brand continues to classic promotional items from shirts, to hats, to bags. With regular conference attendance, hiring, and customer appreciation new items are constantly in development.
Additional applications
From conference booth design (SAASTR 2021 pictured here) to office decor, the new brand is extensible to any number of mediums and formats.
07. Result
January 2021 Launch
Most importantly, with a clear brand identity the ability to drive brand recognition across go-to-market initiatives has become quicker and easier.
The new brand and marketing site was introduced in a blog post with positive reception from currtent users, board members, and media alike. The logo redesign was featured on Brand New from UnderConsideration a media outlet focused on corporate identity work.
Two years later, the brand is still flexible enough to continue to grow with Anvil's needs.
2022 V2
The project laid a foundation to properly track and optomize how the site is used. After a year of gathering data, a second version is now live that focuses on copy updates for the engineering persona based off of direct user feedback.Check it out live now.
Marketing site + App cohesion
Before, the brand and product lived in completely different spheres. The final step of this project was to bring the two into harmony. By applying new brand elements to the in app experience, users get a consistent experience end to end.
