100% UX-proof website remake for the TRIGO Group

Goals and key features

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. 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 smootherm but also the editor's experience. Training section with PayPal integration 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 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 research 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; yet, we feel our efforts really paid off. Training section The workflow of the training registration process is fully custom coded, as it requires a unique logical structure following the use cases came out upon the user research. 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 page matching their location according to their IP address. If none of them matches the user is directed to the main contact page. Solutions 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 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. Responsive layout I think we all can agree that our user behaviour is absolutely different depending on whether 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. GDPR compliance We have been preparing for the EU’s new data protection regulation since the architectural planning. Until the site is not linked with the 3rd party CRM and HR systems, we keep every information inside the Drupal, accessible only for the responsible roles and users by matching the inquiring person’s location to the given HR, Sales or Training admin’s location. No personal data is being sent in notifications or attachments. Business value As witnessed on numerous occasions beforehand, 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.