A two-page or a single page implementation is better for the experience of the applicant in any workable.com application?

Question

The current experience of a user who wants to apply for a job using the workable.com platform starts with a page which presents some static content, it is scrollable, and it ends at the bottom with a single call-to-action which is a green button of fixed width with the text "Apply for this job".
The page of the job description looks like this: Note that the content is quite fluid which means that it adjusts to the width of the browser window and works quite well for very small widths.

If you, as a user, decide to click on apply then you are taken to a regular form with various kinds of well known fields (textboxes, textareas, yes/no, asterisk for mandatory fields, subforms etc.)
The page for the job application form looks like this:

Note that the job application form is quite fluid as well and you would need to get in very small window browser widths to make the horizontal scroll bar appear.

This form is all you can see and there is no information about the current job other than the job title.
In my humble opinion it is important that the user has a quick access to the job description especially when he/she is compiling his/her cover letter or summary in order to make the appropriate references and explain how he/she can help the company on the points that are addressed inside the job description.

If you use multiple browser tabs like you see in my screenshots it is still a little bit annoying swapping between the two.

What about the idea of taking advantage a full HD monitor in order to have both the job description and the job application form in a single page?
Take a look of how this would look like at this photoshoped image:

Of course now the main question is if this implementation would really offer any kind of better experience to the user. If this solution would provide a better experience indeed then how exactly should it work in smaller screens to maintain this enhanced experience?

Answer 1

Zaharenia here, designer of Workable. Thanks for your detailed writeup on this.

First of all, I’d like to point out that you can expand the job description by clicking on the down arrow to the right of the job title. It’s obvious that this solution is not optimal :)

When we redesigned our careers pages, our first priority was to create a streamlined process that helps the user fill in an application without friction, especially on mobile. So we decided to keep each screen of the process separate and clean, to make sure that users always know what’s the next step.

That being said, what you suggest makes sense on desktop. I’m quite interested in the stacked approach actually, I think a variation of that could work well - maybe something like the Basecamp stacked pages? We often refer to this design pattern when discussing new interactions on Workable.

Thanks again for your thoughts on this, we appreciate it. We will surely revisit this in the future.

Answer 2

well, I did a quick mock of a possible solution using Google Material. Basically an off-canvas drawer with an action button that allows you to go back and forth and see everything in the description. Of course, all the Material specs are used, such as sheets, floating actions and scrims but you can easily see what I mean and adapt it to your needs

Answer 3

This falls into the realm of the visibility of current state in order for the user to have all the available information.

Indeed we can contemplate various scenarios where a user gets interrupted and returns back to complete the form a few minutes or even hours later. In the presence of today's multiple and continuous online interactions we can safely assume that the specifics of the job description have been wiped out of his working memory and he wants to get back to read the job description again while not losing the work being done so far writing the cover letter, his summary etc.

A quick solution could be to make the website responsive. So if the available width was larger than the two columns (description + form) then they would appear side by side as it is proposed in the question otherwise it would be one long page where the form would be below the description. Like this:

BUT at the sample above when the elements switch from one wider state (horizontal) to the second more narrow state (vertical) it is obvious to the user what has happened and he knows exactly what to do next: scroll the page

For the case in question we have two very long columns and it will be probably NOT obvious to the user that when he shrinks the window of his browser the second column (form) suddenly disappeared and is now located below the first column (description) and that he should scroll all the way down to find it.

"The transition between two states and the experience that it brings to the user is equally as important as the two states themselves" is a common quotation in user experience design and it is applicable in this case as well.

In my humble opinion, one of the many possible solutions could be to have the second column (form) slide in from the right when the APPLY button gets clicked. The result is to have a semi-covered job description like this:

Hovering the mouse for a few msecs over the visible area at the left could be one possible interaction for the user to bring the description temporarily on top. (hovering the mouse at the area on the right will have the opposite effect)

Note that scrolling should work independently for the two columns in the suggested solution.

As always this is only a single possible design and because users know better a lot of A/B testing should be done to support it!