📢 A Second Look on How We Present Vacancies: Admin

In my previous story, I had spoken about the teardown that I performed on a subset of vacancies our users have posted on Persona.

Following that, the next stage was to make sure that our users have the right tools to carry out their tasks and in the manner in which they prefer to work. So I looked at the main area of the app where vacancies are managed.

Where users manage vacancies

The first place to attack is the card representing the headline data of the vacancy. I’ve been using the Jobs To Be Done method recently, so I decided to approach the card UI in the same manner.

A teardown of the vacancy card UI

Some of the research through conversations we have had with our users for other features, such as our data dashboard (you can read about that here), contributed to the insight that I am able to have and act on behalf of a user. The questions in red on the image are what the user may come to this screen to have answered or are things which are unknown to them.

A Second Look

The questions identified would form part of the criteria (along with the jobs to be done) to begin forming ideas for a new experience.

After looking at some design inspirations on Pinterest and Dribbble, I started to sketch out some ideas, then mock up in Sketch. Here are a couple of the designs to consider.

Two new second looks for the card UI

The main difference between the two designs is the viewport of the card. The first is row based, allowing for easy comparisons with a set of other cards in a row. The other is a more traditional card shape, that gives a consistent look across different screen sizes.

I discussed these designs with a couple of my colleagues, who had not seen these before, to see what they thought. The second design was more appealing aesthetically, but functionally, the first came out on top. The aesthetic appeal of the second design came from the ability to “peek” to see more information, as below.

While it was a “cute” interaction, it isn’t optimal for administrative viewing

I applied the same concept to the other design to see if we could get the best of both worlds.

By treating half of the informational view as the “peek” view, we achieved the same flexibility as the second design

To the North Star

Some of the features indicated by the GIF do not exist on the backend yet, so we need to build a path that gets us an initial version out there, then to iterate on.

• Our API doesn’t have the ability to perform bulk actions, so the checkbox on the left cannot be implemented yet.
• Our insights API is quite new, we don’t send individual statistics along with entities (such as a vacancy), so we cannot show the icons with the numbers right now either.
• We don’t have the ability to share vacancies externally (e.g. via email) so we cannot implement that icon.
• Vacancies do not have tags associated with it right now. This was to demonstrate what future extensions could be applied, so this may or may not exist in the future.

What we are left with is not too different from the final outcome, but what it is important is that it is viable.