Overview
Burt’s Bees is an American personal care products company that markets its products internationally. The company manufactures products with natural ingredients, using minimal processing to maintain the purity of ingredients. The objective of the project was to redesign the brand’s website for Argentina, following the global design line but adapting the structure and contents.
My role
I was hired as a UI Designer consultant by Webar agency to take care of the visual design. Starting from the base of the US website, we had to maintain aesthetics and follow the institutional guidelines of the global brand.
But markets of each country are very different, there are limitations regarding products, there are variations of lines, categories and different marketing actions.
To address these problems we redesign the structure of the site, creating new wireframes that we present and work together with the Burts’ Bees marketing team.
Having approved and validated the structure of the site we advance to the transformation of wireframes into hi fidelity designs. I was in charge of breaking down the global identity manual, taking concepts and expanding components according to our needs, always maintaining the visual style.
Tasks
• Wireframing
• Prototyping
• UI Design
• Responsive Web Design
Tools
Sketch
Trello
Photoshop
Slack
Illustrator
Invision
Wireframes
UI Library
With validated wireframes and the structure confirmed we moved into designing a visual system. We took the existent brand guidelines and we expand the library. Through the use of reusable components the website remains scalable and with a consistent aesthetic in all its sections.
Interactive prototypes
High fidelity designs were presented by creating an interactive prototype.
Invision tool was used to add comments on each screen, speeding up feedback and collaboration between team members.
Mobile views
Based on statistics of visits to the site it was detected that the highest percentage of users were navigating the site from their cellphones. We worked with a mobile first approach defining mobile views and then adapting desktop versions.
Desktop Views
UI elements were reused and some new components were created for the adaptation of the desktop version.
