StepStone branding editor

The challenge

All companies posting job offers on Stepstone website, upon purchasing a listing of certain type (Professional or Premium) are able to set up certain branding elements on their listing, to raise the brand awareness and make their listing stand out among others. Also, partner companies that post the listings automatically via the JobFeed mechanism (XML-based cross-site engine), want to set up the default branding values like colours, or hero pictures for the same purpose.

Depending on the level of setup (single listing, company level, JobFeed stream), there were  multiple entry points, and the functionalities were spread between various popups, modal windows and embedded elements.

The solution – unified branding editor

Base assumptions:

  • Modular – elements could be easily reused and displayed depending on whether required or not
  • Based on Bootstrap – the dev team responsible for the editor decided to use Bootstrap as their main framework. As little extra development as possible was to be required.
  • Applicable for both single listings (within Listing Insertion Process) or on company level as defaults for new listings

Nice to have:

  • Incorporated responsive preview module to have a WYSIWYG experience

The process

As a first step I did an analysis of all user journey for listing creation process, company defaults set up and all touch points of the branding editor. Later on I started checking on the best practices for such elements.

Together with other team members we performed 2 brainstorming sessions where we exchanged ideas and suggestions in form of notes and rough sketches. The outcome of if were more refined sketches that were later on used to create final wireframes that were later on passed to the development team.

1. User journey mapping

2. Analyse best practices

3. Sketches

The result – wireframe

I decided to create an accordion for all the possible features that could be used. Each accordion section is a separate module displayed according to actual necessity. The editor is also responsive, with preview module shown on mobile as a separate view. Built in validation and target scrolling prevents users from entering incorrect data and getting lost.