Design Evaluation

My design, is meant to present to it’s user some of the lesser known facts about war, to give the users an understand of some of the underlying facts and patterns that seem to occur with media manipulation of the public and their understanding of the war. I found it difficult to find the relevant information because it is obviously sparsely available so my research stage of the content was very important as I was relying on the content for the shock factor of my design.

I organised the design into three separate sections, budget, economy & deaths. With the budget, I found the overall military budget, then worked out what it was spent on, the next step was to work out what it could have been spent on instead to improve the world. I did this using  a variety of different resources and you can find the full list on my blog post titled “FACTS ABOUT IRAQ WAR”. Afterwards I focused on how the war effected the economy, how much money was made from the war, therefore I looked at how the money was spent within the US and how much money they were able to make from oil pipelines in Iraq. Finally, I researched the amount of people that were killed in the war, what ‘side’ they were on and how that compared to the ‘acts of terror’ that are presented to us as the reasons why we started the war in the first place.

For me, the most important aspect of the design was to make sure the content was laid out in such a way it made a massive impact on the user, creating an interest in the experience of learning new information about the war. I used information I had gathered from previous research into creating a fluid experience that was both powerful yet simple. I considered the fact that the information was biased against media and government but at the same time, this could be due to the reason this information is not widely spread by the media or governments. This is similar to Charlie Hamilton James’ http://www.digitalrainforest.co.uk website because he presents information about the rainforest he bought and then pushes his bias opinion based upon his findings while he was there. At the time I felt the way he had presented the call to action was very motivational as it connects directly to the viewer directly.

Having applied some psychology to my design I have learnt that I needed the content to begin with that will have a large impact on the user, then I need to build up around that. The design should emphasise on the shocking facts that I present to the viewer, which is why I have opted for a subtle flat colour design with as little imagery as possible. This means that the viewer has no distractions and is focused entirely on the content, the only images I have on the design are subtle icons which which allow the user to visualise what the text is about, and faded images that blend in the background to emphasise a certain meaning. This can be said, among others,  about the economy, deaths and ticket purchase sections.

The design takes the user through different areas, the budget, economy and deaths and then asks them a rhetorical question “Who really provokes war on terror?” makes them aware of the exhibitions and then allows them to buy tickets directly on the page without leaving and then also shows them how they can get involved with the campaign directly without even buying tickets. I understand that a certain percentage of my target audience would disagree with the facts because they basically state that everything they knows about war and terrorism to be wrong. This could be advantagous though as it allows me to get a bigger response from the people who aren’t interested in the exhibition and they would maybe help to create awareness by claiming it  as outrageous and create a potential uproar in the media, which would make people speculate on the facts, in turn leading to a successful exhibition, which is the point of the site.

Advertisements

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

Fourth Design Stage

This final design stage was basically for me to iron out any small details that I disliked about my design, to allow it become the perfect design without any flaws. To begin this I added the last bits into the design that I thought were required. The first one was the images of the president Bush and Kennedy, I decided I wanted to make them look even more liker a picture so I thought the best way to do this would be to frame them in an old fashioned Polaroid, you can see here the old and the next version of these sections.

2 13 4

The next change was at the end of the page, I currently had a page making the customer aware that there was an exhibition and how they could get involved, you can see the old one here;

5

I decided that the whole purpose of the site was to get people to go to the exhibition, therefore I should try to drive sales as much as possible. I did this, by building into the page, a way of purchasing the tickets that didn’t take them away from their current experience, and was easy and simple to finish. The reason for this is that I found in many purchasing devices, in an application, there are in-app purchases, so I thought I should take full advantage of it and implement it into my design. You can see examples of in app purchasing here;

12 14 13

So the original page has lost the prices of the ticket prices but has had the arrival of a “Buy tickets” button;

6

The next three steps are as simple as possible to make it easy for the customer to complete the purchase without too much hassle;

7 89

instead of boring white boxes I have opted for a design that fits in with the page, with the text inside the boxes so the customer is aware that it is indeed a text box. To make the customer aware of how easy the experience will be I have added a steps section at the top of the page so that they aware of how much more they need to do to complete the transaction. With total of just 9 boxes to fill in, the form is super simple and escalates the potential customer to a customer really quickly, without taking them away from their experience therefore giving them no chance to forget or think against the decision of purchasing the tickets.

10

For the final page, I have opted to use emotive language rather than sales talk like “Your sale is complete” the reason for this is because of the overall experience I want the user to have, and I believe this way it is much more immersive by making it more of an experience than just spending money. I have added an image in the background of a few important politicians looking smug with the caption “It’s time see the truth for yourself” indicating that they do not represent the truth, this would follow the sort of bias perspective the exhibition is giving the viewer. I have also told the the viewer that they will receive a starter pack, again language is important in being consistent with the overall experience for the user, rather than saying they will receive the tickets in an envelope, they will receive a starter pack which contains other information about getting involved with the exhibition campaign, which would raise awareness of the exhibition & website generating more profit for the exhibition owners, which is, other than informing the user, the overall aim of the site.

Next important step was to start arranging the content using a grid so that it has consistent layout throughout the design. I found a 12 column grid which I arranged vertically, and the duplicated it and made it horizontal, I therefore had a modular grid with which I had to be able to layout my content the way it needed to done. you can see this grid here;

11

Next, I created vertical guides within Illustrator to split the page into eighths, I did this so that I could have multiple ways of scaling and position objects within the design. This meant my design was consistent throughout and you can see these guides with grid on top of design below

15

This meant I had a grid for the sizing of objects and the vertical positioning of the objects within the design while I used the guides to align the content horizontally.

Next was an easy but time consuming stage of going through the entire design resizing, reshaping and reorganising the entire design to make sure it fit in the grid. This meant the design had a much better hierarchy and the content flow was much better and allowed the viewer from get from to the top to the bottom much easier. You can see the grid on top of the final design here;

35

I also redesigned the interactive sections to fit the grid and you can also see these here;

30293031 27 28  1626 25 24 23 22 21 20 19 18 17

I also added in couple of addition faded images to give it consistency with the other sections and you can see all these here;

32 34 33

The Final Design is here;Mockup

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;

1

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;

2

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.

25

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;

26 31 30 29 28 27

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;

34  5 6

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;

7 17 16 15 14 13 12 11 10 9 8

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.

18  1920

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;

21 23 22

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;

24

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;

32

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.

33

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.

Initial War Site Design

So for my design, I already had researched and arranged the content I wanted to to have on the page (you can find the earlier post with the content on here https://akbrodie.wordpress.com/2014/11/15/facts-about-iraq-war/), I knew the general theme I wanted to go for, it was time to get my initial ideas down on paper. Having completed research on grid layout I knew it was important that my content could be presented using a grid. Here you can see the initial designs;

1 2

You can see from these designs I have started to split the screen into two, left & right, war & peace. You can start see that by using the different sections, I can change subject or style quite substantially without it reflecting on the flow of content. This seemed to break the page down into bite size chunks which made it easy for the viewer to digest. Using larger than usual images and fonts draw attention to the text, therefore the impact is the facts not the design.

Something that is shown in this initial design though that I decided not to carry through was the droplets of blood. This is something I thought worked well in a the design of a website about fracking (which iI wrote about in this blog post https://akbrodie.wordpress.com/2014/10/27/website-analysis-2-dangersoffracking-com/ ) where you follow the water droplet down into the ground. Basically it was going to represent the blood split from the wars I was discussing in the design. I thought it wouldn’t work in my design though because I wanted edge slightly away from the flat appearance of the site by adding faint images of war in the background, and I didn’t think that would have worked well with a flat designed blood droplet.

Current Online Exhibits & Target Audiences

(http://www.warmuseum.ca/war-of-1812/) This site is very straightforward, it combines simple graphics with last colours and small amounts of text. This website is somewhat interactive but almost seems confusing as you don’t really know what different sections are for. The footer for this page stands out really nicely as it is a lighter flat colour, that contains four elements, a quote, social interaction & two logos. While It doesn’t try and sell you something because it is just a virtual exhibition, there is still less content that other sites for actual exhibitions.

1

(http://amhistory.si.edu/militaryhistory/exhibition/flash.html) Is a really good website, complete with information, graphics, animations and interactivity it allows for a good user experience. There is a lot of clickable content but this can almost seem cluttered and somewhat turns it into a bad user experience. Typography and colours seem to have been seriously considered when making this site, each war has it’s own style and colour set but stays with the same general theme. I believe that because there is so much content available that it wouldn’t intrigue the user to want to visit the actual museum/gallery itself. The content of the site actually tells the entire story along with photographs of the artefacts that you would usually go to the gallery to visit, this makes a trip to the gallery almost pointless unless you particularly wanted to see it in person.
2

(http://www.nam.ac.uk/exhibitions/online-exhibitions/waacs-war) This website is very straightforward, it is all contained within one page, if you want more content you simply click on another number along the bar and it will slide across. The colours are simple and flat, which allows the user to focus on the content. I found this to boring and dull, and I think this was due to its simplicity and lack of interactivity.

3

(http://www.moma.org/interactives/exhibitions/2013/isagenzken/) I really liked this website for it’s overall design. There is great interactivity with the menu where it is out of sight until you click on it and it becomes fullscreen, the are different colours which change and become boxed in if you hover over them. This is simple and effective as it then stands out of the crowd and because something you enjoy using. Each page is dedicated to a different part of the exhibition which works really well because the majority of text is one page whilst the images are contained on another meaning the user can view what they want.

4

The target audience for a museum is very diverse, it attracts people from all ages, genders and class. This means defining the target audience is very difficult,

In terms of creating an exhibition site for a museum i know I need to focus my attention on attracting new customers without alienating existing customers, this can be done and I found the “Marketing of Art Museums” by  Robert C. Blattberg and Cynthia J. Broderick that explains a lot of relevant information. This article dates back to 1991 and so is out of date with the web now in place on desktops, tablets and mobiles, this shouldn’t be an issue as some of the key concepts will still apply.

“There are two distinct types of audiences that art museums can target. The first is the group of potential donors, who often become members and are more likely to become heavily involved in museum activities. This group is small, will generate far more revenue and profits to the museum, and appreciates the current types of exhibits the museum offers.

The second type of audience is the general public, who attend museums to be entertained and to be educated. Few will ever become donors of works of arts nor will they become major financial benefactors. However, they occasionally become members and often spend money at the museum store and restaurant.”

From this statement, it is easy to understand that there multiple benefits a museum can take from their audience. These are donors of material and people who are willing to participate in events for the museum, this can be done through volunteer work. Also, more commonly the general public who spend money in the shop and cafe, I must be targeting the design of the site cause enough intrigue for people to want to visit the museum.

Therefore, understanding who the target audience is vital and while I am mean’t be basing my website around an exhibition some sites are simply to inspire action against a particular organisation. I would like to do both, meaning the viewer is intrigued enough to visit the exhibition but also then wants to do something about what they have seen. This will capitalise on every single person that first views the page. They view the page, pay for the exhibition, fight for the cause of the exhibition and then also further spread the word about the exhibition. This would be the most profitable, attention gaining, way for an exhibition to gain traction with the public by creating a ‘movement’ that has the purpose of both profitable gain and creating awareness.

References:

http://www.nber.org/chapters/c11646.pdf

http://www.copywritematters.com.au/define-target-market/