DIB CS

Project Background

The Defense Industrial Base Network Cyber Security Program (DIB CS) is an initiative created to help users safeguard and protect critical data as it pertains to the DoD. The program is developed to place emphasis on cybersecurity best practices and secured sharing of classified and unclassified info. At this stage of my UX/UI career, I had a little bit more of an idea on how to effectively visualize interface solutions that could foster a more intuitive experience. 

In a similar fashion to NLSC, our goal for this engagement involved creating a technology refresh of the pre-existing home page in order to help improve navigation and search engine optimization (SEO). A good deal of the work done on this project required utilization of Git version control, Angular JS, and basic wireframe/prototyping tools. Because this site is currently still in development, I decided to hold back on adding a url. 

Project Requirements

Below is a general highlight list of our preliminary requirements for design and development work:

  • Decrease ambiguity of “Reporting” vs “The DIB CS Program”

  • Provide clear guidance and requirements

  • Align branding with existing online presences – DIBNet landing page should reflect CIO branding (https://dodcio.defense.gov/) to include colors, fonts, and other style elements.

  • Increase SEO by including more information

  • Use of iconography to facilitate meaning of content sections

  • More in-depth regulations, policies, and general guidance

  • FAQ section to address most-frequent inquires from users

Lo-Fidelity Wireframe Phase

  • Draft A

    Initial wireframe sketch for the improved landing page layout per client feedback.

  • Draft B

    Paying attention to each minute detail of the interface content heavily eased the development process.

  • Draft C

    When working at this preliminary step, it helps to be mindful of the content that either needs to be kept or removed.

Mockup Phase

  • Mockup A

    The initial onscreen mockup that was built after receiving iterative feedback on the design layout. It was imperative to ensure that each content element was accounted for.

  • Mockup B

    Building off of the initial design, small changes were put in place to provided a better picture of what end users would be interacting with on the front-end.

  • Mockup C

    Each requirements working-group meeting that was held gave more context and insight into the most critical components needed for the redesigned interface.

A/B Split Test

  • Whiteboard Session A

    As previously stated, one of the biggest factors in driving the design process forwarded pertained to getting feedback quickly and earlier from team members and clients. Synthesizing their input as well as researching best tips and practices for adhering to user centered design was beneficial. During quarantine, we’ve been able to adapt to virtual whiteboard meetings through tools like WebEx and Zoom.

  • Whiteboard Session B

    During each whiteboard meeting, we were able to discover new methods and pointers to ensure we were accurately addressing the business needs and requirements. Having an opportunity to both demo and present these concepts in front of clients was also extremely imperative in validating our process.

Progression

  • Start

    The initial screen that we were tasked with re-creating for the DIB CS technology refresh initiative. Working in an agile environment allowed us to incrementally improve the look and feel of the user interface.

  • Mid-Point

    Working off of the initial landing page layout, we steadily began to make progress in rebranding the landing page for the DIB CS landing page layout. Steady and iterative changes allowed us to efficiently stay on track with the project timeline.

  • Redesign

    The current DIB CS landing page UI stems from client meetings and iterative requirement gathering synch ups. With the collective feedback and input from each member of our team, we were able to implement a more modernized interface.

Top Project Playlist:

Different playlist, but same principle. Some of my favorite moments of working throughout this process was setting aside time throughout the day queue up a playlist and zone in on creating various wireframe concepts!