DRUPAL FOR DESIGNERSBringing Strategic UX to Drupal Projects

Dani Nordinfounder, the zen kitchen

• UX Designer and Strategist

• Specialize in design strategy, UX and prototyping for Drupal projects

• Author, Drupal for Designers series

Contact@danigrrldani@tzk-design.com

Lifecycle of a Drupal Project

Discovery• Understand the client’s specific functional needs• Get clear on the client’s marketing and business goals, and

how this project fits in• Get a handle on resource issues, time investment and other

practical considerations• Research the client’s competitive landscape and audience

UX/Architecture• Get an understanding of the site’s target users• Map out how users will flow through specific key tasks, and

what information needs to be there to support them• Find out what content exists for the current site, what needs

to be created, and how the content will be organized• Come up with a set of assumptions, and standards that will

govern the project as you move forward

Selling UX to your team• Back up arguments with success stories from similar orgs• Start with a smaller project/section of the site to build

credibility and show success of the approach• Find techniques that work with the team’s project style• Agile, Lean, Waterfall?

• Set reasonable expectations for deadlines, project flow, and what can actually be accomplished• Get major stakeholders on board early• Lead developers• Managers

UX TECHNIQUESFor Drupal projects

Market research• Assess competitive landscape• Look at competitors• Look at market segments/metrics• Key questions:• What makes your client different?• Who are its customer segments?• What marketing tacticsare currently in play? What has worked and

what hasn’t?

User interviews• Define 2-3 main user types• Set preliminary characteristics based on market research• Aim to interview 3 users of each type• Get client’s help in recruiting participants• Develop questions ahead of time for each type of user• Record interviews for later transcription/analysis• Timing: ½ hour for interview, ½ hour for notes, 2-4 hours

for thematic analysis (once interviews are complete)

PersonasUse for:• Understanding

primary user groups. • Prioritizing

content/functionality needs.

Include:• Typical tasks• Content areas of

interest• Reasons for visiting• Messaging priorities• “Pain” areasBuild from research, preferably 1-3 interviews in each category

Post-upsUse for:• Uncovering themes

from user research• “Sketching”

information architecture

Benefits:• Can be done

anywhere• Very quick to

create and update• Gives stakeholders an

opportunity to participate

Drawbacks:• Uses a lot of paper

Mind MapsUse for:• Uncovering themes

from user research• “Sketching”

information architecture and menu hierarchy

Benefits:• Very quick to

create and update• Helps to see the

whole pictureDrawbacks:• Requires special

software• Clients generally

don’t “get” them

Task FlowsUse for:• Explaining how a

user completes a given task

Benefits:• Helps frame the

design challenge• Helps inform design

& dev team’s processDrawbacks:• Requires special

software• Clients sometimes

don’t “get” them

WireframesUse for:• Establishing page-

level content & functional priorities

Benefits:• Can be sketched or

done in software (Axure, Balsamiq)

• Very familiar to most project teams

Drawbacks:• Often doesn’t take

real content into consideration

• Can be hard for stakeholders to visualize

Digital PrototypesUse for:• Showing stakeholders

how real content & functionality will flow

• User testing and iteration of designs

Benefits:• Can be used for

remote testing and feedback

• Saves time over prototyping in Drupal

Drawbacks:• Doesn’t produce

production-ready code

• Lack of visuals makes it hard to test color, emotion, etc.

PROTOTYPING

Prototyping: Two Approaches• Prototype complex functionality in Axure or similar product• Test task flows and assumptions with real users, and see where you

need adjustments• Avoid spending time on “production code” before you know whether

a given approach is the best option• Refine functional requirements and understand what needs to be

done to finish the project

• Start setting up initial Drupal architecture, and laying in content to see how it works in “the real world”

When to Prototype in Axure• When functionality is complex and time-consuming

to build in Drupal• When development will be done by others on the team,

or by another vendor• When functionality has not been defined yet, and

development tasks have not been defined

When to prototype in Drupal• When there’s a large amount of content to migrate

into Drupal• When complex content relationships are involved

(particularly using References, Views, etc.)• When you have stuff to build that’s already been defined

(content types, Views, etc.)

QUESTIONS?@danigrrl on Twitterdani@tzk-design.com