top of page
Rectangle (2).png
Rectangle (1).png
EBS_Logo.png

NJ Local Raw Honey

Rectangle (3).png
Rectangle (4).png

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 Challenge

  • The layout of the website makes it difficult to showcase their products & information

  • The visual design of the website does not reflect the brand’s personality

  • Users do not have enough information on products to make the appropriate decision

The Solution

  • Conduct a Heuristic evaluation to determine some of the flaws & strengths of the current design

  • Improve the home page by redesigning the layout

  • Redesign the website to ensure brand personality shines through

  • Include more accurate & helpful information regarding the different products

Process 
User Heuristic Evaluation
Discovery
Ideation
Wireframing
Hi-fidelity
Prototype
Implementation

Role 
Sole UX/UI Designer

Duration
4 weeks

Platform
Desktop
Tablet
Mobile
 

Tools
Figma
Miro
Shopify
 

Discovery

Ideation

Design

Prototype

Reflection

1-Discovery

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.

andrews honey screenshot.png
local hive honey screenshot.png
dessert creek screenshot.png
competitive audit ecobee.png

2-Ideation

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.

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 

Homepage web (1).png
Bulk Honey page (1).png

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.


Decision:

  • 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:

​

  • Honey

  • The Buzz (Blog)

  • Contact Us

  • About Us

  • Hive Management


 

mobile wireframes ecobee.png

Mobile

web wireframes ecobee.png

Desktop

tablet wireframes ecobee.png

Tablet

3-Design

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.