.svg){kind=small}
For meal planners, I make it easy to subscribe online
I revamped BIORAW’s Shopify website to make it more usable and appealing for their customers.
I revamped BIORAW’s Shopify website to make it more usable and appealing for their customers.
Freelancer Website Designer working with Marketing Manager, Copywriter, and Storetasker Shopify Developers
Website Redesign
Sketch
Shopify
Redesign BIORAW’s website to look more polished and aligned to their branding, demonstrating the same level of success they’ve achieved in grocery stores across Canada. They offer meal-prep subscriptions and wanted to ensure that experience was as frictionless as possible while pushing the boundaries of a Shopify plugin.
The scope of this project includes the Home, Startup, and Partner landing pages. The previous pages lacked a conversion funnel without intentional call-to-actions. For starters, it was very difficult for founders to find our application button. The information has also become outdated after five years of reprioritization and restructuring.
This page received a subtle UI refresh. I made the meals look like plates and included placeholder imagery to make it easy for customers to measure their progress.
These are all net-new pages for BIO RAW all sharing the single goal for customers to purchase a meal plan. It includes features such as answering frequently asked questions, highlighting nutrition benefits, lots of social proof, and demonstrating BIO RAW’s commitment to supporting the community and ethical practices.
For a majority of the project, I was collaborating with the Marketing Manager who had experience in web design himself. We worked together to create a wireframe for every page of the website. He delivered the copy while I created high-fidelity mockups. I based the high-fidelity mockups on inspiration I gathered on an InVision mood-board that I put together with the owner and their previous marketing collateral, to keep branding consistent.
I found the Shopify theme Blockshop would meet most of my design’s needs. I looked for the sections Blockshop offered including: Custom HTML blocks and Cascading Content where there are two columns, one with an image, the second with text. There was a lot Blockshop didn’t offer - which led me to work with Storetasker developers to finish the process after I laid the foundation, setting up the page template and sections, inputting content where possible.
I worked with 3 seperate Storetasker developers. The first one was a previous contact of BIO RAW, so I contacted him to move over his old code into the new theme, as well as update the UI of the “Select Your Meals” page.
The second developer created sections that Blockshop didn’t have built in. I sent him my mockups with indicators of what would be a net-new section. I had two meetings with his project manager to clarify any confusion. After, I worked with him after to ensure that the spacing was consistent throughout the website, for a final polish before launching the site.
I sourced a third developer because the second developer was very pricey. The third developer created newsletter forms and a postal code collection form which she had previous samples of. We worked with her to integrate these forms in Drip Email Marketing to streamline processes for BIO RAW including: collecting marketable contacts and gathering market research for potential expansion regions.
Collaborating with multiple Storetasker developers is challenging to manage. I needed to project manage to ensure that they weren’t overriding each-other’s work and were working on the correct theme. There were moments where I had to go in and move code over to the correct theme myself.
The first thing I look for when picking a Shopify theme is Custom HTML blocks. This gives me the flexibility to fill-in-the-blanks of the sections they don’t have out-of-box. However the process to do this is very tedious. I need to test each theme on a website. It should instead be offered as a filter.
