Luv the Grub
Website Design
Creating a new company website in alignment with branding and company vision, with a focus on improving user experience and using modern visual aesthetics.
Responsible for:
Ideation, Website design, Building the website on Squarespace, Custom HTML/CSS, UX Copy
Tools:
Adobe Photoshop, Adobe Illustrator, Adobe XD
INTRODUCTION
As a social business dedicated to helping people and the planet, Luv the Grub has been rescuing produce from landfills, and turning them into hand-crafted chutneys and spreads through employing individuals with barriers to employment. However, the current website didn’t reflect Luv the Grub’s impact on the community, nor did it adequately showcase their selection of products.
I wanted to design a bold, colourful website which highlighted Luv the Grub’s positive impacts as well as their products, and simplify the navigation of the current website to create a smoother experience for website visitors.
DEFINING THE PROBLEM
We met up and discussed areas of improvement, and priority areas to change for the website.
​
The old website was created in a grid layout on Squarespace. Luv the Grub’s branding is meant to be fun, friendly, and light-hearted, but this website was quite blocky, and didn’t quite match the light-hearted branding of Luv the Grub. Luv the Grub wanted more website traffic, but this old website wasn’t retaining a lot of visitors.
The homepage of the old website.
Scrolled down view of the homepage. The colours and photos were great, but the layout could be improved!
The old website also wasn’t compelling enough to lead viewers to click to their "Our Mission" page. The navigation was tricky, and for current customers of Luv the Grub, it was hard to immediately identify where to purchase the product on the website.
MY OBJECTIVES
Many current customers of Luv the Grub had given feedback that buying the product through the website was difficult to figure out. Shopping for products should be more clear and intuitive.
Make it easy for website visitors to purchase the product
The old website didn’t showcase much of Luv the Grub’s mission. It needs to be clear exactly what Luv the Grub does, and who they are helping.
Highlight the social and environmental mission of Luv the Grub
The actual chutneys and spreads being sold are high-quality, hand-crafted chutneys and spreads, created after months of creating unique recipes. These products need to be more front and center on the website.
Showcase the actual products being sold
The old website wasn’t getting a whole lot of visits. More visitors need to be attracted to learn about Luv the Grub, and become potential customers.
Generate more traffic to the website
THE FINAL PRODUCT
1) Home Page
This was the most important page to build as this was the hook to draw visitors in.
​
The chutneys and spreads are showcased front and center on the top of the home page, and there is a large “Shop Now” button where customers can quickly purchase their products of choice.
Below the top of the home page, viewers can read a quick summary of how Luv the Grub helps people and the planet. We wanted viewers to be able to get a quick overview of Luv the Grub's mission, and this was achieved through short, concise copy.
​
To highlight the change Luv the Grub was creating in the community, the impacts of Luv the Grub are further shown below in numbers.
1.1) Home Page - Impacts
In our meeting, it was decided that there should be multiple paths on the home page for a visitor to reach the "Shop" section of the website. Thus, another "Shop Now" section was added after the Impacts section to further encourage viewers to visit the "Shop" page.
​
Below the "Shop Now" section was an area where visitors could see where Luv the Grub had been mentioned in press; clicking on each logo would bring the visitor to the news article! This area was to let Luv the Grub's work and mentions in the press lend credibility to their name.
1.2) Home Page - Shop Now, In The Press, Footer
Below, viewers can read a quick summary of how Luv the Grub helps people and the planet, and view Luv the Grub’s impact.
​
Underneath that, another "Shop Now" section further encourages viewers to visit the "Shop" page.
1.3) The Entire Home Page
As the hook to draw viewers in, I wanted this page to be bold and eye-catching. I created the large, yellow landing page picture of the jars on Photoshop, and used yellow as the background of this picture as yellow matched the energy and friendliness of Luv the Grub's branding.
​
I also simplified the navigation at the top, and chose to split it up with the Luv the Grub logo in the middle for easy scanning.
2) Shop Page
This was a page we wanted viewers to visit, to potentially purchase the products - hence why there are two "Shop Now" call-to-action buttons on the home page. For this page, I wanted to clearly list out the products for sale, as well as a short description of each product. On the old website, the descriptions of each product were on a separate page called “The Grub”, but I wanted the product descriptions to display on the “Shop” page.
THE RESULTS
A month after launching the website in the end of October, here is a look at some of the analytics in website traffic.
October's visits were less as the website was under development.
​
Post website launch, compared to our statistics in September, we were seeing over one hundred more visits to our website. Success!
LEARNINGS AND TAKEAWAYS
Redesigning a website in Squarespace is not an easy task. Simplifying the structure of this website and cutting down the navigation pages helped create a more intuitive interface for website visitors. Having clear, bold visuals, and having clear CTA buttons formed a website where shopping for products was an easy and enjoyable experience. It was important to create concise copy for the website that reflected the brand’s tone, and and use bold visuals to engage viewers. Along the way, I also learned tips and tricks in CSS for styling the website, as well as making the website responsive!
​