Roc de France is a family business based in France (Avignon) who sells and manufactures products for building, housing, garden and swimming pools. The company was founded by Mr Dominique Fournier (the main stakeholder) and his wife, Nadia.

They decided to re-design their website in order to help their business to grow and to be more competitive with bigger industries. The main purpose of re-designing their website was mainly to sell and promote the variety of products and get more clients by improving their online presence.

In order to buy or request information about products, clients used to call Roc de France and request an estimate of the costs. One of their major difficulties of this method was that they were inundated with calls causing a delay in responding to clients on time. This unfortunately resulted in a loss of clientele and potential revenue.

The challenge 

On this project, I had to deal with two stakeholders who were not familiar with the web, a tight budget and a clear defined deadline. It was important for me to establish the best way to create a clear and easy-to-use website that was in line with their business goals. As the project sounded complicated, it was important to collaborate with people skilled in specific areas. I decided to collaborate with a team composed by Simon, the project manager, Jérôme Tchania, the developer and Roman, a digital marketer.

We initiated the primary talks with Roc de France in June 2016. I agreed with the stakeholders to meet them in Avignon with Simon at their local office to initiate our first discussion. We spent two intensive days in Avignon investigating the industry, the people we would build the website for and their business goals. At the end of those two days, we all returned to our homes and worked remotely on the project. At that time, the strategy and requirements were clear and we were able to initiate our process as a team to decipher the problem. We were all of one mind that the stakeholders requested to have the website live by 1 January 2017.

In short, we defined the challenge to be: How to improve the exposure of Roc de France online via a website, where clients can browse products and request billing estimates online.

I will now explain all the steps of the methods I went through with the team to get to the final solution. I will focus on the elements of the user experience that I have personally been working on. During this project, we liaised mainly with the main stakeholder.

What I did 

Google analytics

I used Google Analytics to dive deeper into the data of the current website.

I was able to define which were the most viewed pages and the flow of the users.

From this tool, I noticed that the main audience was French and the majority were browsing the website on desktops rather than mobile devices. In order to make the website accessible to a larger number of clients, it was important to optimise the website for mobile devices too. For this reason, we decided to adopt a mobile first strategy working on the redesign.

Enquiry form

After my analysis on Google Analytics, I wanted to identify and have a clear understanding of the type of enquiries and problems users may have experienced. I decided to analyse all the submitted enquiries from the contact form on the website. I was surprised to see the vast number of people contacting Roc de France for information and costing related to specific products. A lot of people were also requesting information regarding delivery.

Once I analysed the data, I took time to share the information with the team. We had a follow-up meeting and then presented this findings to the main stakeholder in order for him to understand issues.

Strategy and goals

In order to correctly solve the main problems and operate efficiently during the re-design, I decided to adopt a user-centred approach. It was important to establish a clear strategy of the re-design, by defining the user experience at the very core and implementing the necessary features to build and improve. Here are the goals I discovered that I had to keep in mind during the re-design with the team:

    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
  • Access the products details and specifications;
  • Request a cost estimate online.

During this step, I also made sure to answer the questions below to keep everything tracked and under the scope of the re-design. This also facilitated communication and collaboration with stakeholders and the team.

  • Why are we re-designing the website?
  • For whom are we building this for?
  • What are the business and user goals?
  • What are we building exactly?

Branding

Since the brand is an essential layer of the user experience, I ran a quick session with the main stakeholder to define the brand attributes of Roc de France. This step was significant for us, as it gave us an indication of the way the content and the visual language of the website should display, look and feel. It’s a website where we need to drive the user to a precise goal, it was important to think about how we wanted them to feel in order to request a cost estimate and buy a product.

Here are the words we establish to describe Roc de France:

  • Social;
  • Classy;
  • Authentic;
  • Quality;
  • Exclusive.

Information Architecture

Once the research and the strategy step was completed, we had a better understanding on how to approach the problem. Before sketching and wireframing a few concepts, we decided to divide the website into sections and define its sitemap. We did this work with the main stakeholder.

He insisted that he wanted to group his products under two main categories: “Pour l’intérieur” and “Pour l’extérieur”.

Sketches and wireframing

The next step was to create several concepts with a different approach on how to solve the problem. Based on my research and goals, I created several concepts of the main pages on pen and paper. At the end, we retained one concept that we wanted to develop further and test with a few users. At this stage, in order to share my concept clearly with the stakeholder, I increased the fidelity of the sketch on paper into low-fidelity mock-ups.

Prototyping

Then I created a prototype in HTML of the retained concept in order to test it with users and refine it according to the feedback and iterations.

User testing

I ran a quick test with five users in order to ascertain how they were interacting with the prototype I built in HTML. By getting and analysing their feedback, I was able to iterate the prototype over time and it got 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.

Visual Design

In order to have a better visualisation of how the final product would look, I created hi-fidelity static mock-ups of the main pages, with the main features of the website to enable the stakeholders to understand the general look and feel of the website.

Coding

In this project, I coded the pages of the website in HTML. To make the website accessible and optimized for search engines (SEO), I wrote semantic Markup in HTML5. I styled the pages using CSS3 and Sass in order to write clean and maintainable style sheets.

The last step was to integrate all the Markup and styles into the CMS using specific Drupal theming techniques.

Impact & results

Roc de France has been a long and thorough project since inception. Good collaboration and communication with stakeholders and teammates was essential to deliver the project on time.  We managed to implement an online form on the website where users could submit cost estimates online directly to Roc de France. This aided in the number of cost estimate requests to improve by 20%.

Two years after the launch, we have also noticed that the number of visitors have increased by 50% on the website, compared to before the re-design. This is due to a fantastic job done by Roman of the SEO.

However the number of sales hasn’t improved as expected. People are requesting more cost estimates but buying less products. These results proved that there is still work to be done to reach the company targets in sales. The business Roc de France is looking to invest a bit more in a second phase where we would implement an e-commerce website.

Roc de france homepage
Back

ABOUT ME

Hi! I am a Designer specialised in creating digital products. My passion is to solve design problems and deliver solutions that address business and user's goals. In addition to that, I have good skills working with SASS, CSS3, JQuery, and HTML5. I also have experience working with the CMS Drupal 8. During my free time, I love developing my skills, reading books. For any enquiries, feel free to email me at contact@jerome-kalumbu.com. Thanks!