You are browsing as a guest. Sign up (or log in) to start making projects!

A website to promote local Honey Business

By @NC

  • 1 Devlogs
  • 4 Total hours

I'm building an OS on the web
Open comments for this post

@NC on A website to promote local Honey Business

4h 25m 40s logged

Case Study: Web Design for Gold and Girl Honey

Location: Queensland, Australia

1. The Empathise Phase

I interviewed the owner of “Gold and Girl” to align design choices with raw honey values and analysed competitor trends.

  • Typography & Colors: Competitors use handwritten, artisanal fonts. Deep ambers and golden yellows mimic honey, balanced by eucalyptus greens and cream backdrops.
  • Layout & Elements: Grid systems manage shop items, while landing banners frame farm identity. Layouts feature hexagons, rounded buttons, and warm product photography.
  • Content: Sites lead with owner stories and transparency tags like “100% Raw” or “Unfiltered”.

2. The Design Phase

Problem Statement

Gold and Girl needs a web presence showcasing raw, chemical-free honey that highlights ecosystem action because the imminent Varroa mite invasion threatens QLD bee populations, making sustainability vital for conscious consumers.

Project Scope

  • Included: Landing section with product rules (“No Chemicals, No Heating, No Plastic”), Varroa mite crisis banner, top navigation, and custom scrollbar.
  • Excluded: Mobile optimization, active transactional checkouts, and public forums.

Measurable Design Criteria

  • Criterion 1 (Layout): Must use a Flexbox structure with three thematic assets: a honeycomb grid, a bee graphic, and a natural flora motif. Test: Audit rendered screen (Pass/Fail).
  • Criterion 2 (Typography): Text must use a legible font maintaining an artisanal identity with clear background contrast. Test: Inspect active CSS rules (Pass/Fail).
  • Criterion 3 (CTA): The crisis section must feature an action button using a distinct, high-contrast accent color. Test: Visual target check (Pass/Fail).

3. The Ideate Phase

  • Assets: Sourced an organic palette via Coolors.co and craft fonts via Google Fonts.
  • Selection: Wireframe 1 was selected. Placing links at top followed by a bold Hero panel aligns with standard mental models, guiding users down from brand story directly into the Varroa mite action button before the footer.

What’s Next?

  • Real Shopping Section Page: Transforming the prototype into an e-commerce platform with dynamic product listings, jar size selectors, and active shopping cart logic.
  • Contact Us Section: Launching a contact hub featuring an automated enquiry form, apiary map coordinates, and an ecosystem reporting tool for bee conservation.
@NC

Case Study: Web Design for Gold and Girl Honey

Location: Queensland, Australia

1. The Empathise Phase

I interviewed the owner of “Gold and Girl” to align design choices with raw honey values and analysed competitor trends.

  • Typography & Colors: Competitors use handwritten, artisanal fonts. Deep ambers and golden yellows mimic honey, balanced by eucalyptus greens and cream backdrops.
  • Layout & Elements: Grid systems manage shop items, while landing banners frame farm identity. Layouts feature hexagons, rounded buttons, and warm product photography.
  • Content: Sites lead with owner stories and transparency tags like “100% Raw” or “Unfiltered”.

2. The Design Phase

Problem Statement

Gold and Girl needs a web presence showcasing raw, chemical-free honey that highlights ecosystem action because the imminent Varroa mite invasion threatens QLD bee populations, making sustainability vital for conscious consumers.

Project Scope

  • Included: Landing section with product rules (“No Chemicals, No Heating, No Plastic”), Varroa mite crisis banner, top navigation, and custom scrollbar.
  • Excluded: Mobile optimization, active transactional checkouts, and public forums.

Measurable Design Criteria

  • Criterion 1 (Layout): Must use a Flexbox structure with three thematic assets: a honeycomb grid, a bee graphic, and a natural flora motif. Test: Audit rendered screen (Pass/Fail).
  • Criterion 2 (Typography): Text must use a legible font maintaining an artisanal identity with clear background contrast. Test: Inspect active CSS rules (Pass/Fail).
  • Criterion 3 (CTA): The crisis section must feature an action button using a distinct, high-contrast accent color. Test: Visual target check (Pass/Fail).

3. The Ideate Phase

  • Assets: Sourced an organic palette via Coolors.co and craft fonts via Google Fonts.
  • Selection: Wireframe 1 was selected. Placing links at top followed by a bold Hero panel aligns with standard mental models, guiding users down from brand story directly into the Varroa mite action button before the footer.

What’s Next?

  • Real Shopping Section Page: Transforming the prototype into an e-commerce platform with dynamic product listings, jar size selectors, and active shopping cart logic.
  • Contact Us Section: Launching a contact hub featuring an automated enquiry form, apiary map coordinates, and an ecosystem reporting tool for bee conservation.

Replying to @NC
0
0

Followers

Loading…