Typefaces for corporate brands

Here is a really useful website i found with the 60 best typefaces to use in design.

It gives you an example and a detailed description of each of the 60 fonts and also where to use them.


http://www.smashingmagazine.com/2008/03/20/60-brilliant-typefaces-for-corporate-design/

Group testing results

We decided to collate all results we did have today, so that this wouldn't be done last minute before hand in, reports needed to be done still so it was ideal to produce graphs in the last group session before hand in.

A list of devices tested:



Blackberry Curve 8520
HTC Desire S
HTC Desire
HTC Unknown
Nokia 6700 Slide
Blackberry Torch
Samsung Wave GTS8500
Apple iPhone 3G
Samsung C3050
Samsung GTS3100
Apple iPhone 3G
Apple Iphone 3GS
Samsung Unknown
Samsung Galaxy S
Blackberry Bold
Blackberry Torch
Samsung Tocco Lite
HTC Magic
Samsung Galaxy S
HTC Desire HD


Below are the graphs produced:





With a rating of excellent being 5 and poor being 1, for quality of navigation, image and information the average scores we received were high, suggesting the site performed quite well across a range of devices.





Above are the individual results for the image quality, no one rated image quality below 3, which was an average score, which shows image quality across a range of devices looked good, however could still be improved on.





once again for this we received no score below average: 3 the quality of information was generally rated high by our testers.




The age of a person tallied against internet usage showed trends of younger users accessing mobile internet more than older users, however there are anomalies in this, a 61 year old for example accessed her mobile internet very regularly, both through iPad and iPhone.





Looking at this it would suggest than men use the internet on their mobile devices more than females, however we just tested 20 users, so this may not be the case at all.







Again results weren't below the average rating of 3, which shows navigation as a whole across a range of devices worked well.





We tested on a range of devices.










The above graph demonstrates how many users answered yes and no to a set of questions, to see how compatible our website was across a range of devices, and the site seemed to perform well.

Email to client 8/12/11 and positive response

Once everyone had amended their pages and we were happy with the outcomes, we emailed our client to let her know we had met her requirements...

Hi Gilly,


We have amended all of the pages as per our previous email so everything should be looking clear and consistent now.


Feel free to take a look at the updated version


http://jakesidsmith.com/towner-mobile/m-home.html


We hope you are pleased with the outcome


Regards,


Towner Mobile Team

Also attached is our reply from the client...

Hi all

Looking great! Thank you so much for making all of those changes, and for clarifying on the remaining points – I hadn’t realised that changing the homepage icons would be such a big job so of course would not expect you to do so at this stage!

I just have one final concern re the map – could you recheck the quality of this? (Helen and I have both checked on our phones and it’s not coming up as crisp and clear as we would like)… And we do really need to add the train station back on as integral to wayfinding – we don’t need the words ‘Eastbourne train station’ but definitely the railway symbol – would you be able to put this back in? (If it would also be possible to remove the word ‘Towner’ from the logo as this is illegible at the size of the map, i.e. so that the logo is just block colour, that would be great – but don’t worry if this is too time-consuming, I can do another time).
Could I just also check that I will be able to edit all link texts and headers?

The site is looking really fantastic, I am so impressed with your work! It’s very clear and easy to navigate which will make on-the-go access so much easier for smartphone users. I really like the way you have referenced smartphone design / user interface and incorporated this into the site, which means it sits seamlessly alongside other phone applications and feels very natural to navigate on a handset. You’ve achieved a good balance between text and image, with the well-designed icons and quality images making it very visual and simple to ‘read’ at a glance, without sacrificing loading times or accessibility. It is really a joy to navigate around!

I’ll ask some of our staff to take a look and give you their feedback too.

It would be great to have access to the site soon so that I can get used to working with and updating it – then we should be good to look at getting it online!

Many thanks,



Gilly

I then instructed Harry to make the amendments to the map as requested by Gilly.

We are really happy with the clients response. It feels so rewarding to be part of an exciting project where we are working for a real client and liasing with them to meet their needs. Then to have such positive feedback at the end of it all makes us feel very proud.

Mobile Phone Survey Results

Here the results that I have put together from my mobile phone surveys that i sent out. I felt it necessary to gauge what sort of devices were popular and what people use their mobile phones for. With this information in mind we would then have a better idea of what our user might want or expect from our website.

5 of our testers were males, 3 females

I wanted to make sure i covered a range of age demographics for varied results.

 I wanted to get an idea of roughly how many people had any mobility/visibility issues.

I discovered out of the people I tested there was a wide range of phones, this would be very useful to gain some good usability testing results. This represents the general population, there are a wide range of popular mobile phones in todays market.

most of my testers still prefer the older style QWERTY Keyboard, however the touchscreen device wasnt far behind, this is becoming ever more popular.

As i predicted, most people still own a pc, it is the most popular choice. 

The majority of the population do not use their mobile phones to browse the internet. The smartphone owners were the only ones who said they use their phones regularly to browse the net whilst 0% of the non smartphone users use their phones for browsing.

Out of the testers who said that they use their phones for browsing,  most used their phones for social networking, browsing websites and reading emails.

75% of the population have the ability to zoom in on their mobile phones, whilst only 2 of our 8 testers could not zoom in, these people did not have smartphones, one was a Samsung C3050 and the other was an iPhone. However other iPhone users i tested were able to zoom into content.

even more packaging design

http://dzineblog.com/2008/05/packaging-design-inspiration-part-ii.html

Mostly drinks and body lotions/potions but despite the fact that my product will be boxed i think there are some great examples to take inspiration from here.

more packaging design

More great examples of packaging design

http://www.thecoolhunter.net/design/The-Power-of-The-Box---Powerful-Packaging-Design/

Interesting Packaging designs

Just found this website which shows some pretty inspiring packaging designs. Some of the designs on here are so  well thought out.

It is extremely important to make your product stand out! Design is a huge part of that.

The success of a brand depends partly on how attractive it looks to potential consumers. If the design on the packaging looks bland people will be less likely buy the product whereas if something has a nice bright and cheerful design, it immediately stands out amongst the crowd.

It also depends what/who you are designing for. Think who your target market might be( if you dont already know). If your target audience is children, they tend to like colour, happy faces etc. Some of the designs on this site portray this well.



http://djdesignerlab.com/2009/12/16/60-industrial-products-package-designs-in-a-very-creative-way/

Usability testing results - individual

After sending out the usability test questionnaire I decided to collate all of the feedback received so far and put this data into bar graphs to display our results. I noted down some information on all the testers that i thought might be relevant when analyzing the data......

Tester ID	Age bracket	Gender	Phone
T1	31-40	Male	Sony Ericsson
T2	11-21	Female	Blackberry
T3	22-30	Male	iPhone
T4	50+	Female	Samsung c3050
T5	50+	Female	SamsungGTS3100
T6	22-30	Female	SamsungGTS8500
T7	11-21	Female	iPhone
T8	22-30	Male	iPhone

Below you can see the questions that were asked and the feedback that we received.....

i was extremely encouraged by the fact that all of my testers found it easy to navigate.

Tester Comments:-
Tester 1 on a Sony Ericsson said  it was self explanatory and easy to get about, especially with the menu button at the top.
Tester 5 on a Samsung GTS3100 said:- Loading time took 30 seconds, but i love the little boxes.
Tester 8 on an iPhone 3GS said:- The icons are clear and navigating back to the menu is easy.

all of my testers found the website self explanatory

Tester  Comments:-
Tester 3 on an iPhone 3G said:- The options are laid out well.

Only 2 of our testers could not see the menu bar. One of them (an iPhone owner) misread the question and couldnt find the menu bar. other iPhone users had no issues with the menu bar.

Tester Comments:-
Tester 3 on an iPhone said:- It displays strangely - part of the word "Menu" is on top of a grey logo with a white arrow on it. It makes the word "Menu" hard to see.

On some devices the images were very blurry. Users on a Sony Ericsson, Blackberry and iPhone reported issues with image quality, so this is something we will need to look at improving.

Tester  Comments:-
Tester 2 on a Blackberry said:- Images could be a little sharper.
Tester 3 on an iPhone said:- Yes, they are well proportioned and clearly displayed.

There was an issue on iPhones with zooming in on data. only one of the iPhones I tested on  would zoom in on content. This is an iPhone issue rather than a website issue. The only other phone that wouldn't zoom in was the Samsung GTS3100. The tester however reported that the text and images were a good enough size so that zooming in shouldnt be needed,

The Menu bar functioned on all devices except for the Samsung  GTS3100,   It was also this phone that had the problem with zooming on content.

Tester 5 on a Samsung Wave GTS3100:- Had to use back button on phone to go back.

All the icons functioned properly regardless of which handset the tester was using.

All of my testers reported that the text was of a readable size without them feeling the need to zoom in.

The text was not displaced on any of the devices that were tested

My testers all reported that they could find the buttons that they needed to take them to their desired page.  Making the page names/icons appropriate is a big part of ensuring that the user is never confused.

Tester 1 on a Sony Ericsson:- Yes everything was fine but was a little harder and took a little longer than expected.

Only one tester reported that they thought the website didnt give them sufficient feedback.  They said that they were not sure how to go back to the previous page

Tester Comments:-

Tester 1 on a Sony Ericsson said:- It took me where i wanted to go and gave me options within that.

Tester 2 on a Blackberry said:- Yes, the headers on the pages are self explanatory.

Tester 3 on an iPhone 3G:- The site is laid out well, so you can easily access the things you are looking for. You dont need to go searching around to find things.

Tester 5 on a Samsung GTS3100:- Not sure on how to go back to the previous page, otherwise, very good.

Only one tester felt confused at any point of the process. This was because they weren't sure where they were headed to when they pressed the classic site button. 

Tester comments:-
Tester 5 on a Samsung GTS3100 said:- Blue hard to read, appeared to blend visually with blue motif

Everyone said they knew how to rectify a mistake should they make one. 

In general, everyone found the layout very clear and concise.

Tester 8 on iPhone 3G:- It was good though I didnt understand why there was a map in the contact info and only a link in the visitor info page.

My amended pages

Find out more

The only change I made to the About us page was to remove capital letters from 'out' and 'more'

I also edited into the code so that the link associated with the button opens in a new page.....

<p class="highlight">To learn about the history of Towner or the various other opportunities that it provides, please press below to head to our main website.</p><div id="findoutmoreIcon"><a href="http://www.townereastbourne.org.uk/about-us/our-story/" target="_blank"><img src="images/findoutmore.png" /img></a></div>

Join Us

I simply changed the code on this page so that the word 'exhibitons' and 'shop and cafe' linked to those pages on the mobile website.....


<li>Unlimited free entry to Towner paying <a href="m-exhibitions.html"><u>exhibitions</u></a></li>
<li>Discounts in Towner <a href="m-facilities.html"><u>shop and café</u></a></li>

Job Roles 2/12/11

After deciding what would be amended on the site, it was my job to split the amendments up accordingly. It made sense for everyone to amend the pages they had designed and coded...

Harry - Map, Exhibitions, Events
Emma - Visitor Information, Getting to towner, Parking, Facilities, Community
Chris - About us, Join us
Jake - Contact us, Update website once all amendments have been made

Email to client 2/12/11 - amended pages

In our team meeting we went through all the amendments on the email that the client had sent us. It turned out that most of these could be made fairly easily, it was just a case of re-wording links or fixing broken ones. However they did want us to move the icons around on the homepage because when they tested it on their phones they had to scroll down a little to see the bottom 3 icons. They wanted us to swap over the bottom and middle row of icons so that the middle line showed 'About us, Contact us, Classic site' and the bottom line showed 'Community, Mailing list, Join us'. To do this would have involved too much time and wasnt really necessary as scrolling is something everyone has to deal with when viewing a website.




Below is a copy of the email that we sent back to the client.....

Gilly,



Thank you for your email, we have considered all the amendments you wish to make. Most of them are fine and can be changed easily.



Getting to Towner, Parking, About Us, Exhibitions, Community, Join Us

All changes can be made



Map

Yes that’s fine we can add all the details back on to the map no problem. We can also link the page so that when you click/touch the map it takes you google maps website and providing you have the app installed it will open a full sized map.



Visitor Info

Link to visitor info in RHS would not work on the menu bar because of the way the site is structured.

As there are already 2 links back to the visitor info page on some pages and at least 1 on other pages.



Facilities

We shall add in an image here for you. You can change this when you have control of the website if you so wish



Events

We will make the changes as requested.
The image on the page could be changed and moved around.



Contact us

We can make all the amendments here. The header image can be arranged so that nothing gets cut off. We can also link the email addresses to the persons preferred email app but this might not necessarily work on all phones.



General

With regards to the icons not quite fitting on the homepage, this will not be the case on every phone, this is down to the web browsers settings on a mobile.



You will be able to make changes to the footer when the website is passed over to you.



NB

We would not be able to resize anything on the website as it would not meet web standards and would therefore affect our overall mark for this project. Also, having to move the icons around on the homepage would require almost a complete overhaul of the website structure and unfortunately we do not have the time to undertake this.



We hope that the majority of the outstanding issues have been resolved,



Regards,



Towner Mobile Web Developers

Agenda for Lesson on 2/12/11

This my agenda that I set out to be done in lesson.....

1. Team meeting to discuss email from Gilly regarding the amendments she wants us to make

2. Decide what amendments are to be made and divide them up amongst the 4 of us.

3. Run any amendments past Jon

4. Email Gilly

Usability testing with scenario

To be able to gauge peoples general reaction i worked out that i would need to sit down with some of my testers and go through the testing scenario that we had set out. This way i could see first hand how the testers coped with navigating through the system. I noted down their initial reaction to the website and any comments they made. It was also a good opportunity to identify any potential issues with the site display.


Tester 1 with scenario

Open the website and find out the opening times, then find out how to get to the Towner Gallery.
Knew which page to go to first to view opening times
Took rougly 30 seconds to load visitor info page

The tester commented on how they liked the tabs

Getting to Towner page took 1 minute to load completely.

After doing this find out what events are currently on at the Towner Struggled to work out how to go 'back' but clicked the 'T' of the towner logo
The drop down menu didn’t work but the tabs at the top of the page remain visible and can be used to navigate

Then check what the upcoming exhibition is
Found correct page fairly easily, page took a long while to load

Look up the contact details of the Gallery
Found the page very easily
Tester said the information is very clear
Page took about 3 mins to load

Then you become curious and want to find out more about the Towner, please select the page you would expect to find this information
Tester pressed the classic site button
After being notified of the wrong move, the tester then chose correctly and accessed the about us page
The header on the about us page had been chopped off slightly at the top.

In general the tester was impressed with the website and for someone who never uses their phone to browse the internet, they did extremely well.
The phone is not a smart phone and not really the best device for browsing the internet on, however all the content was visible even if some things were
out of place.

Test was carried out on Samsung


Tester 2 with scenario

Open the website and find out the opening times, then find out how to get to the Towner Gallery.
Was initially impressed with the website layout
Said it looked very 'neat and tidy'
Hesitated for a second before cautiously selecting 'visitor info page'
Instantly selected 'getting to towner' after this
Everything displays fine


After doing this find out what events are currently on at the Towner
Pressed back button on phone which took them to the main menu.
I would rather them select the drop down menu but it depends what they prefer doing

Then check what the upcoming exhibition is
Navigated using the menu bar after discovering its purpose somewhat accidentaly
Headed to the right page
Page displayed correctly

Look up the contact details of the Gallery
Headed successfully to the contact us page via the menu bar
Liked the map


Then you become curious and want to find out more about the Towner, please select the page you would expect to find this information
Via the back button on their phone the tester scanned the options on the menu before saying 'I think its that one' and selecting the about us page.

The tester coped very well with each task. The pages were very quick to load and only stumbled when the signal in the room went down.
The test was made easier by the fact that the tester had a smart phone (iphone)





Tester 3 with scenario

Open the website and find out the opening times, then find out how to get to the Towner Gallery.
Website loaded quickly
chose 'contact us' page to view opening times
looked a bit puzzled but then hit the back button on their phone
found 'visitor info' and subsequently 'getting to towner'
Commented that the icons looked very nice.


After doing this find out what events are currently on at the Towner
Tester hit back button to head to main menu but then found events page straight away
Commented that the page looked well organised

Then check what the upcoming exhibition is
Tester again hit back button instead of selecting menu
Found exhibitions page very easily, page took a little while to load


Look up the contact details of the Gallery
Used menu to navigate to the next page
menu bar hesitated a bit before working
Tester needed to scroll down to reach contact us option

Then you become curious and want to find out more about the Towner, please select the page you would expect to find this information
Using the menu the tester paused for a second to think before selecting 'about us'
They werent sure wether or not to select this one or 'classic site'

All parts of the site worked well on a Blackberry, nothing displaced or cut off.




Tester 4 with scenario

Open the website and find out the opening times, then find out how to get to the Towner Gallery.
Website loaded fairly quickly
Tester commented on the nice colour scheme and overall layout, looks very easy to navigate
Was pretty sure the right page was 'visitor info' but had a feeling it might also be 'contact us'
Chose 'visitor info'
Instantly knew to select 'getting to towner'
Icons were a little slow to load and looked a bit pixelated

After doing this find out what events are currently on at the Towner
Selected the menu bar which then loaded rather quickly
Selected the events page correctly

Then check what the upcoming exhibition is
complimented the website on its ease of use when they successfully navigated the 'exhibitions' page via the drop down menu



Look up the contact details of the Gallery
Accidently hit the classic site button which opened the main website up In a new window
Accidently closed both down and had to re-load website which thanfully happened rather quickly
After a very brief hesitation the tester selected the 'contact us' page

Then you become curious and want to find out more about the Towner, please select the page you would expect to find this information
Knew it wasn’t the classic site option as this had ben opened by accident.
Eliminated the options one by one and selected the 'about us' page successfully

Test was carried out on an iPhone

Feedback from client 29/11/11

Our client got back to us with her list of amendments that she wanted us to make. Most of these were minor changes but other required much more time than we actually had. I decided that we would liase with our tutor in the morning of the lesson on 2/12/11 to discuss what changes we should make.


Below is a copy of the clients email...

Clarkson, Gillian
To sussexdownsclass@hotmail.co.uk



Hello!



I have gone through the site in thorough detail now and it really looks fab – you guys have done such an amazing job, thank you! Could you provide me with access to the site now so that I can take a look at the content management and make a few minor text edits?



I don’t have any major changes to make – the points below are all minor (so apologies if this looks like a daunting list, hopefully it’s really not!) – equally once I have access to the site I may be able to quickly update some of these myself (e.g. I would like to change the wording of some of the links, but I’m not sure yet whether they are entered manually or built in)… Let me know if any of this is unclear!



Map (on both ‘Getting to Towner’ and ‘Contact us’ pages)

Completely understand why you’ve taken a few details off the map to keep it simple and legible, but I think there are some we need back to add back in as the directions don’t quite make sense without them!

- EBC train station (perhaps just the railway symbol, if we can’t fit in the wording?)

- Theatres (because directions refer to bus stop next to theatre)

- P for College Road Car Park (as referred to in Parking)

- Memorial Roundabout (also mentioned in directions)

- (I agree that we don’t really need the Bandstand, but if we don’t have the word can we remove the circle symbol too?)

- NB As on the map on our website, you can take the word ‘Towner’ off the logo if it helps (to allow the logo to be slightly smaller)

(I also just wondered – is there a way to link this page straight to your Iphone / smartphone Maps app?)



Visitor information

If you can give me access to site I’m just going to change the text around a little and remove the subheaders, to hopefully get at least the first 2 icons visible when you open this page.

Navigation within this section – could we shorten the link text at the bottom of each 2nd level page to simply “Back to Visitor information”? Also, do you think we should have a “Visitor info” option on the RHS of the menu bar as well (only for the 2nd level pages)? – as on some of the pages you have to scroll quite a way down to get to the “Back to Visitor information” link – let me know what you think about this.



Getting to Towner

Address should be above map, written across one line (i.e. ‘”Towner, Devonshire Park, College Road, Eastbourne BN21 4JJ’”)

Under driving directions from London (above link back to Visitor info) – could we add “Information on parking” –> link to Parking page



Parking

Under last sentence (above link back to Visitor info) – could we add “Find out more about public transport to Towner” -> link to Getting to Towner page



Facilities

Can I add an image of the shop or café here? (probably in the middle of the page?)

Café information is repeated again under ‘Gift shop’



Exhibitions

Can we change ‘Read More >>’ links to ‘Read more >>’, ‘Current Exhibitions’ to ‘Current exhibitions’ and ‘Upcoming Exhibitions’ to ‘Upcoming exhibitions’?

Can we also change ‘View all >>’ links to ‘View all current exhibitions on main website >>’ / ‘View all upcoming exhibitions on main website >>’?



Events

Change ‘Read More >>’ links to ‘More details >>’

Change ‘View all >>’ to ‘View all events on main website >>’ and link tohttp://www.townereastbourne.org.uk/events/

Change title ‘Talks, tours & events’ to simply ‘Events’


Is the image on this page optional, and can I change where it appears on the page ?



Contact us

To minimise scrolling, let’s get rid of the headers ‘Phone and email’ and ‘Address’

Could we make the telephone numbers and email addresses just slightly larger for accessibility?

Can we move the opening hours above the map? (no header needed)

When I open this page on my Iphone, the bottom of the banner image is slightly cut off (as compared to when I view on the web) – this means one of Ania’s hands is slightly cut off, which impairs the sign language!

Is it possible for the email addresses to be links which automatically open in the person’s preferred email app when pressed? (I have no idea about this, so fine if not!).



About us

Change ‘Find out more’ to ‘Find out more’ (and do you think this link should open in a new page, as per other links?)



Community

‘Visit main site for more information’ link is not underlined as per other links – would like links to be automatically underlined (unless exhibition / event titles or icons)



Join us

‘Exhibitions’ and ‘shop and café’ links do not seem to be working?



General

When I open the site on my (old) Iphone, the bottom 3 icons don’t quite fit on the page so I have to scroll down a little to see them – will this generally be the case on the majority of phones? – if so, I think it would make sense to swap around the order of the icons in the main menu so that the middle line shows ‘About us - Contact us - Classic site’ and the bottom line is ‘Community - Mailing list - Join us’.

Will I be able to make changes to the footer – e.g. could I add a special announcement about Christmas opening times here (above the copyright)?



That’s all…



Thank you so much, speak soon!!



Gilly