A Shopify Website-Build Case-Study

by Kim Reirson on April 25 2019
image12

 

 

Glow Juicery

 

Glow Juicery, founded by Marnie Ashcroft, is a fresh juice and raw food franchise company with locations across Canada. Glow is known for their Fruit and Vegetable Juice Cleanse Program, as a healthy alternative in a fast-paced lifestyle.

 

The Challenge | Objectives:

  1. Create a responsive, E-Commerce website on the Shopify platform.

  2. Streamline Glow's online sales and position products to wholesale clients and new channel partners.

  3. Utilize the ReCharge Shopify App to integrate a scheduling functionality for purchasing Glow Juicery's products. Specifically, for customers to purchase and set a recurring order, digitally managed on a set schedule.

  4. Design a custom creative, based on Glow’s product and company identity to resonate with the current customer, and attract a new clientele base.

  5. The site needs to display the highest level of professionalism, education, and building credibility with every aspect of the site.

  6. Develop a website that focuses on exceptional user experience (UX).

  7. Using clearly communicated and accessible information to build authentic relationships between the Glow brand and new customers in the digital space.

 

The Process


Research and Discovery

Metrics MOZ
Social Lite sets up 3rd party tracking tools for the client’s existing website so we can see how the customer is interacting with, and reaching the site. 

image11









Client Content Assessment

Social lite reviews the Client’s existing creative content for direction in design.

Brand Identity guide.
Glow had an existing brand which we worked with and then extended and adapted for web.

image3

 

Photography
In this case, Glow Owner Marnie Ashcroft, had existing photography, and her own photographer.

image12

 

Products
We then identify the existing products to strategize how they will be organized in the new website.







Design

Sitemap
The sitemap is the website layout in its simplest form, representing the hierarchy of all the pages and subpages of the site.

image18


Web Brand Identity

Social Lite’s graphic designers create a Web Brand Identity Guide depending on the provided existing client branding. This can include logo variations, colours, icons, and typography for the website.

web-identity

 In Glow’s case, our designer created a robust system of custom navigation icons specifically for e-commerce functionality for an elevated user experience and original creative impact.



Wireframes

The wireframes are the blueprint of the website for each page, developed to establish content structure and hierarchy using grey scale and dummy text (lorem ipsum).

For Glow we wanted to feature specific products, customer reviews (as social proof), and current blog posts for up-to-date relevant solutions on the homepage to show relevant implementation of Glow’s ethos and products.

The product page includes related products to promote additional purchases (revenue,) customer reflected product ratings (for quality assurance,) and social sharing icons to allow customers to promote Glow products as well. 

wires

 

Design Concept & Mockups - Marvel - Loom

image17

 All of the pages [templates] are fully mocked up in Adobe Photoshop and then prototyped in the Marvel App.

Marvel is a new tool that Social Lite has adopted to communicate web design with the client, and to collect their feedback for specific elements of the design and copy.

Now also using this tool with copywriters.

The mega-menu / Mobile Mockup 

mockup

 This tool is also used to prototype for specific screen sizes and to articulate all of the specifications, assisting in a streamlined hand-off between design and development.

Marvel supports prototyping for numerous device sizes for clarity in mockups in all formats for the client and developer.

[Examples of screen sizes available in Marvel]

 





Content Creation


Copy interview/writing

Website copy is written between the Wireframes and Mockups phase.

The copy is informed by keyword research and site traffic analytics results and written for all of the wireframes and added to the Mockups.


Photos [in this case done by 3rd party]

Social Lite employs a talented team of photographers and videographers available to create lifestyle, studio, and product imagery and video web content.
 





Development

Pages are developed in Shopify using assets and content for seamless responsive browser window and screen sizes.


Product Addition & Organization: Categories, Collections, Tags

Serve as a filtering system for customers to find products based on their:

  • Category (Collection)
  • A specific Ingredient
  • Bestsellers
  • Or by specific Location availability

Glow’s Categories are: 

image2-3








Apps Installation

image7-1



Geo-Location App

This app (through Google location services) located the customer using their IP address to help them get to the product nearest or most convenient for them.

In Glow’s case, the customer picks up their fresh product at a location.


Re-Charge App

This subscription app allows Glow customers to set up recurring orders, convenient planning for a healthy lifestyle.
 




3rd Party Analytics

Post launch, Social Lite sets up 3rd Party Analytics tools to monitor the way in which customers are interacting with the site and provide qualitative and quantitative data to their clients for measurable reports.

tools

 



 

What do you get? - A Glow-ing example of custom Shopify site!




What’s Next?

Remember the point of building a new website is to drive website traffic, convert customers, and ultimately scale revenue. We recommend mapping your Customer Value Journey before starting on your website, which is what we did with Glow Juicery. Click here to learn more about Social Lite’s Customer Value Journey marketing methodology.

 

 

    Next Article

    Love It? Share It!

    New call-to-action