Loic Gonzague
UX Designer
Made with

A new website

... for Christmas (2017)

"Loic. I want to challenge you."

The Marketing and Communication Director of my web agency wanted to sell a new Christmas offer for new and current customers. She needed a very quick website with links redirecting to our e-commerce platform.

  • Even if the website would be created for new and current customers, my Marketing and Communication Director was my client.
  • The project should be finished in November, 1st so I started in mid-September. (Christmas time starts in October, 1st)
  • I was the Web Designer and Front-End Developer

During the meeting, I asked for some details :

  • What did we do last years?
  • Are there any technical constraints?
  • How many mockups did she want?
  • Is someone will work with me?
  • Deadline?

She said they already had a landing page for current customers last years but it needed a redesign.  The only technical constraint was the landing page will have to be easily duplicated for new customers not having a website and for customers already having a website. The landing page had to have a responsive design and a non-responsive design. She wanted three mockups. I would have had a team to work with me after introducing my mockups and I had two weeks to prepare something.

Immediately after the meeting, I began thinking about the quick way to create a website which users would be redirected to the e-commerce platform.

I chose to redesign the landing page they made before.

This is a picture of my notebook.
This is a picture of my notebook.

First step: Sketching

Everything should start with a pen and a sheet of paper.

For all of my projects, I start writing or drawing something on my notebook. I can easily put my ideas and change them. This is my way to brainstorm.

As it’s a redesign, I tried some new structures. The main goal was to have a simple and relevant one. So I chose to go on with the #1 structure.

This took me less than one hour to make it
This took me less than one hour to make it

Next step: Wireframe

It was a quick step but necessary.

I was a good idea of the result in my brain but I wanted to make it clear. So I created a wireframe of the landing page including texts, headings, and placeholders for images.

I used Moqups for creating the wireframe. I made it with low fidelity because I preferred to spend more time on spaces and font sizes when I would work on the visual design.

Here is the prototype.
Here is the prototype.

Visual Design and Prototype

I worked with Adobe XD

After that, I started creating the visual design directly on this tool. I love to see how easy and fast it is to create screens with Adobe XD.

I wanted to create a feeling of simplicity for the users so I made a clean style with low texts, clear headings, CTA buttons and warm images. 

My favorite part in the landing page is the horizontal timeline. When I developed it, I spent a lot of time to make it work, even for a tablet or a smartphone. I was proud of it.

Now, I’m ready to introduce my work.

« Nice work! Let’s move on. »

My Marketing and Communication Director was convinced and added some details to improve my work. She gave me a month to develop the landing page and test it before Christmas time. A communication team also worked with me to improve texts, headings, and images.

Now, the results

It was a great challenge

I did not expect to be given such a project and it was a huge success. I think my design process permitted me to work step-by-step and not going straight to the solution. It allowed me to work fast too. It’s easier to draw a part of the solution with a pen and change it than creating the entire solution from scratch with Photoshop & friends and deleting your file to start over again because it’s not good. It changed my mind a little bit. I began seeing web projects differently. Now, I see them as UX projects.

My only fear was the deadline for the project. I was the web designer and the only front-end developer for this. Fortunately,  my colleagues supported me and I did it.

Here are the insights :

100%
New customers had the LP
1/3
Customers had the LP
60%
More efficient than last year
A new website

Christmas 2018

As the 2017 Christmas campaign was a success, the Marketing and Communication Director decided to renew my work for next years.

In Christmas 2018, my landing page was redesigned again with three major color themes. Same structures and same purposes. Only some texts and images have changed. The project managers also wanted to put videos in the background.

I was not in the project at the beginning but finally, they wanted me as the front-end developer.