Step One
Drupal site planning
Letting user experience guide workflow
@danigrrl
The process
Identify who you want and who you don't want to visit your
site
Use want list to identify specific audience targets.
Establish:Personality traits
Content preferences
Key content landing areas
Interaction preferences
Turn landing areas into wireframes/prototypes based on
established content and interactive preferences.
Use wireframes to determine site workflow: modules, views,
blocks, etc.
Getting down to basics
t
Think on your feet
Use mindmaps, sketchbooks and whiteboards to quickly sketch out
ideas
Iterate
Refine through research
Want/Not Want
Helps figure out content (i.e. how do you attract the people you
want and turn off the ones you don't?)
Makes it easier to lose functionality that doesn't fit the
ultimate goal
Practical example.
Here's a guy. His name is Joe. Joe is a serial entrepreneur.
Type A, with a wicked case of ADD. He launches new businesses
because he can't sit still for too long, and finds the best people
he can to run them. While he tries to be smart with his money, he
has no issue paying well if he's confident he has the right
person
for the job.He's looking for someone to help him launch a website
for his latest venture.
What does Joe want to see?
The quality of your work (portfolio)
The types of clients you work for (client list, home page)
Insight on how you think (process, blog)
How to get in touch with you (contact information)
AND REALLY NOTHING ELSE.
How does he want to interact with these things?
Joe's a busy guy. He thinks visually, not verbally. He will
likely click around on a couple of different links, but he's a
skimmer.Priorities:Focus on visuals rather than text
Give the option of reading, but don't require it
Don't make him work to find important information (especially
contact info)
So where are Joe's landing pages?
Project landing page
Project node page
Clients page
Process page
Contact page
New >>Constructing the wireframes
Portfolio: will probably click around, maybe wants to see a bit
of information about the project, but mostly wants to see the
pictures.
Current ^
Constructing the wireframes
Process: Joe's a busy guy. He prefers visuals to words, and
tends to skim. He doesn't need all the details; just a high-level
overview. He needs to trust that you know what you're doing.
New >>Current ^
Constructing the wireframes
Blog: will probably skim through a couple of entries, click on a
couple that interest him, maybe check out a couple of tags here and
there. If he likes what he sees, he wants to be able to comment or
subscribe to the feed.
New >>Current ^v
Breaking it down
Use the wireframes to identify the key views, classes, blocks,
etc. that you need to create.
Page: our-projectsIntro text
View: projectsDisplay 1: Featured Project1 Random project,
client name, intro, link,
primary image; sort by qualification featured
Display 2: Project4 random projects, can we sort by not
featured or need someone else?
Primary image (grid-3); client name,
taxonomy, quick link
Thanks!
Any questions?
@danigrrl
Thanks!
Any questions?
Dani Nordin :: 617.412.0585 :: [email protected]
Dani Nordin :: 617.412.0585 :: [email protected]
