Prototype 2

The second prototype focused on the actual design of the website. Whilst creating the first prototype it became clear that using tables and generic form elements such as select buttons is not something that will make my users very enthusiastic about using the product. Whilst researching for the project I came across a good example for this on a website.

bad design 1

image taken from (U.S. Geological Survey 2015)

Above shows an image of the example I found online. The creator has made some drop down menus and a submit button. Below shows the results after the user has clicked the submit button. The code functions quite well and the creator has attempted to engage the audience by getting them to guess how much water it takes to produce certain food items, but the design is very bland and in my opinion doesn’t help to engage the audience. Especially with the second section, I find it very hard to read the writing with the default links and the way the information is presented isn’t very affective (source:

ugly design

image taken from (U.S. Geological Survey 2015)

Because my project is called The Meat Counter (because it counts meat) I came up with an idea to make the design of the website resemble that of an actual meat counter that someone might buy food from whilst shopping at their local supermarket. Te users could select the items that they eat during the week by clicking on items displayed at the meat counter. If they hovered over the items a larger image would appear in the top right. This can be seen blow.


The original intention was that the item which the mouse pointer hovered over would show a larger image and the name of the item in the top right section. When clicked on, 1 item would be added to the list, if clicked again the quantity of that item would increment. This idea caused some additional design problems however, as it meant there would be a limited amount of space in which I could fit all of the items. The other design problem was that the user might have found it irritating to click on each item. Because the images would have been so close together it they may have crossed over one another. Also, having to hover over each image to see what the name of each item is could have been irritating for the user.

I solved this problem by having sections of the meat counter, that when clicked on, opened up a separate section where the user could choose from a list of items related to that animal. Now, when the mouse pointer hovers over each section, an outline will appear around that area. When clicked on a menu will appear that contains all items related to the animal. To get rid of the window that appears, the user will simply have to click another part of the screen. The list (shopping cart) will be displayed on the top left, and the user will be able to delete items if they choose the wrong one by mistake. When the user has finished this process they will click on the calculate button similar to that of the first prototype.



U.S. Geological Survey, 2015. How much water does it take to grow a hamburger?., USGS. Available from: [Accessed 4 December 2015].



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s