Recommended
More Related Content
What's hot
What's hot (13)
Viewers also liked
Viewers also liked (20)
Similar to If I Only Had a Frame(work): Crafting Experiences Across 3rd-party Systems
Similar to If I Only Had a Frame(work): Crafting Experiences Across 3rd-party Systems (20)
Recently uploaded
Recently uploaded (20)
If I Only Had a Frame(work): Crafting Experiences Across 3rd-party Systems
- 1. If I Only Had a Frame(work): Crafting Experiences Across 3rd-Party Systems DrupalCon 2015: Los Angeles May 13, 2015 #DrupalCon #DrupalConFrame
- 2. BRETT MEYER DIRECTOR OF STRATEGY @brett_meyer LEV TSYPIN CTO, OWNER @levelos #DrupalConFrame IF I ONLY HAD A FRAME(WORK)
- 3. The Problem IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 4. The top reasons customers leave a brand are poor quality and rude customer service..
- 5. 39% of respondents said they avoid vendors for two or more years after a bad experience. – Z E N D E S K S U R V E Y O F 1 0 0 0 C U S T O M E R S
- 6. One Bad Experience… IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 7. What’s This Got to Do with Me? IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 8. Case Study: Livestrong IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 9. Case Study: Livestrong IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 10. Case Study: Livestrong IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 11. Case Study: Livestrong IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 12. Case Study: Livestrong IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 13. Branding Beyond the Website IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 14. And the Data. The Data. IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 15. So, what’s the solution?
- 16. Requirements Gathering IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 17. Requirements: Databases IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 18. Requirements: Data Sources IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 19. Requirements: Processes IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 20. Map the Current Set-up IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 21. Map the New Set-up IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 22. You Know the Pieces IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 23. How Do They Fit Together? IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 24. Technical Solutions IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 25. Best: APIs IF I ONLY HAD A FRAME(WORK) #DrupalConFrame • Seamless user experience • Integration happens on the server • Maximum flexibility
- 26. #DrupalConFrame
- 27. #DrupalConFrame
- 28. #DrupalConFrame
- 29. Better: Embeds IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 30. #DrupalConFrame Better: Embeds IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 31. #DrupalConFrame Better: Embeds IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 32. Good: Clear Messaging IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 33. #DrupalConFrame Better: Clear Messaging IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 34. #DrupalConFrame Better: Clear Messaging IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 35. Crap: Faking It IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 36. And then there are the human systems.
- 37. Compromise IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 38. IF I ONLY HAD A FRAME(WORK) #DrupalConFrame Don’t Recreate Everything
- 39. IF I ONLY HAD A FRAME(WORK) #DrupalConFrame Don’t Recreate Everything
- 40. IF I ONLY HAD A FRAME(WORK) #DrupalConFrame Don’t Recreate Everything
- 41. Simplified Navigation IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 42. Simplified Navigation IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 43. Different Navigation IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 44. Different Navigation IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 45. No Navigation IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 46. Technical Limitations IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 47. Design IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 48. Design in the Browser IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 49. Component Design IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 50. Styleguide IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 51. Governance IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 52. Establish Three Things IF I ONLY HAD A FRAME(WORK) #DrupalConFrame • Roles & Responsibilities • Workflows • Evaluation & Review Standards
- 53. Roles & Responsibilities IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 54. Workflows IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 55. Evaluation & Review Standards IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 56. Basically, Write it Down IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 57. Post-Launch IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 58. Change Management IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 59. – M A Y A A N G E L O U “If you don't like something, change it. If you can't change it, change your attitude. .”
- 60. Habits IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
- 61. – M A R K T W A I N “Nothing so needs reforming as other people's habits.” .”
- 62. Win the Day with Data IF I ONLY HAD A FRAME(WORK) #DrupalConFrame
Editor's Notes
- Presenter: Brett [Personal Story] Photo Credit: https://www.flickr.com/photos/chrisharley/3684559056/
- In the world of physical sales, the top reasons customers leave a brand are poor quality and rude customer service: http://www.superoffice.com/blog/customer-complaints-good-for-business/
- From a ZenDesk survey: – 39% of respondents said they avoid vendors for two or more years after a bad experience. – More than 40% recommended others not buy products or services after having a bad customer service experience. I guess the lesson there is that I hold grudges a lot longer than most people. https://www.linkedin.com/pulse/20140928001923-8938492-2-years-is-how-long-a-customer-will-avoid-your-brand-after-a-bad-experience
- Presenter: Brett One bad experience can negate dozens of good experiences — because we expect things to turn out the way we want them to. Photo Credit: https://www.flickr.com/photos/keoni101/5530280949/
- Presenter: Brett While we’re likely going to just build a website, our clients, our organizations, have to take into account the wider space their brand occupies. It’s not just a website that’s going to complete the user experience — not when they outsource things like their online stores, or their marketing automation. Marketo is great at what it does, but if a rogue marketing associate makes dozens of landing pages with no relationship back to the brand, they run the risk of ruining the user experience we’re spending so much time crafting. So, we can’t just limited ourselves to thinking about how people are going to interact with a website. We owe it to the people we’re doing the work for to think about the broader context — and to help them do the same. Photo Credit: https://www.flickr.com/photos/pagedooley/14555354976/
- Presenter: Brett It’s always a bit risky to critique a website, but I chose LiveStrong because they’re clearly wrestling with the problem we’re discussing today, and for the most part – Lance Armstrong aside – I think they’re doing a good job. But we’ll come back to that. First, let’s take a look at what they’re dealing with. As you can see, they’ve got a very nice, if unresponsive, website. It appears to be running on dot Net.
- Presenter: Brett They’ve got a blog — running on WordPress.
- Presenter: Brett And a store, running on top of Yahoo Store.
- Presenter: Brett Then there’s a custom event system, which they appear to have built with Django on top of Yahoo Store. Incidentally, if you haven’t used Built With, it’s pretty nifty. builtwith.com. Check it out.
- Presenter: Brett Finally, they’ve got a donation system, which again appears to be Django over Yahoo.
- Presenter: Brett And this doesn’t take into account their social media presence, their email platform (or platforms), even their direct mail campaigns. Every one of those is another engagement with a constituent, another way a user can experience their brand. Photo Credit: https://www.flickr.com/photos/derekgavey/5990712328
- Presenter: Brett And then there’s the issue of trying to track data across all of these systems. Photo Credit: https://www.flickr.com/photos/rh2ox/9990016123
- Presenter: Brett Well, the snarky response is: why don’t you just do that in Drupal? Drupal can handle all of those things. We’ve got Commerce, Blogs, email — everything a reasonable company could want. But we’re not always talking about being reasonable. In our space, we have the particular issue of nonprofits running on Convio or Blackbaud. They’re not going to give those up just because we tell them we can build them a better experience. Often, in our work, we have to accept the realities our clients or organizations are working in and figure out how to solve the problems in front of us without being able to use what we think is the best solution. So, to do that, we need to get a sense of what systems are at play.
- Presenter: Lev We start by gathering requirements AKA, “The hunt for people's secret spreadsheets.” All discovery exercises should involve sticky notes Photo Credit: Josh Riggs
- Presenter: Lev Ask everyone to write down five places that important data is kept in the organization on different sticky notes. Gather them on a wall, grouping repeated items (Raiser's Edge) and similar items (Spreadsheets, someone's email account). Cajole, joke, poke, hint, remind, and otherwise encourage additions. Say the words "spreadsheet", "Excel", "Email Inbox", "Old System", "Desktop", etc, to make sure that people consider these things. When someone says, "Jane's brain" you are on the right track. After this, you should have a central area of the wall showing 5-10 data storage locations (or location types) in little bubbles of grouped sticky notes. Photo Credit: https://www.flickr.com/photos/jdhancock/3737950123
- Presenter: Lev Where does data come from? Five types of data you want to track. This can be harder for people to focus on, so filter the answers. "Emails" is not valid data: ask the person what information the email would be conveying that they might need to track. "Donations" is a better answer, as is "Re-tweets", "Contact information", "Event Attendance", "Personal connections", etc. "Interactions with your organization" is a good phrase to key in to many of these. Form these Data/Interaction types into bubbles around the outside of your Data Repositories. Photo Credit: https://www.flickr.com/photos/jdhancock/8031897271
- Presenter: Lev How does data move from sources to stores? This is the place where you really learn how the organization operates. Color coded sticky notes labels and arrows to indicate how data moves from sources to repositories. Coding will indicate if the data flow is automatic, constituent driven, or manual "Email" is a valid answer here. So is "Webform", "Manual Import", "Manual entry", "Phone Call", "Interns", "Hope", etc. Photo Credit: https://www.flickr.com/photos/enerva/8526301073
- Presenter: Lev How do you move data from one point to another? Photo Credit: https://www.flickr.com/photos/enerva/8526301073
- Presenter: Lev How do you move data from one point to another? Photo Credit: https://www.flickr.com/photos/enerva/8526301073
- Presenter: Lev Now we know all the component parts. Where the data comes from Where it’s kept How it moves around Photo Credit: https://www.flickr.com/photos/builtbydave/4584358158
- Presenter: Lev How do all these random parts fit together to make a steam punk airship? Photo Credit: https://www.flickr.com/photos/pmiaki/5152260360
- Presenter: Lev Luckily we have technology on our side. Photo Credit: https://www.flickr.com/photos/deanj/2398424227/
- Presenter: Lev Behind the curtains NOTE: Add examples like Salesforce and MailChimp Photo Credit: https://www.flickr.com/photos/cybaea/54679441/
- Presenter: Lev Luckily we have technology on our side. Photo Credit: https://www.flickr.com/photos/hinkelstone/2435823037/
- Presenter: Lev Javascript widget, iframe, or direct forms Examples: Donation forms: PayPay, Stripe (Charity Water - screen shot) Job applications: Tales Photo Credit: https://www.flickr.com/photos/j_benson/9913779966/
- Presenter: Lev Charity Water Embedded Stripe form
- Presenter: Lev Charity Water Embedded Stripe form
- Presenter: Lev No surprises Users should understand what’s happening Example: National Park Service Photo Credit: https://www.flickr.com/photos/travelwayoflife/7465843862/
- Presenter: Lev Using a different tool for “sharing stories”
- Presenter: Lev The user gets a clear explanation of what’s about to happen
- Presenter: Lev Photo Credit: https://www.flickr.com/photos/stevoarnold/2630521111/
- Presenter: Brett Once you understand what the technical requirements and limitations are, you need to address the human elements at play. And that might be the trickier part.
- Presenter: Brett You have to start by helping your clients or organizations understand that making the user experience as smooth as possible across systems is going to require some compromise. Photo Credit: https://www.flickr.com/photos/adactio/8836457/
- Presenter: Brett Remember when I said LiveStrong was doing a pretty good job? They’ve done it by making sensible compromises.
- Presenter: Brett Remember when I said LiveStrong was doing a pretty good job? They’ve done it by making sensible compromises.
- Presenter: Brett The information architecture on their main site features dropdown menus. Say what you will about that as a UX element, it’s what they decided to do.
- Presenter: Brett For the blog, they have the same top level navigation — but they’ve done away with the drop down. It changes the user experience, but lessens the amount of maintenance they need to do. If those items fell out of sync, it may be a worse UX than simply limiting the options they have at this point.
- Presenter: Brett For the blog, they have the same top level navigation — but they’ve done away with the drop down. It changes the user experience, but lessens the amount of maintenance they need to do. If those items fell out of sync, it may be a worse UX than simply limiting the options they have at this point.
- Presenter: Brett For the store, the navigation has changed entirely. This makes sense. Why give the user the same experience on the store site as on the main site, when the focus is on helping them buy products at this point? The important part is to retain the sense of brand, and the feeling that the properties are connected.
- Presenter: Brett For the store, the navigation has changed entirely. This makes sense. Why give the user the same experience on the store site as on the main site, when the focus is on helping them buy products at this point? The important part is to retain the sense of brand, and the feeling that the properties are connected.
- Presenter: Brett The donation page is even more stripped down. Again, once they’ve gotten a user into the donation channel, they don’t want to provide easy ways to do something else. Keep the experience clean, then return them to the main site after the action has been completed. By focusing on the capabilities and use cases of their various properties, Livestrong has compromised on some elements of the user experience to focus on what’s important given the use case. A more cynical person might draw a comparison to how Lance won the Tour, but let’s move past that, shall we.
- Presenter: Brett So again, we can’t emphasize this enough: you need to understand all of the systems at play to be able to make the right choices for the user experience. You can only design for what you understand. Photo Credit: https://www.flickr.com/photos/chrishunkeler/14429533560/
- Presenter: Brett And design will play a huge role in that. While Lev and I have both played the designer before, it’s not really our strong suit, so these are going to be high-level recommendations. But there are some things you can do to create a more cohesive brand experience. Photo Credit: https://www.flickr.com/photos/julienbelli/14487075742/
- Presenter: Brett Our User Experience lead, Josh Riggs, recently talked to me about why he likes to design in the browser under the right circumstances. Not only does it allow you to make changes globally –– tough to do across 20 compositions in Sketch, say — it help you face the reality of what’s possible. Need to design interactions for a 3rd party system like an off-site donation page? It’s easier to stick to what you can do by writing the actual code according to the technical limitations, instead of putting in some of those “Well, it would be really cool if we could just…” moments. Also, once the HTML and CSS are written, the code should be pretty portable. It sets you up to design components that may be reusable across systems. Photo Credit: https://www.flickr.com/photos/oimax/2141263830/
- Presenter: Brett So maybe, instead of doing full page designs for each of the systems you’re building, design the components that can be put in place across all of them. Again, you want to help the site administrators avoid having to maintain content in multiple places, so you’ll have to be disciplined to pull this off. Photo Credit: https://www.flickr.com/photos/poppy-project/16664722038/
- Presenter: Brett Finally, you need a style guide – that’s applicable across all of the systems. What’s the typography? What are the heading styles? Consistency across systems comes from having patterns people can apply. Photo Credit: https://www.flickr.com/photos/wikidave/7118464049/
- Presenter: Brett Which brings us to the biggie: governance. A style guide is just part of a broader governance plan. Human systems will run amok and ruin your most carefully planned designs if they don’t understand the intent you had in building them in the first place. Photo Credit: http://upload.wikimedia.org/wikipedia/commons/8/8f/Lightning-sky-washington-dc_-_West_Virginia_-_ForestWander.jpg
- Presenter: Brett Creating a governance plan requires you to think about three things. Roles & Responsibilities Workflows Evaluation and Review Standards Photo Credit: https://www.flickr.com/photos/visualpanic/2675741951
- Presenter: Brett Let’s start with Roles & Responsibilities. Unless you’re working with a very small organization, the people updating the site are likely going to come from across the org chart. This is what cross-functional teams are for — to bring the various roles of a company to the website. But it’s your job to shape them into a team. People don’t experience an organization as the sum of its departments, they experience it as an organic whole. Again, you have one chance to make a first impression, and if anybody can update anything – or some people are responsible for one system but not others – nobody’s likely making sure it stays true to the experience of the brand. You need to define who’s responsible for what, what the permissions are – and what the workflow is going to be. Photo Credit: https://www.flickr.com/photos/jamesrdoe/4501432953
- Presenter: Brett Without a plan for how changes should be made, things are going to get messed up. That’s probably why Livestrong eliminated the sub-navigation from their Wordpress instance: one fewer thing for somebody to keep track of. But really, if changes are going to be made to the navigation, and that needs to be updated across systems, won’t it help to know what the process is? We don’t want to bog folks down with picayune rules that don’t have a reason — but good workflows always have a purpose. It’s really part of the formalization of any organization, and it helps mitigate risk. Somebody leaves your organization? S’okay, we still know how to add a new story to the blog, and what the image specs are, because we have a plan. Somebody new joins? Refer them to the documentation. Photo Credit: http://commons.wikimedia.org/wiki/File:Blueprint_of_Victory_-_NARA_-_534551.jpg
- Presenter: Brett And of course, it helps to review how things are working. We’re all just making our best judgement as to what the user experience should be, especially when we start to think about it more holistically. But once the systems are in place, somebody needs to go back and check how those judgements are playing out. By establishing metrics and goals before anything is launched, you’re creating a plan for making iterative improvements going forward. Flickr: https://www.flickr.com/photos/enerva/14296912543
- Presenter: Brett So, what I’m essentially saying is: write it down. Don’t let people make assumptions about how something might work. That’s how sites — and user experiences — get ruined. Make the processes clear, highlight the underlying assumptions, and give them a plan to continue to improve. Flickr: https://www.flickr.com/photos/kalexanderson/5337994571/
- Presenter: Brett Because really, is there anything more annoying than handing over the keys to a shiny new suite of online tools — and then watching in horror as it slowly crumbles over time? By writing things down, you’re helping your clients and yourself make the most of what has probably been a very expensive investment. Photo Credit: https://www.flickr.com/photos/gsfc/5372497793/
- Presenter: Brett Because when you build a new website or other application, you’re introducing change. And not just change, but revolutionary change. Entirely new systems force people to do things in new ways, and that’s often scary for them, which leads them to resist whatever plan you’re putting in place. You need to help them understand that the changes are going to be for the best. Photo Credit: https://www.flickr.com/photos/joshua/1154118/
- Presenter: Brett And you can help yourself help others by remembering that you’re smart – each and every one of you is a smart person — but that doesn’t mean you’re always right. Sometimes, you have to be willing to change yourself. Photo Credit: https://www.flickr.com/photos/joshua/1154118/
- Presenter: Brett A lot of it comes down to habit. People go about their work, by and large, by performing certain actions over and over again. When you introduce them to revolutionary change, they need to learn new habits. Again, that’s hard. But that’s why we’ve created those governance structures in the first place: to give them a guide toward creating useful new habits. We’re creating a starting point for new habits, so we want to ensure that when they form, they’re good ones. Photo Credit: https://www.flickr.com/photos/jamiejohn/1581135389/
- Presenter: Brett And if anyone gives you guff, refer them back to the metrics and evaluation plan. Often times, if you can analytically show people the improvements that come from the changes in process we’re introducing, you’ll win them over to your way of thinking. Photo credit: https://www.flickr.com/photos/clevercupcakes/4461953159/