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 Increasing EcoBee supply's sales & traffic through their website.
​

The Solution

​Redesign the website to improve the branding and product presentation

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.
 

Tablet Hi Fidelity Mockups

4-Prototype

4.1 - Prototype
Using Figma I developed a prototype of the EcoBee Supply website and focused on the following pages:

​

  • Home

  • Honey 

  • About

  • Contact Us

  • Hive Management

  • Bulk Honey

​

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


Objective

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.

​

Questions

  1. Find the honey and bulk honey shop & browse.

  2. Was it hard to find the products?

  3. Did the layout of the website have the information needed for you to make an informed decision?

  4. Did the website give the requirements needed for the product?

  5. Was the website easy to navigate?