I was tasked with creating an e-commerce site which would enable B2B and B2C sales of the QuenchSea device. The website had to be ultra-modern with interactions and animations that would create an immersive and pleasurable experience for the user. I had full creative freedom with weekly sprint meetings with the client, to show design progress throughout this phase of the project. HW Energy had already produced an initial style guide in their pre-existing landing website so we had a concept foundation to develop from.
Leaps and bounds were made in my prototyping skills. Adding multiple states to components so that they are interactive to give a realistic sense of how the site might work. This also gives more clarity to the developers around how the site is expected to behave.
QuenchSea is one of the technologies developed by HW Energy for B2B and B2C sales. The device desalinates water, is portable and easy to use. HW Energy’s goal is to alleviate the world’s water crisis by donating and distributing 100 million devices by 2027 and impacting 1 billion people worldwide.
They want to release the first round of devices by June 2021 and need a new e-com store to accommodate and process product sales. Accessories and instructions on how to use must also be available through the website.
To reflect that QuenchSea is vastly different to anything else available to buy commercially, HW Energy wanted a website that was different to most other e-com stores. They wanted their website to be a unique online experience that user’s would enjoy, remember and share.
The challenge was in aligning what we could produce and prototype in the design phase with effects and animations the developers could utilise in the build phase of the project. We looped the devs into every relevant design discussion throughout this project to ensure that what we designed was the right balance of creative and feasible.
I wanted to make sure that this unique device was at the centre fold of every page. Reinforcing the product image increases product (and therefore brand) recognition. We supplemented the brand elements with fluid graphics inspired by the old graphics from the previous HW Energy website. Creating new shapes and experimenting with scale, blur and overlapping layers produced a versatile style that could be applied anywhere on the site.
This style could even be replicated for social posts and other marketing platforms to induce brand recognition. We created bespoke display iconography to communicate the top-level process of how the device worked. We included video content to make information easily digestible for the user and simplify an otherwise seemingly complicated desalination process.
We also wanted to emphasis the humanitarian pledge that QuenchSea had taken that aligned perfect with HW Energy’s vision for the future. A separate user flow allowed users to donate money to the cause so that QuenchSea devices could be supplied to the third world countries that needed them.
Marketing strategies were deployed to boost SEO ranking of the site, allowing organic traffic and gradually increase after site launch. The pages are all internally linked through relevant sections and a site map in the footer, aiding not only site navigation for the user but supplementing SEO ranking. Blog posts hosted on external sites validates the newly established brand and reassures the user about the product.
Animation and interaction were imperative to making this design immersive. We wanted parallax scroll effects that make it feel as though the user is underwater. Carousels are smooth and playful. Micro-interactions such as hover states on buttons reflect the fluid theme we adopted throughout this project.
This was also the first time I created a bespoke account page which allows the user to keep track of their orders, account details and donation history - aiming to increase user retention and keep users coming back to the site.
If you like what you see and want to work together, get in touch!
luke.ui.work@gmail.com
