User Portal Design


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.