The document outlines a comprehensive approach for integrating strategic user experience (UX) design into Drupal projects, emphasizing the importance of understanding client goals, user needs, and content organization. It provides detailed methodologies for conducting market research, user interviews, and creating personas, alongside various UX techniques, including wireframes and prototypes, to enhance project outcomes. The document also discusses the different scenarios for using prototyping tools based on project complexity and content requirements.

1. DRUPAL FOR
DESIGNERS
Bringing Strategic UX to Drupal Projects

2. Dani Nordin
founder, the zen kitchen
• UX Designer and
Strategist
• Specialize in design
strategy, UX and
prototyping for
Drupal projects
• Author, Drupal for
Designers series
Contact
@danigrrl
dani@tzk-design.com

3. Lifecycle of a Drupal Project

4. 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

5. 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

6. 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

7. UX TECHNIQUES
For Drupal projects

8. 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?

9. 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)

10. Personas
Use for:
• Understanding
primary user groups.
• Prioritizing
content/functionality
needs.
Include:
• Typical tasks
• Content areas of
interest
• Reasons for visiting
• Messaging priorities
• “Pain” areas
Build from research,
preferably 1-3 interviews
in each category

11. Post-ups
Use 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

12. Mind Maps
Use for:
• Uncovering themes
from user research
• “Sketching”
information
architecture and
menu hierarchy
Benefits:
• Very quick to
create and update
• Helps to see the
whole picture
Drawbacks:
• Requires special
software
• Clients generally
don’t “get” them

13. Homesteaders Unite
User Flow
v. 2.0
July 1, 2011
Find Events?
Task Flows No
Yes
Use for: Host Events?
Search
• Explaining how a Yes No
user completes a Maybe
given task No
Become an
Organizer
Benefits: Events in
area? Why Post
Post blogs
• Helps frame the Events?
or video?
Yes No
design challenge Drupal Signup
• Helps inform design Choose
Yes
& dev team’s process an event
Eventbrite Signup Why post
Drawbacks: Create a post
your stuff?
• Requires special
software Post Event
(Eventbrite)
• Clients sometimes Forums
don’t “get” them Go to "My
Account," get
RSS Feed
(Eventbrite)
Paste RSS URL
into user profile
(Drupal)

14. Wireframes
Use 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

15. Digital
Prototypes
Use 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.

16. PROTOTYPING

17. 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”

18. 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

19. 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.)

20. QUESTIONS?
@danigrrl on Twitter
dani@tzk-design.com