After my research I found my target audience to be reasonably easy to understand, you can see the breakdown below;
Tag Archives: USA
Persona Research
The research was a vital step in figuring out who my audience was, and what they wanted from the website from a festival. Once I knew a knew about the subject I was questioning, I went on to ask the questions to provide the information I needed. Below are all the questions with the collective answers.
When you decide to go to a festival, what do want to see on their website?
Lineup
Dates
Tickets
> Packages
> Location
> Map
> Postage/E-Mail
Countdown
Video
Pictures
Travel
Personal quote on rough costs
A site map
If you know an already know an artist attending, what do you want to know about them?
Recent album releases
Social media links
Bio (Learn more, with quotes)
Stage & Time of performance
Who’s on the same stage
If you don’t know an artist attending, what do you want to know about them?
Image
Genre
What methods of transport would you use?
Train
Flights
Driving
Shuttle
What information/content would persuade you to purchase a ticket?
Highly visual
Tickets left
Previous Attendees Reviews
What type of festival packages would you expect?
Standard
Gold
FINAL HIGH NOON HOLSTER MOCKUP
You can find the mockup here;
Wireframes
The wireframe stage was most important as it allowed us as a group, to streamline our ideas, and get feedback on the designs we had created. The idea was that we would be able to create four wireframes each to begin with, two different designs for both desktop and mobile. We would then bring in both and discuss the benefits of each and the reasons for choosing certain elements of the wireframe. This was a good process as it then allowed us to com back with a better wireframe that combined the best parts of the first two. Once we were at this stage, we combined both mine and Aidan together to create wireframe that had the best parts of the previous wireframes. Since there were three completely separate stages within the design process of the wire framing it meant we were able to smoothen out any flaws within the design. Below you will see the process between the different wireframes.
Alistair Kenyon-Brodie First Desktop Design
Alistair Kenyon-Brodie Second Desktop Design
Alistair Kenyon-Brodie Combined Desktop Design
Alistair Kenyon-Brodie First Mobile Design
Alistair Kenyon-Brodie Second Mobile Design
Alistair Kenyon-Brodie Combined Mobile Design
Aidan Crow First Desktop Design
Aidan Crow Second Desktop Design
Aidan Crow Combined Desktop Design
Aidan Crow First Mobile Design
Aidan Crow Second Mobile Design
Aidan Crow Combined Mobile Design
Combined Mobile Design
Combined Desktop Design
As you can see the wireframes began with a very simple design, something worth noting from the offset is the way both of the designs contain an overlay on top of the welcome image. Aidan’s was the logo, mine was the greeting message, this is something we decided from the beginning that we should keep for the final version, and you can see in the final design that the images have an overlay that is specific to their state. Aidan and I had a similar idea when it came to the categories page, and how to present the different ones. Mine consisted of segments with images inside that represented the category while Aidan had a blank page which held icons for each category. This is again something we combined, so that the background image changed to something that related to the category when you hovered over the icon.
Holster Types
A holster is a holder for a firearm that can be worn on the body. The firearms industry is worth a massive $31.8 billion, so there is a lot of money to be made in producing holsters.
There are different types of holsters, all having different purposes and functions.
Concealment holsters are for the use of the general public who feel the need to carry guns on the street with them.
Duty holsters are the same as the ones used by police officers and personal securities.
Tactical holsters are mainly for heavy duty use by the military, and personal security forces.
Sporting holsters are used to hold hunting guns.
It is difficult to break down how popular each type is as records only roughly estimate the sector as a whole.
Materials are also worth looking at, leather is a popular and classic option, while it is liable to wear and tear and has been outdated by thermolaminates which are much better because they maintain their shape and avoid scuffs, unlike leather. Other materials listed are nylon and polyester.
Where the holster is worn is also another important feature and again relies entirely on the users preferences and needs. There are holsters that are placed in/on the following places;
Ankle
Waist
Chest
Pocket
References;
http://www.adn.com/article/key-facts-about-americas-gun-industry-worth-318-billion
http://en.wikipedia.org/wiki/Handgun_holster
http://daggershop.com/Holster
http://www.safariland.com/our-brands/bianchi/
About patriotic americans
Americans go to extreme lengths to be patriotic to their country. Nothing seems to come between them and their country and their belief that their country is the best in the world. By understanding how and why people are patriotic helps us create a patriotic experience in turn creating more sales for the gun holster company. The biggest sign of being patriotic is by flying the american flag, it is the ultimate sign of respect for your country, this has already been done on the High noon holster site as you can see herein the bottom left;
It seems a little bit too subtle, especially when stereotypes of americans are loud and brash, the flag should be bigger, much bigger and in your face to encourage the patriotic emotions when flying their flag.
Joining or supporting the military is a very patriotic thing to do in america, regardless of the purpose of the wars they are fighting the vast majority of americans hold their soldiers in high priority. This is fitting given that the sites purpose is to sell gun holsters, this is something that the military use on a daily basis. So by making a strong connection between the holsters and the soldiers who serve the country, the american viewing the page would be sub consciously encouraged to buy the product.
A road trip across America is seen as a great way to be patriotic, when the country is so big, why travel elsewhere? Stay in the country and spend your hard earned money in the us, improving the economy.
Go supersize, you know you wont eat it all but anyone who suggests you cant is only preventing your right to freedom, and we all know America is the freedom land. Eating at neighborhood BBQ’s is a must and shows your support of your community
Gun Holster Websites
It is very important to look at the competitors of highnoonholsters to be able understand the most important element of the sites are. This will allow us to understand what can be removed from the site and what needs to be updated. There are many competitors within thew market of gun holsters so it is important to stand out from the crowd. This shouldn’t be hard as the majority of the other designs are just as poor as the one that we have to redesign. The biggest competitor in terms of competition within the market and design is the Blackhawk site. It is complete with full width images with overlapping pictures of guns on the welcome page;
Action photos of soldiers with bold white text to make things stand out more. The navigation tackles the problems covered in the book “######” with drop down menus by creating a large box below the menu that contains all the links;
It is clear, simple and easy to use, regardless of the fact there is a huge amount of content on there.
Patrol Store seems very busy with a lot of content, there are banners advertising products, smaller adverts that link to an external site.
There seems to be a lot unnecessary information on this site that will only confuse the user. The menu is also confusing, while I was looking for the holster tab I couldn’t seem to find it and if you look as well, you will find it is difficult to navigate. Eventually when I did find the gun holster section there were only 16 to choose from. While this limited amount holsters available for sale on the site are shown in a simple grid, they still seem cluttered.
Simply Rugged lacks a professional look that allows the user to trust it with its payment details. When you land on the site, you are greeted with plain welcome page that doesn’t particularly make to you want to stay on the site.
The store is simple in the sense that the menu makes it easy to choose between the different things you can buy, but at the same time the images are very low quality sometimes with a description. This is awful, and am not encouraged to click on any of the links. From looking though these sites, I have realised something that I hadn’t planned in my planner is e-commerce design, so I am going to make a note to cover that next.
Uncle Mike has a great site, it is simple, clean and encouraging to use. It has two colours, grey for the text and green from the logo for the buttons and links. I think the simplicity of the site works in it’s favour.
Alien Gear is a very cheese website with alien faces and flying sauces, takes away from the professional purpose of the site, to sell gun holsters. How are the two related? There may be a small demographic of americans who own guns that also believe in aliens, but seems a strange way do business to single out your audience and effectively cut the others out of your business’s target audience. This site has even less options available than Simply Rugged’s with only four holsters available for purchase.
De Santus Gunhide seems very outdated by using old skeuomorphic design which takes cues from a real object and makes them into digital design. That said though it also seems to have used the colours of the american flag which helps sell the company as a patriotic experience and will encourage people to buy from the site ‘for their country’. That said, the store is reasonably good, splitting the items into categories then allowing you to go into those categories.
The Holster Store seems very backdated to the early days of the internet with the simple sidebar containing many text links. That said, 30 seconds while writing this past sentence, I received an instant message on the site asking me if I needed any help, just like a shop assistant would if I walked into a store.
This site has a huge collection of different holsters available for sale. These two facts help make the site better than it originally seemed, customer support is something important that I read in Nathalie Nahai’s “Webs of Influence”.
Galco Gun Leather is a website that works really well with flat colour, images and minimal text, the store looks like any other. It is simple and professional enough to be trusted with your money, but nothing special in the sense it doesn’t stand out from the crowd.
Crossbreed Holsters has a nice mixture of texture and flat colour to look professional, it is accessible and easy to navigate with a well laid out shop, with 60% of the products with discount, this relates to the sales techniques mentioned in Nathalie Nahai’s “Webs of Influence”.
The bright green of sticky holsters instantly makes the site seem unprofessional and unreliable. To even browse the holsters you have you used this drop down box to select one you want to look at, this is bad user experience.
References:
http://www.blackhawk.com/
http://www.patrolstore.com/holsters.html
http://www.simplyrugged.com/
http://www.unclemikes.com/holsters
http://aliengearholsters.com/
http://www.desantisholster.com/
http://www.theholsterstore.net/
http://www.galcogunleather.com/
http://www.crossbreedholsters.com/
http://www.stickyholsters.com/
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;
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.
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;
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;
So the original page has lost the prices of the ticket prices but has had the arrival of a “Buy tickets” button;
The next three steps are as simple as possible to make it easy for the customer to complete the purchase without too much hassle;
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.
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;
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
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;
I also redesigned the interactive sections to fit the grid and you can also see these here;
I also added in couple of addition faded images to give it consistency with the other sections and you can see all these here;
The Final Design is here;
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.
akbrodie.wordpress.com 