Outreach needed to re-energize an industry-leading sales engagement platform and promote a fun company culture. In a saturated, jargon-filled market, it was our first challenge to give this work-hard/play-hard team a stand-out brand makeover. But the real challenge came in redesigning and developing a fluid website that could communicate how intuitive and rewarding their platform is to use — while capturing everything Outreach offers.

We helped Outreach tell their story through a bold new identity and a robust online experience.

Brand guidelines created by Focus Lab for Outreach

Nearly every member of the team lent their magic to this project, which required a long, expertly managed project timeline. Not only did we build a whole new brand system to create content around, we got mega-strategic with information architecture to streamline content that had grown quickly with their success. Every pixel, every word, and every bit of code was laid out with intention in collaborative review with the client.

Seven Focus Lab team members brainstorm in a conference room with a whiteboard
Focus Lab team strategy session. All great work starts with strategy.

We kicked off brand strategy with a team exercise on the client side and a concepting round on our side to nail down brand essence. The result? A prescription for a brand that exudes authenticity, sales confidence, and grit.

But the visuals had a tall order: they needed to carry the boldness of a sales pro while feeling relaxed, to reflect how simple, yet powerful, the platform is to use.

The key was adaptability. We started by creating a fluid mark we named the "Nucleo" and designed an organic system around it that scaled well. We chose one extensive typeface family that could morph across brand applications to feel all-inclusive. The leading color, Passionate Blue, formed the core of a lively primary palette. We derived inspiration for the secondary palette by taking a closer look at the Outreach product, to best fit their needs while complementing the primary palette.

75 pages of thought & intention paved the way for a successful brand creation.

A grid of pages from a brand strategy images which includes an audit of the existing visual identity and an evaluation of target audience.
Black and white mark explorations for Outreach
A close-up view of the process for getting the mark just right
A designer makes edits on Illustrator artboards printed out and hung on a wall.

We named the Outreach mark "Nucleo:" a variant of "nucleus." It’s a central point around which action takes place — a perfect fit for their all-in-one solution.

An Illustrator artboard of the visual identity for Outreach: logotype explorations, color explorations, etc.
Four small pins, one with the Outreach mark, one that reads "Legit Grit."
Style guidelines for the Outreach visual identity

Thank you for being such great partners throughout this journey. We're delighted with the final product and had a ton of fun along the way.

Katie Doyle VP of Marketing, Outreach

When sales pros speak, they need to sound smart and relatable. Unfortunately, few B2B companies sound like actual humans in marketing pieces. Communications strategy ran the gamut from defining verbal identity to co-writing and editing web copy for the new site, cutting jargon and fluff to sound genuine and conversational. We created a bold, engaging, authentic voice for Outreach, specifying how to write this way across channels in a custom style guide.

Two Focus Lab team members work on Communications guidelines on a whiteboard
A person writes down notes on the communication guidelines

The large marketing site needed intensive information re-architecture and content strategy, including defining target audience personas and user stories; feature examination, regrouping and redefinition; and revised page-level content strategy across the site. After re-engineering their entire sitemap and renaming existing features for user-friendliness, we crafted better stories through content flow, page structure, and copywriting.

From content strategy to wireframes to page design, retaining the fluid simplicity of the product in visuals was key. The lighthearted new brand system encouraged creative flourishes in UX/UI design, like gentle parallax and concentric line-work that mimics a rippling effect.   

UI Wireframes for Outreach's website

Wireframes: Depending on the scope of the project we may or may not start with wireframes. For this project wire framing was a must. We built out 30+ unique wires. No easy task.

Wireframing was instrumental in gauging the needs for all 30+ unique page designs.

A few dozen pages of Outreach's website in Sketch
A crop of Outreach's final site
A video still of two women working at a desk and portraits of people in Nucleo shapes
Details from the Outreach website

Custom iconography: We crafted a custom set of icons for Outreach that help to identify features and carry the story across the new website.

A large icon of a speedometer and a grid of smaller icons.

We developed the HTML, CSS, and Javascript in a manner that allowed for modularity and reuse, but was also easy to customize on a page-by-page basis. This created a front-end system that was simple to build on, enabling Outreach to quickly add new pages and additional content into the future. We also optimized for responsive situations so content could be consumed on virtually any screen size or resolution.

The back-end is built on Craft CMS, which we love for its versatility and intuitive interface. Because hiring passionate people who contribute diverse skill-sets is such a priority for Outreach, we integrated a 3rd party applicant tracking system API into Craft to optimize the job board experience. As with many redesigns, we also diligently audited and migrated legacy content like blogs and other long-form editorial pieces into the new content management system. It was important to affect Outreach’s existing SEO rankings and states as little as possible.

No great brand or online experience is complete without powerful imagery.

We laid the foundation for custom photography with a photo style guide. It outlines visual language and target vibes, then articulates unique visual opportunities within brand strategy and how to shoot for them. Before the on-location shoot, we created and tested sample imagery in-house to hone the style and direction.

Once in Seattle with the client, we styled, shot, and retouched images for the website and other marketing applications. The friendly Outreach team and rich company culture made for easy direction and natural captures around the office and outdoors.

A photographer works on editing Outreach employee portraits
A woman's portrait in front of a blue background
A portrait of two men on blue backgrounds
Four men stand in a room
A group of Outreach employees sit casually on the grass with Seattle in the background.

Onsite Photography: To capture the Outreach culture, we traveled to Seattle. We crafted a photo style and strategy, then shot over two days onsite with the Outreach team. Custom photography is a great way to raise the authenticity bar on a website.

Two Outreach employees talk in the background, and a woman smiles in the foreground

Focus Lab team - I just received the pins you sent over and have shared them with the extended Outreach team. They are delighted! Thank you for the thoughtful gift and thank you for being such great partners throughout this journey.

Katie Doyle VP of Marketing, Outreach
The Outreach Nucleo as a pin on a desk.