25 years—that's the milestone bluedrop.fr just celebrated last October. To mark this transition, we’re launching a new Drupal site, one that's more in tune with our current identity. It’s the perfect opportunity to better showcase the strengths we can now build on, and our energy as we move forward to write a long and wonderful next chapter…
The objectives of the redesign
- Align the interface design with our new visual identity guidelines, making it more modern and more in line with our identity
- An upgrade from Drupal 7 to Drupal 10
- Improve the user experience
- Better reflect our identity: beyond simply presenting our services, talk about our history, the values, and the commitments that define us
To achieve this, we adopted the same methodology as for our clients' web projects, namely a step-by-step process (UX design, UI design, development...) and the organization of numerous internal workshops at each stage to collectively brainstorm and make decisions.
Our starting point: our old site, the homepage of which is shown below.
Step 1: Positioning
First step: clearly define our positioning and our various communication goals on the site.
First, in terms of our expertise, we are above all Drupal CMS specialists. We provide all the expertise that revolves around the Drupal ecosystem. We offer a complete web project production chain (consulting, project management, UX and UI design, development, hosting, maintenance). In addition, we are experts in complex web projects (multi-site platforms, intranets, corporate websites…) and in business solutions (transport solutions, HR solutions…).
Next, in terms of our approach, we are close to our clients and we are down-to-earth: we don't sell dreams, we keep our feet firmly on the ground. We see our projects through to the end, and we always find solutions in every situation. We refuse to take on what we cannot master. We use simple language that everyone can understand. And we are committed to open source, accessibility, data protection, eco-design, and CSR.
There’s a lot of “we” in here, but we’re being concrete, you see?
Step 2: Improve the user experience
We carried out:
- A UX design benchmark
- An audit of the existing setup, analysis of statistics
- User research: interviews with the site's users (our clients)
- The site structure and user journeys
In our navigation menu, we decided to offer different tabs:
- The Home page: a global overview of our identity and services
- The Agency page: our history, our values, our team
- The Our Commitments page: accessibility, GDPR, eco-design, open source, CSR
- The Our Services page: development, UX and UI design, maintenance and security, project management
- The Our Projects page: our case studies, the presentation of our clients and their testimonials
- The Blog page: our articles on Drupal, agency life, and UX and UI design
- The Contact page: the gateway for our potential future clients and collaborators
Step 3: Design the interface layout
The next step is the UI design phase. In this respect, we carried out:
- A UI design benchmark
- Responsive mockups based on our new graphic charter, which is built around square, round, and drop shapes, and beige and blue colors
- A photoshoot at the office to have real pictures of our teams in action
Step 4: Let's develop!
In terms of development, we have created numerous paragraphs for a rich and flexible contribution experience. Along the same lines, we have added several types of content: case studies, clients, testimonials, basic pages, commitment pages, service pages…
We have also upgraded to Drupal 10 in order to benefit from the latest Drupal features such as the improved CKEditor, the Theme Starterkit functionality that allows you to create a new independent theme derived from a base theme… More information about these new features in our article!
Step 5: we optimize continuously
Performance and SEO
To build a smooth and fast user experience, it’s important to optimize the site's performance, an element that also impacts its natural SEO and the site's environmental footprint. For this, several best practices have been implemented, such as image compression, minimizing HTTP requests and code, etc.
Our efforts have allowed us to achieve very respectable Lighthouse scores. Lighthouse is an open source automated tool that measures the quality of web pages across various criteria (performance, SEO, accessibility, etc.). Here are our main scores in terms of performance.
Homepage: 86%
The Agency page: 83%
Our Services page: 90%
Our Projects page: 100%
SEO
SEO is another essential element in creating a website. In our case, organic search is one of our main commercial lead generation tools. From the initial creation of the site, we implemented a solid SEO strategy by putting into place all best SEO practices (optimizing URLs, headline tags, publishing content frequently, etc.). As evidence, we are the top-ranked Google result when searching for “Drupal web agency” (excluding sponsored links).
Therefore, in this redesign, one of our main requirements was to preserve the gains of our firmly established SEO. To achieve this, we:
- Migrated part of our existing content, especially our blog articles
- Carefully kept the same page URLs
According to Lighthouse, most of our main pages reach a level of 100% for SEO.
Accessibility
As with all our projects, we wanted our site to be accessible to everyone (elderly people, people with disabilities, etc.).
Various best practices help us achieve this. For example, in terms of accessibility, color contrast must be adequate, images must include descriptive tags, etc. Find out more in our dedicated article. Goal achieved since we validated our efforts with an accessibility audit carried out through the RGAA, the General Accessibility Improvement Framework of the French government. We obtained a score of 92% confirming partial compliance. Not bad, right?
Eco-design
In the same spirit as for our client projects, we also made sure to limit the environmental impact of our site through an eco-design approach based on the 115 eco-design best practices from GreenIT and the General Reference Framework for Eco-design of Digital Services (RGESN).
For this, we made choices such as not using infinite scroll carousels, limiting the number of requests, compressing CSS and Javascript files, and more. Learn more about eco-design best practices in our dedicated article.
As part of our commitment to continuous improvement, we plan to optimize our score by implementing new best practices and conducting an eco-design audit via the RGESN.
A great project wrapped up, with a large part of the team contributing. Now, we’d love to hear from you! Do you like the site, have constructive feedback or compliments? Flood our contact form, we can’t wait to read your messages!
