Website redesign and brand identity refresh for Les As Frenchies

Mission:

The mission of this project consisted in redesigning the website and adjusting the branding of Les As Frenchies, a video production agency based in Lyon.

Les As Frenchies project cover showing sketches and a User Interface

Left— Homepage of the redesigned website. Right— Sketches and annotations.

The Challenge

The challenge of this project was to find the best ways to enhance the credibility of the company and to communicate more effectively their missions.

We redesigned the website in order to:

  • Improve the brand awareness;
  • Promote the company expertise and services worldwide;
  • Increase engagement;
  • Boost the volume of clients.

Outcome

After my consultancy, the company has now a redesigned website aligned with its brand strategy and has consequently gained:

  • Awareness;
  • Credibility;
  • An increase of daily site visitors +43%;
  • A site accessible, engaging and easy to use.
  • (Reading time: 5min)

Team

In this project I also collaborated with Jerome Tchania (Web Developer) and Ludovic Martinet (The founder of Les As Frenchies, and client).

1. Discovery phase

Goals and target audience

I started the project by defining a strategy with the stakeholder; together we reviewed the challenge of the project, the business goals and figured out the main target audience of the website.

Business goals:

  • Improve the brand awareness;
  • Promote the company expertise and services worldwide;
  • Increase engagement;
  • Boost the volume of clients.

Target audience: Professionals and Individuals.

After defining the goals, the next step was to run a quick site audit in order to diagnose the problems:

Site audit

I analyzed the main pages of the website before the redesign where I found several problems such as:

  • Wrong communication of the brand;
  • Lack of clarity of the company mission;
  • Unclear value-proposition.

Les As Frenchies homepage audit

Left— Homepage of the site before the redesign. Right— Top section of the same page with my annotations.

Competition

In parallel, I reviewed the websites of three main competitors, in order to examine how they structure their information, sell their services and present their expertise to their audience.

Screenshot of the competitors websites

Screenshots of the three competitors of Les As Frenchies.

User profiles

We finished our discovery phase by creating two user profiles reflecting the main target audience of the website. To create them, I first collected information from the client about the ideal profile of the user, then I analyzed the Facebook page of the agency to picture better the people interacting with Les As Frenchies.

All these findings helped us to come up with two main personas.

At his point, we were able to understand their needs and, consequently, how to structure better the information on the new site.

Main personas of Les As Frenchies

Two main personas of Les As Frenchies.

2. Sitemap & Wireframes

Sitemap

Before sketching the main pages, it was important to reflect clearly the goals and the principal sections of the website on the sitemap.

Sitemap of the new website of Les As Frenchies

Sitemap of the new site.

Sketch

Once the sitemap was defined and approved, I was able to start sketching the layout of the pages of the website, keeping the personas in mind. At this point, I explored several ways to present the information to the user.

website interfaces sketches on paper

Sketches I drafted during the research phase: (HP)—Homepage. (T1)—Landing page. (T2)—Project page.

3. Prototyping

Since this website was simple in terms of architecture, I decided to design, straight in the browser, an interactive prototype in HTML/CSS to test the content structure and iterate ideas at an early stage with three real users.

prototype version 1 iterated to version 2

Left— First version of the homepage. Right— Iterated version of the homepage.

4. Usability Testing

The test I conducted helped me and the team understand that the prototype failed to communicate effectively several key information to the users. Below are the problems I identified during the test.

  • Mission statement not clear enough;
  • Confusing link labels inside a hamburger menu;
  • Still hard to figure out the services provided and the audience;
  • Lack of strong call-to-action to lead the user through their tasks;
  • Missing relevant copy to guide the user;
  • Confusing background video subject…

After considering the feedback, we worked on a second version of the prototype that we tested again later. The changes we made, such as, displaying the full menu on the header, change of colour, adding extra copy and a couple of images, improved drastically the usability of the prototype.

In fact, the conversion rate had slightly improved and the pages were much clearer and accessible for the user.

Once the prototype signed-off by the client, we focused on the brand’s communication and refined the User Interfaces of the website.

5. Visual design

Brand values

Part of the strategy was to redefine the brand values, in order to create a visual language aligned with Les As Frenchies (See table below). I assisted the client in defining the appropriate attributes of the brand:

Les As Frenchies table listing the brand values

The brand attribute exercise we did with the client to refresh the brand identity of Les As Frenchies.

From the brainstorming session, I created a Stylescape based on five main attributes to setup the visual atmosphere of the design: Classy, Bold, Upscale, Vibrant and Engaging

Les As Frenchies stylescape

Stylescape conveying the tone and atmosphere of the brand.

Colours

Having a Stylescape helped me to define an appropriate color palette highlighting the personality of the brand. I used a vibrant golden color to style links and clickable call-to-action and darker colors for sections to suggest the prestige quality of service aspect claimed by the brand.

New colour palette  of Les As Frenchies

Refreshed color palette.

Typography

Choosing the appropriate typefaces was another important step. As the goal of the new design was mainly to communicate more information to the audience, it was important to choose readable and legible typefaces.

I, therefore, chose Open-sans, an easy to read typeface because of its open shapes and generous x-height.

For the main headlines, I chose the display font Bebas-Neue to emphasize contrast and convey the boldness attribute of the brand.

Les As Frenchies typefaces

Typefaces I used for the new brand identity: Bebas-Neue and Open-sans.

Refined visuals

Les As Frenchies homepage, How we work and Filmed by you pages visual interfaces

Final Interfaces I designed for the new website.

6. Front-end development

On this project, I was also in charge of all the front-end integration such as: building the pages in HTML5, styling the pages using latest techniques like CSS Grid, Flexbox and assisting the developer with the theme creation on the CMS Drupal.

(In order to make the final website user-friendly and easy to maintain, the developer has implemented the site into the content managing system Drupal 7).

View the redesigned website

Les As Frenchies screen with CSS Grid highlighted

Screenshot of an interface with CSS Grid enabled.

Conclusion

After six months of team work, I delivered a website suitable to communicate the mission of the company, its services and portfolio. This project has been an enriching and pleasant experience for me, as I collaborated remotely with the stakeholder from inception to delivery.

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.

    book-cover