The One with the ‘Mobile-First’ approach for a seamless customer purchase experience.

EcoHydrate

I undertook the redesign of a product detail page and the buying journey for the EcoHydrate e-commerce website.

Context

EcoHydrate is a water bottle company that sells sustainable copper and steel bottles, along with various accessories. I discovered them while searching for a steel water bottle on Amazon. Out of curiosity, I visited their official website, and my designer instincts kicked in. I noticed their website wasn't optimized and saw many ways it could be improved, including a seamless experience with a mobile-first approach. I decided to take this up as a personal design challenge.

I saw an opportunity to practice my product thinking skills and help small businesses and customers seeking these products.

The Challenges:

According to Google statistics, old version of the website has an 89% bounce rate.
Over 90% of users visit the site from mobile devices, but the site isn't optimized for mobile .
The site lacks strong brand positioning, which affects customer trust.

The Goal:

To design a mobile-first product detail page and seamless buying experience to enhance EcoHydrate's brand presence and drive sales growth.

<aside> <img src="/icons/user_gray.svg" alt="/icons/user_gray.svg" width="40px" /> My Role:

Product Designer
User Research
Wire-framing
Hi-Fidelity Mockups </aside>

<aside> <img src="/icons/wrench_gray.svg" alt="/icons/wrench_gray.svg" width="40px" /> Tools:

Figma
Figjam
Miro </aside>

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" /> Project Type: Personal Design Challenge

</aside>

<aside> <img src="/icons/calendar_gray.svg" alt="/icons/calendar_gray.svg" width="40px" /> Year of Work: June 2024

</aside>

<aside> 🛠 The case study for this project is under construction, but I would love to talk about it. Reach me out on LinkedIn and lets have a chat.

</aside>

<aside> <img src="/icons/reply_gray.svg" alt="/icons/reply_gray.svg" width="40px" /> Home

</aside>

<aside> <img src="/icons/send-to_gray.svg" alt="/icons/send-to_gray.svg" width="40px" /> The one with a Bali-like experience in an Airbnb in Goa.

</aside>