1.
Information Architecture and UXD An intro to the role, process and purpose Karri Ojanen, Publicis Modem

2.
About Me <ul><li>Background and experience </li></ul><ul><ul><li>Finland, United Arab Emirates </li></ul></ul><ul><ul><li>Graphic design, journalism, copywriting </li></ul></ul><ul><ul><li>Electronic music </li></ul></ul><ul><li>Past clients and projects </li></ul><ul><ul><li>Diverse experience from online service concepts and processes to mobile applications to e-learning solutions to digital/IPTV to digital marketing from microsites to games and social media </li></ul></ul><ul><ul><ul><li>Mobile telecom: Nokia, N-Gage, Elisa, TeliaSonera </li></ul></ul></ul><ul><ul><ul><li>Forestry: StoraEnso, UPM </li></ul></ul></ul><ul><ul><ul><li>Online banking: Nordea </li></ul></ul></ul><ul><ul><ul><li>Fundraising: VillageLife.fi </li></ul></ul></ul><ul><ul><ul><li>Fashion: Seppala.fi </li></ul></ul></ul>

3.
What is Information Architecture? <ul><li>IA Institute: </li></ul><ul><ul><li>The structural design of shared information environments </li></ul></ul><ul><ul><li>The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability </li></ul></ul><ul><ul><li>Practice focused on bringing principles of design and architecture to the digital landscape </li></ul></ul><ul><li>Information Architecture is the foundation for web design </li></ul><ul><li>The blueprint of the site upon which all other aspects are built: </li></ul><ul><ul><li>Form </li></ul></ul><ul><ul><li>Function </li></ul></ul><ul><ul><li>Metaphor </li></ul></ul><ul><ul><li>Navigation and interface </li></ul></ul><ul><ul><li>Interaction </li></ul></ul><ul><ul><li>Visual design </li></ul></ul><ul><li>Initiating the IA process is the first thing to do </li></ul>

4.
What is User Experience Design? <ul><li>All aspects of the user’s interaction with the product (website or online application) : how it is perceived, learned, and used </li></ul><ul><li>“ User experience is not about how a product works on the inside. User experience is about how it works on the outside, where a person comes into contact with it and has to work with it” - J. J. Garrett, The Elements of User Experience </li></ul><ul><li>IA means defining information structures to answer the question &quot;how does a user find the information they want? </li></ul><ul><li>UXD/IxD means defining system behaviors to answer the question &quot;how does a user take the action they want?”...” </li></ul>

5.
The Value of User Experience <ul><li>The web has evolved from a library of interlinked hypertext pages to an online application platform </li></ul><ul><ul><li>Not just text, image, video and audio, but the glue in between </li></ul></ul><ul><li>Site centric -> Customer centric </li></ul><ul><li>Publishing to audiences -> Participation with audiences </li></ul><ul><li>Customer as observer -> Customer as driver </li></ul><ul><li>Content directories (taxonomy) -> Content tagging (folksonomy) </li></ul><ul><li>Clicks and page views as goal -> Interaction time as goal </li></ul>

6.
The Value of User Experience <ul><li>The web has gone beyond being the support medium for campaigns and brand development </li></ul><ul><li>The web has become the lead </li></ul><ul><ul><li>From one-offs to the full 360 </li></ul></ul><ul><li>More and more brands are born, developed and maintained in the digital space </li></ul><ul><li>Case Google: from a technology company to one of the world’s most recognizable and successful brands </li></ul><ul><ul><li>Built not on “traditional” solid foundation of marketing, but on an ecosystem of experience and word of mouth referrals </li></ul></ul>

7.
The Value of User Experience <ul><li>Micro-interactions </li></ul><ul><ul><li>Everyday exchanges with a product, brand and service </li></ul></ul><ul><ul><li>Individually they seem insignificant </li></ul></ul><ul><ul><li>Combined they define how the user feels about the product, brand and service at an emotional level </li></ul></ul><ul><li>Each time Google helps the user to find something, view a map or connect with a friend, it sends a positive impression of the brand and service in the user’s memory bank </li></ul><ul><li>Create an emotional connection - deliver beyond the user’s expectations of great performance </li></ul>

8.
The Value of IA/UXD to Us <ul><li>“ Do you feel that something elusive has been overlooked when your team sketches an entire website on a white board in a one-hour meeting and then promptly leaves to go and build it?” </li></ul><ul><li>IA/UXD lays the necessary groundwork for our work </li></ul><ul><ul><li>Requirements, scope and strategy </li></ul></ul><ul><ul><ul><li>What is the site for? Who is it for? </li></ul></ul></ul><ul><ul><li>Eases our site build/development process in the end, giving us more time to focus on the strategy first </li></ul></ul><ul><ul><li>Cost of developing, managing, maintaining and updating </li></ul></ul><ul><li>IA holds a unified vision together </li></ul>

9.
The Value of IA/UXD to Our Clients and Their Customers <ul><li>Helps the client to focus on the key priorities </li></ul><ul><li>Helps everybody to see the forest from the trees </li></ul><ul><li>Good IA is incredibly effective </li></ul><ul><li>Good IA saves both time and money in the long run </li></ul><ul><li>Good information system makes sense to users </li></ul><ul><ul><li>Cost of finding (time, clicks, frustration, precision) </li></ul></ul><ul><ul><li>Cost of not finding (success, recall, frustration, alternatives) </li></ul></ul><ul><ul><li>Cost of development (time, budget, staff, frustration) </li></ul></ul><ul><ul><li>Value of learning (related products, services, projects, people) </li></ul></ul><ul><ul><li>Value of total experience (brand experience, cross-platform functionality) </li></ul></ul>

10.
The Role of IA/UXD: The Process Discover Strategy and scoping Design Creative design Develop Building the site Launch

11.
The Role of IA/UXD: The Process Now our IA appears here… … or here. Discover Strategy and scoping Design Creative design Develop Building the site Launch

12.
The Role of IA/UXD: The Process IA: Discover and Research IA: Design IA: Validate … but it belongs here: Discover Strategy and scoping Design Creative design Develop Building the site Launch

13.
The Role of IA/UXD: The Process DESIGN Insights become ideas DEVELOP Ideas become reality LAUNCH DISCOVER Analysis becomes insight Competitive Analysis Heuristic Evaluation Concept Model PITCH Audience Research Content Audit/Inventory Domain Research Requirements/Road Map Metrics/KPIs/Analytics Strategic Tactical Personas User Journeys LOW-FI Flowchart Site Map Wireframes HI-FI Flowchart Site Map Wireframes Nomenclature & Labeling Functional Specs Usability Testing

14.
The Role of IA/UXD <ul><li>IA/UXD is not a contained, “boxed” field of work </li></ul><ul><li>IA/UXD is not a one-man show </li></ul><ul><ul><li>Collaboration </li></ul></ul><ul><ul><li>Consistency, not one off answers </li></ul></ul>Art Director Designer Copywriter Developer IA/UXD IA/UXD IA/UXD Interaction & functionality Interaction & functionality Interaction & functionality <ul><li>IA/UXD is a strategic role </li></ul><ul><li>IA/UXD is part of planning, creative and technology </li></ul>Planning Creative Technology IA/UXD

15.
The Role of IA/UXD <ul><li>Information architecture is not… </li></ul><ul><ul><li>Simply drawing up a sitemap </li></ul></ul><ul><ul><li>Simply pumping out masses of wireframes </li></ul></ul><ul><ul><li>Designing for ourselves </li></ul></ul><ul><ul><li>Just about navigation </li></ul></ul><ul><ul><li>A frivolous expense for “huge” projects only </li></ul></ul><ul><ul><li>A “nice to have” item on a checklist </li></ul></ul><ul><ul><li>Database design </li></ul></ul>

16.
IA and UXD Professionals <ul><li>This is an emerging discipline in an evolving medium </li></ul><ul><li>IAs and UXDs come from several different backgrounds </li></ul><ul><ul><li>Graphic designers and art directors </li></ul></ul><ul><ul><li>Library technicians, Journalists and copywriters </li></ul></ul><ul><ul><li>Web admins, site content managers, content analysts </li></ul></ul><ul><li>Need to have developed a good general understanding of the digital space </li></ul><ul><ul><li>Curious: Asks a lot of questions, doesn’t accept the obvious, loves research </li></ul></ul><ul><ul><li>Empathetic: Listens carefully, takes notes </li></ul></ul><ul><ul><li>Generous: Shares information, collaborates well </li></ul></ul><ul><ul><li>Flexible: Delivers appropriately, understands constraints </li></ul></ul><ul><ul><li>Articulate: Verbally or visually (best if both) </li></ul></ul><ul><li>The industry needs people that are multi-skilled and versed in strategy, technology and creative </li></ul>

17.
IA and UXD Professionals <ul><li>If I had asked my customers what they wanted, they would have said “a faster horse.” -Henry Ford </li></ul><ul><li>Clients don't envision the future, they inform the present </li></ul><ul><li>Build processes that promote an idea-generating culture </li></ul>

18.
The Role of IA: The Deliverables <ul><li>Documents, surveys, research papers, content lists, workshops </li></ul><ul><li>Flowcharts and sitemaps </li></ul><ul><ul><li>Schematic representation of a process </li></ul></ul><ul><ul><ul><li>Sitemaps/flow maps the individual pages/views on a website and the links between them </li></ul></ul></ul><ul><ul><ul><li>Process flow maps the individual steps of a process, different options and alternatives and the outcomes </li></ul></ul></ul><ul><li>Wireframes </li></ul><ul><ul><li>Stripped-down visual representation of a single web page, devoid of graphic treatment </li></ul></ul><ul><ul><li>Framework made with wires, which define basic layout and placement of content and page elements such as navigation, header & footer, branding etc. </li></ul></ul>

19.
The Role of IA: The Tools <ul><li>Sketching: paper and pencil </li></ul><ul><ul><li>Initial wires, ideas, quick draft versions of alternative functionality </li></ul></ul><ul><ul><li>”… using the sketch to conceive design direction not only sets a cognitive foundation of good design, but also demonstrates to the client that real, non-superficial design work is taking place.” - T. Scott Stromberg </li></ul></ul><ul><li>Software tools </li></ul><ul><ul><li>IA/UXD needs to be properly documented using software tools that allow for quick editing later on as the work develops </li></ul></ul><ul><ul><li>Common IA software: Microsoft Visio (Windows), Omni Graffle (Mac), ConceptDraw (Win&Mac), Axure (Windows) </li></ul></ul><ul><ul><li>Prototyping: Axure, Visio, Flash, HTML prototypes </li></ul></ul><ul><ul><li>Other: Word, Excel, Powerpoint/Keynote, etc. </li></ul></ul>

20.
Examples

21.
Examples

22.
Examples

23.
Examples

24.
Examples

25.
Examples

26.
Examples

27.
Examples

28.
Resources <ul><li>Boxes and Arrows, http://www.boxesandarrows.com/ </li></ul><ul><li>The Information Architecture Institute, http://iainstitute.org/ </li></ul><ul><li>The Interaction Design Association, http://www.ixda.org/ </li></ul><ul><li>Experience Matters, http://experiencematters.criticalmass.com/ </li></ul><ul><li>WebMonkey Information Architecture Tutorial, http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial </li></ul>

29.
Summary

30.
Thank You <ul><li>Karri Ojanen </li></ul><ul><li>Information Architect </li></ul><ul><li>Publicis Modem Toronto </li></ul>