Website redesign for Roc de France
Mission:
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.
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.
Outcome
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)
Team
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.
Goals
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.
Finally, we created a decision path to understand better the steps the users will need to go through to act and buy a product.
2. Information Architecture
Sitemap
Upon completion of the research, we defined the sitemap illustrating the main activities of Roc de France.
Wireframing
The next step was to create wireframes of the main pages to communicate the main information of the site.
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.
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
Branding
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.
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.
Conclusion
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.
