Final Homepage

Below is the final homepage of our site.  The design and look of the site is consistent throughout having a desired look of it being sketched/drawn.  This fits in with the product and what it is about creating a feel and look that we desired from the start when planning the project.  The background and stage with the shadow provides an effect of the drawing stage being raised.  The logo has a friendly welcoming look to it having the smiley face incorporated into it.

Evaluating / Testing

Throughout our testing and evaluating we have always took on board what has been said negative or positive and used it to our advantage in creating a product that the users are happy with.
We have strived to improve our product along the way with the testing sessions being very valuable to us.

For our final testing we should a Graphic Design Teacher who only had good things to say about the product.  He thought the design and layout of the product had been well though through taking into account what the product is about and how we sell it to people.

He thought the fact that the output of the image size being small was a bonus for when being used in Schools to storage issues on networks.  Also the ability to add to pictures once you have completed them was if you had drawn a dog you could add a dog house behind it or a bone and a bowl.
He recommended that more categories of images would allow for a wider target audience.

The drawing stage looks good with the applied shadow and works really nicely with the background now it has been lightened.

One thing that was of very importance to us was a comment made about the step by step function as the bottom of the screen, he said he sometimes forgot what step he was one and that it would be useful to notify the user in some way of which stage they are actually working on.  We took this on board and made the change which darkens the step the user is currently on.

The images for the people category look stretched. I will resize the images to look better

All the feedback has been vital and critical in the way our finished product stands today, without it we wouldn't of been able to of produced such a brilliant product.

Our product has been tested on PCs, Apple Macs and laptops, on a range of browsers such as Mozilla Firefox, Internet Explorer, Google Chrome and Safari.

We have tested the product using the following peripherals -
- Mouse pad
- Mouse
- iPhone
- iPad
- Bamboo tablet
- Smartboard / Interactive board

Website entrance

We thought long and hard about how we wanted the website to start when its loaded up.  I didn't want the site to just appear with all the contents so thought it might produce a nice effect if the panels came in one by one with buttons flying in providing the site with some animation that young users would enjoy and appreciate.  We decided we would also use a pre loader for the opening of the site, this being the Skoodle logo but having it go through 100%. i.e. Sko1odle, Sko2odle and so on till when it got to 90 then the site would load up on 100%.
The final entrance of the site we decided on is as follows, the pre loader starts then once at 100% the Skoodle background appears, the top panel comes down with no buttons, then the left panel slides out with the tools in place though.  After that the buttons appear on the top panel in colour, the white stage on which to draw on then the Skoodle logo comes from of the top of the screen with a nice effect of the eyebrows and mouth bouncing. Finally the buttons on the top panel change to the colour grey in which they are until rolled over or selected by the user.
This works really well and we have received some good feedback on this sue to the fact that it provides a nice fluid entrance with its animation.

Pre loader

We decided that we would use a pre loader on the entrance to the site which would have the percentage going up in the middle of the skoodle logo.
Another area that we identified that would require the use of a pre loader was in the image bank menu when the images loaded up.
I designed an egg timer in the same style as to which I had produced all the other buttons and icons and then created the loader in flash.  This may also be used on the loading up of the actual larger images on to the drawing area, depending on the sizes.

Final update of buttons and tools

It was very important for me being in charge of the design and layout of the product that all the buttons and tools were consistent throughout the product having the same sketched effect look to them.  I had already designed and produced all the icons for the product but noticed that when they were in place some just didn't look like they were part of the same product not having the same consistency as others.  In total I have probably drawn over a hundred buttons to get the desired look that I was completely happy with.  

Below are the final images for the most recently changed icons and tools that are used in the product.

 

Evaluating / Testing

We our now nearing the end of the project and feel not too much more testing / evaluating with people will be required.

This testing session involved adults from the area and staff from a local Secondary School.

Feedback:

The tool tips were useful though could of appeared quicker.

The design of the site having the sketched effect looked went down well with the users.

They thought the product worked really well providing a great way for people to learn to draw.

The text on the information page needs to be speeded up slightly.

The pre loader on the image bank is viewable for some reason over the images even when they have loaded up.

The clear tool when pressed once can be pressed and pressed until the user is bored of pressing it, basically the warning message will appear however many times the button is pressed and the user will have to select no on them all which will not be a good advertisement for the product.  This will be solved with some coding.

The PE teacher was really impressed with the product and the outcome of the picture though it wasn't neat and perfect you could see what it was and a great way of learning breaking things down into manageable sections.  He said his son would love to use the product and benefit from it.

The feedback in general for this session was excellent.

Image Bank Menu

The image bank menu (shown below) I created using Photoshop and through sketches I had drawn and scanned into the computer then manipulated using Photoshop.  The arrows and cross I again had drawn and scanned in then manipulated them in Photoshop.  The user will use the arrows to scroll through the categories which have been split up into three like shown in the image below, animals, animals 2, animals 3.  This allows the user to scroll through a smaller number of images rather than having to go through all twenty at once.  A roll over effect is applied to the category boxes, they outline enlarges.

Below shows the images layout, which co-insides with the image bank menu.  Having consistency throughout the menus is important to the look and design of the site, all are fluid going from one to another with just the contents changing.  The outline of the menu and the cross stay in the same position as the previous menu, the arrows are now located on the sides allowing the user to scroll right and left throughout the images. The box outline enlarges when roll over providing the user with more interactivity.

When you select the image you want the following message appears warning the user of what will happen and do they wish to continue.  Again I have been consistent with the design and menu never actually changes just the contents. 

Step by Step

The step by step option was originally located under the assistance tool when the user selected the assistance it then appeared underneath the tool.  We altered this due to the fact that we wanted the step by step function to be available to the user at all times when they were drawing as this is the main feature of the site, allowing the user to draw in six easy steps that they are comfortable with.  We added a nice animation to the steps so that once the user selects an image to draw they appear at the bottom of the drawing area one by one as if they are walking on to the screen.  As you can see there are two other buttons located either side of the steps, these are an exit button allowing the user to remove the image they are drawing for good and will be prompted by a message to warn them.  The other on the left hand side is a re-size tool for the image, this allowing them to make the image they are drawing smaller being able to place it in a corner or to the side so they can draw the illustration without tracing it.  As you can see there is a slight tint/glow to the buttons so if they appear on the background due to the size of the users screen resolution.

Evaluating / testing

Through our testing sessions in schools we had gained some valuable feedback from users as to what their thoughts were about the product.
The following users had tested the product -
Primary School Children
Secondary School Children
Adults
Teachers
College Pupils

The evaluating and testing of the product from other users has been extremely valuable throughout the production of the product.  Its played a vital role in how the product has been shaped along the way with the feedback always took on board and worked on as to how we can alter, modify and improve the areas that we have been made aware of.

This testing session involved 10 pupils half from Secondary School and the other from College pupils also an ICT Teacher from the Secondary School.

Feedback:

It was mentioned the site could have an exciting start up rather than just everything in place.  We will look into creating some animation of the site for when appearing on the homepage.  Panels and buttons flying into place possibly.

Animation of the menu was brought up as not much really goes on. We will look to incorporate some roll over effects to the menus and images.

The children liked being able to alter the colours of the panels, having the freedom to do that gave them a feeling of being in control, that they could be different from their friends having a different colour.

The ICT Teacher thought the product worked really well allowing the pupils a way of learning how to draw in a pace that suits them.  The grid tool was something that he liked being able to resize the picture and using the grid area to draw like you do when painting by numbers.

The feedback in general for this session was a major improvement on our previous testing.

Background and drawing stage

The drawing stage we decided would be restricted to a size of 800x600 allowing us not to worry about the re-sizing issue that we came across.  We wanted a background to the stage so that if the users had the browser maximised then it wasn't just white/blank where they couldn't draw on or interact with so we decided to incorporate a background.  Nothing too extreme or fancy as we didn't want it drawing the users attention away so we used the Skoodle logo and put it on an angle as you can see below.  It works really well with the colour of light grey behind it.  We added a shadow to the drawing stage which provided a look that worked really well as if it was raised.

Completion of all Illustrations

All illustrations have been completed, each one consists of six images which when all are drawn they complete a full illustration.  There are sixty images, with six drawings to each making 360 in total.  To add to these I have also included a smaller version of the final drawing which will be used in the image bank menu where users choose the one they want to attempt to draw.  This has been a lengthy process but I'm extremely pleased with the final outcome of all the drawings.

Information Page

For the information page I wanted create something different so it wasn't just text that appears like any other site.  As the page opens I wanted it to stand out and provide some anticipation even though it is only text appearing.  I wanted to keep the amount of text to a minimum on the site so I wanted something that would excite or engross our target audience as the site required an information section.  I produced this using Adobe After Effects.

Testing/Evaluation

I had organised an hour at a local Secondary School where I could test the product with several pupils and staff members allowing us to gain feedback that we could use to our advantage to improve the product.  I showcased the product with pupils from years 10 & 11, allowing them the opportunity to play with the site and give us some much needed feedback as to how we could improve it and what features worked well.
The feedback from the pupils was mainly positive yet some areas they came across that they felt we could improve on.

Animation was an area that was mentioned, not enough interactivity though we had added more from our previous testing. (Logo, eyes following you and the eyebrows and mouth jump when rolled over. Also the tools were interactive when rolled over)

The trace tool took away the learning aspect of drawing.  This will now be removed due to users pointing this out as something they wouldn't use.


The step tool wasn't needed in the assistance area. The step by step tool will now be placed at the bottom of the screen.


Feedback on the design and layout were good, even though I was still unhappy with the appearance of certain buttons no negative feedback was received.