The Ask

What the client was expecting to accomplish

In Canada, the company wanted to perform a website refresh to incorporate a more modern look and feel to be aligned with their new global brand strategy. As Product Designer, my goal was to transform CFMoto's wireframes into a unique and elegant user interface. The scope contained over 20+ screens plus the main navigation.

Project Overview

Project's Context

No Direct Contact with Client

I was invited to join the project as a third part contractor and, as the client was based in Montreal with a different team, I was not going to have direct contact with them. I embraced this challenge with no concerns as I felt confident that strengthening my documentation process and communication were going to be enough to make this project successful.

(Almost) Full Creative Freedom

Due the new global brand strategy, CFMOTO was expecting to see something unique for their website refresh. Which meant I had almost full creative freedom to execute my ideas as long as they were aligned with the new brand book. I used Polestar, Tesla and Rolls-Royce as my main benchmarks trying to create an elevated look and feel, that could still feel accessible to the audience.

Framework Constrains

As the website was built using a CMS, a couple framework constrains had a direct impact in the design work. I had prepare a careful documentation to inform developers how to make the transition from the old layout to the new one. Things like text sizes and component behaviours needed to be audited to fit the framework constrains and sometimes changed due lack of template support.

Case: Find Your Ride Quiz

Highlights of the Project

One of the main deliverables of this project was to create a quiz for users that wanted to find the perfect match between their ride style and a CFMOTO vehicle. I was given the quiz structure and used the brand look and feel to create the necessary brand illustrations. The quiz should feel fun and engaging for users and also serve as a filter mechanism, suggesting possible vehicles along the journey, while the user were still answering the questions.

Redesign product pages

Website Refresh

The Design Process

After creating a moodboard with my design references I started to design the website components. I wanted to explore the B&W transition to create an elevated look and feel for users, incorporating lifestyle imagery where possible. The concept was to make the imagery blend with the background to create an exclusive aesthetic, where the products were highlighted. I first created a high fidelity version of the page and then started to add colours and imagery to compose the final version.

Website Redesign project

The Result

What we accomplished

The project was successfully approved with few tweaks in the rounds of revisions, very much appreciated by the agency I was working with (and the client). The website is live today, I you can check the UI comparison below.

Before
Website Before
After
Website After

What I've learned?

Project Retrospective

The project ran very smooth and was incredibly fun to execute. Even though I never had a direct contact with the client, I've empowered the agency responsible for the project constantly so they could clearly communicate my decision designs and obtain success. I also learned a lot about AngularJS, the framework used to bring this project to live.

Icon Arrow top
Made in Webflow