022019CompleteCybersecurity

zConsole

Administrative dashboard used by mobile app developers and cybersecurity teams of large enterprises

During my time at Zimperium, I managed feature designs for 2 versions of this console, called V4 and V5. Below is a brief comparison between the two.

Visit Company Website

Details

Organization

Zimperium

Duration

2 years

Role

UI/UX Designer

Team

Product

Skills

UX/UI Design

Technologies

Adobe XDFigma

Overview

zConsole is an administrative dashboard used by mobile app developers and cybersecurity teams of large enterprises. During my time at Zimperium, I managed feature designs for 2 versions of this console, called V4 and V5. Below is a brief comparison between the two.

Process

Once I had established my general understanding of the company, its services, and the stakeholders involved, I ultimately decided that creating a design system would be vital to remaining consistent in all my designs. I designed Hyperion, which I describe as a big data design system. You can see more about my design process creating this system below.

Product Comparison

V4

Built with Angular.jsMore featuresOlder and slower

Original v4 dashboard

Original v4 devices page

V5

Built with React.jsMore scalabilityNewer and faster

Original v5 dashboard

Original v5 devices page

The product and engineering team was divided into two teams, one for each version. The reasoning behind this team and project structure is because:

Existing software: Most of the customers used V4 because it had been around longer and they were used to it.
Parallel development process: The new V5 version was still newly being developed; there were not as many functions as V4.
Scalability vs Features: The problem with V4 is that it could not scale as much as V5. Having more data in V4 would reduce performance, which is the reason for the development of the newer version.

Our team tried as much as possible to reduce the amount of rework that may be needed when building a new feature for both consoles, but sometimes it couldn’t be avoided. Therefore, some tasks required me to design vastly different user interfaces.

Since V4 had planned to eventually be deprecated, minimal work was required for those associated tasks, meaning I was told to just have the “get it done” mentality. With V5, I had more design freedom to design things the right way.

Feature Design Tasks

As customers demanded more features and project managed the team's approach, I was assigned to provide designs for new features that would be implented. Below are a few mocks for some of the features I designed.

V4 Features

New V4 Dashboard

Display the data associated with a compromised device

Filter the types of content browsed on the web, along with specified IP addresses

Manage allow/deny third-party apps, or 'Out-of-Compliance'

Create customized device group policies based on specific threats or actions

Choose the level of information that is being collected

V5 Features

New V5 Dashboard

Display data for devices at risk of outdated operating system versions

Edit authentication settings for single sign-on via web

Create new admin role and specify certain permissions

Manage user roles and actions for specific security permissions

Alert notification for successful edit of team members and permission

Rules process to create automated actions based on previous events

Manage Zimperium subscription settings for user accounts

Add or remove apps associated with teams

Modal dialog to mass invite users by uploading CSV file

Manage security metric and specify proximity and threat value

Code comparison viewer for mobile app security scan

Build compare feature to determine security differences when uploading an updated version of your app

Manage QR codes provided for license activation of mobile app

Step-by-step setup wizard

Feature mockup design for V5 dashboard, guiding the user on how to set up their organization's mobile data plan to the zConsole system.

Step 1: Provide initial plan configuration

Step 2 (Part 1/3): Setup groups

Step 2 (Part 2/3): Add group details

Step 2 (Part 3/3): Example screen of completed group configuration

Step 3: Connect integrations with other third-party services

Step 4: Summary of connected integrations

Step 5: Setup complete confirmation screen

Security Analytics Reports

One section that fully utilized the Hyperion Design System was the security analytics reports that were generated when a user uploaded their mobile app to the zConsole. Below are a few examples of the reports that were generated.

Example screen of app assessment results of findings

This screen shows how the user can manage each finding by configuring its severity rating

Consolidated view of app assessment results in panel format

References

"Natcha was a talented colleague I have had the pleasure to work with for a couple of years. We worked together on building enterprise products at Zimperium . He was very integral on designing UX mockups (for both web apps and mobile apps) for use by the software developers. He is a very quick when it comes to timelines and has a talent for really pleasing designs. Even after we are both no longer at the company we met at, we have kept in touch as friends over the years and I really look forward to working with him in the future and would highly recommend Natcha."
-Tom Vongphakdy, Software Engineer

"I highly recommend Natcha for any UX / UI role. In his time at Zimperium, Natcha aided greatly with both Mobile App Design and Web Design.
[...]
Natcha has an extraordinary ability to comprehend and transform complex verbal requirements into UX designs. He has both fresh, innovative ideas and a collaborative spirit."
-Andrew Fausak, Principal Software Developer

Menu