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.

1

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

2

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;

3

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;

4

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

http://invis.io/T71Y0V725

Advertisement

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.

1

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.

2

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.

3

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.

4

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.