renault dusterlaunch website
Duster is a reference vehicle at Renault do Brasil that started sales in 2011 and is going to its 4th update, this being the first major model change, going from being just that robust vehicle to a more refined vehicle with quality materials and new technologies while still maintaining its robustness.With all this model update, Renault decided to create a launch website, presenting all its new features and technologies, in addition to proving that Duster wins in several aspects of its competitors and still maintains its robustness with entry and exit angles, height, among others.
what i did
- UX Wireframing
- UI Design
- Prototyping
- Develop Managing
- UI Design
- Prototyping
- Develop Managing
4-STEP DESIGN PROCESS
1. Wireframing / Structure plan.
Because there is a large list of features to be presented and with the idea of being an interactive website with lots of motion and parallax effects, we created structure and hierarchy studies thinking about the most important features that should appear first and the entire sequence order.
2. Design.
Based on the initial key visual created by another agency and photographic assets received, we created the entire design of the new website thinking about all the visual effects of parallax and with mouse trigger per viewport to improve the experience.
In all, 2 graphic lines and 20 screens were created to reach the final and approved design.
3. Prototyping.
To define the parallax visual effects, animated prototypes were assembled from Adobe XD so that the client could understand the proposal and also brief the development team.
4. Responsive Design.
The entire site was designed for both desktop, tablet and mobile, modifying various parts of the project to better adapt to each type of device.
Because there is a large list of features to be presented and with the idea of being an interactive website with lots of motion and parallax effects, we created structure and hierarchy studies thinking about the most important features that should appear first and the entire sequence order.
2. Design.
Based on the initial key visual created by another agency and photographic assets received, we created the entire design of the new website thinking about all the visual effects of parallax and with mouse trigger per viewport to improve the experience.
In all, 2 graphic lines and 20 screens were created to reach the final and approved design.
3. Prototyping.
To define the parallax visual effects, animated prototypes were assembled from Adobe XD so that the client could understand the proposal and also brief the development team.
4. Responsive Design.
The entire site was designed for both desktop, tablet and mobile, modifying various parts of the project to better adapt to each type of device.
mobile design
As most of the site's accesses will be from mobile devices, there was a great focus on adapting the site to work on all mobile devices, whether Android or iOS with the most varied screen sizes and resolutions. There was a big focus on optimization as well because the website has a lot of assets and we need to optimize to anyone trying to access the website from 3g/4g carrier data.
development
In this project I had a close collaboration with the developers. They were actively involved in the process, validating design solutions, specially about all the parallax effects and how this might be to improve speed and optimization.
The website was developed in React.js language and Server Side Rendering Gatsby which achieved a high loading speed, and good SEO results.
The website was developed in React.js language and Server Side Rendering Gatsby which achieved a high loading speed, and good SEO results.
results
The website was successfully launched in May 2020 and was very successful with around 10k access by day and is used until today with all Renault teams to sell the vehicle and accessible inside Renault's website.
