The Problem
In Q4 2018 we transferred out website to the HubSpot CMS. The transfer allowed, for the first time, our marketing team to directly edit content, add visual elements and even generate our own pages without assistance from our overwhelmed web developer. As the marketing team learned the ins and outs of HubSpot, we identified an opportunity to quickly update the company blog.
The Squirrels Blog was hosted on WordPress, separate from the main site, and was basically a scrollable page of disparate posts, organized chronologically. Additionally, the site hadn’t been updated since its conception in 2012 and required significant visual and functional adjustments.
My Role
I conducted market and UX research, curated an appropriate navigation system and theme for the project, and applied our brand’s UI toolkit. I coordinated and collaborated with key stakeholders to determine, iterate and implement the best solution for our customers and business objectives.
This project spanned the entirety of Q4 2018, on the back burner of three major initiatives: the annual Cyber Monday Super Sale, a social media ad campaign for Ditto and the launch of Squirrels’ hardware arm, Squirrels Research Lab. I also notably sustained and recovered from a severe concussion in this time so progress was relatively slow and deliberate.
10.10–10.12 Met with key stakeholders, conducted research based on their needs and constraints
10.15–10.17 Purchased an initial design pattern, applied our brand’s visual interface, edited navigation
10.18–10.19 Generated homepage, category and article mock ups with our web developer
10.22–10.26 Iterated structure, typographical/information hierarchy and hero banner functionality
11.1–11.5 Created and tested initial blog welcome and update emails
11.15–11.16 Launched the new blog. Iterated monthly blog update emails
11.19–11.20 Troubleshot HubSpot functionality (primarily email integration) with our web developer
1.31 Created a new, instant blog update emails.
The Solution
User Personas
Squirrels Fanatics
Someone interested in the goings on about Squirrels HQ, how we do things, awards, press mentions, etc. This group includes press, brand advocates, product super fans, and prospective employees and clients.
Prospective Purchasers
People interested in understanding how Squirrels products fit into their business, organization, home or institution so that they may communicate those features, benefits and advantages to key stakeholders.
Product Administrators
Individuals responsible for knowing the ins and outs of our products, staying abreast of product feature sets, or acting as client-side points-of-contact for support; power users, heads of IT, technology directors, office managers, etc.
Metrics of Success
A significant reduction in article “tags". Streamlining our tagging system enabled an automated “Related Posts” section and allowed intuitive navigation. We went from hundreds of tags to about a dozen between products and use cases.
Content broken into four distinct pillar pages: Company News, Screen Mirroring, EdTech and Changelog. This made for simpler user navigation and allowed readers to sign up for custom email subscriptions. It also set the groundwork for a scaleable SEO strategy being developed for 2019.
An updated navigation system, typographic hierarchy and improved visual design integrated with the Squirrels homepage. Navigation from one to the other became seamless, improving brand voice and consistency of the user journey.
A “sticky” header article improved visibility of relevant, all-pillar content like major releases, updates and sales.
Adoption of the HubSpot CMS improved autonomy of the blog’s primary content creator, Bryce. Article turnaround improved, as roughs and editing could be done within the platform. An asset library hosted on HubSpot allowed Bryce to manage recurring images. Operational design was cut from every-day involvement to batched custom images and brief design reviews.
Email Integration
Customizable email subscriptions were a big ask regarding our business needs. Subscription was broken into pillar categories to avoid spamming our varied demographics with content that may not apply to them. HubSpot’s sub-blog functionality enabled this powerful feature, and we saw an uptick of subscriptions overall.
Welcome emails for each content pillar were sent immediately upon subscription.
Instant updates were sent for each pillar. About one to three per month.
Blog CTAs
We identified a need to include in-text subscription CTAs. These increased article scanability by distinguishing the calls to action from normal content. They also improved brand voice by professionally polishing reoccurring elements and evoking the message that we want to provide the user with more resources, but don’t want to interrupt their experience.
Approach
Site Audit & Research
Plans had been in place to update the site’s blog for years. A combination of workflow bottleneck and higher priorities kept us from implementing anything, but three iterations of new sites had been explored from 2014 to 2018. We had a decent grasp on the problems we were trying to solve, so a full audit to gain stakeholder buy-in wasn’t necessary.
That said, I did conduct research at the beginning of this project. I collected data on brand heroes, key competitors, and other brands in our market. I acquired business needs from our Director of Marketing. I then held meetings with the Director of Communication and Digital Marketing Specialist to determine their needs and constraints.
Sharing
Share rates are relatively low for blog posts, unless you go viral. We wanted to maximize the likelihood of shares with social button redundancy. Sticky hero banners, headers and scroll bars gave readers the option to share whenever the mood strikes. We spent some time customizing HubSpot CSS to meet this need.
Page Iteration
Wireframes played a key role in communicating strategy and direction for the blog. I focused specifically on homepage, categories and article templates. We spent some time iterating sticky headers, the showcase of the blog.
Layout Wireframes
Hero Wireframes
Interaction Design
This project was the first to see major steps in interaction design. Once wireframes were complete, the web developer and I worked together to craft clean, modern interactions that signified utility and progress. Most commonly, this occurred as hover states and in-article drop down and accordion features.
Learnings
Project Overview
The Squirrels Blog redesign was an opportunity for the marketing team to stretch their legs within the HubSpot CMS. A significant amount of learning on the job took place, and team communication spiked as we explored how the nuances of our new system fit into our workflow. Specifically, Tom, our Director of Communication, and I spent hours probing and strategizing around email integration. The marketers also leaned heavily into scalable content strategies for the blog.
As Creative Director, this was my first big job with our Marketing Specialist, Bryce, who owned the blog, and with Mark, our new web developer. Collaboration with these roles tested my professional believe of flat organizational structure and I practiced a more holistic approach, rather than relying on consecutive dependencies. Mark and Bryce excelled within their roles, working with great passion and removing a lot of the workload and overstrain I had experienced on previous projects. They were integral to the successful launch and ongoing efforts of the blog.
Pain Points
Concussions make work harder. My performance was negatively impacted for about five weeks at the beginning of this project.
The surprise launch of the SQRL hardware arm siphoned marketing and design resources for most of the quarter.
Customization within HubSpot taxed our web developer and marketing directors, but once it worked, it worked well.
Solutions
Communication and reliance on my teammates kept this project going as I recovered from my concussion. A collaborative, squad approach improved the team’s quality and speed of execution moving forward.
There was no getting around the “emergency” hardware launch. However, team leaders pushed back in ecosystem meetings and petitioned for better communication from executives and for more focus within product verticals. SQRL split from Squirrels in early 2019.
Ongoing efforts to understand and optimize our use of HubSpot improved our turnaround and decreased issues within the platform. Tom and I began learning and implementing new marketing tactics for awareness, conversion and advocacy. I brushed up on my HTML/CSS to better collaborate with Mark.