Author: Fray

21 Jan 2013
Old Scout Anti-Ransomware Video Thumbnail

Motion Graphics

Here are a few examples of the many animated product videos I made for Safe Systems. In each, I was a one-person production team, handling the storyboarding, animations, timeline editing, and sound design.

20 Jan 2013

Live Action Videos

Here are a few examples of the many interview-style videos I made for Safe Systems where I was a one-person production team.

I handled the storyboarding, lighting, camera work, audio capture, timeline editing, sound design, color correction, and custom motion graphics.

03 Jan 2013
Magazine ads for Safe Systems

Corporate Collateral

Magazine ads for Safe Systems

I was hired at Safe Systems in 2014 and was responsible for developing and overseeing what was then the new brand identity guidelines.

For the next decade, I designed hundreds (if not trillions) of brand collateral, including:

  • logos
  • brochures
  • presentations
  • custom mailers
  • print and digital ads
  • event environments
  • trade show signage
Swag for NetConnect, Safe Systems's users conference

I worked closely with our engineers and regulatory experts to create content, often filling in as copywriter as well.

This taught me how to consolidate technical and dense concepts into approachable and efficient language. Here are a few white paper layouts where that skill definitely came in handy.

A variety of white paper layouts

I was a part of a small Marketing department. Out of necessity, I became fully trained in the inbound marketing strategy and eventually HubSpot-certified.

In HubSpot, I regularly prepared mobile-responsive marketing emails, like the ones below, often using custom CSS to get everything just right.

A variety of responsive email layouts

I’ve become adept in software I would’ve never otherwise considered. I’m looking at you, PowerPoint.

Slide layouts

This job allowed me to explore the full gamut of corporate collateral. It’s a corner of design I’m now quite comfortable with and yet I’m still finding new things to learn all the time.

02 Jan 2013
A product page for Safe Systems

Company Websites

A product page for Safe Systems

I was just Safe Systems’s senior graphic designer on paper, but the entire company website was also my domain (oof, a pun).

So, in addition to developing the brand identity, I also created the website’s UI/UX, design systems, reusable components, and page layouts.

Design system in Figma

Unlike the user portal, which was a custom development, the main website was built in WordPress. It was a jumping-off point, and I heavily altered the HTML to match my own outlandish standards.

Here is an announcement banner I coded from scratch that features both CSS and JavaScript.

Some custom code for an announcement banner

For many years, I also wrote and implemented SEO metadata and oversaw hosting maintenance, such as updating SSL certs and the PHP version.

Path Exploration in Google Analytics

It wasn’t just about looking pretty! I always kept responsive design, page speed optimization, and user flows top of mind.

Desktop and mobile views for a product page

Below is an overview of page layouts I have designed, including product pages, blog posts, and event information hubs. These and many more can be found on the Safe Systems website.

01 Jan 2013
The user portal for Safe Systems customers

User Portal Design

The user portal for Safe Systems customers

For 10 years at Safe Systems, I was the sole creative, but I wasn’t alone. I worked closely with the Development team to completely revamp our user portal, “theSafe.”

This thing needed some help. It was stuck in 1995.

A tongue in cheek mock up

Okay. I photoshopped that, but the screenshot is real!

This was supposed to be our flagship software. This was where banks monitored their IT infrastructure, grabbed regulatory reports, and accessed security trainings. It deserved a secure, flexible, and modern design.

So, the developers and I discussed its strengths, weaknesses, and must-haves. We defined the user stories and flows, and eventually made wireframes like this:

A wireframe of the home view on the portal

Not the prettiest, but just what I needed to produce the prototypes that would begin to define the new UI, design systems, reusable components, and page layouts.

Design system in Figma

In the end, simple wireframes like that turned into this:

Home view when you log into the portal

Looks aren’t all. It was also coded to have blazing fast page speeds and intuitive responsive design for mobile and tablet viewports.

Stylized mockups don’t really show the whole picture, so here is a selection of screen captures below to demonstrate the breadth of work.