McTigue Gerard Project 4 UI/UX Project

McTigue Gerard Project 4 Web One PageMcTigue Gerard Project 4 Mobile

Screen Shot 2015-08-14 at 4.56.18 PM

For this project I chose the website for Food & Water Watch. An organization promoting healthy and safe choices, protection of the environment and transparency from the government and big business. Just from the first sentence you can tell it is heavy subject matter and this was the first thing that made me choose the aesthetic I chose. Because the information is so serious, I wanted to create a lighter and more welcoming interface for people to access the information. The original website is also very very text heavy so I wanted to use more visuals to simplify some of that text heaviness. With these changes I also wanted to stay true to the organizations original branding as I could tell they put thought into colour choices and visuals. First of all, I took the colours from the logo and use them throughout. This is a blue and green, very obvious choices for an organization dealing with the environment. Fortunately, the blue and green they chose were unique so I used them. I kept these colours in mind when I choise visuals and created the icons located on my webage. Another thing I found on the original website was the amount of redundancy of information. While it is good to use certain things multiple times to assist the user in accessing them, others just take up space and cause confusion. I was able to integrate parts of the original site, such as “research”, into other existing sections like “tools” as it was essentially a database. I also simplified the navigation titles as they use two words with some and it is not necessary for space or overall look.

Once I made these fundamental choices based on who the orgnization was, I tried to think of who my audience was. Based on the literature on the website, they seem to be trying to reach every day people with an interest in making environmentally friendly decisions. They may also be reaching acadmics and/or activists as secondary groups. Overall, it is focused on people that want to be better educated about issues surrounding the food and water we use and consume. With that in mind, I wanted to keep it simple. A person trying to do research for the first time does not necessarily want to be bogged down by text. I therefore wanted to create my one page as more of a portal. There would be no way to fit all of the information from every tab on the original site onto one page to begin with so it acts more as a highlights/features/links front page. It contains all of the primary information the original site has, but instead has “teasers” and links to more information rather than paragrpahs of text.

I originally used different shades of the same colour for the background of the different sections, but foudn that this created a lot of business on the page that was not necessary. So I chose a neutral, muted green and made that uniform throughout. For my layers comps, I chose two “changes” to communicate to the user that the item is interactive. For general text that can be clicked on, I used a light grey box to show usability. For an item/visual that can be clicked, a grey box also appear behing it. in the case where text is already inside of a shape, that shape and the text get bolder and brighter when the user srolls over.