Category: Branding

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.

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.

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

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

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.

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.

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:

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.

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

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.