6: Feedback from 6 designers on visual design of the prototype

• Too much grey overall. Incorporate more color to break up text blocks.
• More space is needed for gutters (especially in places where there is text right next to a large image: ex. Principles)
• Resources panel looks too similar to links/ tab pattern that IBM Design uses. It feels like there should be other tabs.
• figure size text in Example content type should be the same/similar size as the text above it
  “It’s smaller so it feels like you don’t want me to read it"
• Sub nav needs more space between links. Bold (active state) makes the space feel tight
• More visual examples to support content (specifically Grids, Logo vs Avatar, and Accessibility Animation)
• Larger and more detailed visual examples that relate to one another (Accessibility/ Animation)
• Looping animations should have a "pause" option, like guidelines specify.

• Remove thick underline from the resources panel to differentiate from common tab patterns
• Add a larger line height to links in sub nav
• Increase gutter space between columns
• Make looping gifs into a video so users can "pause"
• Remove teal from Accessibility animation so it doesn't compete with interface colors
• Add more space underneath statement of intent on Principles page, or add a sentence
• make figure size text in Example content type the same/similar size as the text above it

• Make visual examples larger and add more detail
• Give more context to Accessible animation example
• Visualize more content on Grids and Accessibility page (This will help to add more color to pages)
• Break off "ecosystem partners" content into it's own page in branding (since it is a very text heavy page)

Overall:

• Heavy use of grey weighs down the design and makes it feel muddy/ dull. More contrast is needed. Links are too disruptive (teal, bold, and underlined). Only two distinctions are necessary.

Home page:

• there isn’t enough content in the background watermark to create a visual line, so it just appears cut-off right now

Resources Panel:

• Styling is too close to tabs/ active links

Accessibility page:

• Smaller text under the description doesn’t make sense because it feels less important visually, but the content is just as important.
• “It’s there, but it doesn’t want me to read it"
• The numbers shouldn’t be teal since they are not apart of the example image

Footer:

• links are not on the same line

Principles:

• Numbered text is confusing and doesn’t connect well to the text above it

Animation page:

• "Don’t understand the animation or what it’s doing, so not sure how to connect it to a design"

Overall:

• The structure is good; easily digestible
• "I want to see more visual examples of actual interfaces". Ex: “Inspiration” section of IBM Design
• Would like to see an example that she can hover over and identify multiple elements (H tags, link, etc.)

Home page:

• Multiple titles are confusing (“Design Watson Experiences” and “What is Watson?”). Not sure what to look at first.

Sub nav:

• Bold links in the sub nav feels too tight

Design Principles:

• "Not sure what you want me to do with the principles"

Bottom Nav Buttons:

• They are too big
• _“I want to click through to the next section” _(End of Guidelines> UI Patterns)

Wordmark and Logo:

• Show a visual example of an appropriate usage of logo

Overall:

• Columns need more breathing room
• Too much space between headings and paragraphs

Resources Panel:

• Styling is too close to tabs/ active links
• “This feels strange, like there should be other tabs here."

Grids Page:

• Too much text. Would like to see more visual examples.
• Pull quotes are nice

Home :

• Too much text
• Links at the bottom to main sections feel redundant

Principles:

• The smaller points should be closer or the same as the descriptive text above it
• There should be more space beneath the overarching statement to add emphasis
• The text in the examples is hard to read. Feels like a mistake.

Typography

• Start with a base/ minimum size and work your way up
• Rules about a max number of type sizes on one page

Wordmark

• Align the examples to the title, not the icon so it feels more refined

Overall:

• Color is used sparingly so it’s seems like it is being used purposefully, instead of decoratively
• Color is used when directing attention
• Thinks the use of color is successful if meant to be primarily for a functional site meant for teaching and reading. Not successful if it is meant to convince people to build things with Watson. (not flashy)

Homepage:

• Content is weird when it is not full width
• If you made the content full-width it would be too long
• Suggests containing the content into two columns (like the sections that link to other pages)

Sub nav:

• feels too tight

Bottom nav buttons (old):

• lots of orange
• feels like something has gone wrong
• lots of color here compared to the main content on the site

Bottom nav buttons (new):

• the use of color in this version feels more in line with the look and feel of the site

Principles:

• not much space around the images. They need more breathing room
• hard to connect numbers to images
• “My eyes go straight down the images, and not to the text"

Overall:

• "Orange and teal color palette seems more serious than the airy/ cutesy blue and green palette"
• Primarily scrolling back to the top to go to different sub-sections

Principles:

• wants the images to be larger and have more details
• wants to see a real interface in action to understand elements

Accessibility:

• the level of detail in the visual example is nice

Side Nav:

• overlooked initially
• likes the subtle appearance because it’s not “in your face"
• thinks the solution for small screens is successful

Back to Top:

• likes that there is an option to quickly jump to the top of the page

Components:

• As a designer not familiar with coding, seeing a rendered example of an element is helpful

Overall:

• Links are easy to distinguish, which is something that has been hard to find on Watson site’s using the old blue
• There is a good flow and implied reading order, but breaking up the pages so much makes some content feel siloed
• World like to see more visual examples that build on/ relate to one another
• Everything is clear and informative individually, but missing a place that ties everything together
• “All of the details feel right, but I am missing the holistic view"

Suggestions:

• Start with the same grey interface (like in Principles) and build on that throughout the site by adding each element.
• Relates it to a Construction document: “Here is what the building looks like (holistic view), and here are the walls, floors, etc of the building (drilling into the details)"

Color:

• Color is fine. Not distracting

Typography page:

• Makes sense that there is a lot of text here, but it feels like too much

Principles:

• Text is easy to digest. Points and clear. Appreciates that there very specific examples.
• Space underneath sub nav is awkward
• “Offer control” example #3 is on top of light grey box, while everything else with numbers is dark grey

Accessibility:

• "Shouldn’t there be a way to pause this animation?"

Guidelines:

• content on Accessibility page doesn’t feel as digestible as content in Principles (very small chunks of information)

Grids:

• "Shouldn’t there be a way to pause this animation?"
• Too much text at the beginning to the page. I want to see visuals before I scroll.
• “I have to scroll to see the interesting stuff!"