InVision – Final Verion Prototype

Creating my design using InVision, a live prototyping tool was very useful as it allowed my design to appear just like a functional site. Having designed the site to be the best of my ability, I didn’t feel by simply show the images did it justice, therefore I exported every possible combination of my design which came to a total of 19 because of the amount of different sections. I then used ‘hotspots’ to link certain parts of the image to another image, therefore, I have created a prototype of my design which is usable and ready to show to clients. Once I had got to this stage, it allowed me to discover issues that I had not found previously, firstly the text is not bold on the “Fluorescent Lightbulbs” in the peace side of the budget section.

Secondly when you scroll through the 10 most profitable companies in the US, I have missed the logo from number 5.

These are two small issues that I could easily go back to resolved. In line with simpleness the section in which you would purchase tickets works really well, but it doesn’t allow the user to confirm the price or ticket amount just after putting their card details in, this would maybe make a better experience for the user.

This also meant I was able to view the site from mobile devices on the web. I have been able to see a couple of instances where the design doesn’t work and may have to be re-imagined for mobile devices. The first example of this is the contrast of text over images, because the screen size is smaller and the text only slightly darker than the background image, it becomes a little harder to read.You can see this here;

Another mobile issue is the size of the buttons are a little too small to press on the mobile version, therefore would become a usability issue for the user, and would take away from the overall experience. You can see this here;

The actual working prototype is available here for your viewing pleasure;

http://invis.io/T71Y0V725

Advertisement

Third Design Stage

The third step In the largest step in the process of the design, there are a lot of key factors that come into play between this and the previous stage of my design. Here’s the design;

Firstly, the biggest change you will see is the colours, I searched through http://www.colourlovers.com/ and found a colour set based on army colours;

It seemed appropriate to use army colours since I was illustrating the effects of the war and the military has large role in this. By using the colours I have done, it makes it much more obvious that my site is about the military than the bland colour palette I had previously had. Next you will notice the video the top has been removed and been replaced with an image.

I thought this would be moire appropriate as again, the purpose of the site would be the impact of the facts, so I didn’t want any distraction, by having an image that visually helps the user understand what the page is about it seems much more effective and works better with the flat design. You will also notice how I have added images with a low opacity to blend into the flat colours to give it a little extra detail so that the user has something as to relate to, therefore the budget section has an image of money, oil sales section has an image of oil rigs, the deaths section has a soldiers hand in the air, and the 9/11 section has an image of the twin towers with smoke billowing out of them. You can examples of this here;

You will notice how I have now completed what the military did and could have bought with the budget section again with their own colour schemes to set them apart and making the war side darker to illustrate the greed.

Relating the design back to the first concept on paper (https://akbrodie.wordpress.com/2014/12/30/initial-war-site-design/) you will notice how I have kept in line with the way I split up the different sections to give them different content. At this stage I was I was reasonably happy with the design being almost complete so I decided to add some interactivity into the page so that rather than just it just being scrollable there are actually areas for the user to click on. First was to decide the areas which would be most shocking and then deciding to use those areas for the interactivity. I decided to use the statement made by each president an interactive part so that you could actually click on a video icon and watch him saying it. You can see both examples here;

 

Next was adding more detail about the more important facts so that it wasn’t just more interesting, but also more believable. I did this to the only two sections that I felt it was appropriate to explain more about, the first one being who made the most money from the war, you can again see my example of this below of the 11 different sections;

The next section was about the oil reserves that Iraq had when the US invaded, and I believed this was an important part of the war because it was one of the main reason why the US invaded in the first place.

 

Something else I have changed since the earlier design is the font, which I changed to Century Gothic, I did this at it features in movies and games that focus on war and violence, you can see three examples below;

Something that I believe needs change is the way the viewer purchases tickets, if you are to capitalise on the experience the user is having, you need to make it incredibly easy for the user to buy tickets to the exhibition, preferably without leaving the page, this means the user doesn’t get sidetracked or distracted, so that you can capitalise on the emotion of the viewer while they are still shocked by the facts and want to learn more. This is the current state of the ticket section before I change it;

The final thing worth noting about the design so far is the call to action section, in my research I found a site (http://www.digitalrainforest.co.uk/) that had an excellent call to action at the bottom of the page, you can see it here;

The site is about how corruption and poverty leads people into cocaine farming in Peru and also how hard you must work and the health risks if you are to farm gold, cows or even chop down rainforests, so it basically sums up with three images what you purchase as a result of everything on in Peru then has a simple statement “if you think this has nothing to do with you, think again and get involved” which I thought was really empowering so I stole it for my design but changed the concept to keep it in line with the general design of my page. I placed a oil drum on the page which went to a petrol pump which led to a car with the same statement below it. I think this is an excellent way to get people involved, you can see my version on my design below.

Second Design Stage

The next step in doing my design was to get my initial ideas onto the computer, so here you will see quite a large jump in progress but at the same time, there are bits missing at this stage as I haven’t yet completely finished adding the content but this is the style so far.

At the top you see a video as soon as you land on the page, it would automatically play as soon as you land on the page, there is simply a button there to represent it being a video. This video will include America propaganda, visuals of war related events and presidents speaking in a reasonably fasted video. It also shows the top of the next section which is about the military budget and how it’s spent. as you can see war and peace are split up into columns with their own colour scheme.

This section is still about the military budget but it shows the individual things the budget did, and could have bought. To keep my design flat I have decided to use icons that represent the appropriate items, I think this helps the simplicity and focuses the viewers attention on the actual facts themselves. There are some sizing issues that will yet need to be covered.

This section is about the economy and how it could about gaining wealth, I have introduced this section with a quote old president of the USA, George Bush which is about how every us citisen should go shopping more, the day after 9/11. I think this really works because even in this early stage, when I show peers for review, they all seem very shocked and say “did he really say that?”. I think this will create more intrigue as to the content of the section.

The footer is where the call to action happens to get the user involved with social debates.

You can see from this early stage the design is coming on nicely, it is taking form with a similar overall theme.