Information Architecture for the final site

Final IA

Final IA:

/Home

/Principles --> goes to /Principles/IntroduceCognitive /Principles/IntroduceCognitive /Principles/InformInteractions /Principles/OfferControl

/Guidelines --> goes to /Guidelines/Style/Accessibility

/Guidelines/Style/ --> goes to /Guidelines/Style/Accessibility /Guidelines/Style/Accessibility /Guidelines/Style/Color /Guidelines/Style/Grids /Guidelines/Style/Typography

/Guidelines/Interaction --> goes to /Guidelines/Interaction/Animation /Guidelines/Interaction/Animation /Guidelines/Interaction/SignaturePatterns /Guidelines/Interaction/SignaturePatterns/Avatar

/Guidelines/Branding --> goes to /Guidelines/Branding/Wordmark /Guidelines/Branding/Wordmark

/UIPatterns --> Goes to /UIPatterns/Documentation/GettingStarted

/UIPatterns/Documentation --> goes to /UIPatterns/Documentation/GettingStarted /UIPatterns/Documentation/GettingStarted /UIPatterns/Documentation/Settings /UIPatterns/Documentation/Animation /UIPatterns/Documentation/JavascriptStandards

/UIPatterns/Patterns --> goes to /UIPatterns/Patterns/Elements /UIPatterns/Patterns/Elements

/UIPatterns/Patterns/Elements/anchorlink /UIPatterns/Patterns/Elements/blockquote /UIPatterns/Patterns/Elements/body /UIPatterns/Patterns/Elements/button [...] /UIPatterns/Patterns/Components /UIPatterns/Patterns/Layouts

Site Mapping

Principles

Introduction to the Design Library
- paragraph of introducing what Watson is
- paragraph about what the Library is
Values
- paragraph about high-level values of Watson Design
- Helpful
  - paragraph about "Helpful"
  - visual example
- Heroic
  - paragraph about "Heroic"
  - visual example
- Humane
  - paragraph about "Humane"
  - visual example
Design Principles
- short paragraph about what Design Principles are
- Catchy Principle title * short description and link back (reusable element) * One sentence supporting description * Actionable insight * short description and link back (reusable element) * 1-2 sentence description * visual example
Personality
- short description and link back (reusable element)
- paragraph about Watson's personality
- visual example of personality
- Link to visual Guideline that supports it
- Link to Copy Guidelines

Guidelines

Guideline General title (e.g. Style, Interaction, Branding, Copy)
- (need description? needs discussion)
- Section title * short description and link back (reusable element) * introduction description * Link to IBM Design specific page * Sub-Section title * Intro paragraph about section * Link to IBM Design specific page * Visual Example: rendered view of section part * Code snippet of section part * and/or Link to an element or component that uses it

UI Patterns

Pattern General title
- intro paragraph about the type of pattern (e.g. element, component, or layout)
- Individual title * description, either short or long depending on pattern (if necessary, for the site) * Visual Example: rendered code * Code snippet * Link to pattern Documentation README file in Github (if necessary)

Guideline Example

Style Guidelines
- Typography
  - short description
  - Intro paragraph about typography
  - Supporting Principle (reference) for typography
  - Helvetica Neue for IBM
    - paragraph about Helvetica
    - visual example: Font stack rendered showing different weights
    - Code snippet for Helvetica font
  - Typographic Scale
    - paragraph about typographic scale
    - visual example: Rendered font scale showing H1, H2, H3
    - Code snippets for typographic scale?
    - Link to IBM DL examples for typographic scale
  - Cross-Platform Fontstack Options
    - Fontstack list
    - Visual example or Code snippets?
- Color
  - short description
  - Intro paragraph for color
  - Link to IBM DL: .ASE file for color palette
  - Choosing Color Palette
    - paragraph about color palettes
    - visual examples of colors to choose from
      - color swatch, HEX value, Sass value
  - Applying a Color Palette
    - paragraph about hierarchy
    - visual example of color hierarchy
  - Accessibility
    - paragraph about accessibility
    - link to IBM DL accessibility info
- Iconography
  - paragraph about iconography
  - visual example of icons
  - link to IBM DL for icons
  - Building Icons
    - paragraph about building icons
    - link to icon builder
- Grid
  - paragraph about grid
  - visual example of grid
  - link to IBM DL about grid
Interaction Guidelines
- Animation
  - short description
  - Intro paragraph about animation
  - Supporting Principle (reference) for animation
  - Link to IBM DL animation stuff
  - Something more specific?
    - paragraph about that
    - visual example: animation
    - Link to element or component of that animation
  - Another specific?
    - paragraph about that
    - visual example: animation
    - Link to element or component of that animation
- Gesture
  - Future addition to the Library
  - short description
  - Intro paragraph for gesture
  - Link to IBM DL: .ASE file for color palette
- Signature Interactions
  - paragraph about Signature Interactions
  - Avatar
    - paragraph about the avatar
    - link to Avatar Component
  - Asking Watson
    - paragraph about asking Watson
    - link to askingn Watson component
  - Returning Results
    - paragraph about returning results
    - link to returning results component
Branding Guidelines
- Wordmark
  - short description
  - Intro paragraph about the wordmark
  - Link to Watson Marketing?
  - Downloadable assets
- Logo
  - short description
  - Intro paragraph about the logo
  - Link to Watson Marketing?
  - Downloadable assets
Copy Guidelines
- short description
- Intro paragraph about voice and tone for copywriting
- Supporting Principle (reference) for copy
- Link to Watson Marketing Voice assets?

Cardsorting

I spent two days conducting card sorting exercises with 11 different visual designers, developers, and user experience designers. They sorted cards that included all of the Library's parts including: guidelines, principles, style guide parts, and HTML elements. For the first part of the sorting, I asked them to create the most intuitive groupings of parts, and then create their own names for each category. For the second part of the exercise, I asked them to look at the categories that we're considering and see how they would reorganize their groupings and apply the categories.

The first insight that came out of card sorting is that "Style Guide" has a very common understanding amongst all testers, and that it unanimously includes at least: Typography, Color Palettes, and Icons. It could also include Language and Animation, but that was not as common across the board.

Another insight is that the term "Pattern" has a very different meaning to each person. To the visual designers, it was either visual patterns or code patterns made up of elements. Some UX designers used it for coded patterns or not at all. It was rarely used by everyone else because it was too general, and they preferred a more specific title such as "HTML Elements". Here are some of the quotes about "Pattern":

“Patterns are everywhere, not just code.”
"Patterns encompasses a lot: animations and navigation, etc.”
“Pattern library may be used elsewhere normally, but it doesn't resonate well with me.”
“Pattern library covers the entire ground, not just the elements.”
“I liked the titles that were more descriptive, I don’t like patterns, elements, guidelines.” 
“HTML elements, elements, and patterns are a mix of the other ones (inside the UI group she made): elements are things, HTML is the specific code”

There were three distinct organizational styles that came out of the card sorting. They have very similar looking IA, but very distinct reasoning behind the organization.

Scale and Scope of the information

This system goes from big, overarching ideas to small, very specific code snippets.

Disciplines

The second was arranged into General Principles, and then into the individual disciplines (Visual, UX, and Front-End Dev).

Design, Code, and Both

The third broke all the parts into a General Principles, Design, and Code silos.

I'll be conducting a mini-workshop tomorrow to align the team on their mental models of the Information Architecture and create a solid IA moving forward for us to test with the Beta 2 milestone.

Team Workshop

IA Research Playback

I started by sharing a keynote of my insights from card sorting with our users (mostly the same as the info above). We discussed the different pros and cons of each of the suggested organizations, and also discussed the Content Modeling and "Pattern" insights.

Original Team Ideas

After reviewing the research, we shared our ideal layouts that we drew before the meeting, and edited them based on the research insights.

Discussion and Deliberation

We then discussed the differences, making a decision as a team about which direction to test first. We also talked about future ideas for layout versus the initial IA for the May launch. Ideally, we would direct the user based on a search of what they're trying to accomplish, but we will not have this functionality for the first round. Here are sketches of some of the other conversation:

Final IA Direction

Based on research and our discussion, we decided as a team to move forward with this IA structure: The Principles will be on the "home" page of the website and the Guidelines and UI Patterns will be their own page with long-scrolling, progressively-loaded content.

Content Modeling

Another thing that came out of this meeting is the realization that we don't know how to functionally create the Content Modeling system we need. Our goal is to have a complete set of information for each section that different pages can use different parts of.

An example is the Motion Guidelines (not actual, just example)- it will have an introduction, default levels, rendered examples, and code snippets. On the Guideline page we will show the introduction and rendered examples, on the UI Pattern page we will show all of the information in documentation.

How do we set this up? What kind of file format do we need to use? Let's get started on this now so that we have the flexible pieces we need for smooth sailing when we implement this.

Wireframing and testing the initial IA

Hosted here: http://pages.design.ibm.com/kemcelroy/watson-design-library-wireframe/master/ui_patterns.html

I will be testing user flows through this prototype Friday afternoon and Monday morning.

We also discussed how to create our responsive navigation without using a hamburger menu. Here is our initial idea:

Feedback:

The menus started as closed, only showing the Section titles. Both visual designers immediately opened all of the menu Sections so they could see the sub-sections
A developer exclusively used the top navigation, and scrolled through the whole page to familiarize himself with the content
Developer was curious how the patterns will be organized into sub-sections
Developer didn't get a good idea of what the "Design Principles" were - issue will be resolved with visuals associated with each "Actionable Insight"
Visual designer really liked that the "Style Guide" was right on top of the Guidelines page, and she didn't even need to go to the left navigation
Visual designer looked for the avatar in "Animation" first, assuming it would be there bc it's animated
Both visual designers said they would peruse the site for first visit, but would immediately search for what they need upon return visits.
More detailed notes from the interviews are in the shared Evernote notebook.

Coded Prototype and User testing IA and navigation

I used this updated, coded navigation to test the final site IA and navigation design: http://pages.design.ibm.com/kemcelroy/menu-test/master/

Feedback:

very intuitive, almost all participants had no problem finding the specific content
One dev expected to find the grid in the "Layout" section of the UI Patterns - issue will be resolved with the short description of the "Layout" section
One visual designer had trouble finding the check box code because she didn't know what "Element", "Component", and "Layout" meant. - issue will be resolved with descriptions and having the content loaded on the screen