Farmiq

Website for farm & garden equipment

project

Details

FarmIQ is a new brand entering the Polish market, offering mini tractors—versatile, easy-to-use machines designed for farmers, gardeners, and allotment owners. The website was created to showcase the product, establish a strong brand presence, and enable seamless product configuration and online purchasing.

As part of the project, I developed the design system, co-created the UX/UI for the website, and supported the implementation process.

Challenge
Scalability and readiness for collaboration

As the lead designer, I was responsible for the overall visual direction and UX of the project. At the same time, due to limited availability in later stages, there was a strong possibility that parts of the work would need to be handed off to another designer.

The challenge was to create a system that:

  • maintains full visual consistency,
  • is easy to understand and adopt by another designer,
  • does not require constant author supervision.
Combining product education with sales goals

The website had to serve multiple purposes simultaneously:

  • educate users about a new product on the market,
  • build brand credibility,
  • effectively drive conversions.

 

Additionally, the product page needed to function as a sales landing page, clearly presenting different product configurations. The key challenge was balancing depth of information with a smooth and intuitive purchase journey.

No existing visual identity

The website design was created in parallel with the brand identity, meaning there were no predefined colors, typography, or visual guidelines.

 

Every design decision influenced the emerging brand direction, increasing the risk of inconsistency and requiring a structured, system-based approach from the very beginning.

Design System + iterative design on real screens

Instead of separating branding and UI, both were developed simultaneously based on real product needs.

Branding grounded in real usage

Colors and typography were defined based on the first screens of the website. This ensured that the visual identity was not abstract, but directly rooted in real use cases and continuously validated in context.

Consistency across collaboration

A shared library of components and styles became a common language for all designers involved. Anyone joining the project could rely on predefined elements instead of making independent visual decisions.

Faster design process

With clearly defined rules (colors, spacing, typography, components), micro-decisions were eliminated. Designing became a process of assembling screens from ready-made elements, significantly speeding up both design and development.

Accessibility (WCAG)

Accessibility was considered from the ground up — including proper contrast, readable typography, and predictable interactions.

Components that structure information flow

Interactive components (such as expandable sections and configurators) were used to gradually reveal information. This prevented cognitive overload while still providing all the necessary details for informed decision-making.

The outcome is a cohesive and scalable system that:

  • supports efficient collaboration without compromising quality,
  • successfully combines educational and sales functions within one experience,
  • establishes a strong foundation for the evolving brand identity,
  • accelerates both design and development processes,
  • ensures clarity and accessibility.

The final product is a website that not only presents the product, but guides users through the entire journey — from understanding its value, through exploring available options, to making a confident purchase decision — in a structured, intuitive, and visually consistent way.

Workflow

Step by step

1. Team brainstorm

Meeting with the Project Manager and Content Creator to define the direction and project goals.

2. Design system

A design system was defined before the UX/UI phase to ensure visual consistency and strong alignment with the brand identity.

3. UX/UI prototype

The mockups defined both visual and functional aspects of the product, enabling the web developer to begin implementation.

4. Web Development

Implementation support and design supervision to ensure the website is functional, responsive, and consistent with the design prototype.