-
Notifications
You must be signed in to change notification settings - Fork 39
Interviews Watson Visual Designers
Conducted on 3/9/15
Products Currently Working On -
Chef Watson, Developer Cloud, Machine Translation, QA Tool, Watson Knowledge Studio, Watson Explore
- NO to Open Sans - the personality didn't feel right
- We need to be more conscious on how the fonts show on Windows machines
- Letter Spacing / Line height is all eyeballed or pulled in default from a framework
- Font stack the is mostly used -- "Helvetica Neue for IBM", Helvetica, Arial, sans-serif;
- Not a single designer mentioned Roboto for mobile font
- Current Watson palette is not accessible - designers have been using color as accents
- Color hierarchy was determined by the lack of accessibility
- If one color was used the most, it was the blue
- When it comes to mobile, one designer just let's their FED "just handle it"
- Only 1 designer is doing mobile first -- mostly because the products for which I interviewed for are not consumed on mobile devices
- Also, lack of knowledge when it came to developing production level code effected whether or not they designed Mobile First
- One visual designer just let's her FED "just deal with it" when it comes to picking a grid / aka responsive design
- All visual designers interviewed use a grid system, except for one
- Grids that are picked are chosen either by what they are comfortable using or what looks good
- Most everybody has the "IBM Watson Product Name" as their header"
- "Logo" is used on the login screen
- Avatar is used as a loading graphic
- Color scheme is used by one designer to dictate it's a Watson product
- Couple of the designers don't have use for any branding -- demo applications using the APIs
- Illustrator, Sketch, and some coding
- ALL designers interviewed have wonderful working relationships with their FEDs
- One designer gets into the GitHub repo after the FED does their initial pass to go through the detailing process and makes sure everything is up to her standard
D1 - Helvetica Neue for IBM - One front end she works with has this font stack, but the other one doesn't.
D2 - Everything she does is for the web, font stack, Helvetica Neue for IBM, Helvetica, Arial, they have to be in line with marketing and that’s what they use. Found the font stack through inspecting the marketing site. Everything is in flux, they decided to not use Open Sans because it felt out of character with the other other fonts.
D3 - Helvetica Neue for IBM, if something that is not getting shown to anybody Arial Tahoma
D4 - Helvetica Neue for IBM, had used Open Sans but then it came through Josh that no, don’t use that anymore
D5 - Helvetica Neue (NOT for IBM), then goes to Arial then sans serif
###How do you decide which font to use?
D1 - She started working in an internship, that's what she used then and she's carried it through.
D2 - Currently going through a redesign, the biggest concern is accessibility
D3 - If it’s anything official, the default H for IBM, then all the variation
D4 - Told that Helvetica Neue is what they need to use, therefore that’s what she sticks with. When it comes to weight, the balance is very distinct to IBM. Not just about the font, it’s about the different weights as well.
D5 - This is the font that IBM seems to use. She started about 2 years ago (before Watson group existed). They were starting to do some design language things. She thinks it looks really good on Mac but not on PC. Font weights don’t come through also on Windows.
###What are your fall back fonts when you can't use your first choice?
D1 - Doesn't use anything outside of Helvetica. She leaves the fallback fonts to the front end devs.
D2 - Arial
D3 - Whatever is in the library, font-family: "Helvetica Neue for IBM", Helvetica, "Open Sans", Arial, sans-serif;
D4 - Right now, none. If she was developing more, she would set the default to the backups (industry set standards).
D5 - If working on UI mockups (not in browser). There was a time when she was playing with Open Sans, but it didn’t give the product the right personality. Not sophisticated enough, so she decided to stick with
###How do you make decisions on letter-spacing, line-height, size ratios?
D1 - She uses the IBM DL for type scale, if it looks right, then she keeps it. Same with line spacing. Letter spacing - 5, she has to go to her front end to check it.
D2 - Starts out with a rough type scale and adjusts from there, eyeing it. They try to be in scalable units (mobile first)
D3 - Currently, she’s doing wireframes that uses the default bootstrap styling. If there was a library she could refer to, she would go to that.
D4 - She started in print, so there’s a following that happens there - based on what you want the user to pay attention to first. Body copy - all set one was as opposed to a sidebar that you didn’t want to distract the user from, she would increase the line height to give it more spacing. Still legible, but different feeling than the main copy. She’s basing all her decisions on previous experience, but also considers what the content is.
D5 - She takes the IBM DL into consideration. Their general concepts are totally her style, but she uses her eye to see what works well.
###How do you determine which colors to use? (look, feel, personality, rules, tool)
D1 - Trial and error, she was using the very first color palette until the new IBM Design one came out. She really likes the blue that was used.
D2 - The blue and green, uses whatever looks with those two and pick ones that are accessible, usually grays and whites
D3 - She tries to use the Watson colors when she can, since the blue and green aren’t accessible, she’ll use them for text and not background colors. She defaulted to the IBM Design color palette, she makes sure to check the color contrast. Body text is neutral grey 50.
D4 - She feels like colors comes second to layout - color is simply to help accentuate and not an essential component of the design - b&w would still work. She’s been choosing her colors based on what is typically used in the software industry i.e. for things like alerts and things. The cooler palettes are more in line with what she gravitates toward. 50 shades of blue. She used pretty much every color she could because the content was a viz graph.
D5 - Her team has been going through a visual overhaul since December, and that’s when Jeri started working on the color palette stuff. One of her iterations is what they’re working with. She hasn’t been using the pattern library site much at all.
###How do you determine your color ratio (color heirarchy)?
D1 - White and grey, blue and green as accents. She tried to come up with a system, but with her product.
D2 - Ad hock, wants to define with her next redesign. Before there was no content, therefore the hierarchy was a little pieced together.
D3 - Her design was very minimal, blue was primary action (link, button), used blue as header, all body text grey 50 then they needed an alert bg color, she used a tint of one of the greens. Color was used very minimally.
D4 - Based on gut feeling. What looks good to her, there is a balance. When you use a lot of color it can evoke a certain feeling. That consciously drives your decision.
D5 - She worked with one of Jeri’s ratios that she had provided in some keynotes and presentation. Visual designers would have meetings and she would provide those assets to them.
###If you use a grid, how do you determine what grid structure to use?
D1 - She loves grid, pro grid,looked at the 960 grid, as things progressed and she had to keep changing things around she had to drop it.
D2 - Yes! 12 column grid, she chose it because it was divisible by a lot of numbers
D3 - Uses the Bootstrap grid, UI was basic no need to go beyond a basic grid structure.
D4 - Yes. She likes the golden rule, pleasing to the eye. It divides nicely.
D5 - She doesn’t really follow a grid system with her toolset. The FED is the one who takes care of it later.
##MOBILE
###How do you design for mobile? Mobile first?
D1 - She's not currently.
D2 - They are now, but did not at first. James was the only front end at the time and didn’t have experience developing for production level. He was trying to get the best possible thing out. Demos have been designed mobile first, and they’re going to continue that process.
D3 - Trying to do mobile first, within reason since the application won’t be used in mobile it will only go down to tablet size.
D4 - An advocate for mobile first! If she can fit everything perfectly in a smaller screen, then there’s a way to scale that out for larger screen sizes.
D5 - Her product currently supports tablet, but all the designs are scalable. One of the FEDs is super gun-ho about mobile first and will take it into his own hands if something is out of sync or missed.
###Anything specific for mobile? Fallback fonts, graphics, etc?
D1 - Nope.
D2 - Likes grids! If adhering to grid, there will be natural break points. Graphics can be broken on new line or scaled for mobile. Uses Rem for font units.
D3 - More thought into designing navigation, i.e. the hamburger menu. Making sure the content makes sense and is in the right order vs. stacking and not wanting to hide things. Thinking touch vs. click.
D4 - Intent - every site has a different purpose. The content - dictates what is to be most prominent.
D5 - She would not be assigned to make something specific for tablet.
##PRODUCT
###How do you show it is a Watson product? (rely on color, use avatar, watermark?)
D1 - Upper left hand corner has the logo, she's recently fallen in love with a certain header.
D2 - Through the color scheme, trying to follow the IBM DL through graphic elements. Maybe the copy? Something that is changing based on talking with marketing.
D3 - Title: IBM Watson Tool with Machine Translation directly below it. There’s a Machine Translation Logo. Uses the avatar as a loading graphic.
D4 - The bar at the top with the non-eyelash logo with the name of the product next to it.
D5 - The only way to tell is the color palette. She doesn’t know what Watson is supposed to look like that. They have done some demos with Q&A service, at that point the avatar was in there either in the search box or search results. By default right now admin will have to plug those services in.
###Logo - how do you treat the Watson logo? Any guidelines you refer to?
D1 - No, she just knows that it needs to go somewhere.
D2 - It varies, especially with the dev cloud they can brand the experience, but you’re not asking Watson questions. When demo applications are built, you don’t want IBM or Watson stamped all over it.
Logo Type - She had to recreate it in SVG, rarely uses it. If it is used, top left corner
Avatar - Used as interaction
D3 - Doesn’t use the Watson logo currently.
D4 - She had a default template with the logo. Outside of that, she’s used it as a decoration. She’s used guidelines for the avatar as well (from marketing).
D5 - IBM Watson Explore (default logo) - Uses the different font weights.
###Other products you have seen that treat their brand awesome?
D1 - She's going to get back to me.
D2 - Google’s Material Design - just something that is very clear, something that anyone can use if they want to design something well.
Apple - invisible branding, immediate association
D3 - Coke, Nike, McDonalds - so big enough that you don’t need text next to their logo. You can do whatever you want with that logo and still recognize it.
D4 - Google - Clean. Search, no clutter. They really thought about the user. You can access every other product through the main nav.
D5 - TurboTax - she used it for the first time a month ago and thought it was one of the most incredible experiences. Taxes are pre-determined to be hard, but the software made it easy and a really pleasant experience. Seems like there are similarities in how Watson wants to be - A specific task and Watson gives a person the power to do that on their own.
##OTHER
###How do you handle/determine white space?
D1 - She LOVES white space. She has no problem with excess white space... makes her happy. She uses her content, lines it up where to go.
D2 - Difficult to determine when doing responsive design. Uses it as a guide for determining sections of content. What looks good, feels right in the layout. It can be a powerful or quiet statement.
D3 - Been trying to align their styling with other Watson UI’s - WDA, uses the Design Language as well, since those use white space it’s easy to reflect that in her designs. It’s more just calculating it by eye.
D4 - For balance. It’s your friend :)
The reason for white space is to make content more digestible.
D5 - No rhyme or reason to it. Just what feels right. She love white space, she uses it a lot.
###How do you do determine margins/padding around elements?
D1 - No guidelines, just what looks good. She'll wing it first, then adjust to maybe increments of 5-10.
D2 - Depends on layouts vs. Something really specific and controlled (i.e. logo, buttons - had to be very defined), in layout elements it is usually what feels good. She determines it in code vs. Illustrator, proportions look different.
D3 - No specific guideline, based on eye. Trying to not use fixed, but more percentages.
D4 - It’s based on feeling - she likes padding on the left side to be 20-30px, she feels like the design is cramped with the content is crammed up against the side of the screen. Otherwise based on previous experience - what has worked in the past. Some industry standards, but some things just have come with experience.
D5 - Just based in her experience with the product and knowing what the content needs to breath. All taking into consideration that a ton is happening on a page/interface. You need to find the perfect balance to let things breath. She works with 2 FEDs, one will look at her stuff and nail it exactly. The other one she might have to guide a little bit more. She has access to their code, she’ll go in and make the tedious little tweaks herself and push it to the production code.
###Tools of your trade? What do you usually work in?
D1 - Illustrator, Sketch - useful for vector/pdf, Trying to get into code a little more.
D2 - Almost entirely in Illustrator. She used to red line, export to PDF for her FED. Now that they have a working relationship, they can speak to different elements on a grid (i.e. this thing needs to be 2 columns vs 3). He takes a first pass at the CSS, then they work together for a couple hours to refine.
D3 - Code — if any vector work, she uses Illustrator but not too often. Firebug in browser. She did UX in post-its and sketching then went to the browser. Ricardo would make changes in the mid-fi, so she could make changes easier and more often. Sometimes though, they went to code soon and would have to start over.
D4 - Illustrator, used to be heavy in Photoshop. Learning Sketch. Some code.
D5 - Sketch!! It’s really slick and simple — cuts away all the other features that you don’t need for designing a UI. Specifically created for UI designers. Git, Sublime.
###Any other ways you've used the IBM Design Language?
D1 - She goes to the Design Language for inspiration, she likes seeing what other Watson products are doing. She gets access to other Watson products through the all hands meeting.
D2 - Use it for things like graphical standards, she doesn’t design interfaces so it’s not a 1:1 direct relationship (i.e. the icons are made to be used for software). They haven’t moved to the new palette yet. Use for text scales, flat clean style.
D3 - Referenced the motion stuff, doesn’t reference the color palette anymore (hard to get to and to grab the hex values). She has gone as far as creating her own HTML document with all the hex values in their that are easy to grab. She likes to use the gallery as inspiration.
D4 - Color palette - specifically the off-white and the greyscales. She likes the warm over the cool (personal preference) feels like it balances nicely with the cool blues. It evokes a certain feeling. Type scale and iconography.
D5 - Icons, general look and feel (inspiration), they don’t have a pattern library so there aren’t any specific exact things to use.
###When you've made all your visual design choices, what will cause you to make changes?
D1 - Meetings, user research, she has a Facebook group (Chef Watson)
D2 - Research and usability testing, accessibility
D3 - Research, user interviews, project was progressing so quickly that she couldn’t spend getting the refinement down.
D4 - Development. She doesn’t think that she’s going to walk away with anything perfect the first. Change is inevitable.
D5 - Talk to engineering — there might be some constraints, feedback about features that could be done easier. She might look at it the next day and want to tweak something.
###Any other style guides outside of IBM Design you like to reference? What do you like about them?
D1 - Dribbble, Behance, Pinterest, things that link out to other pages, Google Style Guides.
D2 - She created a mood board before before starting on this project.
D3 - Too many to write here :)
D4 - Dribble, seeing what other companies do is very refreshing.
D5 - Google material design — they talk about how they think about certain interactions and it gets her thinking that she should be considering those as well
Android design style guide - same types of things as the google one — oh that’s an interesting way to break things down and think about design. She’s created a rough style guide around the changes that she’s done.
###Other
D4 - Her visuals feel like they’ve been centered around machines (i.e. hard edges, corners). This is an issue with Watson - the Watson logo has NO hard corners or edges. She would like to see more curves and roundedness, more subtleties like that to be more humane.
She doesn’t feel like a pattern library is the right thing to do — you really are dictating a lot of the specific look and feel. In some cases, patterns need to be taken back to simple interactions.