1 of 12 Projects
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
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-CoverA slide from the NiKnack Marketing creative concepts client deck-Why Creative ConceptsA slide from the NiKnack Marketing creative concepts client deck-What you'll seeExamples of homepages that snap into place as the user scrollsExamples of well crafted design systemsExamples of bold typographyExamples of well designed infographicsExamples of human testimonialsExamples 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
Wireframes: Homepage (desktop and mobile)
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
Wireframes: Case Studies page (desktop and mobile)
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
Wireframes: Contact Us page (desktop and mobile)
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
Mockup: Homepage
NiKnack Marketing case study page mockup
Mockup: Case Study page
NiKnack Marketing contact form mockup
Mockup: Contact Us page
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.

See the live site
arrow pointing right
arrow pointing upward