This site uses cookies Learn more Close

The design processOn hold

It started in 2016 with a mobile app made for Android devices with a user group of 5 with low to medium IT skills. Now I'm working toward a responsive website and more usability testing will be done.

I'm using Bootstrap and a mobile first design approach.

The various components will be adapted so they look as good as possible on various screens sizes.


To give a green feel, various backgrounds had been tried (soil, wood, grass, and other material texture). An image free of copyright of tree rings was chosen on Pixabay, modified to be lighter, rotated and finally a yellow shade was added for warmth and the opacity was modified to preserve the readability of the text.

wood texture original picture wood texture lighter shade wood texture adding a yellow shade


The icons had to be recognisable, free of copyright, big enough and providing a feeling of consistency even though they came from various sources on Pixabay. They were tried with users and the 'filled' ones were preferred

Initial icons

icon hen original black icon solar panel original black icon hand with plant inside original black icon tap original black

After modifying them

icon hen green icon solar panel green icon hand with plant inside green icon tap green

A very basic and contrasted option

The green look with the yellow wood background was tested with colour blind users. Even though they could read it, some of them preferred a very basic white and black design. So I gave that option too.

In this new version, it's dark green and white. There is also a blue version - to be improved later

Flags are usually not the best to indicate a choice of language as they symbolise a nation not a language.

But with a choice of only two languages initially (French and English), I decided to still use the flags as a marker for the language as it draws the user's attention and should not be ambiguous in a European audience context.

Moving forward, I will add more languages (Spanish, Italian, German, Dutch and Gaelic), and will add these to the setting menus without flags.

Raising chickens

There are differences between breeds, but on average a good estimate is 300 eggs a year / Poultry keeper

Regarding space, a rule of thumb is about 4 square feet per chicken inside the henhouse and 10 sq/ft per chicken in an outside run / Backyard Chickens

Rainwater recycling

To get information about how much water to expect. Thousands of litres of rainwater fall on the average roof every year / NIdirect government services

Grey water recycling

To get information about how it works and how much water to expect. If recycled properly, grey water can save approximately 70 litres of potable water per person per day in domestic households / The Green Age

Growing your own food

To get information about the various crops, with an emphasis on easy ones, when to sow, when to harvest where to plant / Royal Horticultural Society

To get information about growing in strawbales / StrawbaleVeg

Solar panels

To find facts on how much energy can be produced depending on various factors.

I've found some apps, which calculate the energy needed depending on appliances you might have which are interesting from a design point of view / TechInfini / Solar Calculator

A 4kWp system in Scotland can generate about 3,200 kilowatt hours of electricity a year / Energy Saving Trust

During the inital design a wireflow was created, a prototype was made with App Inventor, and some wireframes for a possible future app were designed for the 'Grow your own' part.

Wireflow (2016) - in grey, plan for the 2nd iteration - in = input - out = output

Download the 2016 prototype for Android devices

Wireframe for Grow your own (2016)

Wireframes from 2018

About, Cookies, and Design pages (2018)

An alternative navigation (2018)

Grow your own (2018)

Email the results (2018)

Error handling and warnings (2018)

A lot of work remains to be done:

  • prototype a different navigation to replace the 'Hamburger menu' on small screens by tab bars
  • organise user research to assess the actual design and user needs (navigation - Grow and email sections)
  • design the 'Email the results' section / share instead?
  • improve error handling if usability testing shows it's needed
  • design the basic for 'Grow your own' section
  • usability testing and implement improvements
  • add more languages

Last update: 19/06/2018

This project is on hold at the moment

I need to do more User Research before going further