Mechanics Hub is the largest recruiting company for diesel mechanics and heavy equipment technicians in North America.
But that's the short description of their activity. If we were to detail upon it, we would say that Mechanics Hub is:
- the leading online resource in USA and Canada for Diesel machinery professionals (mechanics, technicians, parts/service staff and shop managers...) seeking jobs
- a content-heavy, one-stop resource updated regularly with industry news, videos, tips, training resources
- the most popular Diesel forum community
- the go-to resource for employers looking to hire exclusively highly qualified technicians and/or skilled Diesel professionals
Now, we can all but agree that such a high trafficked website (i.e. the forum only has +10.000 active members) must provide the best user experience. Whether its visitors access it to look for job opportunities, to read the latest industry news or to hire qualified Diesel mechanics.
But user experience was precisely the aspect where, well, things could be better. And that's when we stepped in to... save the day.
The Challenge
To revamp the UI/UX design completely ...
And we knew that this was a major dare considering that:
- we were dealing with a content-heavy website: the Mechanics Hub Toolbox alone included various content-packed subsections like the forum itself, articles, trade resources, tips & tricks, entertainment content, and the list goes on
- the content diversity there was just ... overwhelming: pictures, articles, videos ... crosswords
- that heavy (and complex) content infrastructure needed to be easy to access and to sift through on all devices
In a nutshell, the 3 main goals for this project were:
- to design a new user interface that should be cleaner, simpler, one that would enhance a smooth interaction
- to better structure all that content on the Mechanics Hub site, making it more intuitive for users to just flow through
- to create a cleaner and more modern website design that should better reflect the Mechanics Hub brand identity
Migrated the Website from Wordpress to Drupal
And this called for a complex, multi-step process, where we implemented content and assets migration from one platform to the other.
Simplified the Content Structure
We knew that reorganizing the content architecture so that it should be simpler and easier to follow was crucial if we wanted to improve the user experience on the website.
And this was definitely no easy task, but we managed to come up with a more solid, more logical structure for this content-rich website.
One that ensures a simplified, more intuitive navigation for its visitors.
Redesigned the MechanicsHub Website
And here we played with color contrasts: black and yellow.
Black was already the dominant color on the existing site and we added splashes of bright yellow, the same hue that you can find in their logo, to:
- reinforce their brand identity aesthetically
- draw attention to specific pieces of content on the website, leveraging this powerful contrast, and better guide the visitors to the key sections there
Overall, besides this strategic use of color contrast, our team strived to give the site's old design a cleaner, simpler look. To bring it up to date with the latest web standards.
Implemented Responsive Web Design
Again, ensuring that this heavy (and heavily diversified) content ecosystem was easy to navigate no matter the screen size, was a real "struggle" for our web designers.
Yet, we managed to make the content interface easy to navigate and user-friendly on all devices.
The Result
Mechanics Hub has gone from a clunky, overly cluttered and somehow too distracting WordPress site, to a:
- visually-pleasing
- inviting
- neatly and logically structured
... Drupal website with a simplified and more intuitive navigation and cleaner design.
Equal Opportunity Community Initiative (EOCI) is an international nonprofit that offers education-based programming to children in underserved communities.
Their efforts could be summed up in one sentence: Granting all children equal access to education.
"Creating a world where every child has the opportunity to succeed" (Equalopp.org)
It's a community of 5000 volunteers and donors that:
- provides children at-risk with easy access to the organization's educational spaces and resources
- makes sure that these vulnerable kids and youth's essential life needs are addressed
- provides youth in poverty with the proper training programs to help them gain the competencies needed in a work environment
- encourages the young people in those underserved communities to get involved, to seize all volunteering opportunities and... take action
"We owe it to ourselves as much as to these children to work with determination and passion to eradicate poverty, provide education and improve everyone’s living conditions." (Equalopp.org)
The opportunity to use our experience in Drupal development and our expertise in UI/UX design for contributing to this "community of world changers" was just so... compelling for us.
The Challenge
To turn a 10-year old website, built on Joomla (a quite old version of Joomla), with low traffic and a low conversion rate, into a:
- visually-appealing
- highly engaging
- fast
... Drupal 8 website.
“Our website was outdated and lacked traffic as well as conversions. It was built in 2010 and wasn’t up to date with our new programs. As a nonprofit, it’s not easy to communicate your story and mission in the timeframe when someone’s on your website. Our old website wasn’t telling our story because we’d expanded in many ways. We needed a product that was mobile-friendly, capture the user, and convert them to take action.” - Sean Kelly, Executive Director, Equal Opportunity Community Initiative
One that would provide a better content experience to its visitors — future volunteers and donors.
And for that, the entire information architecture had to be reconsidered, the site navigation optimized and a new UX design created.
In a nutshell: we had to build a Drupal 8 website, from the ground up.
One that would:
- tell their story and communicate their mission to a larger group of potential "life-changers"
- make it easier for its visitors to find, navigate through content and engage with it
Furthermore, EOCI needed us to implement a newsletter functionality into their redesigned website. And to create a mobile version, as well.
A user-friendly page layout
We soon realized that the key to turning an outdated Joomla website into a site that draws and hooks visitors in is... simplicity.
A simplified, clear and easy to navigate through page layout was the solution.
And so, we knew then that the Paragraphs module was the perfect tool for this project goal. It helped us break down the content into multiple reusable components.
Then, assemble a neat page layout, with clearly defined sections.
Moreover, the module helped us grant the best content experience to the end-users and the best editorial experience, as well. We knew that we would empower EOCI's editors to easily put together future page layouts of their own.
An intuitive information architecture
A rock-solid, clear website structure was crucial if we expected it to tell the organization's story with an impact.
Therefore, we changed the way the information was organized across the website. And we implemented a more intuitive navigation structure and clear conversion paths. Website visitors can now find the information that makes the EOCI's story, engage with it and... convert quicker.
"The company that manages our Google Ads has found that our conversions have increased. The traffic has remained the same, but the amount of time users spend on the website and the number of actions taken has gone up about ten-fold. That’s what we set out to do exactly. We’re seeing an ROI in a short amount of time: That’s a success for us completely." - Sean Kelly, Executive Director, Equal Opportunity Community Initiative
A new custom theme
The organization wanted their new website to be as visually-pleasing as... fast.
The new Drupal 8 website had to entice users, visually, before it could engage them. So, we created a new theme to help EOCI communicate their mission and their vision in a more compelling way.
"A couple of our donors are thrilled with the website and have committed their support again. They’re happy to be on the partners' page with a fresh look and approach to the public." - Sean Kelly, Executive Director, Equal Opportunity Community Initiative
A high-speed Drupal 8 website
Since one of the top goals of the project was to increase conversions, fast-loading pages were a critical factor for meeting that goal.
Thus, we've had the top performance in our minds throughout the development process.
We used an "Optimize for top speed" approach as a criterion to filter through all the decisions that we made while building their new Drupal 8 website.
A mobile version of the website
EOCI wanted to communicate their story to as many people as possible. So the need to appeal to potential "life changers" on their mobile devices became critical.
And that's what we did. We came up with a visually-pleasing, easy to use the mobile version of the EOCI website.
One that boosts the organization's efforts and brings its message to mobile users, as well.
Newsletter functionality
To maximize its exposure, the organization needed to implement a newsletter functionality. And... we complied with their request, using the Simplenews module for this.
The Result
"The site’s beautiful and performing exactly how we’d hoped it would." - Sean Kelly, Executive Director, Equal Opportunity Community Initiative
A Drupal 8 website that's fast, visually appealing and easy to use.
We managed to turn the old Joomla website into the most effective "messenger" of the EOCI's story and mission.
A welcoming service point for all potential donors and new volunteers.
Just imagine: THE most prestigious awards in the world, in the field of human rights, and us being granted the honour to give the corresponding website a performance boost!
And a traffic boost, as well, by improving the user experience provided there, making it easily accessible for visitors all over the globe. We won't lie to you: the honour was directly proportional to the overwhelming responsibility that we came along.
Besides the project's main goal — to optimize the website's overall performance — our client approached us with 2 special requests:
- to implement a new translation system that would enable them to reach a global audience and enter new markets
- to migrate the May-November 2019 content for the Photography Competition section on the website
The last project requirement did pose a challenge since the content to be migrated had lots of in-text references.
- we updated the existing allardprize.org website to the latest version of Drupal 7
- we performed all the necessary updates to Drupal core, to the contributed and custom modules, part of the user interface and the existing set of features
- we ran the latest security patches, as well
- we enabled the GTranslate module and thus implemented the translation feature that our client requested
- we migrated the specified content and found a way of processing the data within the given Pantheon hosting plan
- we conducted an in-depth performance audit on the website and we identified areas of improvement
- we did some Drupal performance optimization work, taking a series of necessary measures to speed up the website's page load and reliability/blog/boost-drupal-performance
The result: the Allard Prize for International Integrity website now runs significantly faster and provides a seamless user experience to its visitors, irrespective of their geographical location.
The Ontario Institute for Studies in Education, Canada's prestigious and research-intensive faculty of teaching and learning, assigned us with building their new website.
In this respect, the requirements revolved around their overall goal to deliver a better user experience on their new website:
-
the content-packed web pages had load faster
-
a more user-friendly UI had to be designed
-
a more efficient navigation structure had to be put together
-
it should be fully responsive, as well
-
a high performance Drupal 8 website, with optimized (content-heavy) page loading times
-
more intuitive navigation for both the professor and student visitors; from graduate programs to news and events, to specific useful information related to leisure, learning opportunities, and support services, users can now easily find the content they search for on the Institute's newly “refurbished” website
-
a user-friendly layout
-
a website packed with all the tools that content editors will need to easily and neatly structure their content (ex. both the Paragraphs module and the Block field module got enabled)
Econo-Rack, one of the leading pallet rack and shelving system providers, wanted to give their website a major “revamp”. A whole new per-page design, that they needed done on top of the existing scaffolding...
A new website design that should look more... up to date, more visually-pleasing and inviting. So, they expected the whole process to involve (much) more than just redesigning the old headers and footers.
In this respect, migrating their website to a newer version of Drupal was a must, as well as configuring their new theme.
Overall, our tasks were focused on:
-
redesigning and improving the visitor experience on every page on their website
-
addressing all their incoming page-specific requirements (e.g. removing the old side navigation bar and keeping the new one on top, updating the old contact form...)
-
redesigned each web page, while keeping the old structure
-
optimized the way information was displayed across the website (we included more visually-appealing images and improved the content sections on each page)
-
implemented a new, more intuitive and visually-pleasing content layout
-
configured a new theme, starting from the client's WordPress template of choice, one featuring drop-down menus with images