FV: Crazy 8s

The crazy 8s, Googles’ method of wireframing its’ designs is what I used with this project.

Here are the two crazy 8’s I did.

The homepage;

Scan.jpeg

Customising the frog;

Scan 1.jpeg

Breaking down what the different sections do;

The homepage section is the most important as it where the user will be greeted with content. This page should define the look and feel of the rest of the site, so therefore should reflect all of my research thus far.

HOMEPAGE1.jpeg

HOMEPAGE 1 (above): This homepage sets out the view of the world map for the user to select certain countries that they can visit, this homepage has an icon in the top which contains the profile data of the user. Additional links can be added along the top of this design.

2.jpeg

HOMEPAGE 2 (above): This homepage has a much more defined structure as it lists the flags in a grid view for the user but maintains large menu along the top which can contain user data and additional links.

3.jpeg

HOMEPAGE 3 (above): This homepage takes the setting of a frogs natural habitat, a pond in which it would live. The frog can sit atop lily pads while signs in the bakcground contain the navigation of the site, and addition content.

4.jpeg

HOMEPAGE 4 (above): This homepage is similar to the 3rd one but instead it offers a much more zoomed in version of the frog that allows for a top navigation.

5.jpeg

HOMEPAGE 5 (above): This homepage is a lot cleaner, with a black bakcground and frog resting on a branch, it means that the navigation can become the center of attention for the user.

6.jpeg

HOMEPAGE 6 (above): This homepage is like homepage 4 but is again zoomed in more. The main difference with this one is that the content portrayed behind the frog can change in a more 3d enviroment, making the homepage much more interactive.

7.jpeg

HOMEPAGE 7 (above): This homepage is a standout design where the page is an intereactive game while it also serves as the function of the main menu too. It gives a new breathe of life to something that is otherwise potentially boring for my target audience.

8.jpeg

HOMEPAGE 8 (above): This homepage is very simple as it portrays the frog sitting on a frog in a pond, the menu is tucked away in a side navigation, to allow the homepage just be the main visual of the site.

CUSTOMISING THE FROG

1.jpeg

CUSTOMISING THE FROG 1 (above): This frog customisation page features the frog on his lily pad with the customisable items kept in a fixed sidebar that the user can scroll through.

2.jpeg

CUSTOMISING THE FROG 2 (above): This frog customisation page features much more importance on the character and how it looks with the items, in this version the user can look the the catalog and select items they want to wear.

3.jpeg

CUSTOMISING THE FROG 3 (above): This frog customisation page is like the second where it focuses on the character but this time instead of selecting a catalog to look through the user is presented with the flags and the items categorised by their country.

4.jpeg

CUSTOMISING THE FROG 4 (above): This frog customisation page puts a lot more attention on the specific items being changed as it zooms on the relevant area of the frog of which the item of clothing is being chamnged. As the user browses the items the flag in the corner changes to be relevant to the item.

5.jpeg

CUSTOMISING THE FROG 5 (above): This frog customisation page allows the user a lot mor customisation as it allows them to drag and drop the specific items from a side store of the items.

6.jpeg

CUSTOMISING THE FROG 6 (above): This frog customisation page puts much more importanceon the items as the frog is much smaller while the items are much bigger allowing the user to scroll through them.

7.jpeg

CUSTOMISING THE FROG 7 (above): This frog customisation page allows for the frog and items to be seen equally,  the frog is shown in a spotlight while the items can be displayed by flag.

8.jpeg

CUSTOMISING THE FROG 8 (above): This frog customisation page is the same as the one shown above with just the simple change of showing the frog on a lily pad rather than in a spotlight.

TESTING ON USERS

Once i had complied these designs the testing on the user was soon to begin, what I doscovered was the following;

The homepages were all relevant to the design so picking one was difficult but the homepage being a world map was most popular as it was highly visual and relevant.

The audience thought it would be too much choice to select a country at this section, so here the user should choose just the contininent, then choose the country they wish to visit within that continent. This is done using the two screens above.

The next wireframe to be chosen by the target audience was the 5th customisation screen;

5

The reason for this as it looks like a really simple layout which is easy to use, with a drag and drop ability for the user.

Other wireframes were less important and relied so heavily on the digital artwork that it made more sense to create digital wireframes, these can be seen here for the digital experience mockup.

 

Google on Accessibility

https://www.udacity.com/course/web-accessibility–ud891

Accessibility has been shortened by Google to just A11y, and it means that sites should be available to everyone, they are sites that are available to anyone, anywhere at anytime on any device. It is interesting to note that accessibility, simply put, is to make the site easy to use for everyone. Users may suffer from a broken wrist, a broken trackpad or just be on a shaky train, either option means a certain difficulty for the user to take advantage of the web. Google uses WCAG (Web Content Accessibility Guidelines) do deliver their content with high importance on access with some countries using their rules as a legal requirement for websites. Use this checklist to ensure the website is WCAG approved;

screencapture-webaim-org-standards-wcag-checklist-1478805723435.png

 

FOCUS

Input via the keyboard is vital, a user should be able to browse an entire website using the tab, arrow and enter buttons.

 

REFERENCES;

http://webaim.org/standards/wcag/checklist

Essential Areas;

Keyboard Navigation

 

Google’s Arts & Cultures App

Google created a service for learning about arts and cultures online. It is a fantastic tool to learn about many of the different categories from ‘Artists’ to ‘Historical Figures’.

The homepage introduces the user to the site with a banner image explaining the site, and gives them a ‘Daily digest’ consisting of intersting subjects.

Screen Shot 2016-10-23 at 19.35.59.png

Along the left tab you have partners, who are the people responsible for providing Google with the content;

screen-shot-2016-10-23-at-19-37-48

Once you have selected the subject you want to look at, the site gives you a description along with the different exhibits about that subject;screen-shot-2016-10-23-at-19-39-59screen-shot-2016-10-23-at-19-40-21

Once an exhibit has been chosen, the site uses images and text to portray information about the subject to the user, as can be seen below;screen-shot-2016-10-23-at-19-40-42screen-shot-2016-10-23-at-19-40-46

Artists are shown similarly with a slight difference. The artists are listed alphabetically or by a time format in a timeline.

screen-shot-2016-10-23-at-19-47-31screen-shot-2016-10-23-at-19-47-47

Again, selecting a specific artist allows you to read a short description about them and then also view their work.screen-shot-2016-10-23-at-19-50-16screen-shot-2016-10-23-at-19-51-11

The same is shown also for Hostorical Events and Public Figures as shown below;

screen-shot-2016-10-23-at-19-57-38screen-shot-2016-10-23-at-19-57-30screen-shot-2016-10-23-at-19-57-12screen-shot-2016-10-23-at-19-56-51screen-shot-2016-10-23-at-19-53-11

screen-shot-2016-10-23-at-19-59-34screen-shot-2016-10-23-at-20-00-28screen-shot-2016-10-23-at-20-00-36

What is very interesting is the places section is broken down into popular areas that can be explored inside by looking at images, 360 degree videos and documents about the area.

screen-shot-2016-10-23-at-20-02-07screen-shot-2016-10-23-at-20-02-17screen-shot-2016-10-23-at-20-02-25screen-shot-2016-10-23-at-20-02-29screen-shot-2016-10-23-at-20-03-07screen-shot-2016-10-23-at-20-04-01screen-shot-2016-10-23-at-20-04-06screen-shot-2016-10-23-at-20-05-13

What is also very interesting is the Google homepage advertised a specific part of history on their homepage with a link to their cultures site, this was interesting to note as it enticed a large demographic of users into the service. Featuring certain days on the homepage of my site could do exactly the same thing.

google

The site was also fully optimised for mobile;

screenshot_20161023-201415screscreenshot_20161023-201404

Googles’ Research Workflow

I thought it would be really important to look at ghow Google researches its’ projects and the how the different stages can be seen throughout the projects. This is something I plan to use in my project. The different stages are;

  1. Setting up the challenge statement. This will be something you need to come back to during the research and development stage to keep you on track, it will sometimes need updating.
  2. Internal Interviews with the people in the process of the development of the service, to see how the internals work and how it can be improved.
  3. Present the idea to a group and get feedback. Use the comments to continue further within the R&D.
  4. User interviews are important as they allow discovery of the likes an the dislikes of the current services available to them.
  5. Create a project map like the one below to show the different user journeys a user may take, it allows you to eradicate an issues before building.project-map
  6. Crazy 8- A method used my google, setting a time limit of 20 minutes, create 8 different designs for the interface. Present these to a member of the team and get them to vote for their two favourite designs.
  7. Sketch the final design based off the previous stage.
  8. Storyboard the experience, make sure to include ways the user could diverge.
  9. Create a working prototype of the experience
  10. Get your target audience to test your prototype and provide feedback
  11. Adjust the design based on feedback
  12. Repeat step 10.
  13. Repeat step 11.

Attending Google Polymer

 

Google Polymer project held an event in London to learn about Polymer and meet other developer. It was a fantastic experience, where there was lots of information about new technologies and ways to develop.

Arriving at the venue, the branding was everywhere, and it was possioble to find the venue by simply following the crowds of people from the station.IMG_1144.JPG

I was to go to the main desk where I checked in, collected my pass, shirt and was directed to the breakfast lounge.

IMG_1145.JPG

Arriving early at 8AM breakfast was served, this was free and seats were provided around the venue in a typical Google fashion, it encouraged conversation between developers. It was fascinating to meet professionals much better than I had ever expected.IMG_20161017_0844219.jpg

4f295292-b944-49a8-af75-524d16fe65ef.jpg78a26f76-a3aa-44bb-a42b-5782265c1025.jpgIMG_1146.JPG

It was at this point people were discussing what the days events were going to be able what they were most looking forward to, people were crowding around these moniters, checking out the days itinery.IMG_1147.JPG

At 9AM the doors opened and the opening speech began, luckily I managed to get one of the front row seats.IMG_1155.JPGbut looking back there were the 700 attendies from over 100 different countries.img_1156img_1157I spent the day watching talks on cutting edge web technologies.img_20161017_1100091img_20161017_1814150img_20161017_1013256I also attended workshops where I would get involved with coding apps.8a37397f-7474-4e9c-bafe-3216be405a94.jpgWhen the days coding was over, Google had an open bar with free drinks and food to allow for conversations between coders.img_20161017_1905222img_20161017_1843083img_20161017_1843134