Your SlideShare is downloading. ×
0
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Copenhagen ITU 2010 UXBASIS and concept development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Copenhagen ITU 2010 UXBASIS and concept development

1,323

Published on

In December 2010 Copenhagen's IT University requested a talk about UXBASIS and how the process could fit within concept development of digital products. This presentation formed the basis of the talk. …

In December 2010 Copenhagen's IT University requested a talk about UXBASIS and how the process could fit within concept development of digital products. This presentation formed the basis of the talk. Some slides have been removed to maintain client confidentiality.

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,323
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
52
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • In London I worked for Reed Elsevier. In that time I had the role of a design manager running projects and art directing. Leading a team of 8 front end developers and designers. Whilst working there I completed an MA in Design Practice and once qualified I moved into another job within the company as their first Information Architect of the business division Here I planned the structures and interactions for 8 industry websites and formulated an Information Architecture strategy
  • The standard waterfall model
  • To the iterative model, encapsulated by Agile and SCRUMContrary towhat I wilbetalkingabout I am processagnostic, but do believe in the value of placing the user at the heart of design decisions alongside business needs and the contentyouintend to provide
  • The need for collaborationbetween professionals is fundamental to delivering the bestproductsThis diagram looks at some of the disciplines involved when building an online productTo orchestrate this requires careful project management, but it is very easy to be focused on delivery to time and budget whilst forgetting the purpose of the product and fulfilling the needs of the usersOf course a main success criteria is to gauge the culture you must operate in and be in tune with your team member’s needs
  • This is a project timeline for the computerweekly.com website that shows how different areas of site development had to be synchronised as development took placeThe four streams are development (back end code), user interface (visual design and front-end code) information architecture and user experienceThis diagram is to highlight different areas and so each area has been brought out on top of the ux stream but in reality the UI, IA and Dev streams are all a part of UX
  • …but they shouldn’t prescribe the solutionOften PMs are worried about how you can use user tests without harming deadlines, or interrupting development schedules.Done right though, it need not be an obstructive part of the development of a product –just a necessary aspect of it. It really is a question of timing and validating the work quickly, and changing the product immediately upon that feedback. Being responsive and having the capacity to execute quickly is what Agile is really about…
  • I really want to highlight this point.How things look (visual design) how they work (the interaction and development of functionality) and how the product answers the needs and wants of a user (aligned to the business purpose) all are a part of the user experience.Often UX is seen as usability - but that is only a part of the storyWhen building products we should pay attention to the whole of the development of a product ensuring the users are at the heart of decisions made.
  • Complex projects can easily become unwieldy and lack focus due to production factors and resource issues.This inevitably harms the quality of the product and does not promote a user focused solution.UXBASIS is a way of practically applying techniques from a business perspective, while keeping true to the goals of the users.UXBASIS is a process based on our experience of building digital solutions.
  • UX BASIS is a process and a set of tools to help an organization engage with users through the products that are developed.UXBASIS helps communicate projects with other UX professionals, stakeholders, designers and developers.
  • An aspect in being involved in this type of work is the ability to convince stakeholders that a certain approach is relevant to their businessBut we are spread thinly and always busy, so we built a physical version of the model so our account people could take the box and discuss the tools with clients.This way of looking at the cards and seeing the various tools available, helps formulate a plan before we are involved in the next phase.(Here I will show the box and get the board out will take 5 minutes)
  • The poster in enormous and fills a wallAll the cards are also shown alongside the modelBy having this in the development environment it keeps another aspect of the project (the user) to the front of mind and enables conversations around issues to be started
  • UXBASIS has5 sectionsEach section holds several methodsEach section covers a particular user experience needThe different sections are:Business IntelligenceAnalysisStructure InteractionSample
  • The Business Intelligence section involves:Identifying the clients needsClarifying and finalizing the briefNoting the overall business goals
  • Interviews with key decision makersInterviews are one-on-oneFocus is on the overall deliverable and success criteriaIdea is to: Gain insight of the clients business cultureForming a thorough briefUltimately dictates the end buildCombine with a Concept Model to give added value to information gathered.
  • Measurement of success and failures in the marketplace. Helps in informing a particular solution. Establishes best practices in competing websites and to learn from different approaches and innovations Matrix diagram can help describe pros and cons of competitors
  • The Analysis section involves:Identifying the user needsClarifying theend usersFocusing on content and structure
  • In-depth descriptions of fictional characters based on user groups identified in user interviewsCovers theusers behavior, attitude, skill and goal with the productCan later be used when testing to ensure the right users are recruited for testingWe’ve also found that the developers we use like having them around as they help them keep the end users at mind
  • Designed to give an overview over the different possible elements of a productCan be used as a roadmap to identify which elements should get primary focus and which are secondaryOutlines the needs/wants of the users in conjunction with the business goalsCan be understood by everyoneIs key at the end of the Analysis stage, but can feature multiple timesThe concept model is a necessary deliverable to all our projects as it outlines the needs and wants of the user base, alongside the business goals of what the application should satisfy.Aim: to give the developer group an easy point of reference as the project progresses to maintain focus on key strategic areas.
  • Meeting with stakeholdersFormulate ideas, the concept, direction and contentCan identify business goals not previously mentionedAllows design team to explore new suggestionsMore innovative solutions are created when stakeholders are allowed to contributeDuring the workshop some elements of the product can be sketchedSketches made will be the foundation for the wireframes and interface design workA concept Model should be developed as a result of thisIf a Concept Model already exist, it should be amended.The workshop ensures that before any interaction design work is started that all are in agreement as to what will be delivered.Working with Novo Nordisk on their intranet we had a Collaborative Workshop
  • Information gathered is used to develop the framework
  • Having first defined the user roles we can now plot a path through the product for each user goal.Particularly useful with complex structures and multiple user types e.g. social networking or ecommerce.Aim: Shows user’s tasks, their modes of behavior and any potential challenges that a user may discover when using the product.
  • CreatingDevelop the layout and overall structureBuild product content templates
  • Key screens are wireframedIfsketching was done during the Collaborative Workshop these will be used hereFocus is on: How the user navigates How they complete tasksInterface designers and information architects together create the wireframesCan be used for testing to ensure they meet users needs
  • Fully functional HTML prototype with complete structure Focus is on the interaction design of the product Aim is working prototype the development team can use Final testing can be done to ensure that the interaction matches the user requirements
  • Users are tested using hardware that tracks where they look Focus is on the users apparent interest in product elements Aim is useful information that helps optimizing the layout Eye tracking on visual designs only
  • Information design and UX Trigger words – Cappuccino
  • User testing
  • UXBASIS in the Pitch – concept work
  • Social media is IA
  • Communicating an experience
  • UXBASIS is not meant to be used in its totality for each projectEach project requires their own approach The need for UXBASIS methods depends on the problem they will solve and the solution required
  • Will wrap up with questions…..and pass the box around for people to see
  • Will wrap up with questions…..and pass the box around for people to see
  • Will wrap up with questions…..and pass the box around for people to see
  • Transcript

    • 1. An introduction to
    • 2. Agenda
      • My background, work and experience
      • 3. Process, collaboration and planning
      • 4. UX and Usability
      • 5. UXBASIS
      • 6. Business Intelligence (15 min break)
      • 7. Analysis
      • 8. Structure
      • 9. Interaction
      • 10. Sample
      • 11. Cases
      • 12. Where do you go from here?
    • My professional background
      • Senior web designer
      • 13. Design manager
      • 14. Information Architect
    • At Reed Elsevier I experienced a company that went from…
    • 15. …to this
    • 16. Collaboration
      http://www.flickr.com/photos/userpathways/2629352032/
    • 17. We know this isn’t easy….
      http://www.flickr.com/photos/userpathways/3874772978/
    • 18. Hello Group
    • 19. Usability tests canvalidateourassumptions
      flickr: julianbleeker
    • 20. Userexperience is morethanusability
      flickr: julianbleeker
    • 21. How did we get here?
      Introducing UXBASIS
    • 22. What is it?
      UXBASIS
      UX BASIS is a process and a set of tools to help an organization engage with users through the products that are developed.
      UXBASIS helps communicate projects with other UX professionals, stakeholders, designers and developers.
    • 23. UXBASIS – UX in a box
    • 24. Poster for (Agile) development rooms
    • 25. UXBASIS
    • 26. Business Intelligence
      UXBASIS
      Business focused information gathering
    • 27. Stakeholder Interviews
      UXBASIS
      • Gain insight to the business culture
      • 28. Focus on deliverables, the success criteria
      • 29. Forms a thorough final brief
      • 30. Contributes to a Concept Model to align expectations
    • Competitor Analysis
      UXBASIS
      • Measurement of success and failures in the marketplace.
      • 31. Helps in informing a particular solution.
      • 32. Establishes best practices in competing websites and to learn from different approaches and innovations
      • 33. Matrix diagram can help describe pros and cons of competitors
    • Analysis
      UXBASIS
      User focused information gathering
    • 34. Personas
      UXBASIS
      • In-depth descriptions of fictional characters
      • 35. Focus is on identifying common traits with users
      • 36. Aim is to cover user behavior, attitude, skills and goals
      • 37. Can later be used during testing to ensure appropriate recruitment
    • Persona example
    • 38. Concept Model
      UXBASIS
      • Provides an overview of possible product elements
      • 39. Focus is the user wants/needs and the business goals
      • 40. Aim is to create an overview map everyone can understand
      • 41. Ideally created early and then edited throughout the process
    • Concept model example
    • 42. Concept model example
    • 43. Collaborative Workshops
      UXBASIS
      • Meeting with stakeholders to explore ideas
      • 44. Focus is on concept, direction and content of product
      • 45. Aim is to come up with more innovative solutions
      • 46. Can identify business goals not previously mentioned
    • Structure
      UXBASIS
      Developing the information framework
    • 47. User Journeys
      UXBASIS
      • User path to the goal in the product is defined
      • 48. Focus is on user’s tasks, behavior and challenges
      • 49. Aim is a tool from which the information structure can be generated
      • 50. Useful with complex structures and multiple users
    • User Journeys
      UXBASIS
    • 51. User Journeys
      UXBASIS
    • 52. Interaction
      UXBASIS
      Creating the flow
    • 53. Wireframe
      UXBASIS
      • Key pages are produced possibly based on earlier sketches
      • 54. Focus is on navigation and task completion
      • 55. Aim is a tool that can be used to start the interface design
      • 56. Can be used in conjunction with a Think Aloud test
    • Wireframe
      UXBASIS
    • 57. Wireframe
      UXBASIS
    • 58. Prototype
      UXBASIS
      • Fully functional HTML prototype with complete structure
      • 59. Focus is on the interaction design of the product
      • 60. Aim is working prototype the development team can use
      • 61. Final testing can be done to ensure that the interaction matches the user requirements
    • Wireframe example
    • 62. Sample
      UXBASIS
      Testing the results
    • 63. Eye Tracking
      UXBASIS
      • Users are tested using hardware that tracks where they look
      • 64. Focus is on the users apparent interest in product elements
      • 65. Aim is useful information that helps optimizing the layout
      • 66. Eye tracking on visual designs only
    • User Journeys
      UXBASIS
    • 67. Cases
      flickr: julianbleeker
    • 68. Refugees United
    • 69. Airshoppen seating application
    • 70. Fritz Hansen
    • 71. Fritz Hansen
    • 72. Roskilde Blog
    • 73. Tradeshift
    • 74. Tailor the UX process to your project needs
    • 75. How do you get there?
      UXBASIS tools help define a new project regardless of it’s constraints.
      This map helps scope a project dependant on specific questions held in a brief.
      Each ‘destination’ being a tool described in UXBASIS.
      http://www.flickr.com/photos/uxmosis/5142954146/
    • 76. Thank you
      Find out more on uxbasis.com
    • 77. Thank you
      Or follow us
      on Twitter:
      @uxbasis
      @hellogroup
    • 78. Thank you
      Or Facebook: http://www.facebook.com/UXBASIS

    ×