guararapes redesign
visit
guararapes.com.br
Guararapes is one of the largest MDF industries and exporter of panels and plywood in Latin America.
With the creation of the new visual identity, they invited me to create the new brand website.
Working together, we created a digital experience aimed at architects, interior designers and woodworkers to know the Guararapes products and find a simpler way to use them in their projects.
With the creation of the new visual identity, they invited me to create the new brand website.
Working together, we created a digital experience aimed at architects, interior designers and woodworkers to know the Guararapes products and find a simpler way to use them in their projects.
what i did
- UX Research
- UX Wireframing
- UI Design
- Develop Managing
- UX Wireframing
- UI Design
- Develop Managing
5-STEP DESIGN PROCESS
1. Research. I researched how architects, designers and woodworkers search for products, news and decoration styles with qualitative research (user interviews and field studies).
2. Brainstorming. We had some online design thinking sessions, with Guararapes marketing team and with some customers (architects and woodworkers), to find the best ideas.
This research and brainstorming led us to rethink the form of interaction with the product lines of Guararapes, which before was presented only by categories. Now, the site offers a wide variety of filters, which in addition to enabling various forms of search, greatly facilitates this task. For the product pages, we restructured the data presented based on the needs of professionals bringing image downloads, base for 3d use, etc.
3. Prototyping. Some user flows were designed with pen and paper. Later I designed a high-fidelity mockups, skipping the lo-fi stage.
4. Final design. After all wireframes was approved the entire UI of the new website was created, using the best usability practices and design trends.
5. Responsive Design. For better usability results, all UI screens was created for the three most common sizes (Desktop, Tablet and Mobile)
2. Brainstorming. We had some online design thinking sessions, with Guararapes marketing team and with some customers (architects and woodworkers), to find the best ideas.
This research and brainstorming led us to rethink the form of interaction with the product lines of Guararapes, which before was presented only by categories. Now, the site offers a wide variety of filters, which in addition to enabling various forms of search, greatly facilitates this task. For the product pages, we restructured the data presented based on the needs of professionals bringing image downloads, base for 3d use, etc.
3. Prototyping. Some user flows were designed with pen and paper. Later I designed a high-fidelity mockups, skipping the lo-fi stage.
4. Final design. After all wireframes was approved the entire UI of the new website was created, using the best usability practices and design trends.
5. Responsive Design. For better usability results, all UI screens was created for the three most common sizes (Desktop, Tablet and Mobile)
development
In this project I had a close collaboration with the developers. They were actively involved in the process, validating design solutions and coming up with new ideas.
The technology used by the previous website of Guararapes was outdated and poorly optimized, causing a long delay in loading the site and low performance in organic SEO. Aiming to improve this performance, we decided to develop the entire site in React.js language and Server Side Rendering Gatsby which, together with a Headless CMS integrated only via API (Prismic), achieved a high loading speed, a more dynamic way of loading content by the company and much better SEO results.
The technology used by the previous website of Guararapes was outdated and poorly optimized, causing a long delay in loading the site and low performance in organic SEO. Aiming to improve this performance, we decided to develop the entire site in React.js language and Server Side Rendering Gatsby which, together with a Headless CMS integrated only via API (Prismic), achieved a high loading speed, a more dynamic way of loading content by the company and much better SEO results.
results
The website was successfully launched in March 2020 and in the first month access is increased by 30%. The number of users who leaves the page in less than 10 seconds decreases by more than 40% and this number is even more in the mobile, reaching 52%.
