Designing forEVERYONE, ANYWHERE, AT ANY TIME                        Anna Dahlström                       www.annadahlstrom...
“ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “
“ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “  Why
“ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “  Why     What
“ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “  Why     What    How
A bit of HISTORY     04     15     27     03     09     17
041527 June 2007030917
04 February 20041527030917
0415 July 200627030917
04152703 April 20100917
0415270309 November 201117
041527030917 May 2014
04 February 2004 | Facebook15 July 2006 | Twitter27 June 2007 | iPhone03 April 2010 | iPad09 November 2011 | IWE17 May 201...
Here is WALLYhttp://www.findwaldo.com/fankit/graphics/
Where is WALLY?http://www.findwaldo.com/fankit/graphics/
Everyone back THENwww.guardian.co.uk/world/picture/2010/jun/01/eyewitness-world-record-wally
Everyone TODAYwww.robotshop.com/blog/where-is-wall-e-1391
Devices back THEN
Devices TODAY
Location back THEN
Location TODAY
Journeys back THEN
Journeys TODAY
Once upon a TIME...http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/
Flat in VACANT POSSESSION
A secret HATCH
Unwanted WALLS
Building works STARTED
Then came the DUST
And new LESSONS
Completely new WORLDhttp://www.edexcel.com
A million QUESTIONShttp://www.northgeorgia.edu
With HIDDEN ANSWERShttp://www.northgeorgia.edu
Based on ASSUMED KNOWLEDGEhttp://www.etsy.com/shop/kylespears?ref=top_trail
Endless RESEARCH
Unmet Expectationshttp://keithmansfield.co.uk/2008/08/29/gone-fishing/
And Plan Bs ON THE GO
It was PAINFULhttp://www.tekspertise.com/
...but UNNECESSARILY so
1. EVERYONE2. CONTENT3. DEVICES
1.” Everything starts with the user “                               Steve jobs
Broader user                    basehttp://jhonman.wordpress.com
Broader user   More diverse                    base         needshttp://jhonman.wordpress.com
Broader user   More diverse   Compromised                    base         needs         experiencehttp://jhonman.wordpress...
2.  ” Serving up the same stalecontent to everyone is without a  question no longer enough “                    Said by Sa...
One to oneexperience
Who             WhereOne to one   Whatexperience   How             Where
Who             Where    ImportanceOne to one   What    & purpose ofexperience   How        content             Where
3.    ” Content needs to be  choreographed to ensure the intended message is preservedon any device and at any width “    ...
Behaviour                     isn’t                determined by                   locationhttp://desktopwallpaper-s.com/1...
Behaviour                              Physical                     isn’t                               context           ...
Behaviour                              Physical                                                                          E...
What does this all           mean                     ?
Designing for everyone,anywhere, at any time
Designing for everyone,EVERYWHERE, at any time
“ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “
DESIGN FOR EVERYONE         ≠DESIGN FOR NO ONE
How does it affect     what we do                     ?
Step 5                           User needs         Step 4                            Step 6         UX lifecycle         ...
Step 5                         User needs         Step 4                     Step 6         UX lifecycle             Busin...
Who out of EVERYONE       Where do I start?     I have a vague idea     I know what it should     I know exactly        & ...
Who out of EVERYONE       Where do I start?     I have a vague idea     I know what it should     I know exactly        & ...
Who out of EVERYONE       Where do I start?     I have a vague idea     I know what it should     I know exactly        & ...
Everyone & their NEEDS  Awareness   Consideration    Conrmation            Purchase       SupportWhere do I    I have a v...
Everyone & their NEEDS BUSINESS NEEDS• Ensure users arent lost   • Provide the user with a   • Feature user reviews   • Pr...
Everyone & their NEEDS USER NEEDS• Background information     • Clear route into the      • Reassurance that I     • Effor...
Everyone & their NEEDS KEY ENTRY POINTS• Search (to page)           • Search (to page)          • Bookmark               •...
KEY DEVICES• Laptop                     • Laptop                    • iPad                   • Computer                  •...
Action & Content PRIORITISATIONAction                                                        Content   Explore       Resea...
Action & Content PRIORITISATIONAction                                                        Content   Explore       Resea...
Action & Content PRIORITISATIONAction                                                        Content  Explore        Resea...
Page DESCRIPTIONSBaths                    Logo                 Header               Individual product     Logo           ...
Behaviour ACROSS DEVICES    Desktop/ Tablets                          Mobile       1                   2                  ...
Wireframes & MODULE LIBRARIESDesktop/ Tablets                                                  Mobile   1                 ...
But what about the timeline & budget                     ?
” Todays popular devices are not    tomorrows so building  something which works onany device is better than building  som...
Different               devices here to                     stayhttp://www.thebusinessartisan.com
Cost                  Different           of lost               devices here to      customers                     stay   ...
Cost                                      of lost        More                  Different                                  ...
” Money spent developing a  pretty but limited iPhone apponly benefits...the few, but money spent on the website UI would  ...
” Everytime you redesign   God kills a kitten “                  Wisely said by @louisrosenfeld
Thank you!                                                     QUESTIONS?                                                 ...
IWE - Designing for everyone, anywhere, at anytime
Upcoming SlideShare
Loading in...5
×

IWE - Designing for everyone, anywhere, at anytime

3,237

Published on

Slides from my Internet Week Europe talk

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,237
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
20
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n\n
  • I'm sure you've heard it, been told it and said it yourself. I certainly have - "Design for everyone and you design for no one"\nThe phrase has traditionally been used referring to that by including all the requirements of your different target audiences, stakeholders and the business you end up with a product that is trying to satisfy everyone and by doing so satisfies no one.\n
  • I'm Anna, I’m a freelance IA/UX designer and I'm here today to talk to you about:Why - the old saying doesn’t necessarily hold true any more\n
  • What - that means\n
  • How - we can address it and the ever increasingly complex and unknown world that we design for\n
  • \n
  • 27 June 2007 saw the first iPhone released and with that everything change. For the first time we were able to experience the web in our hands, the way the web was supposed to look \n\n
  • 4 February 2004 - Zuckerberg launched Facebook\n
  • 15 July 2006 - Twitter launched\n
  • 3 April 2010 - saw the first iPad\n
  • 09 November 2011 - It’s Internet Week Europe and the internet is everywhere. It's a 24-7 party and everyone wants to join in\n
  • 17 May 2014 - Apart from being the national day of Norway and the day I turn 35 we don’t really know what the future holds for us here\n
  • But a lot has happened in the last few years alone so it’s a pretty safe guess that a lot will happen in the next few years to come.\n
  • This is Wally. \nImage from http://www.findwaldo.com/fankit/graphics/\n
  • He normally appears in this type of pictures\nImages from http://www.findwaldo.com/fankit/graphics/\n
  • They were a bit like Wally. Everyone came in a few different disguises but we could fairly easily identify who our main target audiences were and what they needed\n\nImage from www.guardian.co.uk/world/picture/2010/jun/01/eyewitness-world-record-wally \n
  • Today everyone has changed. Where as the web was much more deterministic back “then” it’s turned animalistic and everything is up for grabs.\nWe have a more diverse user base with more people than ever online, each one expecting the internet to work for them and them specifically\n\nImage from www.robotshop.com/blog/where-is-wall-e-1391\n\n\n\n
  • Back then we could fairly easily narrow down\n\n what devices our users would be using to access the services we designed\n devices were limited, screen sizes and types of browsers more uniform and easier do develop for\n
  • Today browsers have multiplied and to add to that designing for different devices is the new designing for different browsers.\n
  • Back then we knew that users would be accessing our service, e.g. at home or at the office and with that their internet speed. \nSome times it would be on the go but for very limited tasks, mainly due to devices not being able to deliver the full experience\n
  • Today what we design can be access from anywhere and at any time\n\n\n
  • The journeys online are also slightly different. \nBefore it was much more limited how user would get to our sites and where they would go. \nMost arrived via the home page. \nPerhaps one or two landing pages were made for key searches\n\n
  • Today access and entry points have multiplied with the use of social media\nSearch is one of the key routes into the services that we design putting greater expectations on the pages we define as we no longer can rely on the home page providing users with the context they need\nAnd the means or route we take is less important. As long as we get there and find what we are after we’re happy and don’t mind if we’re taken on a side tour\n\n\n\n
  • Let me tell you a story\n\nImage thanks to @excomedia http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Image from http://www.etsy.com/shop/kylespears?ref=top_trail\n
  • \n
  • Image from http://keithmansfield.co.uk/2008/08/29/gone-fishing/\n
  • \n
  • Image from http://www.tekspertise.com/\n
  • \n
  • With the story of project flat in mind I’m going to tell you why it didn’t have to be so painful if the services online had been better designed and it has to do with the these three points.\n
  • \n
  • With more people online there is a potentially much broader user base and target audience meaning...\n\nImage from http://jhonman.wordpress.com/\n
  • ...more diverse needs, from tasks to the level of information they need, that we need to accommodate and cater for\n\nImage from http://jhonman.wordpress.com/\n
  • Having a solid understanding of who our users are, how and where they typically access the services we design and what they want from them becomes key in ensuring that we don't alienate certain groups or provide a compromised experience \n\nImage from http://jhonman.wordpress.com/\n
  • \n
  • Delivering content is a bit like being a waiter in a restaurant. You need to know the menu in order to present it to the guest and once they’ve told you what they want you need to keep track of where they are in their meal, who ordered what and what you should be serving them next.\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  • Our experience on the web often feels like a one to one experience. We know that we aren't the only ones using the Internet but when we use it we expect it to work for us, just like we expect the waiter to know what we’ve ordered.\n\nDelivering content is a bit like being a waiter in a restaurant. You need to know the menu in order to present it to the guest and once they’ve told you what they want you need to keep track of where they are in their meal, who ordered what and what you should be serving them next.\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  • Tailoring an experience for a user is based on knowing what that user wants:\nIt's about knowing who they are and where in their journey they are and what they need at that stage\nIt’s about knowing how they get there and where they want to go\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  • It’s about finding the right level of detail at the right time and in order to do this we need to have the importance and the purpose of each piece of content clear to us.\n\nImage from http://www.barbecoa.com/assets/images/food-menu.jpg\n\n
  • \n
  • Whatever device we hold in our hands the experience should be a positive and successful one. \n\nUsers are more and more accessing the web in the same way on their portable devices as they are on computers.Behaviour is no longer determined by location\n\nImage from http://desktopwallpaper-s.com/19-Computers/-/Future/\n
  • Previously we could assume, based on lack of devices that could provide the experience, that if a user accessed a service on the go it would be for a particular and quite narrow task. But that isn't the case any more. The physical context the user is in doesn't by default equal the task they want to carry out, meaning serving up different content just because they are on their mobile isn't always right\n\nImage from http://desktopwallpaper-s.com/19-Computers/-/Future/\n
  • Instead there is an increased expectation that we will have an equal and continues experience across and irrespectively of the devices that we are using.\nThe reason so many users click "desktop version please” is because they feel or worry they are missing out.\n\nImage from http://desktopwallpaper-s.com/19-Computers/-/Future/\n
  • \n
  • So when you look at designing for everyone, anywhere,at any time...\n
  • ...it really is about ‘everywhere’ and the increased number of devices being used anywhere and at any time. \n
  • So where as there of course still is truth in the old saying ‘Design for everyone and you design for no one’...\n\n\n
  • ...the changes that have happened in the last few years means that it has to be taken with a pinch of salt. \n\n\n
  • \n
  • If we look at a typical process it may look somewhat like this (shortened for illustrative purposes)In its basic form this isn't changed by the new landscape that we design for, but there are some additional measure that needs to be taken at the planning and defining stage to address and ensure we cover the different aspects that designing for everyone, everywhere, at any time poses\n
  • In the next few slides I’m going to talk through some ideas I have on how we can start addressing this in the steps highlighted. They are by no means the only way to do it but builds on tools that I use today and which I find work and which I believe with a slight modification can help us address designing for everyone, everywhere, at any time.\n
  • In the case of users wanting to buy a bath you can group them into these four groups\n1) The “Where do I start user?” who doesn't have a clue where to begin (that was me and D by the way)\n2) The “I have a vague idea” user who have done a bit of research\n3) The “I know what it should and shouldn’t have” user who, e.g. know that they are not after a steel bath because that’s too expensive\n4) The “I know exactly what I want user” who is ready to click ‘buy’ or hand over their credit card\n\n
  • From a business point of view it may be preferential to focus on the bottom two target audiences as they are the ones that is easiest to convert. \nBy only focusing on them you end up excluding or compromising the experience for the top two groups, which is what happened in our case. We weren’t taken care of. \n
  • Instead what you need to do as a a business, and what we should ensure happens, is that you also, in one form or another address the needs of the top two groups and broaden your focus so some light falls on your second or tertiary target audiences.\n\n
  • I utlise lifecycles a lot. For the given product or service I work on I start by defining the different stages of the lifecycle and what each stage means. . In the case of buying a bath I’ve used awareness, consideration, confirmation, purchase and support which map quite nicely with our four user groups that I defined in the previous slide. The start of the awareness stage sees the ‘Where do I start?’ user who as they move into the consideration stage turns into the ‘I’ve got a vague idea’ user. As they move through the consideration stage they form an idea of what the bath should and shouldn’t have (or be) for then by the end of that stage and in the purchase stage know exactly what they want.\n
  • Most projects are often initiated by the business coming with either a problem or something they want so let’s map what our fictive business has in terms of needs for the bath section of their site. \n\n
  • Now that we have the business needs clear the next step is to lay the user needs on top (simplified for illustrative purposes). Once that is done you start to have a good overview of both the user and the business side of things but in order to address the ‘designing for everywhere, at any time’ aspect there are two more aspects that we can lay on top.\n\n
  • The first one is the key entry points. Analytics and path analysis help us identify these patterns, or if you don’t yet have access to it base it on research. \n\n\n
  • The same thing can be done with devices and looking at traffic data. What device are users actually using the most at each stage? Once you’ve got this all mapped you have a summary view that not only is great as a reference point for the internal team but also to communicate diversity and complexity to stakeholders. \n\nNote. In real life I normally carry out start with the user needs and then move on to the business needs to ensure that the business have the user in mind when identifying what they need at each stage.\n\n
  • This framework is one I developed after having seen a talk at EuroIA in Amsterdam a few years back.\nIt’s simple and works great in stakeholder workshops by involving them in the process.\n\nStart by brainstorming actions and content that would go on a given page or in a given section. This should be done before the stakeholder workshop and can be based on an internal team discussion or kick off meeting with the client. \nType in the result of the brainstorm in a format as above and print out A3 or A4 version and give a copy to each of your stakeholders. \n\n
  • Provide them with a pen and ask them to circle the content they would like to see on the page/section and the actions that a user should be able to do (highlighted)\n\n
  • Once that’s done have a discussion about what they’d circled before getting everyone to mark the things, out of what they circled, that they think are the most important and critical to the project. Both from a user and from a business point of view (stars).\nDiscuss and then talk through what content and what actions that require a slightly different approach based on if the interface the user will be using is touch based or if it’s on a smaller device (white corners).\n\nThe end result is a visual overview which is easy to grasp both for the internal team to communicate the outcome of the workshop, but also for the stakeholders. And it becomes a great reference point up front for what will be different on touch or smaller devices.\n\n
  • It’s a preference of style but I start with doing page description diagrams before going into wireframing. It allows me to \n1) think through and get a holistic view of the content and get it organised up front before going into the detail.\n2) to identify patterns between pages and where modules can be reused and \n3) by writing down what the purpose of each page is next to the page description diagram it forces me to think and be clear on who it’s for and what it should be doing\n4) useful tool for responsive design and designing for multiple devices\n\n\n
  • Page description diagrams, whether done for mobile first or desktop version first (as in this case) give you an overview of the content that goes on each page and in each coloumn. \n\nNormal content stacking, used to identify how the content will behave and move when the screen size decreases often go by the rule of left column on the top, followed by the middle coloumn followed by the right hand coloumn, but that doesn’t always correspond with the importance of the content.\n\nThe first step in defining your content stacking strategy is to priorites your content (see the little numbers). Once that is done you’ve got a guide to how the content should adapt and in which order it should come in when the screensize changes. In this case you can see that the ad (5) was rated more important than the store locator (8) and the tools (9) and so was related products (7), but had we followed normal content stacking principles the ad and related products would have been in the bottom three modules when looked at on a mobile phone. \n\nWhether you’re a believer in responsive design and designing for mobile first, principles from both of these methods helps us prioritise content and serve as sound check points ensuring that we know why each piece of content is there and how, as Trent Walton talks about, it should be choreographed across devices (http://trentwalton.com/2011/07/14/content-choreography/).\n\n\n
  • I don’t believe we should or have to wireframe everything. It’s not always feasible or needed. \nWhen it comes to designing for multiple devices or doing responsive design it would be a nightmare if we had to do wireframes for each device and as for responsive design it would kind of defeat the point. \n\nIdentify key pages (as we do already) and key devices (if needed) and do wireframes for them. \nThen try to work at a modular level and whether you sketch it or do low fidelity module definitions, work together with design and development to identify how a module should change from the normal desktop version to the mobile version or vice versa. \n\nThe good thing about module libraries is that those can’t just be used to define content across devices but also to be re-used across pages, e.g. to provide the right content at the right time to the user using dynamic publishing or be contextual based on where the user is coming from.\n
  • \n
  • \n\n\n
  • Whether you believe in responsive design or not different devices are here to stay and we need to design for them, but more importantly identify how we design for them.\n\nImage from thebusinessartisan.com\n
  • Building a responsive site will require some additional time and money but that needs to be weighed up against\nthe cost of loss of customers\nthe cost and pain of doing 20 different wireframes/designs for each device\nthe cost of having to rebuild in the not to distant future\n\nImage from thebusinessartisan.com\n
  • Responsive design is not a linear process. We need to adapt new processes where we work more together, across disciplines and where we as IAs have a flexible toolbook that we can draw from and which helps us assess designing for everyone, everywhere at any time.\n\nImage from thebusinessartisan.com\n
  • \n
  • \n
  • http://www.flickr.com/photos/matterphotography/2739799786/\n\n\n\n
  • IWE - Designing for everyone, anywhere, at anytime

    1. 1. Designing forEVERYONE, ANYWHERE, AT ANY TIME Anna Dahlström www.annadahlstrom.com annadahlstrom
    2. 2. “ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “
    3. 3. “ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “ Why
    4. 4. “ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “ Why What
    5. 5. “ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “ Why What How
    6. 6. A bit of HISTORY 04 15 27 03 09 17
    7. 7. 041527 June 2007030917
    8. 8. 04 February 20041527030917
    9. 9. 0415 July 200627030917
    10. 10. 04152703 April 20100917
    11. 11. 0415270309 November 201117
    12. 12. 041527030917 May 2014
    13. 13. 04 February 2004 | Facebook15 July 2006 | Twitter27 June 2007 | iPhone03 April 2010 | iPad09 November 2011 | IWE17 May 2014 | ?
    14. 14. Here is WALLYhttp://www.findwaldo.com/fankit/graphics/
    15. 15. Where is WALLY?http://www.findwaldo.com/fankit/graphics/
    16. 16. Everyone back THENwww.guardian.co.uk/world/picture/2010/jun/01/eyewitness-world-record-wally
    17. 17. Everyone TODAYwww.robotshop.com/blog/where-is-wall-e-1391
    18. 18. Devices back THEN
    19. 19. Devices TODAY
    20. 20. Location back THEN
    21. 21. Location TODAY
    22. 22. Journeys back THEN
    23. 23. Journeys TODAY
    24. 24. Once upon a TIME...http://www.flickr.com/photos/excomedia/sets/72157622519563566/with/5233990438/
    25. 25. Flat in VACANT POSSESSION
    26. 26. A secret HATCH
    27. 27. Unwanted WALLS
    28. 28. Building works STARTED
    29. 29. Then came the DUST
    30. 30. And new LESSONS
    31. 31. Completely new WORLDhttp://www.edexcel.com
    32. 32. A million QUESTIONShttp://www.northgeorgia.edu
    33. 33. With HIDDEN ANSWERShttp://www.northgeorgia.edu
    34. 34. Based on ASSUMED KNOWLEDGEhttp://www.etsy.com/shop/kylespears?ref=top_trail
    35. 35. Endless RESEARCH
    36. 36. Unmet Expectationshttp://keithmansfield.co.uk/2008/08/29/gone-fishing/
    37. 37. And Plan Bs ON THE GO
    38. 38. It was PAINFULhttp://www.tekspertise.com/
    39. 39. ...but UNNECESSARILY so
    40. 40. 1. EVERYONE2. CONTENT3. DEVICES
    41. 41. 1.” Everything starts with the user “ Steve jobs
    42. 42. Broader user basehttp://jhonman.wordpress.com
    43. 43. Broader user More diverse base needshttp://jhonman.wordpress.com
    44. 44. Broader user More diverse Compromised base needs experiencehttp://jhonman.wordpress.com
    45. 45. 2. ” Serving up the same stalecontent to everyone is without a question no longer enough “ Said by Sam Quayle, Smashing Magazine
    46. 46. One to oneexperience
    47. 47. Who WhereOne to one Whatexperience How Where
    48. 48. Who Where ImportanceOne to one What & purpose ofexperience How content Where
    49. 49. 3. ” Content needs to be choreographed to ensure the intended message is preservedon any device and at any width “ By @trentwalton
    50. 50. Behaviour isn’t determined by locationhttp://desktopwallpaper-s.com/19-Computers/-/Future/
    51. 51. Behaviour Physical isn’t context determined by doesn’t equal location taskhttp://desktopwallpaper-s.com/19-Computers/-/Future/
    52. 52. Behaviour Physical Equal isn’t context & continuous determined by doesn’t equal experience location taskhttp://desktopwallpaper-s.com/19-Computers/-/Future/
    53. 53. What does this all mean ?
    54. 54. Designing for everyone,anywhere, at any time
    55. 55. Designing for everyone,EVERYWHERE, at any time
    56. 56. “ DESIGN FOR EVERYONE &YOU DESIGN FOR NO ONE “
    57. 57. DESIGN FOR EVERYONE ≠DESIGN FOR NO ONE
    58. 58. How does it affect what we do ?
    59. 59. Step 5 User needs Step 4 Step 6 UX lifecycle Business needs Step 3 Step 7 Key user journeys Competitor analysis Step 8Step 2 A few other stepsFormulating the vision incl. doing the sitemap Step 1 Step 9 Dening the target audience Wireframes
    60. 60. Step 5 User needs Step 4 Step 6 UX lifecycle Business needs Step 3 Step 7 Key user journeys Competitor analysis Step 8Step 2 A few other stepsFormulating the vision incl. doing the sitemap Step 1 Step 9 Dening the target Wireframes audience
    61. 61. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldnt have what I want
    62. 62. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldnt have what I want
    63. 63. Who out of EVERYONE Where do I start? I have a vague idea I know what it should I know exactly & shouldnt have what I want
    64. 64. Everyone & their NEEDS Awareness Consideration Conrmation Purchase SupportWhere do I I have a vague I know what it I know exactlystart? idea should & shouldnt what I want have
    65. 65. Everyone & their NEEDS BUSINESS NEEDS• Ensure users arent lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitors site services calls received Awareness Consideration Conrmation Purchase SupportWhere do I I have a vague I know what it I know exactlystart? idea should & shouldnt what I want have
    66. 66. Everyone & their NEEDS USER NEEDS• Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS• Ensure users arent lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitors site services calls received Awareness Consideration Conrmation Purchase SupportWhere do I I have a vague I know what it I know exactlystart? idea should & shouldnt what I want have
    67. 67. Everyone & their NEEDS KEY ENTRY POINTS• Search (to page) • Search (to page) • Bookmark • Home page • Search (to page)• Home page • Home page • Home page • Bookmark USER NEEDS• Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS• Ensure users arent lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitors site services calls received Awareness Consideration Conrmation Purchase SupportWhere do I I have a vague I know what it I know exactlystart? idea should & shouldnt what I want have
    68. 68. KEY DEVICES• Laptop • Laptop • iPad • Computer • Mobile• Mobile • iPad • Laptop KEY ENTRY POINTS KEY ENTRY POINTS• Search (to page) • Search (to page) • Bookmark • Home page • Search (to page)• Home page • Home page • Home page • Bookmark USER NEEDS• Background information • Clear route into the • Reassurance that I • Effortless • Easy access to and help & advice on where to products they are after have made the right completion of in times of trouble start choice their order BUSINESS NEEDS• Ensure users arent lost • Provide the user with a • Feature user reviews • Provide a store locator • FAQs that minimise the & converted on a comparison tool on the site number of customer competitors site services calls received Awareness Consideration Conrmation Purchase SupportWhere do I I have a vague I know what it I know exactlystart? idea should & shouldnt what I want have
    69. 69. Action & Content PRIORITISATIONAction Content Explore Research Conrmation Buy Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides User reviews Delivery basket tool What to look 10 questions to PriceFind out more Search Read reviews Locate store Store locator for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths info bath accessory products support
    70. 70. Action & Content PRIORITISATIONAction Content Explore Research Conrmation Buy Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides User reviews Delivery basket tool What to look 10 questions to PriceFind out more Search Read reviews Locate store Store locator for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths info bath accessory products support
    71. 71. Action & Content PRIORITISATIONAction Content Explore Research Conrmation Buy Background Background Tools Related Buying Bathroom Related Browse Compare Copy url Add to basket Types of bath Types of bath Our guarantee planner products Remove from Comparison Preview Filter Email Buying guides Buying guides User reviews Delivery basket tool What to look What to look 10 questions to PriceFind out more Search Read reviews Locate store Store locator for for help you choose comparisons Find contact Find the right Alternative Customer View range Find related Share About our baths About our baths info bath accessory products support
    72. 72. Page DESCRIPTIONSBaths Logo Header Individual product Logo HeaderThe purpose of this pagepage is to The purpose of this • educate the user Bath section intro Ad page is to Bath A intro on the types of • Provide an baths available Nav overview of the Nav • provide quick product access to specic • Present detailed baths information Ad • highlight offers & Types of baths Popular • Provide access to products Spec for bath A & popular products Store user reviews Store reviews locator locator Related products Tools Tools Footer Footer
    73. 73. Behaviour ACROSS DEVICES Desktop/ Tablets Mobile 1 2 1 2 Header Logo Header Logo 3 4 5 Nav Bath section intro Ad 4 Bath 5 3 section Ad Nav intro 7 6 Related Types of baths 8 Store products locator 6 Types of baths 9 Tools 10 Footer 7 Related products 8 Store 9 Tools locator 10 Footer
    74. 74. Wireframes & MODULE LIBRARIESDesktop/ Tablets Mobile 1 2 1 Module 4a Module 4b 2 Header Logo Header Logo 3 4 5 Nav Bath section intro Ad 4 Bath 5 3 section Ad Nav intro Module 6a Module 6b 7 6 Related Types of baths8 Store productslocator 6 Types of baths9 Tools 10 Footer 7 Related products 8 Store 9 Tools locator 10 Footer
    75. 75. But what about the timeline & budget ?
    76. 76. ” Todays popular devices are not tomorrows so building something which works onany device is better than building something which works on todays devices “ Combined wise words from @onextrapixel and @trentwalton
    77. 77. Different devices here to stayhttp://www.thebusinessartisan.com
    78. 78. Cost Different of lost devices here to customers stay & multiple versionhttp://www.thebusinessartisan.com
    79. 79. Cost of lost More Different customers collaboration devices here to & multiple & flexible stay version toolboxhttp://www.thebusinessartisan.com
    80. 80. ” Money spent developing a pretty but limited iPhone apponly benefits...the few, but money spent on the website UI would have benefitted everyone “ Said by Gary Marshall on ‘The app trap’ in .net Magaizine
    81. 81. ” Everytime you redesign God kills a kitten “ Wisely said by @louisrosenfeld
    82. 82. Thank you! QUESTIONS? annadahlstrom annadahlstrom www.annadahlstrom.comwww.flickr.com/photos/matterphotography/2739799786/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×