Website for a cybersecurity startup on a mission to free society from cyber crime.

Summary

Noble was a cybersecurity startup (discontinued) which offered powerful solutions to enterprises. Formerly Berry Technologies, the company rebranded and I was brought in to take the new brand and translate it for the web.

The project timeline was 5 weeks and I worked closely with the Noble marketing team from the onset. The site launched in mid-2019 but was short-lived, shutting down in March 2020.

In short, the process consisted of planning out the sitemap and wireframes, exploring initial ideas, visual and responsive design, prototyping micro-interactions, frontend code, integrating the code into WordPress, and cross-browser testing.

Strategy

I worked closely with the client’s marketing team on multiple iterations of the sitemap and wireframes. Once we defined the structure of the site, we had a solid framework to work from moving forward.

Initial ideas

The routes I explored for the landing page were illustrative, video-led, and typographic. The client went with the typographic route because it brought the ‘monolith’ logo mark into the forefront.

Visual design

With limited time, we wanted to focus on the homepage and technology page. These were key pages that would inform site visitors with an overview of the company and their main product. The ‘monolith’ is used throughout the design as a key brand element.

Prototyping

I created a series of codepens to demonstrate simple transitions and animations to the client which would otherwise be presented as static elements. These included a background gradient animation, seen on the footer and at the top of the homepage, and a hover effect on the CTA buttons.

See the Pen Button by Brian Bale (@brianbale) on CodePen.

See the Pen Gradient Animation by Brian Bale (@brianbale) on CodePen.

Responsive

Rather than designing each page in every breakpoint, I save time by making responsive adjustments directly in the browser. For more complex elements, navigation as an example, these need to be designed prior to the build stage. Breakpoints included varying devices and orientations for desktop, tablet, and mobile.

Frontend + CMS

WordPress is typically a good choice as a CMS because the admin area makes it easy for the end-client to create or modify content. I’m always thinking of better ways to integrate my frontend code into WordPress’s theme files for when the time comes to the eventual hand off of the site. A few plugins helped with this process.

I used ACF and CPT UI plugins to add custom fields and post types, respectively, to the admin pages. TinyPNG, an essential plugin for every site build I do, was also set up to automatically compress image files.

Integrations

I worked with external CRM specialists to integrate Pardot, a marketing automation solution, within the contact form. Submitted forms store contact details on the CRM system for Noble to manage potential leads.

reCAPTCHA was also integrated on the contact form for authentication and to prevent spam form submissions.

Guided by SEO specialists, Google Tag Manager tracking was added to the site and the Yoast SEO plugin was set up for the client to manage in the future.