About Costa Brazil
Costa Brazil is a sustainable skin care line from by former Calvin Klein creative director, Fransisco Costa, that uses a curated selection of potent and enriching natural Amazonian ingredients to elevate the body, mind, and spirit while respecting our natural world.
The challenge
Design an e-commerce website that builds awareness and generate buzz for Costa Brazil’s upcoming sustainable skin care line launch.
TEam & Deliverables
The Team
Merv Garretson
Creative DirectorChris Jiménez
UX Designer
Responsibilities
Research Analysis
UX Design
Visual Design
Deliverables
Develop an MVP that features:
E-commerce
Product / ingredient stories
Google integrated map highlighting ingredients
Product Tutorials
Mobile & desktop versions
Project timeline: 7 weeks
analysis
INFORMATION SYNTHESIS
The strategy team provided research that was conducted previous to my taking on the project. I was able to use the research better understand the brand, market, and prospecting users and use the data to inform my design process.
The research consisted of:
Competitive Research
User Interview Surveys
Content Strategy
Visual Design Direction
Competitive Analysis
The competitive research data provided by the strategy team showcased where costa brazil lived among its competitors within quadrant of prestige brands and natural, organic and clean beauty products.
Target Audience
I met with the strategy team to help identifies users. The team provided me with demographic information on 4 target audience groups that were identified in the initial marketing research initiative:
Global Professional
Male Beauty
Wealthy & Established
Affluent Natural Living
Personas
I used synthesized the target audience data into realistic personas that could guide my design process and ensure I addressed user insights.
user journey map
After identifying each persona’s different needs and lifestyles, I then established 4 different phases that an overarching user journey that is inclusive of each personas needs and lifestyle.
Site map
We then used the user journey map to help us create a site map that addresses the key event planning tasks and interactions shown in each persona’s user flow.
Design Direction
The consumers look for simplicity, authenticity and representation when it comes to skin care. This creates and opportunity for Costa Brazil’s to connect with it’s audience through it’s ingredient story in the following ways:
Features
UI
Simple, minimalistic and sophisticated user interface that is easy to navigate and places key information and purchasing within arms reach.
Story
Tell Costa Brazil’s story of social responsibility, heritage and authentic ingredient through compelling visual design and curated content that.
Engagement
Utilize interactive design to aid in the storytelling by allowing users to explore and interact with products.
Design
Sketches
I began creating sketch explorations of the screens referenced in the user journey map & site map. I used the personas to help guide me in the process and ensure that user needs and insights were addressed in the designs.
Homepage
The homepage houses a looping video clip montage and the brand’s super imposed logo to set the tone. From here the user can scroll down to explore or tap on a menu icon to overlay a navigational menu.
Navigation
Users can scroll up and down to explore different sections of the site as well as swipe left and right to explore each section’s content.
about page
The about page is below the home page landing screen. Swiping left the user could explore content about the brand, its creator & cultural heritage.
Products Page &
Ingredient Stories
The products page is located beneath the about section. Here I explored different ways to display the product line and how reveal and tell each products ingredient story.
content aggregator
The client proposed incorporating a “content aggregator” section into the site where users can explore new beauty & wellness related content, produced by Costa Brazil.
Desktop Version
The design for the desktop version of the site was based off of the mobile version and explored the use of vertical and negative spaces to aid in storytelling through content placement.
Wireframes
The creative director and I narrowed down the the proposed sketches options down to the screens needed that needed to be created. From there, I began to create wireframes from the approved sketches using Sketch.
Homepage
The homepage is the top of the site. Here, users can will see the latest content produced by Costa Brazil and can swipe left to explore other pieces in greater detail.
About section
The about section utilizes a simple long form layout similar, taking inspiration from magazine layout. Images and video content can be added to aid in storytelling.
Product
Here, users can explores Costa Brazil’s product catalog and learn more about each product in detail. Within each product’s individual page, users can explore ingredient stories and see where each ingredient come from via an interactive map.
Click to Enlarge Image
global impact section
In the global impact section, users can swipe left to learn more about Costa Brazil’s socially responsible approach to the environment, health & production.
Click to Enlarge Image
Shopping
To facilitate purchasing, users can tap the persistent shop button at the bottom of the screen to browse and add items to their items at any point in the experience. The cart is accessible via the main menu.
Click to Enlarge Image
Visual Design
I adapted Costa Brazil’s sophisticated aesthetic to the UI. I added a dramatic grayscale approach to the site photography and accented key product visuals with muted colors.
Updated High Fidelity Prototype
Site Layout
I applied the visual design to the prototype and The creative director and I looked over the now, high fidelity prototype and made necessary design tweaks and updates to better the prototype’s usability.
Ui
The artwork in the final product uses a-lot of screen real-estate. I placed navigational items on the upper and lower most parts of the screen so as not to interfere with content.
I lowered the opacity on the retractable main menu overlay to make it less intrusive. A persistent “tab” that lets users know what section of the site they are on has been incorporated as well.
Shopping Cart
The “item in the cart” notification dot will now appear next to the shop button when items are added.
homepage - new content
New content featured at the top of the site are being pulled form the content hub which is accessible via the + in the header. Tapping on “read more” will take the user to the long form version of the content.
homepage - about
The about section’s final design allows for a mix of art work, video and written content to be explored through scrolling.
homepage - Products
The product section now features a slider that allows users to rotate the product image at 360º. Tapping on “learn more” leads to the product page where users can learn more about the products and it’s ingredients of the product information
Ingredient Information
The ingredient story is important to users as stated in the research. I incorporated the use of rich photography and negative space to highlight each ingredient. Tapping on each ingredient opens a pop up that allows users to learn more about the ingredient through written, photographic and video content.
Ingredient - interactive map
Below the ingredient list there is an interactive map featuring each ingredient’s location. Tapping on an ingredient’s location icon will open an overlay which will feature a video about that ingredient’s story.
homepage - Global Impact
The layout for the global impact section and it’s adjacent pages follows a similar structure to the “about” section, allowing for a mix of art work, video and written content to be used.
Desktop Version
The desktop version is consistent with it’s mobile counterpart. The placement of the content along the vertical space create opportunities for exploring
MVP Delivery
I presented the final product to the client. Fransisco Costa and his team were very pleased with the end result; they understood the reasoning behind the experience design choices and felt that the final product reflected the user and business goals, needs and requirements. After the presentation Costa Brazil’s developer and I met and made arrangements for delivering the final project files for development.
