SIMPLIFYING WEB SECURITY FOR REMOTE WORKFORCE

Designing the next version of Web Security incorporating new features, and refreshing the UI to transition from legacy customers to the new design.

The following case study walks through the design process showing the visual and iconography designs for the Web Security.

THE PRODUCT

Trend Micro Web Security (TMWS) is a cloud-based security service that provides web security protection, identity, and risk insights for remote workforce accessing the web.

Before the new version, the legacy TMWS web security SaaS application emphasized heavy text in menu and data table.

DESIGN FOR HUMAN

GOOD DESIGN IS AESTHETIC

In enterprise products there are always a balance between supporting the business goals, solving users' pain points, and having a delightful user experience. Rarely do enterprise products get all three mixes right. Most seems to focus more on adding features that could create market impact, and increase buyers of the products instead of improving the user experience for existing users of the product.

According to Dieter Rams good design is aesthetic*. I would add that good design starts with the users in mind, and that helping users solve problems in a delightful way should not be sacrificed just to ship products.

With this philosophy in mind, the new web security design needed to be modern and minimal, to work with many forms of dense information. I partnered with a front-end developer to a prototype to gather feedback with product management and a team of peer designers.

INTERFACES AS PHYSICAL OBJECTS

At the time, the idea of interaction design as physical objects appealed to me. I wanted to bring the physicality of using papers cards to cybersecurity products. When you are working with pieces of paper, they have weights, stack on top of one another, and move in and out. I wanted to incorporate that kind of metaphor of cards and dropshadows, with depth, and animation into the design. Much of this was influenced by Google's Material Design.

A design based on physical objects like papers and index cards, using animations to show movements.

When appropriate, the interface allows for full-width "focused-mode".

TYPOGRAPHY & GRID SYSTEM

For fonts, I experimented with different sans-serif font types and finally used Freight Sans Pro for navigational elements (in the top navigation and side menu) and Inter Neue for the main body font. Freight Sans Pro feels to me like a magazine typography while Inter Neue allows for both table data as well as paragraph texts.

Using a 12 column grid system for layout.

ICONOGRAPHY AND COLORS

The iconagraphy were designed to draw attention, using the two-tone colors in the navigation menu. For the color palettes, I considered Trend Micro's branding but added bolder saturated colors.

Introducing Web Security

Introducing the modern next-generation TMWS Web Security to simplify security administrator workflows.