Shopify Website for an Aussie Eco Brand

Sowmya Raghunathan

0

Web Designer

UX Designer

UI Designer

Figma

✨ABOUT THE PROJECT

Brand : ​Continual Solutions is a new Australian brand focused on selling sustainable products.
Product : ​An informational cum e-commerce website to explain their unique angle on sustainable products and a shop to sell them.
Main Goal : ​To design a website based on a selected Shopify Theme and define the colour scheme and fonts for brand visualisation.
My Role : User Experience and Interface Designer in collaboration with a Brand Strategist and Development Team.

✨BRAND BACKGROUND

This Australian entrepreneur group launched an initiative prioritizing sustainability, affordability, and customer and environmental satisfaction. They developed a method to recycle paper into recyclable products, creating a sustainable loop. Initially targeting harmful packaging materials, they continue to innovate and expand their sustainable product offerings.

✨THE CHALLENGE

Branding : They did not have a logo or a brand style and it was important to them that the colour scheme communicated their core values. They wanted a logo that expressed sustainability and recycling but they neither wanted a generic one nor a logo that would restrict their identity to packing materials.
Live App : The main aim was to get a website up and running quickly. The brand did not have an in-house development team and they didn't want to spend time and resources on a custom website. They wanted to use a Shopify Theme and host the website there but, they wanted to see a demo version of their website designed before purchasing the theme.

✨GOALS AND OBJECTIVES

Define a brand's identity that aligns with their core values - sustainability, honesty, eco-friendly, save money & planet.
Design Brand Logo to align with their values at the same time not restrict their representation to 'packing materials'.
Identify a suitable theme on Shopify and Design a website on Figma based on it, using the same layouts to maintain the responsiveness of the theme.
Create a relevant copy with a professional, clear and honest tone across the website.

✨STAKEHOLDERS SAID

The central ideas are around - There is no Planet B so we should focus on saving this one. - Why should saving the planet cost more?
No new trees were cut, and it is 100% recycled, not just recyclable! Get the products living their second life already.
Flick the plastic. Our products are good for pocket + planet + packing. We need a corporate, professional vibe with a clear & professional tone in the message we convey.

✨DESIGNING THE SOLUTION

❄️BRAND IDENTITY

The Brand being new needed colour schemes, fonts & logo designed. While the stakeholders had a basic concept in mind, I enhanced their ideas and provided multiple options. We settled on a softer Brown+Green palette to ensure the messaging and product images were the focal points.
For fonts, they chose Montserrat, feeling it aligned better with their brand values and desired tone.

❄️BRAND LOGO DESIGN

They wanted a way to connect the words 'Continual' & 'Solutions' for the logo. They preferred the connector to be a symbol that represents recycling or sustainability. I provided 3 options with this idea and they liked the infinity symbol better as it represents the continual nature of sustainable products.

❄️USER & COMPETITOR RESEARCH

There wasn't much scope for real user interaction. However, the brand was able to share insights about the customer base it planned to target. They also shared the names of a few competitors in this space operating in Australia. I went through their websites to understand their communication and promotion models. The way they structured their websites and the user reviews on them helped me get the mindset and focus of their customer base and what is needed for this brand to stand out.
One of the insights was that the tone and message of these competitors weren't creating as much of an impact and often it was being perceived as 'green-washing'. This had a direct impact on the revenue, profits and brand credibility.

✨DESIGN JOURNEY

❄️DEFINING THE NEEDS OF THE SITE

The website needed to be an informational cum e-commerce one. They wanted minimal sections that gave every new customer a clear idea of what it is about and how it can help them. Their focus was to target bulk buyers, so they weren't too keen on a fun vibe or any animations/transition effects.
They needed equal space to talk about the brand and use images. They also wanted a space to answer questions from a customer perspective. In the shop section, they needed all the functionality present in a basic e-com website these days.
As for the visual vibe of the site, they wanted a minimalistic and professional one.

❄️SELECTING SHOPIFY THEME

Browsing through the Shopify template store was fun :D I selected 6 options for the team to choose from. However, they were torn between 2-3 options and were confused about which would work best. To help sort that out, I asked them a few questions that helped them get clarity on what they wanted for the brand. I asked...
1. Do you want the website to have an e-commerce or information feel at first glance?
2. Do you want your customers to look at products and 'add to cart' immediately to place orders ; or do you want them to explore products and write to you for specific bulk/arrangements? - which is more important?
3. Would you like to emphasise the products' looks and images more, or do you want to emphasise brand values through curated product categories?

❄️STARTING DESIGNS WITH HOMEPAGE

With the bases covered, I started designing the homepage on Figma. I carefully studied and measured the elements on the Shopify theme and recreated them on Figma to give the team an exact look and feel.
The theme had an exhaustive set of layouts, sections and functionalities. I took a day to completely understand the flow of it and repurposed each section to suit the brand's needs on my Figma Version.

❄️ACTUAL IMAGES & COPY INSTEAD OF PLACEHOLDERS

The stakeholders were still working on their product and factory photoshoots and mentioned that they may not be ready for a month. So, I searched for high-resolution stock images that could be used on the live site. They needed help with the copy as well which is where I used AI's help. I generated copy for each section in the tone they wanted using generative chatbots. 

✨HANDOFF TO DEV

❄️DESIGNING FOR LAPTOP SIZE

As the design was based on the Shopify theme and its layouts, I only had to design the laptop size to give the stakeholders an idea of how the website would look like with the actual info. This when taken into Shopify will automatically work for the other device sizes as the theme already has a responsive layout.

❄️HANDING OFF TO DEV WITH NOTES

The Brand Strategist with whom I was collaborating already had a development team onboarded to handle any iterations to the Shopify backend. So, I handed off the designs to the dev team with some notes for the pages that I hadn't designed on Figma. The Handoff was quick and easy as I was able to add the dev team as editors to my Figma File and they were able to extract elements from the designs directly!

✨WHAT I LEARNT

When direct user interaction isn't feasible, designers should rely on assumptions to inform initial designs and refine the product through post-launch testing and iteration.
For businesses needing rapid, template-based solutions, designers must balance business and user needs while maintaining visual and usability quality despite time and cost constraints.
Like this project
0

Posted Mar 29, 2024

​Continual Solutions is a new Australian brand focussed on selling sustainable products. I designed an info-cum-ecommerce website based on Shopify Theme.

Likes

0

Views

0

Tags

Web Designer

UX Designer

UI Designer

Figma

Responsive Website for an SAAS Platform
Responsive Website for an SAAS Platform
Travel Buddy | Sowmya Raghunathan
Travel Buddy | Sowmya Raghunathan