Website & Identity Design, 2019

Creating excitement for KNOCK, inc.

KNOCK, inc. is a full-experience creative agency based in Minneapolis, MN.

Problem

KNOCK's previous website struggled to communicate the breadth of their services, particularly as a “full-experience” agency. Additionally, the company wanted a new and more modern online presence for their business. This was important because KNOCK wanted to bring in recurring client work with future-focused companies.

Solution

I designed a totally new look and layout for KNOCK's website, focusing on restructured case studies that entice new client relationships through storytelling and real-world results.The new design creates more opportunities for "wow" moments for CMOs looking to hire some professional creative back-up.

My Role

Designing the evolved identity, assets, and website end-to-end, working closely with engineering to build a highly creative and functional user experience

The Team

Tools Used

I acted as Solo Designer with guidance from 2 Creative Directors, 2 Engineers, 1 Project Manager, 2 Co-founders, and about a dozen other leaders at KNOCK.

Sketch, Adobe Suite, Principle, Wordpress, Basecamp

Research

I conducted a comprehensive competitive analysis to inform the website's design. I studied hundreds of agency websites around the world, giving special consideration to local competition, design trends and best practices. By observing KNOCK’s competitors, I anticipated which elements to prioritize in the following steps.

Competitive Analysis

Through market research we identified that KNOCK’s primary audience is made up of CMOs looking for a creative partner. They’re probably visiting the website for the first time, and they might not spend very long. They’re most likely skimming the website on their work computer.

Audience

Working with a cross-functional team, I created a user journey map for KNOCK's website that identified target users' needs and wants. We then created a graph of each audience's key questions, such as "What does KNOCK do?" We formulated answers to those questions while considering KNOCK's ultimate goals for the website, ensuring a successful user experience.

User Journey

The CMOs looking at KNOCK’s site want to be wowed. They know how to sell their product/service, but they need some creative flair for their marketing efforts. And, they need to know that their new creative partner will be able to meet and understand their business objectives. By designing an out-of-the-box experience for KNOCK’s site, I planned to create multiple “wow” moments that demonstrate KNOCK’s unique personality. Additionally, a new case study format focused on communicating the tangible impact made by KNOCK’s previous work will make it easy for prospective clients to choose them.

User Needs

Ideation

Working in tandem with top leadership at KNOCK, I identified and drafted the elements necessary for their new website. Then, I organized those elements into pages and content blocks, keeping in mind their existing system and desires for the future website. I paid special attention to case studies, a major aspect of new clients’ first encounters with the agency, to ensure an enjoyable and memorable experience.

Architecture & User Flow

Working with team leaders at KNOCK, I crafted case studies that showcase the company's “full-experience” approach to creative work. During this part of the process, I conducted collaborative card-sorting sessions in order to determine which elements should be shown, and in what order.

Card Sorting

Using approved card trees as a guide, I drafted priority guides in Sketch that acted like wireframes, accounting for all elements without limiting possible design implementations.

Priority Guides

Visual Design

I designed high-fidelity prototypes of KNOCK's website to ensure consistency and internal understanding of the concept. By providing a clickable prototype, code snippets, and custom motion design, I was able to effectively communicate with engineering and ensure a pixel-perfect end result.

Prototypes

“Wow” Moments

By designing a homepage that immediately defines who KNOCK is, visitors can quickly understand what they’re seeing. Case studies are introduced with a series of images to give visitors a feel for the scope of work.

Future-Proof Case Studies

Copy length, tone of voice, and overall functionality was closely controlled to fit a pattern that lends itself to case studies that demonstrate impact through tangible business results.

Squiggle

I designed the blue “squiggle” as an extension of the logo mark, to represent storytelling, and as a through line between science and art, which are pillars of KNOCK’s brand. The animation follows the user as they scroll to create visual interest and delight.

Evaluation

Whenever possible, I tested my ideas and designs through varying methods, gathering both qualitative and quantitative data from individuals in our target markets. The vast majority of the user testing I implemented involved 1-on-1 interactions with users, particularly ethnographic field studies and moderated usability testing. The feedback garnered from those interactions played a significant role in ensuring usability without sacrificing KNOCK’s unique creative flair.

User Testing

Throughout the development process, our cross-functional team of designers, writers, and engineers met to ensure alignment on every piece of the project. We worked together to refine the product while adapting to new information and requests whenever they arose.

QA & Launch

In the months after launching the new website, KNOCK saw an increase in business that reflected their long term goals. They were able to bring in new clients while growing relationships with existing partnerships. KNOCK’s clients, new and old, commented on how the new website effectively demonstrated a holistic approach to creative problem solving through their varied capabilities as an agency. Plus, it embodies KNOCK’s playful-yet-thoughtful culture.

Impact

View the website:

💻 KNOCKinc.com