Jan Früchtl UX Designer at FastBill.

Contento Select

A completely redesigned website for an HR consulting agency with a focus on the packaging industry. Together with some delightful landing pages, this project also includes its original section for job postings.

This preview shows the top area of the homepage.

Overview

The Contento Select GmbH is an HR consulting agency with a focus on the packaging industry. In close communication with the team over at Contento Select, I designed and developed an entirely new website for them. The primary focus of this project was the merger of two different and older sites into a unified new one.

This new website was developed with the tremendous and flexible ProcessWire CMS and is a combination of marketing pages and a detailed area for job postings with functionalities like filters, search capabilities, and a contact form.

Company

Contento Select GmbH

Project Duration

12/2016 - 02/2017

Role

Design, Development & Projectmanagment

My Role

I worked on this project as a solo freelancer and did everything: from designing the new visual aesthetics to writing the frontend and backend codes and configurations on the backend side. Besides doing all design and development work, it was my sole responsibility to communicate and inform the client about any additional developments, obstacles, or ideas.

As a solo freelancer working on such a project outside of a regular workday, I had to be very transparent about upcoming tasks and manage expectations on the client side sensitively.

The Challenge

Before the start of this project, Contento Select had two different websites with different target audiences. Together, we talked about the goals for the merger of these two sites and tried to focus on the essential parts – a modern, friendly, and compact appearance. Beyond the overall visual revisions, one crucial new feature of this website was a complete rebuild of the job posting area with some search capabilities.

Another challenge was the asynchronous communication that happened most of the time because I mostly worked on these projects in the evenings or at weekends. In some instances, this could be challenging when the overall communication is lacking some empathy.

The Approach

After initial discussions and bouncing some ideas back and forth, the team from Contento Select and myself agreed on some fundamentals early on. From this point forward, we then basically went all-in with the "designing in the browser" approach. I created an early static prototype, and we iterated on the different ideas in a close and fast development cycle. We talked nearly every other day about new prototyped versions and possible solutions to upcoming problems.

After we came to a more detailed direction and idea of what the website should look like in the end, I ditched the "fast and ugly" static prototype and made a more detailed version of the final site.

Detailed Design

On the design side of things, the overall goal for this relaunch project was straightforward. Contento Select wanted to merge their two existing sites into one and aimed at a modern, clean, and direct visual appearance, with some little tweaks.

This project was, by no means, a complete branding relaunch. It was more of a modern interpretation of the existing assets and visual existence. Therefore, the overall design direction was led by pure colors like white, gray, and some blue tones. Blue is also the primary color of Contento Select, and I used it for nearly all kind of actions or interactive elements.

This preview shows the top area of the homepage.

Homepage

The homepage is mainly focused on giving the user an idea of the different services that Contento Select has to offer. It also includes some personality with an overall team appearance and some personal notes from the CEO.

This preview shows a search and table for all open job postings.

Job Postings

This page displays all the current job postings forthrightly and straightforwardly. A user can search for any specific details and can select any compelling job for further investigation.

This preview shows some features regarding possible candidates.

Candidates

One of the few landingpages that describes, specifically, the benefits for people who are looking for new jobs by working together with Contento Select.

Animation & Effects

Another characteristic of this new website is the heavier use of imagery in combination with some subtle parallax scrolling. One primary focus of mine while testing out different ways of implementing this was not distracting any user or making any content unusable by these visual effects.

Besides the subtle parallax scrolling effects, this website also features some animations to guide the user to specific offerings or features that are triggered only inside the user's viewport.

This preview shows a single job posting.
This preview shows the top area of the candidates page.
This preview shows the mobile version of the homepage.
This preview shows some features with a focus on the industry.

What I’ve Learned

Communication is key. This sentence is even more accurate if you work on a project mostly at night. I had to manage expectations throughout the project but, thankfully, had very competent counterparts over at Contento Select to communicate with directly and freely.

As a rule of thumb, it's better to move quickly and repetitively with a close and robust communication channel to the client. If the project allows this and you are responsible for the design and implementation, you should move as quickly as possible to actual code to minimize overhead and repetitive tasks. At first, close communication can seem like a time-consuming effort, but in the end, it's the only way to go. In combination with initial prototyping, it is the one right way to go for any other project like this.