Targeting Specific Audiences

Trust people with similarities – Taylor homepage with welcome using local ‘lingo’ is a statement I made in my initial research after I had read Nathalie Nahai’s “Webs of Influence” (https://akbrodie.wordpress.com/2015/02/05/notes-from-reading-books/.) This is something I decided to carry through to the final version after going through the wire frame stages. What we did was research the language and the things in each us state have in common, things they all know, and have common knowledge about, then use them in the welcome message to them when they land on the website. The idea is that the website can track the location of the user based on their IP address, which would allow the page to be displayed differently users from different states. Therefore, using information we gathered from our font research about the relevant fonts, we were able to create an ‘el paso style design, note the packaging of the el paso box here;

then note the images we created for the different states below.

Evaluation

In this project were to redesign a poorly executed website called High Noon Holsters, a website dedicated to selling all types of holster  to the american public. After a little research we found the company didn’t exist anymore but that didn’t stop us from researching the area of gun holsters through its old competitors.

During the research stage, there were many important elements that contributed to the overall look and feel of our design. Researching the product was the first major step before we even started designing the wireframes. It allowed us to understand the product the site would be selling and gave us an understanding for what the feel of the website should be like. It meant that we could simplify the products into four different categories, these were concealment, duty, tactical and sport. At this stage we were already many steps ahead of the original high noon holster website because we were very careful to make sure we didn’t overcomplicate the design and the layout. Something else we decided to put a lot of effort into researching was other southern american websites and the user experience they provided. Tying these into the font and the colour research meant we were able to make plans for how we were going to design the high noon holster website, for example the way tex is presented on a southern american website is unlike any other style of design. They tend to arrange many different styles of typefaces stacked on top of each other in a burger style format, usually with a graphic involved too, to annotate what is being said within the title. When researching the colour theory we learnt that contrast was important to make the content stand out from the background, therefore using the patriotic colours red, blue and white relate to americans because of the flag and the other colours used were darker, brown greys and blacks because they related to the old style american saloons. The Reds website shows how the brighter colours work well at the top as the navigation and the darker colours as the background colours of the main content.

When creating wireframes we decided to break it down into different stages, firstly by creating four wireframes, two for desktop and two for mobile, we then got together and worked out the negatives and positives of each design. That meant we were able to go away and create two new designs each, the best parts of each design were combined to create the next version. This meant we were then able to put both of our final combined designs against the other and create a new one based on the best parts of both. This meant we had technically gone through 6 different designs and allowed us both to have input on the final design. Once this stage was completed we both went our separate ways in the design process to put our own design ideas forward, so that we could decide on the best later on.

When reading Natalie Nahie’s Web of Influence I learnt that people trust others with similarities, therefore we created a personalised greeting message on the homepage for every different state of the united states based up local language and similarities that the people from that state share. The design of these greeting messages were based upon the research about the southern american websites and the ‘stacked’ look of the different typefaces to create an new unusual look for the message.

Another thing we learnt from the research stage was that usability is very important in relation to increasing user interactions. Steve Krug’s “Don’t make me think” discusses how hierarchy and positioning of elements on a webpage massively influence the experience the user has on the site. Since the user scans through the page for the relevant information, the layout has to be very simplistic and self evident. Taken from the book, these two pieces of information massively influenced how we redesigned the High Noon Holster online presence.
One of the most important elements to our teams organisation was the fact that from day one we listed everything we wanted to do and broke it down into manageable tasks that could completed alone. We then set about creating a planner and allocated these tasks to the person who could handle them the most efficiently. This meant that at any given time, we could check the planner and see if we were on schedule. Another very important element of the planner was the fact that we built into the schedule time of things to go wrong, so if we ended up delaying a piece of work it wouldn’t matter because we would still be able to hand in on time.

Being able to criticise each others work professionally and take criticism was a large importance of being able to work as a team and putting personal issues aside to achieve the best possible end product was at the forefront of importance when working as a team. Understanding your responsibility within the group was majorly important as it meant you stayed on track with the tasks you were assigned rather than doing your own thing.

Once the final designs had been completed we had to choose which design we were going to pick as the final design we would present to the group.  At the end, it was apparent that both design were hugely different in appearance, only because we both had different visions of the final products. Alistair’s design uses simplistic design cues, with subtle gradients, flat colour and influences from the fonts and colour research and the diesel online store. Aidan’s design on the other hand, was highly influenced and adapted from the original High Noon Holster website, thematic around spaghetti western posters, using torn paper like vector images for the containers of the content, and using flat colours for the navigational elements, and using high fidelity images for icons used on the store selection page.

Taking into consideration the research in relation to usability and functionality in which the entire redesign was based around, Alistair’s design was more fitting regarding the research and wide audience of the gun holster business in comparison to Aidan’s. The thematic spaghetti western design looks really good but would target a much more specific demographic given its niche design in comparison to Alistair’s.

Evaluation

Creating a PHP design was a challenging prospect, it meant research had to be carried out in many things I had not considered before. The first challenge comes when you understand that you cannot design a php as straightforward as an average site since it contains sensitive information such as the database details and links to the tables within the database. I understood that I must build the PHP first to ensure full functionality. Next step would be to create wireframes that worked around the objectives of the php. For example, the gallery page was built using a white box function that allows expandable images, for the most part this was done using javascript but it also meant there was an added level of complexity. I had to consider many different variations of gallery page, and in the end scrapped the design for the gallery page as it was built around larger images and the initial purpose of my gallery page was to contain clickable thumbnails.  Once the wireframes were completed the next stage was to build the design into real user experience. This began with me starting with the PHP and making sure the functionality was there, then adding the html code around that, then adding the css to make the design work.

The design needed to be thematic, therefore I decide to create a website based around a trip to Paris, which would allow the user to get a grasp for the experience they would have if they travelled there. There is a homepage with a welcome message, explaining the purpose of the site, a gallery page with all the images and finally a search page which allows you to search the images to find the place you want to visit along with a short personal account of the landmark.

I really found the process of learning php much different to the process of learning html and css as when you ‘fiddle’ with html and css things change on the browser and you can see the effects of what you are doing. Whereas with php either does or sensate work and there is no in between, it alerts you to issues with the code, but if there are no issues with the code and it simply does not work, it is a lot harder to try and fix bugs. I found this really challenging and I believed that this to be something that motivated me to master the php.

I found that by using examples of php code and spending time creating practise sites, it allowed me to get my head round how the code was working, the purpose of variables. It meant that when the module was nearing an end, I started to feel more confident with the php and what each individual element of the code was doing. A stand out point in my development is when worked out how to echo to another page if the user had not entered anything that matched the contents of the table from the search bar.

Problems I had were that when I was unsure of something I was really stuck, because I literally wouldn’t have a clue as to what to do. Google searching the issue and looking on w3 schools and  the php website really helped. In a way it was more of a blessing in disguise because it meant I had to go and research the topic myself which mean’t i learnt the topic with much greater ease.

If I were to do this module again, I would spend a little more time developing the gallery page as it would really help the overall feel of the page, rather than being simple squares, create a better layout to create interest for the user, maybe even using a circles. I would like to redesign the top banner to be full width of the page and make the site fully responsive to create a better experience for the user.

Wireframes

Wireframes are an integral part of the design stage, these are all of the wirefreames that I created for the php based site. Take into consideration that because the designs were created for a php based site, the functionality came before design, therefore the design is nice and simple to allow me to spend the majority of my time spent coding on the technical php.

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

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie First Mobile Design

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie Second Mobile Design

SECOND MOCKUP - DESKTOPAlistair Kenyon-Brodie Combined Mobile Design

MOCKUP-MOBILE

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

FINISHEDWIREFRAME - MOBILE

Combined Desktop Design

FINISHEDWIREFRAME - DESKTOP
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.