squiz iuc 2010 - afao - delivering a succesful design
DESCRIPTION
Squiz International User Conference 2010TRANSCRIPT
![Page 1: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/1.jpg)
Developing a designp g g
The AFAO Website Redevelopment
![Page 2: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/2.jpg)
About AFAOAbout AFAO
![Page 3: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/3.jpg)
![Page 4: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/4.jpg)
The working groupThe working group
• Five staff representing the three main teams at AFAO• Five staff representing the three main teams at AFAO –Education, Policy and Admin
• Members / stakeholders were invited but not interested in being involved – it was too big a time commitment
• The group met regularly while developing the design b i f th t i til h d t t t h i ibrief, then not again until we had to start choosing images for the site build.
• I also had additional meetings and brainstorms with the gCommunications Officer.
• Executive Director delegated authority to the group.
![Page 5: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/5.jpg)
How to brief the designer?How to brief the designer?
“Th AFAO l b di l d i h“The AFAO logo must be displayed in the banner, but in all other respects a complete refresh of current visuals is required We arerefresh of current visuals is required. We are seeking a clean, simple, contemporary design.”g
![Page 6: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/6.jpg)
Developing the briefingDeveloping the briefing
I f ti d t l t th d i• Information you need to supply to the designer– Information Architecture
• Wireframes navigation sitemapWireframes, navigation, sitemap
– Major influences on your design• Style, brand, competitor sites, target audience
– Design Specifics• Colours, fonts, images, animation
Technical Issues– Technical Issues• Screen resolution, tools, accessibility
![Page 7: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/7.jpg)
What we wantWhat we want
clean easy to navigateclean easy to navigateauthoritative reassuring up to date
innovative trustworthyinnovative trustworthy‘rooted in real lives’ clear
t ibl accurate accessible mature, not conservative human
li ht l tt d warm light uncluttered balanced optimistic
![Page 8: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/8.jpg)
What we don’t wantWhat we don t want
• corporate• corporate• cold• modular• modular• dark• dour• dour• funky• busybusy• animated menus • too many competing moving graphicsy p g g g p
![Page 9: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/9.jpg)
Things we likeThings we like ….
![Page 10: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/10.jpg)
Choosing coloursChoosing colours
http://www.colorcombos.com/
![Page 11: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/11.jpg)
![Page 12: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/12.jpg)
![Page 13: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/13.jpg)
![Page 14: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/14.jpg)
![Page 15: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/15.jpg)
Some feedback on our proposalsSome feedback on our proposals“I really like the blue green orange one I think it makes itI really like the blue, green, orange one. I think it makes it
bright and engaging and still allows for some warmth and other tones that can be used for highlights etc. I like the blues one as well, though I don't think that allows for the , gcontrasts/ highlights that the blue, green, orange one does.”
“I'm not particularly fussed either way though I do like the softer colours.”
“Definitely charcoal and brights is my choice, earthy and expressive!”
![Page 16: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/16.jpg)
Decision timeDecision time
C l t d d i b i f• Completed design brief• Meeting with Squiz• Consider functionality• Still trying to decide on colourStill trying to decide on colour• Conservative or ‘out there’?
t d i k= two design mockups.
![Page 17: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/17.jpg)
![Page 18: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/18.jpg)
![Page 19: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/19.jpg)
Surveying the membersSurveying the members• Which concept do you prefer? (Tick 1 only)Which concept do you prefer? (Tick 1 only)
– Concept 1 – Concept 2 – chocolate – Concept 2 – light background
• Did you prefer this concept with or without the AFAO logo? – With– WithoutWithout– Indifferent
• Name 3 things you like about your most preferred option
• Suggest 3 improvements or changes that you think might make the concept better
![Page 20: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/20.jpg)
Nearly thereNearly there …
C lt ti ith t k h ld• Consultation with stakeholders• Review design options• Choosing the best of both• Tweaking, tweaking ….Tweaking, tweaking ….
![Page 21: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/21.jpg)
![Page 22: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/22.jpg)
![Page 23: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/23.jpg)
Lessons learnedLessons learned
l lik f l i l d d• People like to feel included• Design is a fun way to engage people • If staff weren’t engaged with the website before this• If staff weren t engaged with the website before, this
could be a way to get them interested.• Be clear about the time commitment• Know the culture of your organisation & work with it• Structure stakeholder involvement around
i i lorganisational events– E.g. Give regular updates at staff meetings
• Having a side-kick helps a lotHaving a side kick helps a lot
![Page 24: Squiz IUC 2010 - AFAO - Delivering a Succesful Design](https://reader033.vdocument.in/reader033/viewer/2022060119/558ecd9c1a28abec7e8b45fe/html5/thumbnails/24.jpg)
Feedback on the processFeedback on the processI thought the process was really well done. There was consultation from theI thought the process was really well done. There was consultation from the start, but without huge time impositions. The times that did take longer were done in a way so people wanted to engage with the process and contribute. –Ben, staff
I am glad to have had the opportunity to have a saying in how the website of the organisation for which I am working is going to function and look like. I am also glad that I had an opportunity to learn how complex the website redevelopment process is. – Danica, staff (design working group)
I found the AFAO website development project process engaging and consultative - from the formative early development consultations and then later in the design phase. The process was participatory (inviting) with clear
i i d j l i Fi AFAO bcommunications and project clarity. Fiona, AFAO member