Building A Website From Scratch — Packaging Company
Creating a website has been becoming easier but a website that communicates and converts is an art to master to have an effective website.
Read until the end to find out the total transformation of the website.
For context, if you ever use use any packaging or seen medical Holloware like kidney trays or patient meal trays and may be wondering how they source their products. In this practice, I will demonstrate my thought process how I strategize and plan the build for a B2B website from scratch.
About Ecopacific
Ecopacific is a distributor of biodegradable molded pulp products manufactured in Malaysia. Think ecofriendly and single use version of Tupperware ranging from medical kidney trays, F&B meal trays and Supermarket fruit trays.
Their brand voice mostly focuses around sustainability helping businesses to provide a sustainable solution for their supply chain looking for a greener alternative to single use plastics and paper.
The Design Process
Using the ‘Double Diamond’ framework, below I’ve included the methodologies included in each phase of my design process:
- Discover
- Define
- Develop
- Deliver
1. Discover
In this section we lay out what are the current challenges that will determine our objective of the website
User Pain Points
What are the pain points that customers face that encourages them to buy from us and what’s stopping them or more people purchasing more from us?
a. Market Reach
Lack of awareness beyond local exhibition foot traffic. People that would like our product or search about our store can’t find a space to see what would attract them to come to check us out.
b. Referral
New connections and acquittances of our current customers can’t find a space for them to check out our products which limits referrals
c. Accessibility
Interested prospects unable to check out or understand more the technology when they cannot conveniently meet face to face either by time or location constraints
d. Education
They do not know how sustainable packaging can help achieve their corporate ESG status and it’s impact to become a globally competitive player
Usability Testing
After using the site myself there are a lot of areas of improvement. Below is my slide deck for screenshots and pointers
2. Define
In this section we’ll try to narrow down the key objectives that will help us drive the key impact to the customer experience
Personas
First thing is to understand the customers in two aspects:
- Core customers — Distributors that are already aware of the importance of sustainability and sees the potential of our product but not aware of our technology
- Aspirational customers — Customers that are out there and are not yet educated about sustainable practices and would like to get educated
How do people buy our products currently
- Connection referral
- Exhibition
Objective / Hypothesis
- Accessibility: Create an online storefront for potential customers that cannot physically connect with us
- Lead Generation: Provide more traffic leads in bringing customers into the store
- Expanding Reach: Increase geographical reach beyond Malaysia by allowing interested businesses to reach us to secure a shipment for their respective markets
- Share more about the technology behind the product: Educate prospects the technology and how it distinguishes itself from other packaging by emphasizing its benefits over the competing packaging.
Goals
- Build a captivating website that can effectively communicate the value of the product: Steering visitors from top to bottom of the homepage and encourage more visits to learn more about the product and eventually to securing an appointment
- Seamless Browsing and Buying Process: Having clear ways of locating specific products and complete a seamless purchase experience
- Effective Product Details Copy: Ability to support a details page for each product
Competitor/Platform analysis
To gain inspiration for the website, I began by identifying 3 main competitors, specifically eco packaging companies around the world. The direct competitors I analyzed included Notpla, Temperpack, and Tipa.
My goal was to compare and identify common features across these sites and potential opportunities for Ecopacific to differentiate itself.
The important takeaway from this activity was learning how they organized their packaging solution on the website, the overall layouts and copywriting they used for those websites. This was helpful information that helped solidify the stage for my second phase of research.
The main platform I’d be using for the creation of this website will be Wordpress due to its open source trait that makes it more cost effective, easy to find third party solutions, and easily customizable. More info about wordpress vs other platforms can be found here.
Bridging Pain Points to Ideas (Brainstorm)
Ideation
Based on the customer persona and objectives we’re set, using inversion thinking, we list out the other extreme of problems we want to avoid and solve them backwards:
- Bad cover banner — My prospect have to be engaged and stay as soon as they land on my page
- Confusing navigation — Have clear and intuitive buttons for prospects to navigate around the website
- Long boring text— There must be all relevant information shown with engaging copywriting and visual illustration to demonstrate what our product does
- No next steps if prospects are interested — Make sure that whatever content we put out, there is a process for them to learn more
- Show them a product without any proof in the market — Prospects learns about the team behind the product, the technology and testimonials that have achieved results.
Customer Journey
With the ideation phase, the AIDA framework would be fit to tackle the problems we have on the website which is to help the prospect make a purchase decision.
Before we kickstart the development phase, there needs to be an overall plan how all these elements will fit into a page. This is where a site map and wireframe design will guide our next steps throughout the website development.
3. Develop
Keeping in mind the objectives, I’ve developed a sitemap and some rough sketches on the wireframe to build a foundation of how the website will look like.
Site Map
Wireframe
4. Deliver
Keeping in mind to keep in constant the brand colors and stick to the same main categories, and with the wireframe and prototype as a guide for the website. Let’s take a closer look on the developed website.
Homepage
The homepage separates itself into the two fold (Above & Below). The top serves to be concise and capture attention for the reader and below the fold acts as a navigation hub and further elaborate and educate the prospect about the product and eventually present different navigation buttons to explore the content that interests them.
What is included?
- A cover banner at the top explaining what the product is about with a picture showcasing its product range and the countries it has already present in.
- Included its USP of the product what makes it unique.
- A column showcasing it’s application in different industries for prospects to filter their searches.
- One row to show for people that is not related to those industries to contact the product team to enquire more.
Product Page
The product page’s main function is to be a catalogue for easy navigation to guide a prospect to a product he/she wants while demonstrating the features and benefits of the product.
What is included?
- A top banner at the top explaining deeper what the product is made of what how it provides the benefit that it provides and also a navigation button that quickly jumps the user to the industry of their interest.
- Overall rewrote the copy of the website to a more compelling way that focuses on communicating the benefits to customers of different industries.
- Included an individual product details page for each SKU to learn more about the specs of the product which was not present in the older version
- Overall included more illustration to create better sense transition between industries
Contact Us Page
The contact us page objective is simply to be a channel where interested prospects that might have special needs and wants where they can submit their interest to contact the sales team to learn more about the product.
What is included?
- Included a WPforms widget that allows tracking of the submission and also auto-respond to any prospect
- Removed the map function the discourage unplanned visits to the office
Technology Page
The technology page lays out the overarching innovation behind the product and how it does what it does. The best outcome is it can inspire curiosity and excitement towards the product and eventually to use them for their respective industry.
What is included?
- Right at the top the page explains the material how the product is made from and its unique properties that allows it to generate its impact.
- It’s basic product features that the technology brings
- How the features brings forward the benefits for potential users
- All the relevant product certification and awards to build up the credibility of the product
About Us Page
The about us page is what it is — a place to tell people who you are and what is meaning of its existence.
What is included?
- Right at the top the page gives a concise and memorable mission one liner and followed by a description for prospects to know exactly what we do
- Who we are as a company and what are we currently doing
- Why we believe what we believe
- How our efforts has impact our customers and its reach all over the world
Footnote
While this is the initial version of the website, a lot of it’s build is inspired by other packaging players and other B2C websites. With google analytics in place and more resources, more sample of traffic and usability testing is needed to continue improve on to the version two of the website.
Go check out the website here — https://ecopacific.com.my/
Hope you enjoyed this! If you enjoyed my post or have any feedback, I’d love to hear from you. Feel free to email me at viantwoon223@gmail.com. Cheers!