Final Presentation

Introducing Frog Voyage…Web 1920 – 1

The idea behind Frog Voyage was a website that would encourage kids between the ages of 8-12 years old to learn about other languages and cultures. The best way they could that at the moment is by using a combination of Instagram, Google Wikipedia, Yummly, Facebook and YouTube. These services and content can portray a country in a certain way that follows the ideas of the content developer. This can mean the kids will sometimes read bias information, which is not ideal. Frog Voyage was initially concieved to fill this void.

Web 1920 – 7

When the original idea was concieved there was many different aspects to it that meant there was a lot of confusion about what the future held, this brainstorm is available to see here;Web 1920 – 5

Ever since I started the project people have always asked why I chose frogs as the character, the idea is that frogs are one of the only animals that exist in every since country worldwide. It also allowed the user to have a distinct connection with nature, the benifits of which are listed below.

Web 1920 – 4The next part was to overanalyse every section of what my subject was meant to be. This meant the sections below were all researched and acted upon within my subject. This development has been documented on my blog throughout the year.

Web 1920 – 6Web 1920 – 8

You can see below how my brainstorm was higely reduced after such a large ammount of research.

Web 1920 – 9

I was able to use this research to not only create this brainstorm but also, effieciently create a large user journey as it is here I was able develop the site map and recognise the steps required to partake in any given activity on the website.

This meant in my designs I was able to create a working model of how the user would experience a country and the different functions. All that would be required after this is a content management system, which would allow me to add the next 20 countries required to finish the design.Web 1920 – 11

There are 5 frogs, with 15 different colours meaning 75 colour variations.Web 1920 – 12Web 1920 – 13Web 1920 – 14Web 1920 – 15

I managed to ask someone from my target audience for feedback about my project, these are the comments that she gave me.Web 1920 – 18Web 1920 – 19

Finally once the design was completed and i’d got feedback on my designs, I was able to approach some web design agencies that offer investments in startups, with one of the prominent ones being Work & Co..

Web 1920 – 3

This company had made products for some very large companies and therefore I was quite interested by them

Web 1920 – 2

Advertisements

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.