With the design of this we focused on moving slowly building up a scaleable system. The flow diagram above, we drew out the core navigational sections of the platform, drawing contextual links between these and including flows that are necessary within these.
This is the direct visual translation of the previous flowchart. This enabled us to, collaboratively in Figma, restructure elements of the interface where things didn’t make sense. This is a more bulletproof way of working than i am used to in previous projects, and enables fewer major redesigns in the future.
I decided to flush out some higher fidelity screens to get a feel of how this would look when finished. Plus this makes it a bit easier to understand with come context when asking for feedback on the execution of the concept. This screen shows the current levels of temperature, pH and nutrients in contrast to algae production efficiency. The solid lines on the chart are the actual recorded values and the dotted lines are the target lines for optional production for the given algae species. Optional pH for most algae species is between 8.2–8.7 for instance. And you can hover over this to see the levels at any given time recorded.
The panel on the left shows the status of each tank like a dashboard with the sync arrow icons being running perfectly, pause self explanatory, and warning icon for something has gone wrong. You would pause production when you’re emptying the tank to be taken to Algae Corp.
This is a simple mockup of the wallet/transaction interface similar to Monzo or Revolut with the chart. I use both Monzo and Revolut and never have any use for this chart, so this was depreciated after this instance. The percentage on the right shows the month over month difference in earnings.
