Short survey to get the ball rolling

When it comes to restyle something I always like to ask clients to complete a short survey. This allows me to grasp some useful insights and information.

In this case I asked for:

• Keywords related to the desired aesthetics
• Main purposes of the website
• Color preferences
• Other useful details

Doing so reduces design reviews, I’m more efficient since the start and I include the client in the process. This results in an improved final result and the creation of a good relationship.

Copy that: content is King!

At this stage I grasped all the main information from the old website and the survey to evaluate it on some papers.

I made sense of all the information with quick notes and I drafted a new Information Architecture.

To improve the whole usability and experience I focused on the following aspects:

• Use of shorter texts and paragraphs
• Creation of strong visuals and content rationalisation
• Impactful copy, in line with the branding and the strong visual design

A style guide as polar star

To express fully Daniele’s personality and communication objectives I decided to use:

• Electric colors
• Strong visuals
• A more readable font-family
• Contrast between squared VS rounded elements

I defined a style guide and I applied it consistently along the whole website. From UI components to products’ covers and whatever other graphical asset.

At this point I also had the chance to restyle the previous logo. Daniele went crazy for it, to the point he made t-shirts with the logo printed on them :D

A new Information Architecture

After the previous analyses I could design a new IA to improve navigation and contents fruition.

In particular I focused on the following aspects:

• Accessing free materials and blog articles quickly (to improve customers awareness and get new clients)
• Streamlining the sales of his workout plans
• Presenting Daniele in a professional and human way
• Displaying contacts and socials to get in touch easily

From Wireframes to High-fidelity

At first I presented to the client only some wireframes to get quick feedbacks and understand if we were on the same page. I felt my client excitement going up and with few iterations I evolved the designs into high-fidelity mockups.

The day that I presented the 1st prototype I got very good feedback from him and there’s nothing more rewarding.

In only 3 weeks of work we passed from an old website with many usability problems to a revamped energetic new design that the client embraced with enthusiasm.

The Launch

After the design approval it took me 1 month more for the implementation and to publish it online.

I customised a Wordpress theme and through HTML, CSS and plugins I reproduced the design. Since there are transactions I made sure to create a solid, secure and responsive website.

I still remember Daniele’s joy and words of appreciation at the official launch. We were ready to run and since the first sale we understood the website potential and the margins of improvement.

The first 3 months we got good results but the turning point was in January 2021. By then I implemented a videocourses module and I optimised specific landing pages to sell Daniele’s products.

We got an increase in sales of 176%, sold products to more than 1000 customers and boosted the brand consideration.

These results came from the great quality of Daniele's contents and his marketing ability on social networks in addition to a streamlined UX, a captivating UI and a solid revamped website.

Compared to the old website we got 3000% increment in sales and better Google Analytics metrics.

The final steps

In only 6 months with the client we created what we liked to define a Ferrari website. Revenues were great and the website was basically running on its own.

In the following months I mainly performed maintenance tasks and integration of new contents.

The last highlights were:

• Designing a newsletter out of a concept suggested from the client
• Improving SEO, passing from a Pagespeed Score of 40% to 80%
• Teaching my client how to use Wordpress and being more independent