ABOUT
PROJECTS
RESUME
Large image with three screens (desktop, laptop and iphone)

Honey N Company

client project to design a beekeeper's website

MY ROLE

Researcher
UX Designer
UX Writer
Visual Designer
Developer

TARGET

Young adults in
the Chicago area

DELIVERABLES

Sketches
Wireframes
Mockups
Prototypes
Website

TOOLS

Figma
Google Forms
Adobe Illustrator
Adobe XD
MAZE

The Challenge

This project aimed to create an engaging website for a beekeeper. My client didn’t have a name for her company or an idea of what content she wanted on her website, so we started from scratch. 

Tasks

• Create an educational page that is engaging
• Add products for users to purchase
• Collaboration form to allow easy connections to work together

Client Requirements

• Website is the spark to inspire users to take action and learn more
• Education ranked as the most crucial part of site/brand, followed by collaboration, and last was products
• While being inclusive of all, my client wanted to target a different crowd than typical honey and bee enthusiasts (wants to engage people from all walks of life)

illustrations

Educational & link illustrations created by me
Hero illustrations created by Zoe Kudrnac

Solution

Using research and my client’s expressed needs, I created a site that was easy for users to navigate (even on the first visit). It focused on education in an engaging way to spark interest while also being completely transparent whenever possible to build trust.
Prototype

The Diamond Sprint

Research
Client interview
Survey
Interviews
Open Card Sort Comp.Analysis
Map
User Persona Empathy Map
User Journey
“How Might We” Affinity Map 
Sketch
4 Step Sketch
User Flows
Decide
Speed critiques Storyboard Wireframe
Prototype
Lo-Fi Prototyping Paper Prototype
Validate
User Testing Iterate 

Research

Surveys

Discovered Demographics from 50 participants

• 76% of participants were ages between 21-34
• 60% identified as female 30% male 8% non binary 2% other
•  72% live in a city
Pie chart showing 62% of participants would make an attempt to change their habits to be more eco friendly after learning that bees pollinate 70/around100 crops that f eed 90% of the world.44% of participants said that honesty with no marketing tactics or hidden agendas made a small brand trustworthy
Pie chart showing 44% of participants would be interested in buying raw honey after learning about it's health benefits. Another 44% said they'd like to do their own research. 12% no the would not change their habits.46% of participants state that their purchasing habits are affected by their concern for the enviornment

Competition

Best Bees Professionally managed beehives. Beehive installation for residents and businesses throughout the States
‍
Buddha Bee Apiary Backyard beekeeping for residents and offices in North Carolina.
‍
Chicago Honey Co-OpAgricultural coop in IL. Has beekeeping classes, consultations, and a shop

Bee Mindful Workshops, tours, classes, rescues and hive adoption out of Texas
Chart showing comparison between companies Best Bees, Buddha Bee, Bee Mindful, and Chicago Honey CO-OP.

Mapping

key findings

Affinity map showing key findings from survey and interview

How Might we

I divided up the how might we questions into groups and marked which would become the MVP. Initially, the shop was considered a low priority, since my client didn't deem it important. I changed it to be part of the MVP though because the actual site was intended to be built out, and having an e-commerce element involves multiple parts in order to function correctly.
Groups of How might we questions. Groups include Design, Trust, Shop, Who are we?, Communication, Community, Education, and Engagement

Sketch

user flows

Keeping my user stories in mind, I started to sketch out potential site flows.
  • Local chef uses the website to learn more about the different types of honey and flavors. Ends up becoming inspired and wants to collab on a new dish
  • Artist uses the website to get inspired for saving the bees and ends up reaching out to collab with apiary using honeycomb as part of the installation about bee preservation
  • Using the product label to lookup website to learn more about the company. Loves how green and transparent the site is and decides to continue to support brand. 
Sketchbook with different maps/flows for the homepage, shopping, contacting business, and learning more via a fun fact button

user flows

Keeping my user stories in mind, I started to sketch out potential site flows.
  • Local chef uses the website to learn more about the different types of honey and flavors. Ends up becoming inspired and wants to collab on a new dish
  • Artist uses the website to get inspired for saving the bees and ends up reaching out to collab with apiary using honeycomb as part of the installation about bee preservation
  • Using the product label to lookup website to learn more about the company. Loves how green and transparent the site is and decides to continue to support brand. 
A user flow based off of three user stories : Buying an item, contacting the business, and learning more about bees

four step sketch up

I started gathering notes from data and my client, and began doodling ideas out. I did crazy 8 sketches (4 of potential home pages + 4 product pages) allotting one min per sketch. Then I finished sketching two fleshed out versions of the crazy 8s.
Crazy 8 sketches of the homepage and product page Sketchbook page showing quick sketches of the homepage and education page

Decide

Feedback

Through sketching and receiving feedback in critiques, I was able to move forward with more concrete ideas.
"Knowing that education is a priority feature, the 'fun fact' section is an engaging way to capture the audience and lead into further scrolling.""Anchor menu! Yes it sparks joy when the screen automatically scrolls up" "I love that you're presenting your menu in an innovative way. I personally would rather look at the bee hive instead of the boxes, as i feel like it's more recognizable" ""I like viewing products on a single page verses a grid category so I appreciate this design"

storyboard

I drew a storyboard from a user story where a chef is looking up honey flavor profiles on the web. He becomes inspired while browsing our educational page. He reaches out to do a collaboration with his restaurant and both parties are happy.
6 panel cartoon showing a chef on his computer looking at honey. Panel 2- Screen of a website explaining types of honey. Panel 3- Chef has thinking bubble with lots of food ideas. Panel 4- Sends an email to collab via site. Panel 5- Two hands are shaking. Panel 6. New chicken dish featuring honey on the menu

Prototyping

paper prototype

My first prototype included just a couple of pages in form of a paper prototype. I wanted to explore the elements of the page without getting into too much detail (quick ideas). 
Paper prototype gif of clicking on a fun fact and going to the education pagePaper prototype showing a drop down collaboration menu

Digital wireframes

I started making my wireframes in grayscale and kept the imagery really simple. This would give me a feel for where items on the page could sit. Eventually, as I started to prototype though I would simplify it even more, getting rid of the icons so as to not distract users while testing.
Homepage screen A simplified homepage screen with an updated layout.A mobile screen of the homepage

Validate

User testing

I used MAZE to conduct a usability test but also conducted moderated tests as well. I wanted to see if the data collected with be the same if a moderator wasn’t physically present for testers.
MAZE did present some limitations for on-page navigating, so the face-to-face tests allowed for more in-depth tasks. 
Heatmap image showing multiple misclicks on Honey section of education and Hives section. Screen metrics. Average metrics recorded for this screen. Misclick- 79.6%. Time spent. 21.20s. Testers. 10
MAZE Insights
Moderated Insights

Iterate!

  • Separated education into its own section and add a link to the nav bar (this will make it easier for users to find it)
  • Kept the anchor links on the homepage and split into two columns
  • Instead of having the donate button on the homepage, I had a suggestion to donate but the button allows users to do more research before donating. Since the site will be garnering new visitors for the first time, it allows them to trust the brand and explore before being asked for money
  • Added smaller sections that garner interest and lead to the education page, using the parallax scrolling image/links as a guide (still find it to be engaging and fun but it makes more sense when it is a fixed point on the page so users don’t have to keep scrolling back to it)
Video of the first wireframes before usability testing
Video after usability testing and changes made

branding

Once I decided on how the site was going to work via my prototype, I started to explore color and names. I created 4 different mood boards while reading about the psychology of the colors.
A mood board with black and yellow images. Hints of green and neutrals as well.

style tiles

As I was exploring color, I made sure to check the contrast to make sure the colors were legible. Some colors had to be shifted in hue or tint as I played around but eventually settled on a classic yellow and black combo (with a hint of hot pink for added fun).
Contrast for #1a1a1a on #FCBC00 is a grade of 10.22 (very good).

throwing it all together

Once I had my style tile guide ready to go, I applied it to my prototype. I also took some time to make a couple of frames for a mobile version. With the lack of time remaining, I figured a few artboards showing the responsiveness of key elements would be enough for now.
3 screens for the homepage for Honey N company. 1 desktop, one laptop and one mobile phone.
Prototype

Accessibility

  • Easily clickable via keyboard for sighted keyboard users
  • Can be operated by speech recognition software
  • Can be operated easily by users with screen magnification tools
  • Can be easily understood by screen readers – are they aware the component is interactive, and whether the content is hidden or not

Next steps

  • Look into accessibility for building site
  • Continue building out responsiveness
  • Build site (webflow)
  • Launch Site
  • Collect photos from upcoming collaborations and add section to site
BACK TO TOP ⇧
Envelope icon
©Amanda Pherson, 2022
LinkedIn Icon