Website redesign for Roc de France


The mission of this project consisted in redesigning the website of Roc de France, a business company specialized in selling manufactured products for building, housing, garden and swimming pool.

Roc de France project cover showing UI audit and the redesigned homepage
Left— Redesigned homepage. Right— Old homepage with annotations.

The Challenge

The challenge of this project was to improve the user-experience of their website to help the company increase their sales, enhance their visibility online and reduce the number of phone calls to their customer service.


I designed effective interfaces, as well as two online forms for requesting quotes and general enquiries. My work contributed to the increase in the number of quotes by 20%, the number of visitors by 50% and the decrease of the number of phone calls to the customer service by 50%.

  • (Reading time: 4min)


In this project, I collaborated with Jerome Tchania (Web Developer), Simon Fournier (Project manager), Roman Gac (Digital marketer) and the client Nadia Leydet.

1. Discovery phase

Google analytics

I used Google Analytics to identify the most viewed pages and the user flow. My findings were the following:

  • Audience, French in general;
  • Website viewed mostly on desktop;
  • Most viewed pages: homepage, product landing pages and product pages.

Enquiry form

After analysing the previous data on Google Analytics, I went through most of the messages submitted by the users from the enquiry form on the website. Most contacts concerned quotations, general information and delivery. This information was communicated to the stakeholder for update.

Enquiry form list of submissions
Screenshot taken from the website (website originally in French).


To begin the redesign process of the website, we started by establishing the business and user goals, which were:

Business goals:

  • Increase more revenue from products;
  • Increase the number of clients;
  • Reduce the number of phone calls and email enquiries;
  • Improve the exposure of Roc de France online.

User goals:

  • Purchase the products.

User profiles

We finished our discovery phase by creating two profiles illustrating the main target audience of the website.

To create them I:

  • Collected information from the client;
  • Analysed their profiles on social networks: Google and Facebook;
  • Analysed the enquiry form submissions.

This research helped us to come up with two main profiles that we turned into empathy maps.

Representation of the Profile of users with empathy maps
Left and right— Profile of the professional and the individual.

Finally, we created a decision path to understand better the steps the users will need to go through to act and buy a product.

Decision path Representation
Representation of the decision path.

2. Information Architecture


Upon completion of the research, we defined the sitemap illustrating the main activities of Roc de France.

Sitemap of the new website of Roc de France
Sitemap of the new site (Sitemap originally in French).


The next step was to create wireframes of the main pages to communicate the main information of the site.

Wireframe of the main pages of Roc de France
Left— Homepage. Middle— Landing Page. Right— Product page.

I also created wireframes in order to have an idea of the structure of the quotes and enquiry forms we were required to create for this new version of the site.

Quotes requests form and Enquiry form wireframes
Left— Quotes requests Form. Right— Enquiry Form.

3. Prototyping

From the wireframes, I created an interactive prototype in HTML to test the interfaces with two users.

4. Usability Testing

I ran a quick test with two users reflecting the main target audience in order to ascertain how they were interacting with the prototype.

Their feedback, allowed me to iterate the prototype and get it sign-off by the client. At this stage, my assumptions were validated and I was able to see that my proposed solution could correctly remedy the initial problem.

5. Visual design


Improving the branding of Roc de France was an essential task in order to enhance the user experience as well as the look and feel of the site.

I assisted the stakeholder in defining the main brand attributes of the company and to align the content and the visual language of the website.

Here are the main attributes describing Roc de France:

  • Craftsmanship;
  • Authentic;
  • Quality;
  • Exclusive.

Final design

To enhance the interactions and patterns of the interfaces, I created hi-fidelity mock-ups of the main pages.

Roc de France visual interfaces
Final Interfaces I designed for the new website.

6. Front-end development

In this project, I coded the pages of the website in HTML. I also styled the pages in CSS with SASS in order to write clean and maintainable style sheets.

As the final website was created in Drupal 7 by the developer, I integrated all the markup and styles into the CMS using drupal theming techniques.

View the redesigned website


Roc de France was a long and extensive project. Good collaboration and communication with stakeholders and teammates were therefore essential to deliver the project on time.

However, two years after its launch the number of sales hasn’t improved as expected, which proves that there is still work to be done to reach the company targets in sales.

Roc de France expects to invest a bit more in a second phase of the project with the aim of giving its audience the possibility to purchase their products directly online.

Other case studies

Improve Your Skills of UX Design and Web Design

Join my mailing list to receive my UX and Webdesgin articles tips delivered straight to your inbox periodically on making better designs.

  • Email advice periodically + 
  • UX and Web design tips + 
  • Insightful Articles + 
  • 2 free chapters of my book Don't Start With Visuals + 
  • 7 rules to design a successful portfolio

    I will never share your email address and you can unsubscribe with just one click.