Clearance Jobs

— working together since 2016

Security Jobs Network

  • WebApp

Work Type

UX Design

UI Design

Front-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • TypeScript

    TypeScript

    TypeScript
  • Sass

    Sass

    Sass
  • Jest

    Jest

    Jest
  • Webpack

    Webpack

    Webpack
  • CircleCI

    CircleCI

    CircleCI
  • Twillio

    Twillio

    Twillio
  • Pusher.js

    Pusher.js

    Pusher.js
  • Codecov

    Codecov

    Codecov
  • JavaScript

    JavaScript

    JavaScript
Full project overview

Work Type

UX Design

UI Design

Front-End Development

Technologies

  • Vue.js

    Vue.js

    Vue.js
  • TypeScript

    TypeScript

    TypeScript
  • Sass

    Sass

    Sass
  • Jest

    Jest

    Jest
  • Webpack

    Webpack

    Webpack
  • CircleCI

    CircleCI

    CircleCI
  • Twillio

    Twillio

    Twillio
  • Pusher.js

    Pusher.js

    Pusher.js
  • Codecov

    Codecov

    Codecov
  • JavaScript

    JavaScript

    JavaScript

Background

ClearanceJobs, one of the most relevant career websites in the US, part of DHI Group, Inc., reached out to Pixelmatters during 2016 with a clear goal in mind: revamp its platform from both a design and development standpoint, bringing it to the next level. One which ClearanceJobs wished to achieve for a long time.

ClearanceJobs jobs search

Challenge

We worked on top of a live WebApp which features and flows serve the purpose of a vast user base. The definition of which direction to follow had to take in consideration who are these users, what do they do in ClearanceJobs and why they are using the platform.

With that in mind, Pixelmatters had to rethink the platform in a way that could bring a whole new experience to the target audience. It had to be intuitive, fresh, easy to deal with, responsive and most importantly, a clear evolution of the current application.

ClearanceJobs search results

UX Thinking

Considering the product significant amount of features and complex structure, the first step was to understand what user flows existed to date and how features were organized inside the system.

Therefore, the strategy to follow had to ensure that users' navigation was clear and intuitive. Consistency, clear interactions and readability were taken into account as every detail matters when building solid foundations in order to scale.

ClearanceJobs navigation

Mobile Approach

One of the areas where there’s a lot of space for improvement was the Mobile experience. Taking into account the platform magnitude, in collaboration with ClearanceJobs team, it was decided to have a dedicated component Mobile approach.

With this strategy, the best experience was granted by using components that work similarly to native behaviors and with a custom UX for complex features in mobile devices.

ClearanceJobs profiles

Designing the Interface

After passing through the UX phase and make an important decision on the Mobile experience, we went on to create what would become ClearanceJobs new look and feel.

Having the brand guidelines in mind, several and thorough iterations were made: fonts, colors, iconography and so on. We aimed for a direction that is mature and solid, but also fresh at the same time, so it positions ClearanceJobs as a modern and trustworthy platform.

ClearanceJobs voice call
Built in VOIP call feature.

Design and Dev Documentation

Knowing beforehand that ClearanceJobs was a project to scale, it was crucial to have documentation in place. While the Design was grounded in a design system properly oriented to components, Development decisions and components were documented on top of Styleguidist.

In the long run, documentation helped to ensure the application's quality and consistency while speeding up the process.

ClearanceJobs components documentation

Architecture Definition

Since the start, ClearanceJobs team was responsible for the Back-end. This implied the migration of a monolithic architecture, to a single page application where data is consumed using a REST service.

Always in close collaboration, Pixelmatters was focused on the Front-end and considering the complexity of the data structure, it was decided to use Vuex as the state management for data-driven UX control on the WebApp.

ClearanceJobs tech stack

Development Methodology

To generate an efficient process, a set of rules were introduced following the industry's best practices.

Gitflow was used and a minimum code coverage percentage of 80% was set. Besides the existence of multiple environments, CodeCov was introduced to ensure that the project's requirements were met along the way. And, to avoid loose ends, even the pull requests followed a defined nomenclature. All set to a great collaboration on both ends.

ClearanceJobs circle-ci jira

The Result

As a result of two and half years of hard work where demanding challenges were taken, ClearanceJobs was released live in December 2018 and users are loving it!

ClearanceJobs profile chat
  • Evan Lesser
    Quotation marks

    We've found their work to be of an extremely high caliber, creative, and fast. The team consistently puts their best work forward, and we've been thrilled with the results.

    Evan Lesser

    Founder and President at ClearanceJobs

ClearanceJobs company profile