Content is the new black. In fact, some people have called it the new interface. Yes, it is a crucial component to any successful design project, but in reality it is the interplay of content and interface design that can make or break an experience. So how do you go about it? Some people design with lorem ipsum. Some people just start writing. Neither of these is quite right. That’s because it’s not about what comes first – design or content – it’s about working together to tell the best story, truly collaborating. Sure, we all love the word collaborative, but it’s not always easy to take two distinct disciplines with very different approaches and mesh them together. In this presentation you’ll learn some successful techniques for integrating content into the research and design process and vice versa, tips on how to avoid common pitfalls and some surefire strategies to end the baton hand off once and for all. We’ll use a recent project as an example of how you too can embrace an inclusive process that yields powerful results.
2. FIRST, SOME BACKGROUND & DEFINITIONS
TODAY WE WILL
« Talk about process
« Identify opportunities for collaboration
and how to do it
« Think creatively about integrating two
very important pieces of design
Dana Young
Sr. Content Strategist
Mad*Pow
4. WHY IS CONTENT IMPORTANT?
“Dealing with content is messy. It’s complicated,
it’s painful, and it’s expensive.
And yet, the web is content. Content is the web. It
deserves our time and attention.”
-Kristina Halverson
11. SOME TOOLS CONTENT FOLKS USE
ê CONTENT INVENTORY
ê MESSAGING ARCHITECTURE
ê TONE & STYLE GUIDE
ê CONTENT AUDIT
ê CONTENT STRATEGY
ê CONTENT TEMPLATES
ê COPYWRITING
12. STAKEHOLDER INTERVIEWS
WITH CONTENT TEAM MEMBER
Include this team member in the interviews in person or at the very least collect some questions
they would ask if there were able to join.
WITHOUT
What are the top two messages you’d like your users to come away with?
Who are you as a company? Can you narrow it down to 5 words?
Who would you like to be as a company? Can you narrow it down to 5 words?
13. USER INTERVIEWS
WITH CONTENT TEAM MEMBER
If you can get a writer or content strategist to listen in on these with you they will have a head start
on their work and you will have a different perspective on the types of information users worked
through and what they need to be successful. You’ll want to ask them to bring that perspective to a
brainstorming session.
WITHOUT
How does the content make you feel? Give a few examples to lead: overwhelmed, informed,
confident, needing more?
Give me three words to describe your experience with this content?
What do you think this company is trying to communicate to you?
14. PERSONAS
WITH CONTENT TEAM MEMBER
Tell a complete story. Invite your content counterpart to participate in a brainstorm about creating a
narrative from both the persona’s point of view, as if the person is speaking to the reader, and then
from the company responding to the persona with the targeted tone and messaging.
WITHOUT
Think about the persona’s communication style – this has a huge impact on what content they will
need/want
Add a section on content consumption – not just for the experience you are designing, how much
they consume and when
16. HERE IS ONE EXAMPLE
TASKS ROLES
STAKEHOLDER INTERVIEWS UX
INSIGHT FROM CONTENT STRATEGIST
CLIENT
MESSAGING CONTENT STRATEGIST
USER INTERVIEWS UX
INSIGHT FROM CONTENT STRATEGIST
TONE/STYLE DEVELOPMENT CONTENT STRATEGIST
PERSONA SKETCHES UX
TASK FLOW SCENARIOS UX
INSIGHT FROM CONTENT STRATEGIST
EXPERIENCE DEFINITION UX
INFORMATION ARCHITECTURE UX
INSIGHT FROM CONTENT STRATEGIST
INTERFACE CONCEPTS UX
INSIGHT FROM CONTENT STRATEGIST
WIREFRAME EXTENSIONS UX
INSIGHT FROM CONTENT STRATEGIST
17. WHAT WORKED
UX NEEDS CONTENT
ü FINDABILITY
NEEDS
ü BITE, SNACK,
ü INFORMATION
MEAL
SCENT
ü PRODUCT INFO,
ü CLEAR CALL TO
PRICING, PROOF,
ACTION
PROMO
ü USABILITY
ü FITS ALL
REQUIRED
STAKEHOLDER
CONTENT NEEDS
20. STAKEHOLDER EVALUATIONS
INITIAL INTERACTION REVIEW
Stick with basic headings to show content areas and thought around content priorities but go with
the Greek! Too many people tend to get caught up in the content at this point and you won’t get the
design feedback you need.
ROUND TWO
Add suggested or approved tone/style to the headers, leave the Greek.
FINAL APPROVAL
Try to get the content as close to what you envision as possible so they get the complete picture. Use
this version and approval step to walk through the content areas individually and talk through it’s
appropriateness and how you/they plan on collecting, migrating or implementing.
21. USABILITY TESTING
ê Test with content that is as close to the real deal as possible
ê If
you are using or developing a new tone this is the perfect time to test it - ask those tone
questions!
ê Ask about content needs and information needs up front and then compare that to what actually
exists
22. Questions
Email me at dyoung@madpow.net
@wholelotacolada
Editor's Notes
Dana IntroWhat we will cover
COPY VS ContentIMAGESVIDEOSHEADERSCAPTIONSPDFSTITLESALT TAGSMETA DATAContent is the documentation of information. It is not just copy and it isn’t a stagnant piece that can just be plugged into a design anymore. It is living, breathing, evolving and dynamic – it is true knowledge transfer.
People seek out something online or in an app to gather information and knowledgecontent is where they will find their answers!
SOME DESIGNERS DESIGN TO LOREM IPSUM
Content folks can work in silos and have done so successfully for hundreds of years.NewspapersStart with a format that has been in place for everWriters know what they need to deliverPhotographers just shoot and send it inCopy editors Designers/Layout brings it all together
Unlike Newspapers, most experiences don’t use a standard template and if they did we would question the quality. So, what are these folks to do when you take out the template and the base knowledge of what we are writing or designing to
HOW DO WE MOVE FROM WHAT COMES FIRST TO HOW CONTENT AND DESIGN COME TOGETHER TO INFORM EACH OTHER?
HOW DO WE MOVE FROM WHAT COMES FIRST TO HOW CONTENT AND DESIGN COME TOGETHER TO INFORM EACH OTHER?
Get to know one another!Where can you leverage each other’s talents?
COLLABORATION CAN BE ORGANIC BUT YOU NEED TO PLAN ON WHERE TO FIT IT INTO THE PROCESS SO YOU ENSURE IT HAPPENS
HOW A RECENT PROJECT WAS APPROACHED FROM BOTH CONTENT & DESIGN
WIREFRAMING WHITEBOARDING SESSIONShow whiteboard screenshot to wireframe to final layout for the main product pageTALK ABOUT what each different perspective brought to the table and how that impacted the final designMAIN GOAL HERE WAS CONVERSION
To really find your content/designzen you have to be flexible. Every team is different and every project is different but being open to new ways of working together or thinking about solutions is essential to great work and that perfect balance. Try a few ways of collaborating and then set a framework for the process. If you know when you can come together you can feel free to improvise or add a new approach without losing site of your goal of integration.