Menu close X
let's talk.
Get in touch with me
connect.
Find me on LinkedIn
NiKnack Marketing mobile screens

A new creative direction for a dynamic agency

Client: NiKnack Marketing

In 2018, I had the privilege of entering into a creative partnership with NiKnack Marketing, a full-service marketing agency in Chicago’s trendy Bucktown neighborhood.  With two accomplished woman CEOs at the helm, the agency provides clients with marketing, branding and event management services. This website redesign was one of the first projects I took on.

My Role: Creative Director & UI Designer
arrow pointing down
NiKnack Marketing mobile screens
NiKnack Marketing Our Work and About Us page responsive mockups
Our Work and About NiKnack landing pages
Design strategy

Ideating the site's creative direction

Prior to wireframe development, I presented a high-level creative vision and strategic direction for the website redesign.  The document formalized my ideas of how the site could look, feel, and function prior to any heavy design lifting.  Specific concepts were broken down by category and supported by best-in-class examples (both inside and outside of the industry) to expand the client’s purview of possibilities.

A slide from the NiKnack Marketing creative concepts client deck-Cover
A slide from the NiKnack Marketing creative concepts client deck-Why Creative Concepts
A slide from the NiKnack Marketing creative concepts client deck-What you'll see
Examples of homepages that snap into place as the user scrolls
Examples of well crafted design systems
Examples of bold typography
Examples of well designed infographics
Examples of human testimonials
Examples of engaging contact pages

Architecting a user-friendly experience

After the design strategy was approved, I created wireframes to organize the content and define the functionality of the components.  Desktop and mobile wireframes were created simultaneously to ensure each component would be properly optimized for the respective device.

Wireframe of homepage
Homepage Wireframes
Snap scroll

A vertical “snap scroll” was used on the homepage. As the visitor moves down the page, each screen snaps into the viewport, telling a compelling brand story as each section builds upon one another.

Delightful illustrations & graphics

Prominent use of custom icons and data visualizations would be used throughout the page to not only support the text, but to make the content more visually appealing and easier to consume.

Uniform UI components

Each component would be designed to create a congruous and scalable design system that maintains brand consistency throughout the site experience and makes development more efficient.

Wireframe of case study page
Case Studies Wireframes
Distinctive layout

A hyper-visual, aesthetically appealing, non-linear layout would be used to showcase just the right amount of work in order to entice visitors to engage.

Persuasive data points

Meaningful reasons to believe would be backed by quantifiable data points to support the results that the agency has delivered.

Succinct, well-ordered text

Bold headlines and short copy blocks would be used to create a visual hierarchy that defines the page structure, helping visitors to better scan and absorb content.

Wireframe of contact form
Contact Us Wireframes
Sequencing screens

While website form best practices recommend keeping forms short and simple (often relegated to one column and one page/screen), we opted to extend the contact form into three screens.

On the first screen, visitors select the reason for their inquiry. Using logical sequencing, we send users to the appropriate form (general inquiry, quote request or make an appointment).

This approach enables the agency to determine what percentage of the form users are just casually browsing, which are at the top of the acquisition funnel, and which are ready to convert.

NiKnack Marketing homepage mockup
Homepage
NiKnack Marketing case study page mockup
Case Study page
NiKnack Marketing contact form mockup
Contact Us
Logo Refresh

Giving the brand
 a modern facelift

To complement the new site, I refined the existing logo. Extraneous gradients were removed and a bold san-serif font was introduced. The result was a clean, modern logo that feels new, yet maintains the brand equity and identifiability.

Old NiKnack marketing logo
Old Logo
New NiKnack marketing logo
New Logo
See the live site
arrow pointing upward