NiKnack Brand Refresh

Branding, Interface Design, UX, Web Design


niknack marketing homepage

A bold rebrand 
for a dynamic marketing agency

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

Logo Refresh

Giving the brand a modern look and feel

I refreshed the agency’s logo, streamlining the design elements to modernize the look and feel while maintaining the company’s brand recognition. I removed the gradients, refined the curves of the logomark, and replaced the type with a bold geometric font that would be used for the website redesign.

niknack logo transformation

Creative Strategy

A High-level Competitive Analysis

Prior to wireframe development, I presented a conceptual document, revealing 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, in order to get buy-in 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, in order to expand the purview of possibilities and think bigger.

Introduction Slide
Typographical Hierarchy
Vertical Snap Scroll
Authentically Human Testimonials
Bold, Clean Interfaces
Well Designed Infographics & Data

Wireframes

Architecting a user-friendly experience

After agreeing on the creative direction, I began working on the clickable wireframes to effectively organize the site content, define the functionality of the components and optimize the flow. I’m not a mobile first UX person–I’m what I like to call, a “mobile simultaneously” designer. When working on a responsive project I often wireframe desktop interfaces at the same time as mobile–this ensures that each component is properly optimized for the respective devices, while maintaining the intended user experience.

homepage carousel wireframes
about us wireframes
client stories wireframes
news wireframes

Visual Design

Designing the user interface

Once the wireframes were approved, the next step was the visual design. Leveraging Sketch, InVision and Principle, I created a distinct design system comprised of unique UI elements that, together, formed a bold and exciting new look. I included ample whitespace and used bold headlines with short, succinct copy blocks to create a visual hierarchy while increasing scannability. I also introduced fun infographics and micro-interactions to make the content more dynamic and easier to consume. To see the end results, view the prototype here or use the button below to view the live site.

Niknack Website responsive creative
Niknack Website responsive creative

Development Handoff

Defining the site functionality

Finally, to conclude the project, I created a detailed functional specifications document to help guide the development team in maintaining the creative vision while providing guidance around reusable components that would help them to develop scalable snippets of code to expedite the build process.

functional specs page
functional specs page
functional specs page
functional specs page
functional specs page
functional specs page
functional specs page
functional specs page
functional specs page