Design for Drupal 2015 - Boston

Design for Drupal, Boston is an annual web design camp covering all aspects of design, UX, & theming for Drupal websites.

Rethinking UX Research: Best Practices for Successfully Evaluating and Improving Your Web Sites

by Christine Perfetti

How do you really know what your users want? How do you ensure your designs work for your prospects and customers? How can you be confident that your design changes improve your site?

• What prevents you team from running UX research studies
  • too scientific
  • slows the team down
  • unsure about the results
• Involve stakeholders at the beginning
  • Understand business problems and what your stakeholders need in order to use the data to inform desicisons.
• It's about quality, not quantity.
  • start small, pick your stakeholder.
• Types of Studies
  • Review the web analytics.
• Data sources
  • visitor traffic and server logs
  • conversion funnels
  • search engine logs
  • if they can't find what they want, they go to search.

800,000 of Microsoft's page have never been loaded from the server.

• Not only business goals, but also improve design.
• A usability test involves putting your users in front of your product and obsering the results.
• Usability tests can be done anywhere.
• Running a test session
  • Greet the user
  • Explain to tuse how the test will work
  • Give the users tasks to complete
  • General Q/A
  • Debreief with observers
• What should we look for?
  • back button
  • pogosticking
  • pick a link, didn't get what you want, so you go back and try again
  • users are going back and forth between pages to try to find the information they want.
  • search
  • "...but I use search on Amazon.com", if they know exactly what they want then search is okay.
  • FAQs
• 5 second test
  • Show a user a page for 5 seconds and ask:
  • What can you tell what the primary purpose of the page is?
• Build empathy
• Start with the problem, not the solution.
• Ethnography
  • its really lean and cheap
  • Tips
  • you are the apprentice
  • focus on the person
  • forcus on the present and past
  • avoid leading questions
  • ask open-ended questions
• Design charetts for research using internal stakeholders.
  • Early stage sketching and telling us what they know about their users.
• Prototype with Paper
  • Think about the interaction flows.
• Getting stakeholder buy in can't be done with evangelzing, but rather by getting them involved early.

Why Did They Say That? Understanding Clients -- From a Client

Christina Inge

Questions developers and designers have clarity, directions, changes in direction, timelines and feedback.

Why does this happen? Internal to the client usually and has nothing to do with you. Part of it is a different perspective, a different langulage or frame of reference, project imbalances on either side and different thinking styles.

Clarity - language differences from thinking style. They might need it explained in different ways. Visual vs verbal thinkers, communicators. Sometimes they need to talk through thanks a lot.

• Directions project management skills
• Understnding of web design process
• Overly high expectations
• Consesus-internal changes

Feedback is really import. When you don't get feedback, realize that they are often very busy, fires break out. Budget change and stakeholders go away.

• Know your stakeholers
• Ask and Listen
• Whose viewpoints are most critical?
• What are their needs?

Address different needs

• Business needs vs design needs
• Marketing needs:
  • get customers (more important than esthetics)
  • gain consensus
  • use different tools
  • CRMs
  • E-mail
  • Messurement
  • Get leads

Be Proactive

• Manage expectations, but also educate
• Blog expectations but also eucate
• Blog, socials media, email education
• Customers appriciate
• Nudge

Giving Great Feedback

Be specific

• Is the working vague or open-ended?
• Would someone else understand?
• Am I identify a problem?
• Could this be an actionable to-do item?

Less Specific vs more specific

I don't like it. Make it pop!

Theis design might not appeal to our younger audeince. I think the colors don't look friendly enough.

Goal-Oriented

• Why do I want to add this?
• How will this suggestion benefit a user?
• How does this help accomplish goals?

Less Goal-Oriented

My favorite websites have large photo carousels...

More Goal-Oriented

Users need to feel comfortable to use our services, adding photos of our staff might help us achieve this goal.

Organized

• Consolidate
• Categorized
• Prioritized
• Formatted

Timely

When should I offer my feedback? Don't let it prevent you from providing it, just check with the PM to see if it is possible

Communiticating Clearing

• Show empathy
• Point out things you like and don't.
• Establish a common vocabulary.
• Consider other methods
  • typed
  • spoken
  • visually
• Skitch or annotated screenshots are great.
• Photos of sketchs.
• Reread & Revise
• Des this meet the great feedback criterea?
• Ask questions.

Enhancing Design with Adaptive Content

@joelsteidl @hoodedcloak74

Adaptive Content is broken down and structured. Displayed in mutiple places. Could be comparable to the card catelog, takes content of media and creates metadata about the item. Allowing you to create a structured representation of the orginal media.

Why does this concept actually matter? - communicating with your users. - variety of devices and contexts - always a plesant experience

Unadaptive content - WYSIWYG - encourages writting in "blobs"

Design control is the real advantage.

How to go adaptive - What content needs to be displayed? - How the content will be entered into the system? - Where the content needs to be displayed?

• Defining the fields.
• Defining the view modes.
• Design

So how do we implement it?

• Content types
• View modes
• Views

My Brain is Full: keeping up with Front-end innovation

How did we get here?

IE8/7/6 56% of market share

Blueprint CSS

960gs

Web Typography

The Anti-Handoff

Erin Hollowway @justlastweekend

We have to think about alot more, we don't know our media. We can't increase ideation time.

Handsoffs suck, they just do.

• Dissolve ambiguity
  • Figure out who is on your team.
  • Get involved & organized
    • Create a project plan, do this together.
  • Define Touchpoints
    • WEhn to invite people to party, when not to.
• Utilize your Design Tool
  • Asset Exports with Generator
  • Layer Comps
  • Grids
• Wireframing
  • mapping the content