MARK TSE
  • PROJECTS
    • DEUS
    • CISCO CX
    • HEALTH 2047
    • JOHN DEERE
    • O-BOX
    • PRE SALES TOOL
    • SAIC MOTORS: MAXUS HMI
    • SAIC MOTORS: NEXUS
    • SYSDIG
    • Toyota Research: AI PROJECTS
    • VR GESTURE
  • CV
  • ARC
  • MI
  • STARLYTE
  • xPLORATION
  • GAME ART
  • Blog
    • 3D/MOGRAPH
    • Z-BRUSH ANATOMY
    • Z-BRUSH TUTORIAL 01
    • Z-BRUSH TUTORIAL 02
    • Z-BRUSH TUTORIAL 03
    • AS A DESIGNER
    • C.A.T. LOGO
    • FORD IDEATION
    • GV DESIGN SPRINT VS APPLE
    • NEXON EXPERIENCE
    • SUB-SURFACE SCATTER
    • TESTIMONIAL VIDEOS
WHAT: A tool to monitor data of deployed environments at the system call level using an agent.
WHERE: Sysdig
ROLE: SR. PRODUCT DESIGNER
Picture

Sysdig

PROJECT 1: RUNTIME IMAGE SCANNING AUG 2019 PROCESS

DEFINE THE PROBELM

On the SECURE product line, Sysdig offers a series of features and tools. Among those tools is Image Scanning, which is section to way for the user to view a security infrastructure. Image scanning will compare the passing and failing of images in a table but users found this information to be rather useless and flat without a narrative for that information. This is the process in which I found a fix and solution.

RESEARCH: ​PERSONAS

At Sysdig, our director created 2 main personas made from an amalgamation of various roles across existing clients.
Axle Longo, Security Operations
Axle would be someone who looks at the deployments such as a dev ops engineer. In other organizations such as Visa or Chase would be a Security Engineer.
Kelvin Chen, Security Stakeholder​
​Kelvin would be more of a security officer who makes reports to higher level dev team.

ANALYZE

To really understand the user journey story of each personas. What I found is that users that represented both personas has a problem with the old Runtime Image Scanning feature.

DESIGN SPRINT

Product particularly sets the vision for the product, the requirements and the requests of current clients. Design solves for those requirements while taking the existing design system into account. The Dev has to take feasibility, development strategy as well as time into account. 

he philosophy is to spend time to test and work on trying ideas to save on costly and time consuming development with prototypes.

​ORIGINAL RUNTIME SCANNING FEATURE

Picture
Original Design
  • ​It's just long list of images passing and failing.
  • Gives no context
  • Are Images getting better or worse?
  • How severe are the the vulnerabilities?

SOLUTION

Picture
How I improved the design.
  • Percentage of passing and failing images gives context and trend of improving or degradation of deployments
  • KPI Bar at the top gives an overview for Stakeholder Persona
  • Toggle between Scanned Images, Top CVEs, and Latest CVEs
  • CVE Severity Count added to the table.

PROJECT 2: COMMANDS AUDIT VISUALIZATION/DARK THEME EXPLORATION (SEPT 2019)

Commands Audit was feature where the lead designer, Albert Leung and the UX Manager worked on. I only acted as a designer to flesh out the data visualization part of the design system library by creating markers that would be able to indicate key events such as a kubectl, a command, along with other alerts and events.

STACKING EVENTS

Picture
  • Hard to align with historical data
  • Hard to decipher meaning.
Picture
Illustrate events related to a single Kube Exec command. Activates when expanding the collapsing table for that Kube command.
Picture

BULLET AND BAR

Picture
  • Cleaner solution
  • Easy to read​
Picture
Comparing events to performance metrics.
Picture

PROJECT 3: IMAGE VERSION COMPARISON (DEC 2020)

Picture
This little is about comparing and showing the changes in vulnerabilities between versions of the images.

The Design revolves around the Axle Longo, Sec Ops persona under the premise that users want to know what changed between updates and fixes to vulnerabilities discovered by the images.

PROJECT 4: SECURE OVERVIEW (FEB 2020)

Overview, is a dashboard that surfaces key secure performance metrics over the user's environments. I was tasked to lead the discussion on what would be an ideal design for the Security Administrator persona to look at their builds and runtime environments and ultimately create a dashboard. What you see below in the final design for the Overview environment.

DESIGN SPRINT WITH PM, STAKEHOLDERS AND DEV

IDEATION: 3 PART SECTION DESIGN

IDEATION: BUILD/RUNTIME SECTION

Initially the requirements as in the form of a list. Designing along side PMs in a design sprint allows to expore how to conceptualize these concepts and ideas.
During our PM and Designer design jams, we felt another valid perspective is to see our environment in terms of build and runtime.
Picture
PROS AND CONS
  • Easier to compare historical diagrams with each other for correlation.
  • Organize information into three parts.
  • Easy to get lost  without Titles and context.
Picture
PROS AND CONS
  • Able to clearly distinguish from Static and Runtime Environments
  • No scrolling one pager
  • Compliance seems tacked on
The PM and myself met with three clients and conducted some user studies and showed a couple solutions. While a couple clients preferred the 3 part rows, we had an even split with the other solution. My design incorporated both toggling between the List View and Card View using a toggle in the upper right hand corner.

LIST VIEW

Picture

CARD VIEW

Picture

RELEASED FINAL DEV BUILD

The final design had two modes. One was a list view and the other was a card view. While the design was superior. The finished product was only the card view due to development time constraint though I am confident the list view  would be in the future pipeline.
Picture

 PROJECT 5: SINGLE SIGN-ON AUTHENTICATION (MAR 2020)

Picture
Picture
Increase sign in options in a vertical stack rather than horizontally.
Picture
Picture
Mark Tse
​2016
  • PROJECTS
    • DEUS
    • CISCO CX
    • HEALTH 2047
    • JOHN DEERE
    • O-BOX
    • PRE SALES TOOL
    • SAIC MOTORS: MAXUS HMI
    • SAIC MOTORS: NEXUS
    • SYSDIG
    • Toyota Research: AI PROJECTS
    • VR GESTURE
  • CV
  • ARC
  • MI
  • STARLYTE
  • xPLORATION
  • GAME ART
  • Blog
    • 3D/MOGRAPH
    • Z-BRUSH ANATOMY
    • Z-BRUSH TUTORIAL 01
    • Z-BRUSH TUTORIAL 02
    • Z-BRUSH TUTORIAL 03
    • AS A DESIGNER
    • C.A.T. LOGO
    • FORD IDEATION
    • GV DESIGN SPRINT VS APPLE
    • NEXON EXPERIENCE
    • SUB-SURFACE SCATTER
    • TESTIMONIAL VIDEOS