Coco Life Website Design
Coco Life Website Design
Coco Life Website Design
A clean, modern website design for Coco Life, a premium organic coconut brand from Hayleys.
A clean, modern website design for Coco Life, a premium organic coconut brand from Hayleys.
Industry
Industry
Agriculture and Consumer Goods
Agriculture and Consumer Goods
Tools
Tools
Figma, Photoshop, Illustator
Figma, Photoshop, Illustator
Figma, Photoshop, Illustator
E-commerce
Team
Team
1 UX Designer | 3 Developers
Front-end Developers, Project Manager,
UI/UX Designers
1 UX Designer | 3 Developers
Timeline
Timeline
3 weeks
Front-end Developers, Project Manager,
UI/UX Designers
3 weeks
E-commerce
Link
E-commerce
About
About
About
Coco Life from Hayleys offers organic coconut products made in Sri Lanka using sustainable and cruelty-free methods. The brand focuses on purity, quality, and environmental responsibility. With the trusted heritage of Hayleys, Coco Life brings the natural goodness of coconuts to the world.
Coco Life from Hayleys offers organic coconut products made in Sri Lanka using sustainable and cruelty-free methods. The brand focuses on purity, quality, and environmental responsibility. With the trusted heritage of Hayleys, Coco Life brings the natural goodness of coconuts to the world.
Problem
Problem
Problem
Coco Life had no website to showcase their organic products or tell their brand story. They needed a clear, user-friendly site that could:
• Build trust and highlight their values of sustainability.
• Connect with international customers.
• Make it easy to explore products and get in touch.
Coco Life had no website to showcase their organic products or tell their brand story. They needed a clear, user-friendly site that could:
• Build trust and highlight their values of sustainability.
• Connect with international customers.
• Make it easy to explore products and get in touch.
Solution
A fully custom website was designed to reflect Coco Life’s brand values of sustainability, purity and heritage.
Solution
Solution
A fully custom website was designed to reflect Coco Life’s brand values of sustainability, purity and heritage.
• Clear and simple layout: The interface was designed to be intuitive and clean, making it easy for users to browse and understand the range of organic coconut products.
• Clear and simple layout: The interface was designed to be intuitive and clean, making it easy for users to browse and understand the range of organic coconut products.
• International user focus: The site content and structure were tailored to educate global audiences about the brand while ensuring easy navigation and accessibility for international users.
• Interactive prototype: An interactive prototype was developed to create an engaging and responsive experience, helping users connect more deeply with the brand story and values.
• International user focus: The site content and structure were tailored to educate global audiences about the brand while ensuring easy navigation and accessibility for international users.
• Interactive prototype: An interactive prototype was developed to create an engaging and responsive experience, helping users connect more deeply with the brand story and values.
How I Approached This Design?
How I Approached This Design?
How I Approached This Design?
1.Research
1.Research
Project brief
Project brief
To align the design with Coco Life’s brand goals, I conducted a 1:1 discovery session with the client. We explored user needs, brand voice, and visual preferences. I also reviewed their brand assets and collected inspiration from relevant websites to help define an early design direction.
To align the design with Coco Life’s brand goals, I conducted a 1:1 discovery session with the client. We explored user needs, brand voice, and visual preferences. I also reviewed their brand assets and collected inspiration from relevant websites to help define an early design direction.
Target audience
Target audience
Working closely with the client, I identified our core audience as health-conscious international consumers seeking premium, ethically-sourced coconut products. This informed my focus on clean layout, transparency, and a visual tone that evokes trust and natural simplicity.
Working closely with the client, I identified our core audience as health-conscious international consumers seeking premium, ethically-sourced coconut products. This informed my focus on clean layout, transparency, and a visual tone that evokes trust and natural simplicity.
Creating sitemap
Creating sitemap
I structured the sitemap to prioritise clarity and intuitive flow. Key content areas such as product benefits, sourcing ethics and purchasing info were grouped based on user intent:
• Discovery: Homepage, Brand Story
• Evaluation: Product Pages
• Conversion: Shop, Contact
This helped reduce friction and ensured users could easily navigate the site regardless of where they entered.
I structured the sitemap to prioritise clarity and intuitive flow. Key content areas such as product benefits, sourcing ethics and purchasing info were grouped based on user intent:
• Discovery: Homepage, Brand Story
• Evaluation: Product Pages
• Conversion: Shop, Contact
This helped reduce friction and ensured users could easily navigate the site regardless of where they entered.
Competitor analysis
Competitor analysis
I analyzed several direct and indirect competitors to understand layout patterns, content hierarchy, and purchase flows. Key takeaways included:
• Clear CTA placement above the fold
• Strong use of social proof (e.g., badges, testimonials)
• The opportunity to differentiate with a more narrative, brand-focused product page for Coco Life
These insights helped define where we could align with expectations and where we could stand out.
I analyzed several direct and indirect competitors to understand layout patterns, content hierarchy, and purchase flows. Key takeaways included:
• Clear CTA placement above the fold
• Strong use of social proof (e.g., badges, testimonials)
• The opportunity to differentiate with a more narrative, brand-focused product page for Coco Life
These insights helped define where we could align with expectations and where we could stand out.
2.Sketching
2.Sketching
After thorough research & analysis, I began sketching some versions of the screens.
Multiple iterations were done for each component and discussed with the client for feedback. Below is an example of sketches done for individual product page.
After thorough research & analysis, I began sketching some versions of the screens. Multiple iterations were done for each component and discussed with the client for feedback. Below is an example of sketches done for individual product page.
Iteration 1
The initial sketch included the logo, product image, navigation placement, product title, short description, and a CTA ("Get a quote").
Iteration 1
The initial sketch included the logo, product image, navigation placement, product title, short description, and a CTA ("Get a quote").
Iteration 2
In the next iteration, I cleaned up the layout by grouping CTAs like “Export only” together and adding product size and trust badges more clearly. I focused on improving spacing and visual flow so everything felt more balanced.
Iteration 2
In the next iteration, I cleaned up the layout by grouping CTAs like “Export only” together and adding product size and trust badges more clearly. I focused on improving spacing and visual flow so everything felt more balanced.
Iteration 3
In the final version, I added search, language selection, and shop products features to make the experience more user-friendly. The navigation menu was moved to the left to better organize multiple items and keep things clean as the site expanded.
Iteration 3
In the final version, I added search, language selection, and shop products features to make the experience more user-friendly. The navigation menu was moved to the left to better organize multiple items and keep things clean as the site expanded.
3.Wireframing
3.Wireframing
Wireframes were made to plan page layout and structure. Main components like images, text, and buttons were placed to keep UI clear. Iterations were done based on what users need and what worked better.
Wireframes were made to plan page layout and structure. Main components like images, text, and buttons were placed to keep UI clear. Iterations were done based on what users need and what worked better.
4.Testing and feedback
4.Testing and feedback
• Small changes were made based on feedback, such as adjusting layout spacing and button placement to improve clarity and flow.
• Cross-browser and QA testing were conducted to ensure compatibility across different browsers.
• Small changes were made based on feedback, such as adjusting layout spacing and button placement to improve clarity and flow.
• Cross-browser and QA testing were conducted to ensure compatibility across different browsers.
• Mobile optimisation was thoroughly checked.
• Mobile optimisation was thoroughly checked.
• The developed site was reviewed alongside the design to ensure consistency and accuracy in the final product.
• The developed site was reviewed alongside the design to ensure consistency and accuracy in the final product.
30% 25% 30%
User drop-off reduction Faster purchase flow More page views
30% 25% 30%
User drop-off reduction Faster purchase flow More page views
Reflection and Take Away
Reflection and Take Away
Reflection and Take Away
30%
User drop-off reduction
25%
Faster purchase flow
30%
More page views
Working on the Coco Life website was a really rewarding experience. Since the brand didn’t have any online presence or even a clear visual identity, I had the chance to shape how they would be seen digitally from the ground up. That meant not just designing a website, but also building a sense of branding that felt true to who they are: clean, organic and ethical.
To create a brand identity that felt natural and trustworthy, I focused on:
• Color palette: Soft, earthy tones inspired by coconuts and nature
• Typography: Clean and minimal fonts to reflect purity and simplicity
• Visual elements: Lots of white space, product-focused imagery and subtle textures
These elements helped build a consistent, meaningful look and feel across the site even without a formal brand guide in place. While I documented all my research and design decisions for the client, I’ve realised how useful a more structured, future-proof design system would’ve been. A proper design system could have made the design more scalable for future teams. Still, the experience taught me a lot about branding from scratch and how design choices can shape how people connect with a product online.
Working on the Coco Life website was a really rewarding experience. Since the brand didn’t have any online presence or even a clear visual identity, I had the chance to shape how they would be seen digitally from the ground up. That meant not just designing a website, but also building a sense of branding that felt true to who they are: clean, organic and ethical.
To create a brand identity that felt natural and trustworthy, I focused on:
• Color palette: Soft, earthy tones inspired by coconuts and nature
• Typography: Clean and minimal fonts to reflect purity and simplicity
• Visual elements: Lots of white space, product-focused imagery and subtle textures
These elements helped build a consistent, meaningful look and feel across the site even without a formal brand guide in place. While I documented all my research and design decisions for the client, I’ve realised how useful a more structured, future-proof design system would’ve been. A proper design system could have made the design more scalable for future teams. Still, the experience taught me a lot about branding from scratch and how design choices can shape how people connect with a product online.