Final Presentation

Introducing Frog Voyage…

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.

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;

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.

The 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.

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

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.

There are 5 frogs, with 15 different colours meaning 75 colour variations.

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

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

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

Advertisement

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.

FINAL HIGH NOON HOLSTER MOCKUP

You can find the mockup here;

http://invis.io/TF34UJPMX

FINISHED PARIS WEBSITE – PHP

Here’s the link to the completed website;

http://www.dynamic.artdesignhull.ac.uk/abrodie/

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

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.

Learning PHP

The main part of this assignment was learning what the different code did. Understanding the different methods of bringing data from a table and presenting it properly on thew website was the main thing that I learnt.

My first attempt at a thematic php website was the following website.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish01/retrievetropicalfish01.php
This was a template of a table that contained the content

My next attempt was to use the previous method but lay the content out slightly differently.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/tropicalfish02/retrievetropicalfish02.php
You can see that I have removed the content from the table and gave it an improved structure using css.

My final attempt at the php Gallery feature was this one.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/disney/disney.php
I was able to set up a database by myself and include the content entirely myself meaning I have at this point a much better understanding how the php works.

The next stage was to code and understand how a search function works, this was an easier concept for me to grasp.
http://www.dynamic.artdesignhull.ac.uk/abrodie/exp/animal/logo-search-01.php
You can see here a very basic example of a search function that I built.

Featured Image Research

Another important element is relating to each customer individually, and because America is such a vast country it is split up into 50 states. Therefore they all have their own individual language. When researching Natalie Nahia’s book about psychology in design, it is proven that people trust people similar to themselves, therefore I think it would be worthwhile building a landing page that is directly relatable to each individual from each state. By using language that is only used by people within that state, and a background image that suits the area, for example, Texas landing page would have an image of vast deserts with a cowboy on it. While a California landing page would be beach with people in shorts. Understanding stereotypes and local ‘lingo’ I will bet able to create landing page directly relatable to the people from the different states.

Alabama
They love Sweet Home Alabama” by Lynyrd Skynyrd, therefore a play on the lyrics may be nice;

“Sweet home Alabama,
Where the gossip is so true,
Sweet Home Alabama,
High Noon Holsters, I’m coming home to you”

They love a good gossip in Alabama so much so that they have 6 pages dedicated  to it in their local newspaper, compare that to the two pages they give to the actual news. They’re classed as the best at barbecues in the usa, so it might be nice to have an image of a social barbecue scene with the text over the top.

Alaska
They know the nature really well and spend a lot of their time just dealing with it.
They get great views of the Aurora Borealis so incorporating this in the tagline.
They also drive regularly on ice and snow and have to deal with grizzly bears too.

“As beautiful as Aurora Borealis,
As dangerous as a grizzly bear,
As functional as your snow chains,
Our holsters are the best.”

This should be accompanied with an image with a scene of people enjoying the nature in Alaska.

Arizona
This is the state of the ‘cowboys’
It is really really hot. – they will park a mile away from their destination just so they can park in the shade.
The home of the grand canyon.
Everyone owns a swimming pool

“Parking in shade is important,
but having the right holster to your gun
is just as important.”

This should be accompanied with an image of people walking around the grand canyon.

Arkansas
They love game shooting. This is mega important for the holster site.
Deer season is the biggest
they chew tobacco
They wear overalls on all occasions

“What do our holsters have in common with overalls?
Everyone in Arkansas wears them.”

This should be accompanied with an image of game shooting deer as target.

California
They use dude and bro
they use the word “like” in every other sentence
The traffic is alway really bad
They love their food.

“Dude, our holsters,
are like totally the best ones in SoCal,
you’d be like,
crazy not to own one.”

This should be accompanied with an image of sunset sun beach with beautiful people.

Colorado
They love their dogs, and take them everywhere
They are all a little bit hippie
They love skiing
they love green chilli
They have legalised marijuana

“Having food without green chilli would be the same as having a gun without one of our holsters.”

This should be accompanied with an image of someone skiing on a mountain.

Connecticut
They have legalised marijuana
Majority of them have a lot of money
They have field parties
They love basketball.(UConn)

“Being passionate about UConn is one thing,
wait till you see our range of holsters.”

This should be accompanied with an image of a crowd at a basketball game.

Delaware
The beach is a very important element of life there
They don’t pay taxes- and are proud of it.

“You don’t get charged tax in Delaware,
so we won’t charge you taxes online”

This should be accompanied with an image of a delaware beach.

Florida
They have the most guns permitted compared to all the other states.
The majority of them own a boat

“You have a boat, a gun and one of our holsters,
you must be living the dream.”

This should be accompanied with an image of a boat party.

Georgia/Atlanta
They love sweet tea

“Our holsters are like sweet tea.
Great and loved by everyone.”

This should be accompanied with an image of someone in a cafe drinking tea.

Hawaii
They serve rice with everything
They love surfing
People are laid back

“Burger with rice?.
your gun with our holster?
It’s just the way it’s done.”

This should be accompanied with an image of surfing and the beach.

Idaho
Biggest place in the us for fly fishing
Farming is the biggest employer there and they are famous for their potatoes
They enjoy living in isolation

“You not having one of our holsters,
would be like Idaho,
not having potatoes.”

This should be accompanied with an image of someone fly fishing.

Illinois
They have really inconsistent weather

“Sun, sleet or snow,
Our holsters are consistently great.”

This should be accompanied with an image of the river rolf.

Indiana
They travel everywhere in tractors
Their liquor stores shut down on sundays
They often have tornados

“Unlike your liquor stores,
we don’t shut down on sundays.”

This should be accompanied with an image of a large tornado.

Iowa
They walk everywhere
They love to read
They’re very friendly people

“Your boots were made for walkin’,
Our holsters were made for wearin’.”

This should be accompanied with an image of a group walking in Iowa.

Kansas
Superman was fictionally from Kansas

“Even Superman isn’t as strong and powerful as our gun holsters.”

This should be accompanied with an image of the flint hills.

Kentucky
They are no longer interested in the Kentucky Derby
They love to read
Kentucky Bourbon is the best in the country, apparently.

“Kentucky Bourbon is the best in the country,
just like our gun holsters”

This should be accompanied with a picture of someone reading a book.

Louisiana
They love celebrating things
They like to talk a lot
They love to drink

“Here’s something to talk about,
our gun holsters”

This should be accompanied with a picture of a celebration.

Maine
They always see moose
They love seafood
“Ayuh” is basically local language for yes.
Is mainly pine tree forest

“Ayuh, our gun holsters are
perfect for experiencing mother nature,
in all of it’s glory”

This should be accompanied with a picture of a pine tree forest.

Maryland
They love crabs
Natty Boh is the most common beer
They don’t leave the house without their old bay seasoning
They love their state flag

“Old Bay Seasoning, check.
Great quality gun holster? Check.”

This should be accompanied with a picture of a their state flag

Massachusetts
They’re obsessed with the kennedy family
The home of Harvard University

“Businesses, actors and presidents alike all come from Massachusetts,
but welcome the best thing to come to Massachusetts.”

This should be accompanied with a picture of Boston or Harvard.

Michigan
Hitting Deer is a common thing
Ford & General Motors have strong roots here.
They love hunting.

“Don’t just hit deer,
Shoot it.”

This should be accompanied with a picture of Big Buck.

Minnesota
Prince was born there.
They are used to driving in winter weather
Goodbyes take a long time

“Don’t let getting your gun from your holster take as long as your goodbyes,
get one of our holsters.”

This should be accompanied with an image of a snow covered road.

Mississippi
They love the rebels and the bulldogs
They love the Confederate flag
They shoot everything
They love the blues music
They are kind hearted and generous.
“We have passion for quality, just like you have passion for the blues”
This should be accompanied with a picture of a blues bar

Missouri
They hunt frogs
They stop their car in the middle of the road to talk to people.
They like to watch thunderstorms
They love Imo’s Pizza

“Hunt frogs or deer, our holsters are the perfect fit”

This should be accompanied by an image of a thunderstorm

Montana
They love their meat
They always speeding
They drive everywhere
They don’t like spending too much money.

“Montana residents, meat your next holster”

This should be accompanied with an image of the long roads

Nebraska
They love runza
They are massive tree huggers
A lot of them work in call centres

You might just love our holster, more than the tree in your garden

This should be accompanied with an image of tree huggers

Nevada
They’re not easily impressed
It’s very hot
They handle their drink well
They believe in ufo’s
they like fast cars

“You might not be easily impressed, but our holsters will take your breathe away”

This should be accompanied with an image of the deserts

New Hampshire
they grow things in their garden
they are not angry drivers
they hate taxes
they would rather worship squirrels than god

“You should worship the High Noon,
as our holsters are almighty god”

This should accompanied with an image of vegetable patch garden

New Jersey

They love bagels and pizzas
They love dunkin donuts

“Shopping list; bagels, pizza, high noon holster”

This should accompanied with an image of dunkin donuts

New Mexico
They’ve all seen a ufo
they all speak splanglish
They love green chillis
They would rather spend time in nature.

“You’ve seen a ufo, but never seen such good quality in a holster”

This should accompanied with an image of New Mexico nature

New York
They think they’re better than everyone else
They create great new foods
People judge you on the jacket your wearing

“Decent Jacket, Decent Holster?”

This should accompanied with an image of NYC streets

North Carolina
They love college sports
They would eat biscuits for every meal if they could
They love drinking sweet tea
NASCAR is life there
They all want pick up trucks

“Pick Up Truck < High Noon Holster”

This should accompanied with an image of a nascar race

Ohio
They love football
They love buckeyes
Drink Cheap beer

“You’ll love our holsters, more than buckeyes”

This should accompanied with an image of buckeyes

Oklahoma
They deep fry anything
They all know who Will Rogers
They love Toby Keith

“Our holsters are so good,
you’ll want to deep fry them”

This should accompanied with an image of Chesapeake Arena

Oregon
They love the great outdoors
Breweries are very big there
They all have puppies
They love Ducks football

“Have a drink on us,
You probably made it anyway”

This should accompanied with an image of people drinking

—***—***—SO FAR—***—***—
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming

References;
http://www.movoto.com/al/alabama-stereotypes/
http://state.1keydata.com/
http://www.danoah.com/how-well-do-you-know-the-slang-words-from-your-state
http://www.movoto.com/blog/opinions/alaska-stereotypes/
http://www.movoto.com/ca/southern-california-stereotypes/
http://www.movoto.com/arkansas-stereotypes/
http://www.movoto.com/arizona-stereotypes/
http://www.movoto.com/co/colorado-stereotypes/
http://www.movoto.com/ct/connecticut-stereotypes/
http://thoughtcatalog.com/kohl-conall/2014/05/10-kentucky-stereotypes-you-hear-when-you-leave-kentucky-and-determining-which-is-true-or-false/
http://www.movoto.com/de/delaware-stereotypes/
http://www.movoto.com/fl/florida-stereotypes/
http://www.movoto.com/atlanta-ga/atlantan-stereotypes/
http://www.movoto.com/blog/opinions/hawaii-stereotypes/
http://www.movoto.com/blog/opinions/idaho-stereotypes/
http://www.movoto.com/il/illinois-stereotypes/
http://www.movoto.com/blog/opinions/indiana-stereotypes/