Brand websites under scrutiny: PSA Peugeot Citroën

There are almost as many website approaches as there are manufacturers; regardless of the creativity used, the objectives are different for generalist, premium and luxury brands. However, there are a number of common characteristics and features that make it possible to homogenize the mix. On the one hand there is the agility of the site, on the other hand the offer of information, and finally the configurator, which requires a separate article.

We begin with the PSA Group, which for the purposes of this study can be considered a medium-sized group: two generalist brands (Citroën and Peugeot) and one premium brand (DS).

The PSA Group's web in data

This section evaluates data that give an idea of the agility of the site, obtained using simulation tools that do not depend on the IT platform used. Some absolute values are not relevant and should be taken as a mere reference; the figures will be different to a greater or lesser extent for each user and device used to view the website, both desktop and mobile.

The simulation considers data from the first visit to the respective websites, with a standard 10 Mb DSL connection, under the following conditions:

• Desktop: Chrome browser
• Apple: iOS version 9, the default browser and an iPhone 5C handset
• Android: Nexus 7 terminal with Chrome browser

The results obtained are as follows:

• Page weight: download size (Kilobyte). The higher the number, the higher the data consumption
• First byte load time: Interval between the request made and the first response from the server.
• Beginning of page rendering: time interval between request and on-screen representation of the Web elements.
• Total load time: interval between first request and complete download of the page, including elements that are loaded in the background and are not visible at first instance
• Complexity level: measured by the number of elements on the page (texts, images, animations, etc.)

Quantitative results

• Although Citroën's page is the lightest in terms of size, it seems to load more slowly because of the time we have the "blank screen" (from the time we send the request to the server until we see the first screen loaded).
• In terms of speed of response, Peugeot takes the lead despite being the most complex. The first screen is very fast
• The DS website is the most data-hungry, despite having the fewest elements. This is due to the images, whose weight is: 87.4% desktop, 89.3% iOS and 87.6% in Android.

Beyond the simulation and using my usual work equipment (PC with Linux, Tablet with Android 4.2 and smartphone with Android 5.0, all three with Firefox browser), the real experience is very similar to the results of the tables: the Citroën page has been the slowest during the hours that I have experimented with it (it may be a specific server problem, a consequence of the extra weight of the commercial promotion these days, or a structural defect of the site). Peugeot's website has proved to be the most agile and driveds.es has the best compromise between content and performance.

PSA Group websites: qualitative analysis

The three PSA Group websites are all in Spanish and have been designed to adapt to different screen sizes, both desktop and mobile.

Citroën

Citroën's website is currently heavily marked by a commercial promotion, which shows in rapid automatic sequence the brand's passenger cars and commercial vehicles, the equivalent DS promotion and that of the 100% electric C-ZERO model. As the colours linked to each of these groups are different, the result is somewhat clashing and not very aesthetically pleasing.

At the top of the website we find, on the left, the "home" button and the name of the page. To its right a small secondary menu where there are controls to access information related to the official network in Spain of the brand. To the right of this element is the Citroën logo. Immediately below the secondary menu is the main menu, where some items give access to other submenus. The first detail that jumps to the eye when it is able to avoid the hypnotic effect of the slideshow, is the insistence on different promotions, to the point of being duplicated.

Under the slideshow there is a third menu, this time graphic with horizontal scrolling, which insists on various promotions, from those already seen to tires. The element of this menu that gives access to the appointment request is the most hidden. As if they were few, there is a fourth menu, this time vertical, which gives access to the configurator and other commercial elements. On the first load of the page is displayed in the form of a horizontal band warning about cookies, which without being discreet, is not as annoying as in other cases that we will see.

As you browse the page, you discover that the really interesting content is hidden under so many noisy promotions: Citroën Assistance, Point of Sale Search, FAQ, Blog, social networks and others no less interesting, of course, in other menus! Even more hidden is the customer service telephone number and even more hidden is the legal information (yes, in another menu), which is just as rambling and unwieldy as on most large websites (Data processing, Data protection, Legal notice and Cookies).

The information on the different models is correct, with a qualitative rather than quantitative approach. It is accompanied by images of varying sizes (from medium to large), and sometimes video is also integrated (hosted on the company's YouTube channel). As for the images, there are both studio photographs of good size and quality (without reference to other objects), as well as others of the various models integrated into an environment. The ones integrated in the galleries stand out for their quality.

Below is a table summarising the features of the official Citroën Spain website.

The general perception of Citroën Spain's website is one of chaotic organization, lack of coherence and a very aggressive commercial approach, which can be annoying, with some aspects of a flea market. The aspiration to sell is legitimate, but when it is done with class the result can be better. Nor is it pleasant the amount of controls that open in another instance of the browser; in a few minutes you can have the screen full of tabs. It can't be said that the information is incomplete, but it's not very intuitive, if not cumbersome, to access certain sections. All of the above is about the desktop version, on a mobile device it's even worse.

Peugeot

The Peugeot Spain website is a good example of how different two brothers can be. It has in common with the previous website some of the main items in the general menu, the sales network and how to access it. It also has a "slideshow" -less aggressive- and more than one menu. This is where the similarities end, because the big difference in favour of the Peugeot Spain website is the coherence of the page in terms of graphics, as well as the rational layout of all its elements.

In the desktop version everything is at a glance: general menu, immediate access to the different models, additional information in an aesthetic graphic menu, legal information at a glance, integration with social networks discreet but visible, and other content gathered under the item: "Useful links", grouped appropriately and visually well highlighted. The Peugeot website may be more or less attractive depending on the taste of each user, but there is no doubt that, as a tool, it is well thought out.

As an example of how much care has been taken in the design and layout of content, there is the "legal notice" section. It contains the same rambling and almost lawyer-friendly terms as almost any other related site, but it is well organised, aesthetically pleasing and rationally laid out, allowing individual aspects to be found precisely.

The mobile version of Peugeot.co.uk is not as comprehensive, but the spirit of coherent and well-done work continues; it is pleasant and intuitive to navigate the site even withsmall-screen smartphones.

Let's take a look at a summary of the features of the official Peugeot Spain website.

DS

The latest member of the PSA family is the premium brand DS, which has its own website, although it can be accessed directly or indirectly from the Citroën site (at least in terms of promotions). On the DS Automobiles site, dark, almost black tones prevail. In some images, especially the first one that appears in the automatic pass, the idea that black is associated with luxury is taken to such an extreme that the result is similar to watching two ninjas fighting in an unlit tunnel over an ounce of chocolate: detail is lost amidst all the darkness. The mobile implementation suffers from the same.

Aside from the choice of colour, the DS website is simple, with a basic menu that allows direct access to its meagre range. The design of the site suffers from a certain incoherence between black sections like the night and others of snowy white. It gives the impression of being unfinished (and if it is, it lacks more than a boil). In addition to direct access to the models, it offers interesting content in the small three-item sub-menu: "inside", "connect" and "services".

The advertising claim "We'll call you for free", in the form of a banner that can be hidden, has the behavior of a naughty child. It's fine if it appears when the page loads, but if the user chooses to hide it, it doesn't have to reappear every time we jump between menus. If it's a programming bug, the father of the code gets a slap on the wrist. If it's the marketing department's idea: you're a pain in the ass! Either we're premium or we're not; so much free calling lowers the brand's image.

As the site doesn't give much more of itself, here's the summary table of features:

Conclusions of the qualitative analysis

Strictly speaking in terms of web design, organisation and as a tool for the user, the Peugeot España website is far superior to its sisters. Citroën's site is more comprehensive in terms of content. Both the Citroën and DS sites suffer from a strong commercial bias, which is excessive in the case of Citroën and inadequate in the case of the premium brand.

As for corporate information, the same applies in these three cases as in other groups: there is a specific portal for this purpose. The PSA Group has an international website, in English and French, with information on corporate social responsibility, financial information, share price, etc. There is also a Spanish site, centred around the PSA factory in Villaverde (Madrid), and another dedicated to the Vigo site. Both Spanish sites provide information mainly about the plants, but there is a lack of information which is only available on the international portal.