About the Project

Partnering with veteran producer Helenita Frounfelkner at Never Not Prepared, we were ready to improve the brand’s visual assets and provide an engaging and fun experience for the parent-centric audience.

The Team
  • Philip Zaengle Lead Developer

  • Helenita Frounfelkner Client Management / Producer

  • Derek Nelson Design Director

  • Jesse Schutt CraftCMS Add-ons

  • Jacob Zaengle Frontend Developer

Services
  • Craft CMS Development
  • Information Architecture
  • Content Strategy
  • Craft Commerce Development
  • User Experience
  • User Interface
  • HTML / JS / CSS
  • Client Training
  • Ongoing Support

For Zaengle, I’m sure Nook was the client from hell – brand new to the website development business and unsure of how we wanted our new ecommerce site to look and function. Plus, unable to put all this into developer-friendly words. Zaengle took us under their wing, patiently brought us up to speed, and kept us there. They delivered the website of our dreams on time and on budget with no change orders. And the response we’re getting in terms of sales growth and praise is just remarkable. A huge “thank you” to the entire Zaengle team!

Jamie

Nook President

Bringing the Brand to Life

Anytime we’re working with an existing brand, it’s critical to understand which brand assets exist and which ones are working (hint: there’s a difference). Nook had a strong, recognizable logomark but the wordmark needed a modern touch and some added playfulness. The typeface was reminiscent of software engineering rather than the relatability and liveliness of their brand. The existing photography was good, but it was mostly dark and lacked the emotion needed for the audience to picture themselves with the products.

  • Content Strategy
  • Sitemap
  • Moodboards
  • Wireframes
  • Design

Pen to Paper

Oftentimes overlooked, the content strategy for the site redesign was almost as important as the actual design. Identifying user personas and site goals early on allowed for a fully cohesive content strategy that supported the lifestyle brand while maintaining the importance of Nook as a leader in the baby space. Building a solid content strategy enabled the rest of the team to integrate key themes and key value propositions throughout the content, design and functionality.

Giving the Brand its Foundation

The existing navigational structure of the site was disjointed and seemed to bounce all over the place. Users weren’t able to find valuable product information or learn about why Nook’s products were a cut above the rest. Rebranding doesn’t stop in the visual design or logo work. If the site redesign was truly to be a success, the brand needed to be carried throughout the site’s architecture. Providing a navigation that truly communicated Nook as a lifestyle brand was paramount to the site’s success both from a sales and user experience perspective.

Which way do we go?

Once the site structure was finalized, establishing the visual tone of the site was a critical first step in the design process. There are so many different places you can take a brand. It’s important to present a variety of options in the beginning to get everyone on the same page. With a few keywords like fun, relatable, helpful and playful from which to pull, we put together some moodboards to show the Nook team the types of directions in which we could go. Gaining alignment on the overall tone - color palettes, typography, textures and photography -  ensured we were all in agreement about the brand’s vibe, and it had the added benefit of getting us all pumped for the design work to come.

Get your toilet out of my kitchen

As the final step before design, wireframes were the combination of our brand direction, content strategy and sitemap. They, in short, ensured that Nook wouldn’t have misplaced content both within the site or within any individual pages. Since we were starting from scratch, high resolution wireframes proved to be invaluable as we developed a modular design that also meshed with the newly developed content. Wireframes provided Nook a sort of sneak peek at what the designs would bring, which helped us talk through critical UX best practices, allowed us to spot potential copy-related issues early, and provided us with a solid starting point for development.

All the Pretty Little Pictures

Finally, it was time to bring everything to life. With the content nearly complete and a full lifestyle photography shoot being done, we were eager to show Nook the future of their brand. Nook’s leadership had a clear vision for their site design. They wanted to get out of the dark ages and be light and crisp and clean. It was important that we highlighted their key value propositions

Establishing our approach

As part of our design process, we established a style guide for the site. Compatibility for on-the-go consumers is very important to us. As the majority of Nook’s audience are women, namely mothers or soon-to-be mothers, ensuring the site was mobile-friendly was a top priority. Our mobile-first mindset helped structure each design component with portability in mind.

Development

Ease of content, product management, and order fulfillment were key for the Nook team; speed, responsiveness, and ease of use were key for Nook consumers. To meet these needs, we chose Craft CMS and Craft Commerce as the best possible management tools for the Nook staff, and we selected a handful of top notch front-end tools such as Vue.js, and Algolia to create a fast and engaging experience for consumers.

  • Craft CMS
  • Craft Commerce
  • jQuery
  • Vue.js
  • Algolia

Craft CMS

Content management is pointless if the content editors are afraid of the management system. Nook’s existing site was difficult to manage on the backend, causing order processing to be more of a headache than a joy. Craft offers an interface that is simple and intuitive while providing incredible flexibility. The Nook team quickly grasped the basics of Craft (it took all of 15 minutes) and now manages all of the content allowing us (the dev team) to continue to add features.

Craft Commerce

Integrating content management and commerce was critical to the success of the site relaunch. Craft Commerce provided the Nook team with one place to conduct all of their site and commerce management. The Nook team loved having the ability to easily connect products to marketing material. Additionally, it’s convenient for consumers, allowing them to make faster purchasing decisions.

jQuery

For strictly marketing non-dynamic functionality, we stuck with the tried-and-true solution of jQuery. This framework makes it easy to manipulate the page elements on the fly.

Vue.js

Not to get all “nerdy” on you, but data binding was at one time very difficult. Now with Vue.js, data binding is a breeze. We could have used Angular or Backbone but Vue fit best for what we needed. We love Vue’s modern approach to two way data binding. Many of the complex (and fast) interactions the Nook site users enjoy are powered by Vue.js.

Algolia

We used Algolia’s screaming fast API to make searches on Nook both quick and relevant. Offloading searches to Algolia was a win for speed and also allowed us to take what would normally be expensive queries from our server and point them to another resource. This resulted in ultra high performance Craft.

Initial ROI / Results

Overall, the Zaengle team was able to create a fun and intuitive way for customers to interact with Nook and purchase their products. Sales are (way) up and user engagement is at a high. 

382%

Sales Increase

over previous month
31%

Bounce Rate Decrease

over previous quarter
158%

Time on site up

over previous month