Peter Ananin's DIXD Blog

I think that the most important section feels like the “community” one, there’s lots of potential for a big expansion there. People react well to the idea of community, and the shared (or in this case various) experiences with a common project bring people closer together – so, discussions or user tutorials or just pictures of how yours and other people’s are going.

For someone who hasn’t heard of the Biopod before, I think it is probably important to make the main page a little more clear – action plans, mission statement, descriptions of what it’s all about, maybe something interactive (like a map which shows the locations of biopods around the world – obviously if this wasn’t a fake website!), things like that bring someone on the outside into the experience, again, forming an interest and a connection which could be good for gaining a wider audience/usership.

Like I said in the first answer, I think it’s a mixture of the two. Because you can rally feedback between users and that sense of ownership/belonging etc is a really key part of making something work.

I like the idea of a photo diary type thing, so that people can be positive about what’s going on with your system and offer constructive feedback etc. Graphs don’t really mean a lot to me

What have I achieved? I have built a functioning website which receives real data from sensors. I have built 2 prototype Biopods; a larger one to express the intended size as well as a smaller portable one to provide users with a context of the physical form during user testing.

What haven’t you achieved yet? I have still to test the most effective way for people to use my website to learn from their Biopods. I have still to research the easiest way for users to connect their Biopod to the Biopod website. I also have to look into the asthetic form of the Biopod containers, how the arduino will be housed and how the sensors will clip onto the Biopod.

What have you learnt? It is important for my process to have something physical to relate to: for myself and when explaining it to others. How to care for guide important for users once started using Biopods. I have learn’t that the simpler the design the more time you have to refine it although what may seem simple may turn into something rather complex.

How will mark ii be different from mark i? Markii will develop on from the feedback I get on mk1s website navigation and experience.

My focus for Mkii  will either be:

On the form of the physical Biopod container along with the housing for the Ethernet shield in a white waterproof box. I feel this is important as it will be what most people look at for the degree show.

or

developing the visual display of sensors history and the user process of setting up biopods online e.g. ingredient selection.

What I may omit:
The learning zone to work on after Mk2

I found while filling the biopod that the top look remarkably like a quadrat so when filling I used it as a viewfinder to decide what to fill in my biopod. I could look at putting boxes in it and using it like a quadrat. Throw it and where it lands you put the ingredients in your biopod.

Quadrats are used to randomly sample small areas of an ecosystem.

Biopod filled with temperature forest ingredients.

As part of my mk1 prototype I thought it was important to have a physical container to provide users with some context of what the device might look like and how it would connect to the website, so I nocked one up in a day.

First I thought about straight sided boxes then I found a website that you can type in your dimensions and it creates a pdf of your box with jigsaw like connection, like lego parts.
http://boxmaker.rahulbotics.com/

The boxes were really quick to cut out on the laser cutter and found a speed of 5 at power of 70 cut out the sections in one cycle, although I might have to play around with the settings to get a perfect cut without any melt points.

I used my research from my lego studies to work out the best way to connect the sides which would also allow an easy and strong connection of multiple modules in the future.

I noticed that some of the acrylic perspex was a bit cloudy by laser cutter and a few scratches so went down to the workshop and was suggested to use  Turtle Wax Safe Cut Scratch Remover | Products | Auto Express. When I checked online they suggested to clean acrylic with washing up liquid. I used a two part araldite glue to connect the sides of the box together, once glued together it seemed really strong.

Laser cutting out the puzzle like sides and building the box was a very enjoyable part of my mk1 prototype process for me.

Creating a colour palette for my project will give all the components of my project continuity. I have selected them through looking through research photos and related media. White and green will feature heavily in my project.

Water cooler Prototype swatch

Apalacian trail swatch

For these swatches I used a website called kuler

25 Awesome Tools for Choosing a Website Color Scheme | Design Shack

I will also look into font and logo design by producing a variety of logo images then asking my user group to provide feedback.

I quite like the logo which facebook uses to grow your business through social ads so I might adapt it a bit:

As well as this logo found online to use as inspiration:

This is what I have come up with so far as a banner and logo for my website:
Taking both logos which I found into consideration and the bubble design I used for my initial boards.

Its funny while I was working on the website banner I was watching a film called the Ecology of Mind based on the late Gregory Bateson.
Gregory Bateson talks about the beauty in relationship seen in nature and in every relationship that we create or view.
When you think about it our lives are centered round relationships which is clear to see by how popular facebook has become.
Ive noticed that the more clear relationships you build into a piece of design the more beautiful it becomes to the user. The same can be applied to colour and how you transition from one colour to another, the smoother the transition the more asthetically pleasing the creation is.

For my banner I tried to transition from my logo with each bar linked through the shades of green and brown. Then used light coloured text and a dark background to draw the attention of the eye to Bio which is an important theme in my project. I followed up by surrounding the whole logo in white to make it stand out from the rest of the banner. I then linked the logos design to the bars on the rest of the banner and the green colour of the background of the banner and to follow up I took the blue colours of the text in the rest of the website and the bubble design used in my initial boards to create a bubble design to link the green banner back to the rest of the text on the lower part of the page.

I spent this afternoon looking at other websites and how you navigate around them.
I discovered a vast majority not actually that clear to follow and also with many repetitions in their tabs bar e.g. sign up at the top right of the page, the bottom of their page and also in their tabs bar, which is a real space and makes it cluttered.

The ps3 website was far too cluttered and the (competition, mini games and forum don’t really relate to each other) tabs contents didn’t relate clearly to the tabs title.

Some websites contained navigation not only on the tabs at the top but also anther navigation bar down the side.

Some where way to cluttered, sorry discovery wildlife but its just too much. Even in the side bar they have filled it up to the rafters with adds for free magazine issues.

Here is a list of some mistakes that web designers make:

http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

Some of the more useful websites I found were:

Biosphere 2′s website had nice tabs navigation and the way they structured their about section. Their use of white and their tidy but floral background is very beneficial to the overall effect.

http://www.b2science.org/

The Circle of life website also has some simple but tidy navigation and has made good use of their background and colour contrasts.

http://www.circleoflife.ie/healthy-living/

The Inhabitat website has a nice colour palette and has clear tabs:

Inhabitat – Green Design Will Save the World

The best website for clear and tidy layout with easy to follow navigation was The discovery Channel Uk website. Navigation was easy to follow and left little arrows to tell you where you had come from. Along with a attractive eye catching slide show of recent news and updates.

Discovery Channel UK

In order to develop my own website navigation I took what I learned from the websites and also made sticky notes of all the tabs and tested them out on family and friends.

Once my initial paper tests had been done I put the tabs into a spreadsheet and then transferred them to my website navigation.

We had a talk this week from Graham about the 5 main types of prototypes:

Looks like prototype: appearance model

Works like prototype: technical model

Feels like prototype: physical needs/ergonomic model

Behaves like prototype: behaves/experience is similar to final product but doesn’t look or use the same technology

Looks like feels like prototype: weighted appearance model with the right surface material

Mk1 I will focus on the technical aspect of the project (sensor to arduino to website) and also how people wish to visualise the data on the website. Mk1 will also focus on testing usability through website navigation with users by observing how the navigate through the site and how they set up their Biopod on the online form. I felt it was important to have a rough physical prototype to enable users to understand clearly what the rough physical and web based components context where and how they related to each other. Rather than making the physical prototype out of cardboard I choose perspex as it would allow users to place real ingredients into the container and also capture the white clean finish of my design language along with the clear viewing windows so clear observations could be made.
I also choose to make a physical component so I could understand the physical challenges of construction and worked out how to combine my research with lego on how the different modules would connect and clip together.

I would describe it as a “works like prototype” as most of the websites is fully functioning. I also produced the physical container to give users some context of the physical component so I would call the physical component a “looks like prototype”.

I was just thinking whether a visual display on MyBiopod would be better than displaying on webpage? Could I use a constant beep beep like a hospital monitor to tell users how healthy their system is? e.g. speeding up if the system is under stress or it could shouts when its not well, “water me” or “feed me.”

A physical monitor on the device might be easier to understand initially but for long term monitoring it would have to be web based due to the restriction of how much data the monitor on the device could hold/ display.

After speaking to my friend Richard who is studying science he revealed there are relatively few places where scientists share their data with other scientist or the general public. My website would allow this and possibly the chance for scientists to get into class rooms by giving talks through my website.

When thinking about the layout and fonts to use on my website I decided to check out some old botanical and ecology books.

I think this could make a good looking website layout, possibly representing each MyBiopod like the mountains with different features based on their ingredients.

This design might make a good welcome page.

The cross section of the Earth might inspire my logo or diagram.

I really like the old style and font used in the botanical books but I have to be careful not to make it seem too much like a MOLI  exhibit.