How To Optimize Your Email Workflow - TEDC13 Boston


Published on

Our panel of experts will share their top tips for maximizing productivity, setting client expectations, executing creative briefs, building flexible and robust template systems, and making sure your production process stays on-track.

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Cover some of the more technical and design based processes people can do to optimize their workflow. I'm also going to dive into a few more high level things you can do related to team structure and iteration.
  • •Think modular and reusable. Not in single email use cases.
    •Ask yourself: What type of emails am I going to be designing and sending? Transactional? Promotional? Informational?
    •Defining the type of emails and their purpose up front will allow you to anticipate common use cases
    ◦Use cases become Content Types
    ▪Featured Story
    ▪Featured Product
    ▪Sub Stories
    ▪Upsells/Product Listing
    ▪Flexible Image
  • •Work out Content Priority
    ◦Do certain elements always need to be above others due to higher priority?
    ◦For instance, the header will obviously always be at the top, can the same be said for a feature vs a sub feature?
    ◦Creating a priority guide allows you to make your emails plug and play
    ◦Knowing the priority of modular content and modular pieces allows you to build emails like lego blocks
  • •Once you know your common features design patterns around the individual blocks that will need to be built
    •Remember to think in patterns and not pages
    •You want to keep these as modular and as plug and play as possible
    •So you're designing and building a reusable feature and not something for just a single use case.
    ◦It can be beneficial to design and build several variations of each use case.
    ◦Doing so provides flexibility and keeps your emails from becoming identical on every send
    •Keep your HTML modular as well.
    ◦Build your patterns out in their own tables that aren't tied to other pieces
    ◦If pulling it out breaks something else in the email, it's not truly modular
    •Put it all together
    ◦Even when keeping your mindset on designing reusable modules it can still be beneficial to design out a few full emails just to make sure everything is working nicely
    ◦Dan Mall explained this nicely: "Architects make both blueprints and 3D renderings. However, they also know that there’s nothing like visiting the actual construction site."
    •Being able to refer to a handful of repeatable patterns for color, type, interaction, and actions, results in many emails being all but automatically designed when it comes time to do a send
  • Design pattern resources
  • Design pattern resources
  • Design pattern resources
  • •Create A Pattern Library
    ◦Styles guides are important in keeping everything on brand and on message
    ◦Traditionally these include things like brand fonts, colors, diction, and image specs
    ◦A Pattern Library extends a style guide to include your design patterns, responsive grid system, & code snippets
    ◦Starbucks has an amazing example of this. Instead of being static, their style guide is built out in actual html and css
    Another benefit of this is that you can view styles and how things react in a live environment: photoshop lies!
    ◦Allows designers and developers to quickly and easily go out and see how each pattern is going to react across a range of screen sizes and devices
  • •We've also done this in a static version for clients where we've labeled each of the patterns to easily pull from
    ◦less work up front, but possibly less efficient long term
  • ◦as chris - periodical
    ◦does give you the advantage to continously improve what you're sending
    ◦unlike a website. it's much easier to make changes.
    ◦A design should never be seen as final and unchangeable
  • •Sometimes a wholesale redesign is needed. But you shouldn't let your designs stagnate and only do that redesign once every couple of years.
    •Don't reinvent the wheel each time you send a new email or design a new template. But iterate and improve your core design patterns.
  • • Use the metrics and data available to you - remembering that sometimes a better experience is more important than a single data point
  • Should Tech Designers Go With Their Guts — Or the Data?
    analytics tell us exactly what customers do
    Even if customers say they would never, ever, ever buy rainbow suspenders for their avatar, we just never know what people will do when we’re not watching. 
    Better to trust the data and see what people actually do rather than trust what they say they’ll do.
  • when wondering how much time to spend on the details, designers should trust their instincts
    small changes individually don’t prove worthwhile with data
  • There’s nothing like an A/B test for making an incremental, tactical improvement.
    The key is to measure the metrics that really matter to the business longer term (such as signups, purchases, or user retention) instead of just measuring clicks.
  • • when balancing between tactical easily measurable goals like more clicks, and long term goals like trustworthiness, it’s essential to listen carefully to one’s instincts. 
    Continuous iteration will improve your designs, your customer experience, and engagement rates.
    Don't let your designs stagnate.
  • •All teams are different
    •sometimes a team may just be you. sometimes you may have a team of 10 people with varying skills.
    •the tools and processes that work best for another team may not be the best for yours. Draw from other's experiences and lessons and then customize those processes to be the best fit for your team.
  • •Some designers and developers are now pushing "Design in the Browser". Very few are actually doing this in practice. If designing in Photoshop works best within your team structure don't throw it out just because someone else is preaching against it's use.
  • •Research and experiment with tools. There are tons of them that will increase your productivity and workflow. Find that ones that fit in best with your team structure.
  • List of resources and tools
    Please add more!
  • •openly share knowledge rather than tuck it away for some secret strategic advantage. An industry that shares information and defines best practices makes a better industry for themselves and everyone around them.
  • •Jason Rodriguez on the cusp of crastmanship
    •Seek every available opportunity to write, teach, and speak about what you do.
    •Help build the community.
    •Contributing to this has never been easier.
  • •Blog on medium. No longer have to even set up wordpress. Just sign up and write.
  • •Release case studies. What worked for you? What didn't? If responsive design was a major failure, that's an important data point to have.
  • •Build and Release tools. Fork peoples projects. Zurb has done a lot in this area. So have Campaign monitor and others. You're not giving away strategic advantage. You're helping yourself as well as others. There were initially questions when i released design patterns if this was giving away and advantage. But the feedback and improvement i've been able to make because they're publicly available has been amazing. This has only helped. not hurt.
  • •Have an amazing idea or experience you want to share. Speak at a conference. This conference is the first of it's kind and it's been amazing. 
    •Everyone openly sharing knowledge is the one true way we'll optimize our design workflows. We're all in this together. Get Involved. Give back. Share your own work and experiences.
  • How To Optimize Your Email Workflow - TEDC13 Boston

    1. 1. 1 Create an Adaptable Design System @briangraves
    2. 2. Anticipate Use Cases ‣ Type of Email ‣ Content Types ‣ Common Elements ‣ Content Priority @briangraves
    3. 3. @briangraves
    4. 4. Design Patterns ‣ Content Blocks ‣ Several Variations ‣ Patterns Not Pages ‣ Modular HTML ‣ Fit It Together Photo by MailChimp @briangraves
    5. 5. @briangraves
    6. 6. @briangraves
    7. 7. @briangraves
    8. 8. Create a Pattern Library ‣ Typography ‣ Colors ‣ Image Specs ‣ Navigation ‣ Grid Systems & Design Patterns @briangraves
    9. 9. @briangraves
    10. 10. @briangraves
    11. 11. 2 Iterate @briangraves
    12. 12. @briangraves
    13. 13. @briangraves
    14. 14. Curious About Customer Behavior? Use Data Source: Braden Kowitz @briangraves
    15. 15. Making Decisions About Product Quality? Use Instinct Source: Braden Kowitz @briangraves
    16. 16. Deciding Between a Small Set of Options? Use Data Source: Braden Kowitz @briangraves
    17. 17. Concerned With LongTerm Impact? Use Instinct Source: Braden Kowitz @briangraves
    18. 18. 4 There Is No ‘Best Way’ (Only What Works For Your Team) @briangraves
    19. 19. @briangraves
    20. 20. @briangraves
    21. 21. @briangraves
    22. 22. 5 Get Involved. Give Back. @briangraves
    23. 23. “Once the techniques & tooling are built up, the cognitive load of dealing with bullshit is lifted & more focus can be spent on creating great content.” - Jason Rodriguez @briangraves
    24. 24. @briangraves
    25. 25. @briangraves
    26. 26. @briangraves
    27. 27. @briangraves