top of page
NJ Local Raw Honey
About EcoBee Supply
EcoBee Supply is a progressive product and service supplier in the beekeeping industry located in Morristown, NJ. At the heart of their mission is increasing public awareness of the agricultural importance of honey bees and promoting their conservation.
The Increasing EcoBee supply's sales & traffic through their website.
Redesign the website to improve the branding and product presentation
User Heuristic Evaluation
Sole UX/UI Designer
1.1 Vision Meeting
I started this project by holding an initial meeting with the client to clarify the deadlines, constraints, and deliverables. We also discussed a list of questions to help us better understand their goals and visions.
When we started the project, EcoBee Supply already had a logo and some branding as well as an e-commerce website on Shopify for their honey & wax products. This foundation helped guide the needs and goals of the project.
1.2 Heuristic Evaluation
I conducted a heuristic evaluation of the current website across three devices. Mobile, tablet, and desktop. I found many flaws with the layout on mobile that didn’t seem present on the other platforms. This made it clear to me that I needed to design for desktop, tablet, and mobile as the different versions of the website had different problems.
1.3 Competitive Analysis
I also conducted a competitive analysis on three direct competitors. By looking at their websites, I identified what a clear layout and creative branding should look like. This was helpful for me to know so that I could understand what already works & get my creativity flowing for the EcoBee website's visual design.
2.1 Low-Fidelity Wireframe - Home
I designed for the desktop experience first, taking a graceful degradation approach. For the low-fidelity wireframes, I made sure to include space for key informational pieces so that customers have the information necessary to make a decision.
Include a direct link to shop & best sellers
Provide pictures to help users easily recognize the product
Include an add-to-cart button under the products
Include about us & what we do section
2.2 Low-Fidelity - Bulk Honey
In addition to the homepage, I designed the bulk honey page to help customers understand the ordering process for buying in bulk.
Include a description of the ordering process at the top of the page
Add a request form for customers to fill out with the necessary details
2.3 Additional Wireframes & platforms
Wireframes for mobile & tablet were also created to ensure components were the same size across devices. Designs were based on the research from the heuristic evaluation & competitive analysis for the following pages:
The Buzz (Blog)
3.1 Style Guide
To ensure consistency across different devices and screens, I developed a style guide to match the current EcoBee Supply logo & branding. This made it easier for me to design colors, fonts, and sizing for components.
3.2 High-Fidelity Wireframes
With the style guide set and approved by the client, I started working on designing the final UI for the screens. I decided to use the black button for the main CTA actions and major descriptions/titles. The client wanted to keep a simple and minimalist style with the website.
Tablet Hi Fidelity Mockups
4.1 - Prototype
Using Figma I developed a prototype of the EcoBee Supply website and focused on the following pages:
I made sure to clean up any small spacing, color, misspellings, functionality and user error before testing with users. I internally tested to ensure that users were not getting stuck on a screen. Finally, I made sure that navigating the website was an easy and straightforward process for the user.
EcoBee Supply Mobile Prototype
EcoBee Supply Desktop Prototype
4.2 - User Testing Plan
Conduct a moderated study to see if users can navigate through the Ecobee supply easily and if they are able to find the information they need clearly. The goal is to learn about EcoBee Supply as a potential customer.
Find the honey and bulk honey shop & browse.
Was it hard to find the products?
Did the layout of the website have the information needed for you to make an informed decision?
Did the website give the requirements needed for the product?
Was the website easy to navigate?