About
Security Ninajs
  • UI/UX, Front-end dev
  • Summer 2016
  • Illustrator, HTML/CSS/JavaScript
  • Adobe Systems Inc. (Security Team)
  • Adobe's employees must be aware of safe security practices at all times and are encouraged to apply strong security principles to their work, regardless of their role at the company. In order to promote this, the Security Team at Adobe developed the Adobe Security Ninjas program that allows any Adobe employee to earn points for completing security-related projects and training programs.
    Employees can submit projects, which are reviewed by members of the Security Team who then reward the employee a number of points. The more points an employee has, the higher their belt level. Many employees strive to earn the coveted black belt, which is a status bestowed upon only a small handful of employees.
    The Problem

    The Security Team previously used JIRA to hold the program's content, which included the list of employees in the program, user profiles, project profiles, and belt (white, green, brown, and black) lists. This was inefficient as the JIRA interface was disorganized, bland, and uninviting overall.

    My task was to design a new interface for the Adobe Security Ninjas program that would completely replace the front-end JIRA interace (while the program's data would still live on JIRA).

    goals

    Beyond giving the program a prettier UI, I set out to solve some problems with the old JIRA UI in the redesign. After speaking with the program manager and a few of the users of the old platform, I identified the following problems with the old UI:

    After I had a good understanding of the space, I came up with the following features to help mediate some of the existing problems:

    wireframes

    I created an interactive lo-fi prototype to demonstrate some of the new content features.

    Created with HTML, CSS, and JavaScript (jQuery).

    Since I was proposing new features to the program itself, I wanted to use this wireframe as a visual communication tool to discuss the new content and features with stakeholders. This wireframe was especially effective at demonstrating the benefits to some of the proposed features, such as how adding a random animated gif every time the user submits a project can add delight to the product by providing the user with a subtle, unexpected reward.

    feedback

    The wireframes started a great conversation about new features and content to include in the new redesign. The stalkeholders loved the idea of providing more feedback on the status of projects (whether or not they had been received and/or reviewed) and having more visibility into what other employees were doing. The animations were well received but were regarded as a lower priority item.

    iterations
    V1: Created in Adobe Illustrator.
    V2: Created in Adobe Illustrator.
    V3: Created with HTML, CSS and JavaScript (jQuery).