For this case study I have decided to research a business sector in Spain with a wide range of improvements in terms of online presence. Let’s redesign a Homepage. I have found in companies dedicated to the elimination of humidity the example I was looking for. I focused on one of them, Murprotec.
To face the redesign of the Homepage I have followed a series of methodologies and processes that I summarize below.
Research: I have conducted several searches to analyze the way the brand is used in different digital and physical contexts. I have discovered that there is no clear uniformity of criteria when applying it. For this reason, the first thing I did was to devise a unification of criteria applicable to the new interface of the Home. I have also researched the look & feel of the competition and the common interface elements, to determine those that are necessary and those that could be secondary or dispensable.
Benchmarking: the next step was to analyze competitor websites and review their storytelling, looking for common places and differentiating values. The final purpose is to extract the best ideas and mentally align with the type of business of the brand we are dealing with. These are the competitor’s websites that I have evaluated in the benchmarking:
Let’s analyze Murprotec’s Homepage in search of elements that can be improved at an interface and branding level.
- The logo and main menu would be better at first for usability.
- The text “Diagnosis / Treatment / Solution” that is part of the logo creates a false affordance problem. The slashes (” / “) give the impression of breadcrumbs (page path).
- The language icons do not keep the same separation between them. English and Spanish seem to be grouped together against Portuguese and German. Portuguese and German open new tabs, but English and Spanish load in the same window.
- The slogan’s text “End moisture forever” links to the Homepage from Homepage ¿?.
- The main menu does not visually indicates which sections have subsections. It occurs in ‘Murprotec’, ‘Moisture’ and ‘Consequences’.
- The blue stamp on the right “Awards 2017” is highly invasive and covers / makes the contents difficult to read. On desktop there is no clear way to close it until you reduce the width of the browser to 1140px.
- The interactive image of the house under the header does not clearly predict which areas of the house are interactive. This could confuse the audience and/or go unnoticed.
- The (CTA) buttons on the Home have no or almost no ‘hover’ status.
- The text size in the blue Award boxes is very small and is embedded in the image (it looks blurry). Also the finger icon on the CTA “More info” should not be needed on a button.
- The module “Murprotec clients give their opinion” has justified text, but other blocks of text in the home page do not.
- General inconsistency in buttons appearance (CTA)
- Some blocks of information are titled and others are not. Also, the font is not consistent.
- In the block dedicated to the last articles of the Blog, the styles are different from the rest of the Homepage.
- En el footer hay enlaces a 9 mapas web numerados del 1 al 9. Desconozco su utilidad y posiblemente un usuario nuevo también.
- Prizes and banners monopolize the screen to such an extent that you can’t see the logo or click on the hamburger menu.
- The pie chart of the 2017 award is particularly annoying on mobile, covering a large part of the screen.
- When the interactive desktop image is converted into a mobile-sized slider, the text is aligned a little to the right.
- In the “Awards” area we have an obvious problem with the readability of text and buttons embedded in the images.
- Testimonials are stacked vertically under each other. They generate too much vertical scrolling.
- On mobile, the lack of unity in the design of the CTA buttons becomes more evident.
Items that have been improved in the redesign:
Unification of the brand image: the corporate colours have been reduced to those contained in the logo plus a highlight colour (blue-green) to emphasise certain elements. This highlight color is used for example in the new icons generated for the module or section “More than 60 years of experience”.
Esta simplificación de colores otorga a la interfaz un aspecto más elegante, profesional, cohesivo y predecible. Esto mejora la usabilidad y la curva de aprendizaje al utilizar la web.
Modularization of content blocks: the titles of all different content blocks have been added and revised. In this way we have achieve a clearer, better structured interface. It helps everything flow more harmoniously on mobile. We have also taken great care of the spacing between blocks.
Unified typography and interface elements: The “Titillium Web” typography has been used instead of “Open Sans” to provide more differentiation and character to Murprotec’s branding. Common interface elements, for example buttons or “cards”, have been unified as much as possible to help understand and foresee their usefulness and interaction.
Cleaning and disposal of expendable items: as already mentioned in the introduction (Research), some elements are not completely necessary because they do not provide real value, they are repetitive and confusing or they interfere with the usability of the website. This is the case of the floating window with the circle of the “ATUSALVD 2017” award, especially dramatically on mobile. Other graphic elements, such as the image that accompanied the differentiating values (“The number 1 in Spain and Europe”, “Experience and research” and “Definitive and guaranteed solutions”) or the “Professional Zone”, have been removed because they were too generic and did not provide a clear differentiation of the brand. In addition, the module “Murprotec’s guarantee” has also been removed as it is considered redundant.
In short, we have sought a more memorable, modern, usable, responsive, corporate and structured design. Thought as a base to grow, evolve and be applied to this and other digital products related to Murprotec.
And this has been the case study, I hope you liked it and found it useful to develop your own case studies.