100% UX-proof site remake for the Trigo Group

100% UX-proof enterprise website

Client:
The trigo-group.com has been renewed according to the user’s experiences and needs with a flexible and easy-to-edit admin UI. Check out what has been done!

Project background

We got proposed to attend the tender of the trigo-group.com site renewal in February 2017. As a cutting-edge solution was required, we looked for a professional UX team to work with to achieve the best result. This way we found a team of capable young enthusiasts. After several rounds our compenian turned out to be the winner; workshops, business strategies, user persona’s definitions, plenty of UX researches and designs were made until we got to the realization of the project.

About the client

Founded in 1997, TRIGO is a multinational company providing operational Quality Management solutions for the manufacturing sector, especially in the automotive and aerospace industries. With a team of several thousand professionals present in 20+ countries across 4 continents, TRIGO offers a comprehensive portfolio of Quality Assurance services ranging from inspection to expert auditing, consulting and training. 
(source: https://www.trigo-group.com/en/company/about
 

Advanced content moderation

Advanced content moderation

Since the site has 11 different translations with plenty of editors, enabling the content moderation was a priority also. By using the Diff module revisions, not only did the workflow become smoother but also the editor's experience.

Training platform

Training platform

Compared to the legacy system, the most significant new feature on the new website is a custom Training section. The users are able to choose from three different categories depending on their preferences:

  • onsite training, the use case will end with a contact form submission
  • e-learning option, they will have the opportunity to pay directly with PayPal
  • public seminars, they can either pre-register, request for a custom offer or pay directly with PayPal.

Several dependencies are extending the flow according to the user’s actions.

Career page

Career page

As the career page is one of the KPIs, it tends to be as simple as possible to satisfy the users’ needs and to grant a smooth journey. The page collects all the open positions within the company for what the users can apply by submitting the online form or can be redirected to an external career portal. 

Challenges

UX collaboration

Having user researches to get the most out of a project is indispensable in many ways; we truly believe that the greatest user experience can be reached only by knowing your visitors and your own goals at the same time. Nevertheless, we learned a lot about the importance of the UX and development team’s close collaboration. Finding the most effective working methods, keeping in mind the limits of the systems and tools we use was tricky sometimes, but at the end, worth of every effort.

 

Training section

The workflow of the training registration process is fully custom coded, since it requires a unique logical structure following the use cases came out upon the user researches. The PayPal integration is a custom module also.

 

Custom notifications for different actions

In general, the automated e-mail notifications are triggered depending on whether it is a general form or a location-based form, the notification will be sent to a general address, or to the users matching the same location, as the inquirer. This logic applies for the sales contact forms, training contact forms, job proposals and case study download forms too, being fully GDPR compliant in the meantime.

 

Customizable contact forms

The service portfolio of the site underwent a whole restructuring to get a clear picture of what the company does. Not just the content, but the responsibility over each services got separated what we managed to do with customizable contact forms. By this action every content can have different contact persons with custom address fields, profile photo and mailing address.

 

IP based identification

On the Contact page the visitors are redirected from the 23 different countries to the one matching their location according to their IP address. If none of them matches the user gets to the main contact page.

Responsive layout

I think we all can agree, that our user behaviour is absolutely different depending on whether we are searching for something on PC or on our phones. All user research carried out has proven that belief, which lead to a unique responsive view of the site. One of the most affected parts was the filtration. We use several categories to differ the case studies, the trainings and career opportunities. We used JavaScript libraries like jQuery Nice Select to avoid the pre-build browser solutions and this way we could keep the look and feel of the final product coherent.

The other feature, which needed a heavy rework for being able to deliver the whoo-hoo feeling for the users was the training registration. Keeping up the shopping flow and the transparency while registering for an event was solved with handy custom JS and CSS codes. This way the summary window sticks the bottom, but remains easily swipeable up and down to see all the necessary information and the current steps of the process. 

All the cropped images got responsive styles too to give the editors the access to choose between the outputs.

Using Paragraphs for the most of the content on the website

One of the key points was to create a system, which is easy to use for the editors. By using the Paragraph module we managed to create a fully customizable system. Currently we use 13 different sections with multiple layouts, color schemes and width setups. All the image fields are cropable in different predefined desktop and responsive styles.

Special contrib modules

Paragraphs for page building, Simple Event Calendar (customized), Breakpoint for image styles, Role Delegation for user management, Address to implement ISO address formats, Entity Reference Revisions, Light Gallery, Crop API for image cropping functionality, Add to Calendar module enabling to add events to google calendar by a click, Diff module to expand revisioning, Search API, EU Cookie Compliance module and many others.

 

PatternLab

the elements of the site are outsourced to the PatternLab to enable our backend and frontend developers work apart.

 

JavaScript

We used the ResponsiveSlides.js for the testimonials’ sliders, the DropzoneJS for file uploading on the Career page, a few basic jQueries and a simple lightbox for galleries and videos. Otherwise, we used only custom written JS codes for smaller features, but tended to solve everything with CSS.

Solutions

Business value

As for many times, the agile working methodology proved its justification again: the flexibility is always needed from every side of the players to get client’s, user’s and developer’s satisfaction too. We believe, that we could achieve all of them and successfully deliver an excellent website from inside out.

www.trigo-group.com

Previous case study
next case study

client

Leading IT company in Nordics

Let's create something great together
Reach us here