Have you ever faced down a giant table or spreadsheet of data and thought, “I have no idea what to do with this”? As marketers we’ve all probably had those deer-in-the-headlights moments once or twice, where we’ve floundered to figure out what the hell we’re looking at. Crazy Egg was built on the premise of simplicity and ease of use, for those that I fondly like to call “Google Analytics-averse” – but there’s always room for improvement when it comes to helping folks switch from analysis to action mode. Whether you’re a UX designer, small business owner, SEO expert or…
If you run paid ads, chances are you have a mobile campaign or two (or two hundred) live right now. Whether we like it or not, most of us live tethered to our smartphones, relying on them to entertain us, keep us connected, and guide us to the nearest bike repair shop. And as such, behavior on mobile is shaping how marketers need to operate.
Over the last four years, we were inundated with messages declaring it was finally “the year of mobile”, so much so that it felt like our industry was crying wolf. Then in 2016, it finally happened: Mobile surpassed desktop in terms of both usage as well as Google search queries. Today, more than 60% of the world is accessing the internet through mobile devices, and that number is expected to climb.
The problem with this change? 2016 was two full years ago, and even though we were all warned to think mobile-first, advertisers forged ahead, bloating our responsive landing pages with massive high-res images, and animations. We were simply shrinking heavy content for small screen sizes. In turn, everyone’s mobile pages loaded turtle-slow (leaving visitors bouncing).
But we can’t ignore proper mobile experiences any more.
This year Google made pagespeed an official ranking factor for mobile search, introduced mobile speed score, and perhaps most important—they’re backing the Accelerated Mobile Pages open-source project: a means of developing web pages that load in (approximately) half a second! In short, the search giant’s putting their foot down and demanding a better, faster mobile web.
So how you can ensure your ads continue to appear in the SERP (considering load time is a factor)? And how can you give your landing pages a better shot to convert? Let’s walk through this need for speed together.
There’s still some lag
Unlike on social platforms, search advertisers have been a bit slow to jump onto the mobile bandwagon (no pun intended). Despite more searches happening on mobile, most advertisers are currently spending about an equal amount on desktop and mobile. In the 2018 State of Mobile report, Mary Meeker of Kleiner Perkins estimates that this gap represents about a seven billion dollar opportunity. In other words, the future is bright for mobile advertising and we’ll all likely adjust our spend accordingly very soon.
When mobile emerged as a hot topic, it was all about building mobile responsive, and then about building websites that were “mobile first.”
I distinctly remember being in the crowd at Unbounce’s first-ever Call to Action Conference back in 2014, when my marketing prayers were answered: Unbounce announced the ability to design mobile pages. But fast forward to today and we know that having a mobile version of your landing page is simply table stakes, as is splitting your campaign targeting by device.
Mobile responsive design was certainly a step forward, but now we can’t just reuse the same content across multiple devices.
To help illustrate why, just think about when you’re searching for something on your phone. You’re probably searching for something because you want it now. In the past two years alone, Google searches for “near me” (implying the intent to buy) have seen 500% growth.
When targeting these kinds of queries, you need to craft an experience that speaks to the searcher’s immediate need to find something locally—and fast. Every second your page lags, the more impatient the visitor.
Looks like I’m not the only one looking for services “near me”. Image via Think With Google.
Personally, I have a bad habit of searching reviews and comparisons for an item while I’m in a store looking at the product in question. It’s hard to get me into a brick-and-mortar store in the first place, so you best believe I’m going to save myself a second trip, researching the best of the best, even in store aisles.
And I’m not alone: Between 2015-2017, the number of mobile searches including “best” on mobile increased by 80%, with consumers comparing products as simple as salt (likely right in the store or at point-of-purchase, like me):
Many of us shoppers are even completing the entire checkout process on-the-go. Last year, more than 40% of online purchases in the US were made on mobile during the months of November and October. So we’ve reached peak busy and are knocking out our Christmas shopping lists while we’re taking transit or waiting in line.
Why is this behavior so important?
Well, with so many using smartphones to search and browse on the go, slow-loading content is killing your potential conversions.
These days, if your page isn’t anything but instant, visitors won’t stick around to convert, and you risk getting penalized by Google.
Maybe you’ve noticed the brand new Mobile Speed Score under the “landing page” tab in your account? This new column and ten-point score is another indication that Google is serious about mobile speed.
Have you been seeing any scores populate in your Mobile Speed Score column? Has it been helpful? Let us know in the comments!
Moreover, not all data connections are created equal
For those of us living in a metropolitan area, we spend a lot of our time jumping from our home wifi connections, to work, and back. For those times in between though, we’re in some kind of data limbo, with speeds ranging from 3G to LTE. A few times in my life, I’ve even gone to the dark place that is EDGE.
But what if I told you that 70% of the world is actually searching Google on a 3G connection or slower? Yup, you read that right. Even if you’re cruising on wifi or LTE, you might have potential customers living on the edge of data—or close to. On a 3G connection, the average mobile page takes a whopping 19 seconds to load, which means most of your visitors are abandoning your web pages before they’ve even seen them.
Curious how much traffic you’re actually losing to mobile pagespeed? Enter your landing page in this free Google tool to see the percentage.
So much for converting, hey!? You’ve paid for the ad click (sometimes quite handsomely, I might add), yet a portion of your visitors are leaving before they even see your content.
So it’s time to build faster landing pages somehow.
Not only will your visitors appreciate this, but Google will reward you. After all, they’re in the business of selling ads. As we mentioned, pagespeed is now factored into Landing Page Experience (one of the three core components of Quality Score). If you speed up your landing pages, you’ll see higher Quality Scores, an improved Ad Rank, and larger Search Impression Share (your ads will show more often).
You’ll basically give your landing pages a fighting chance to be seen and convert.
AMPing up your pagespeed
Now, while you can implement a few manual fixes for faster landing pages—like compressing your images, reducing the amount of elements on your page, and even watching how many scripts are on there—even these methods produce diminishing returns at some point.
And this is where AMP can help.
If you haven’t heard of AMP (short for Accelerated Mobile Pages) it’s essentially a framework for coding simple, stripped down landing pages that load super fast (we’re talkin’ half-a-second-fast). It’s comprised of three elements: AMP HTML, AMP JS, and AMP Cache.
For us non-developers, AMP HTML is essentially a modified version of standard HTML, preventing us from creating pages that load slowly. Marketers can sometimes be guilty of designing beautiful pages with crisp, high-res images, parallax elements, and every tracking script under the sun. We love it, but that person looking for the closest place to fix their flat tire? Not so much.
AMP JS, on the other hand, ensures all of these elements load in an effective way. In my opinion, the third component, AMP Cache, is really AMP’s bread and butter. With AMP Cache, your landing page is cached by Google (or other third parties) so when a visitor requests your page from a platform like Google, it is served almost instantly. Which means the visitor isn’t stuck downloading every single image on their measly 3G connection before they can see your offer.
To implement AMP HTML and JS markup (to code a page from scratch), you’ll need to know a little bit more about web development, or know someone who does. AMP is only a few years old, and is an open-source project that is constantly being improved.
Every page on the framework also needs to pass through the AMP validator, which basically scans the page to make sure it adheres to all the requirements of AMP. If there are changes to the page that break validation, you might get stuck serving up your regular-ol’ too-slow mobile version.
Overall, it can become a burden on your development team if you’re constantly asking them to add a new AMP feature, keep pages validated, and build new ones for each campaign.
So we’re building AMP, the Unbounce way
I’ve always believed in keeping a strong relationship with the web developers at your company. They do amazing things and are typically working with a long backlog of website updates, some that you’ve probably requested yourself. And just like we don’t think you should be bugging developers for landing pages at all, we also want you to save them the headache of building AMP versions of all of your landing pages.
It’s been four years since I joined Unbounce’s mobile responsive beta at the Call to Action Conference, and later tomorrow I’ll be taking to the stage at CTAConf 2018 to share that we’ve entered closed beta for AMP in Unbounce. You’ll soon be able to create AMP landing pages in the same simple, pixel-perfect, drag and drop builder that you know and love. We hope you’re as excited as we are.
Get on the list: Unbounce’s AMP beta
If you’re ready to lower your bounce rates and stay BFF with your web devs, add your name to the early access list for the next phase of beta testing by following this link. You’ll be the very first to know as soon as we add spots or enter open beta, and you’ll be on your way to building lightning-fast mobile landing pages.
Are you as AMPed as we are? Let us know what you think about it in the comments!
Full-day workshop • June 25th
Every day, billions of people around the world use the web to work, to find information, and to be entertained. When they come to your site, they trust you to provide them with a good experience. They expect a site that loads quickly, that works in their browser, and that is well designed. And though they may not vocalize it, they certainly expect that experience will be safe: that any information they provide will not be stolen or used in ways they did not expect.
Once Upon A Time: Using Story Structure For Better Engagement
Stories form the connective tissue of our lives. They’re our experiences, our memories, and our entertainment. They have rhythms and structures that keep us engaged. In this article, we’ll look at how those same rhythms and structures can help us enrich and enhance the user experience.
In his seminal work Hero With A Thousand Faces, Joseph Campbell identified a structure that rings true across a wide variety of stories. He called this “The Hero’s Journey,” but his book explaining it was 300+ pages so we’ll use a simplified version of Campbell’s work or a jazzified version of the plot structure you probably learned about in elementary school:
The ordinary world/exposition is where our hero/protagonist/person/thing/main character starts. It’s the every day, the safe, the boring, the life the hero already knows.
The inciting incident is the event or thing that pulls or (more often) pushes the hero into the story. It’s what gets them involved in the story whether they want to be or not.
In the rising action/preparation phase, the hero prepares (sometimes unknowingly) for the ordeal/climax which is when they go up against the villain (and prevail!).
After the hero prevails against the villain, they must return to their ordinary world and bring back the new knowledge and/or mythical object they got from/for defeating the villain.
Finally, in the Resolution, we tie up all the loose ends and throw a dance party.
We can apply this same structure to the experience of the user or — as I like to call it — the “user journey.”
Where the user starts (their every day).
They have a problem they need solved.
They’ve found your product/service/website and they think it might work to solve their problem, but they need to decide that this is the product/service/website will solve their problem. So in this step they gather facts and figures and feelings to determine if this thing will work. It could be deciding if the type of video game news covered on this site is the kind of news they want to consume or deciding whether this type of pen will solve their writing needs or whether the graphic design prowess of this agency can make their new website super awesome.
The fight to make a decision about purchasing that pen or adding that news site to your regularly checked sites or contacting that agency for a quote.
The Road Back
Decision made, the road back is about moving forward with that purchase, regular reading, or requesting the quote.
Where they apply your product/service/website to their problem and it is mightily solved.
If we consider this structure as we look at user interactions, there are lots of ways we can put ourselves in the user’s shoes and optimize their experience, providing support (and sometimes a good shove) exactly when they need it.
Here are some techniques. Some apply to just one part of the User Journey while some apply to several parts at once:
Journey With Your Users
Stories take time. Movies aren’t done in two minutes; they take two hours to watch and absorb. They are a journey.
If you always only ever shout “BUY! BUY! BUY!” you may make a few quick sales, but you won’t encourage long-term loyalty. Journey with your users, and they’ll count on you when they have a problem you can solve.
InVision’s newsletter journeys with you. In this recent newsletter, they sent an article about Questlove and what we can learn from him concerning creativity. If you click through, other than the URL, the word “InVision” does not appear on the page. They’re not pushing the sale, but providing relevant, interesting content to the main audience of people who use their products. I haven’t yet been in the market for their services, but if/when I am, there won’t be much of an Ordeal or fight for approval. They’ve proven their worth as a traveling companion. They’re someone I can count on.
Journeying with your users can take many forms, only one of which is content marketing. You could also build training programs that help them move from beginner to expert in using your app or site. You could add high touch parts to your sales process or specific technical support that will help you come alongside your user and their needs. In contexts of quick visits to a website you might use visuals or wording that’s down-to-earth, warm, welcoming, and feels personable to your main audience. You want to show the user they can count on you when they have a problem.
Give ‘Em A Shove
Users need an inciting incident to push them into the user journey, often more than one push. They have a lot going on in their lives. Maybe they’re working on a big project or are on vacation or their kid played frisbee with their laptop. They may have lost or never opened your first email. So don’t hesitate to send them a follow-up. Show them the difference between life without your product or service and life with it. Heroes are pushed into a story because their old life, their ordinary world, is no longer tenable given the knowledge or circumstances they now have.
Nick Stephenson helps authors sell more books (and uses the hero’s journey to think through his websites and marketing). Last fall he sent out a friendly reminder about a webinar he was doing. He gets straight to the point reminding us about his webinar, but provides value by giving us a way to ask questions and voice concerns. He also lets us know that this is a limited time offer, if we want the new life his webinar can bring we’ve got to step into the story before it’s too late.
Give your users more than one opportunity to buy your product. That doesn’t mean shove it down their throat every chance you get, but follow up and follow through will do wonders for your bottom line and help you continue to build trust. Many heroes need a push to get them into the story. Your users may need a shove or well-placed follow up email or blaring call to action too.
Give Out Magic Swords
By now you know your users will face an ordeal. So why not pass out magic swords, tools that will help them slay the ordeal easily?
Whenever I have tried to use Amazon’s Web Services, I’ve always been overwhelmed by the choices and the number of steps needed to get something to work. A one button solution it is not.
But on their homepage, they hand me a magic sword to help me slay my dragon of fear.
They use a 1-2-3 graphic to emphasize ease. With the gradient, they also subtly show the change from where you started (1) to where you’ll end (3) just like what a character does in a story. My discussion above could make this ring hollow, but I believe they do two things that prevent that.
First, number two offers lots of 10-minute tutorials for “multiple use cases” There seems to be meat there, not a fluffy tutorial that won’t apply to your situation. Ten minutes isn’t long, but can show something substantially and “multiple use cases” hints that one of these may well apply to your situation.
Second, number three is not “You’ll be done.” It’s “Start building with AWS.” You’ll be up and running in as easy as 1, 2, 3. At step 3 you’ll be ready to bring your awesome to their platform. The building is what I know and can pwn. Get me past the crazy setup and I’m good.
Find out what your user’s ordeal is. Is it that a competitor has a lower price? Or they’re scared of the time and expertise it’ll take to get your solution to work? Whatever it is, develop resources that will help them say Yes to you. If the price is a factor, provide information on the value they get or how you take care of all the work or show them it will cost them more, in the long run, to go with a different solution.
No One is Average
So many stories are about someone specific because we can identify with them. Ever sat through a movie with a bland, “everyman” character? Not if you could help it and definitely not a second time. If you sell to the average person, you’ll be selling to no one. No one believes themselves to be average.
Coke’s recent “Share a Coke” campaign used this brilliantly. First, they printed a wide variety of names on their products. This could have backfired.
My name isn’t Natasha, Sandy or Maurice. But it wasn’t “Buy a Coke,” it was “Share a Coke.” And I know a Natasha, a Sandy, and a Maurice. I could buy it for those friends for the novelty of it or buy my name if I found it ( “John” is so uncommon in the U.S. it’s hard to find anything that has my name on it besides unidentified men and commodes.)
So often we target an average user to broaden the appeal for a product/service/website, and to an extent, this is a good thing, but when we get overly broad, we risk interesting no one.
You Ain’t The Protagonist
You are not the protagonist of your website. You are a guide, a map, a directional sign. You are Obi-Wan Kenobi on Luke’s journey to understand the force. That’s because the story of your product is not your story, this isn’t the Clone Wars (I disavow Episodes I-III), it’s your user’s story, it’s A New Hope. Your users are the ones who should take the journey. First, they had a big hairy problem. They found your product or service that solved that big hairy problem. There was much rejoicing, but if you want them to buy you aren’t the hero that saves the day, you’re the teacher who enables them to save their day. (I am indebted to Donald Miller and his excellent “Story Brand” podcast for driving this point home for me.)
Zaxby’s focuses on how they’ll help you with messages like “Cure your craving” and “Bring some FLAVOR to your next Event!” The emphasis on “flavor” and “your” is borne out in the design and helps to communicate what they do and how they will help you solve your problem. But “you”, the user, is the hero, because you’re the one bringing it to the event. You will get the high fives from colleagues for bringing the flavor. Zaxby’s helps you get that victory.
Furthermore, we’re all self-centered, some more than others, and frankly, users don’t care about you unless it helps them. They only care about the awards you’ve won if it helps them get the best product or service they can. They are not independently happy for you.
At a recent marketers event I attended, the social media managers for a hospital said one of their most shared articles was a piece about the number of their doctors who were considered the top doctors in the region by an independent ranking. People rarely shared the hospital’s successes before, but they shared this article like crazy. I believe it’s because the user could say, “I’m so great at choosing doctors. I picked one of the best in the region!” Rather than “look at the hospital” users were saying “look at me!” Whenever you can make your success their success you’ll continue your success.
Celebrate Their Win
Similar to above, their success is your success. Celebrate their success and they’ll thank you for it.
Putting together any email campaign is arduous. There are a thousand things to do and it takes time and effort to get them right. Once I’ve completed that arduous journey, I never want to see another email again. But MailChimp turns that around. They have this tiny animation where their monkey mascot, Freddie, gives you the rock on sign. It’s short, delightful, and ignorable if you want to. And that little celebration animation energizes me to grab the giant email ball of horrors and run for the end zone yet again. Exactly what Mailchimp wants me to do.
So celebrate your user’s victories as if they were your own. When they succeed at using your product or get through your tutorial or you deliver their website, throw a dance party and make them feel awesome.
The Purchase Is Not The Finish Line
The end of one story is often the beginning of another. If we get the client to buy and then drop off the face of the Earth that client won’t be back. I’ve seen this with a lot of web agencies that excel in the sales game, but when the real work of building the website happens, they pass you off to an unresponsive project manager.
Squarespace handles this transition well with a “We got you” email. You click purchase, and they send you an email detailing their 24/7 support and fast response times. You also get the smiling faces of five people who may or may not, have or still work there. And it doesn’t matter if they work there or never did. This email tells the user “We’ve got you, we understand, and we will make sure you succeed.”
This harkens all the way back to journeying with your user. Would you want to travel with the guy who leaves as soon as you got him past the hard part? No, stick with your users and they’ll stick with you.
We are storytelling animals. Story structure resonates with the rhythms of our lives. It provides a framework for looking at user experience and can help you understand their point of view at different points in the process. It also helps you tweak it such that it’s a satisfying experience for you and your users.
You got to the end of this article. Allow me to celebrate your success with a dance party.
A Conference Without Slides: Meet SmashingConf Toronto 2018 (June 26-27)
What would be the best way to learn and improve your skills? By looking designers and developers over their shoulder! At SmashingConf Toronto taking place on June 26–27, we will exactly do that. All talks will be live coding and design sessions on stage, showing how speakers such as Dan Mall, Lea Verou, Rachel Andrew, and Sara Soueidan design und build stuff — including pattern libraries setup, design workflows and shortcuts, debugging, naming conventions, and everything in between. To the tickets →
The night before the conference we’ll be hosting a FailNight, a warm-up party with a twist — every single session will be highlighting how we all failed on a small or big scale. Because, well, it’s mistakes that help us get better and smarter, right?
One track, two conference days (June 26–27), 16 speakers, and just 500 available seats. We’ll cover everything from efficient design workflow and getting started with Vue.js to improving eCommerce UX and production-ready CSS Grid Layouts. Also on our list: performance audits, data visualization, multi-cultural designs, and other fields that may come up in your day-to-day work.
Here’s what you should be expecting:
Building A Pattern Library with CSS Grid Fallback (Live) Rachel Andrew (Perch)
On the two days before and after the conference, you have the chance to dive deep into a topic of your choice. Tickets for the full-day workshops cost C$599. If you combine it with a conference ticket, you’ll save C$100 on the regular workshop price. Seats are limited.
Workshops on Monday, June 25th
Sara Soueidan on The CSS & SVG Power Combo The workshop with the strongest punch of creativity. The CSS & SVG Power Combo is where you will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces. We will also be looking at any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises and practical examples that can be taken and directly applied in real life projects.Read more…
Tim Kadlec on Demystifying Front-End Security When users come to your site, they trust you to provide them with a good experience. They expect a site that loads quickly, that works in their browser, and that is well designed. And though they may not vocalize it, they certainly expect that the experience will be safe: that any information they provide will not be stolen or used in ways they did not expect. Read more…
Aaron Draplin on Behind The Scenes With The DDC Go behind the scenes with the DDC and learn about Aaron’s process for creating marks, logos and more. Each student will attack a logo on their own with guidance from Aaron. Could be something you are currently working on, or have always wanted to make. Read more…
Dan Mall on Design Workflow For A Multi-Device World In this workshop, Dan will share insights into his tools and techniques for integrating design thinking into your product development process. You’ll learn how to craft powerful design approaches through collaborative brainstorming techniques and how to involve your entire team in the design process. Read more…
Vitaly Friedman on Smart Responsive UX Design Patterns In this workshop, Vitaly Friedman, co-founder of Smashing Magazine, will cover practical techniques, clever tricks and useful strategies you need to be aware of when working on responsive websites. From responsive modules to clever navigation patterns and web form design techniques; the workshop will provide you with everything you need to know today to start designing better responsive experiences tomorrow. Read more…
Workshops on Thursday, June 28th
Eva-Lotta Lamm on Sketching With Confidence, Clarity And Imagination Being able to sketch is like speaking an additional language that enables you to structure and express your thoughts and ideas more clearly, quickly and in an engaging way. For anyone working in UX, design, marketing and product development in general, sketching is a valuable technique to feel comfortable with. Read more…
Nadieh Bremer on Creative Data Visualization Techniques With so many tools available to visualize your data, it’s easy to get stuck in thinking about chart types, always just going for that bar or line chart, without truly thinking about effectiveness. In this workshop, Nadieh will teach you how you can take a more creative and practical approach to the design of data visualization. Read more…
Rachel Andrew on Advanced CSS Layouts With Flexbox And CSS Grid This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months. Read more…
Joe Leech on Psychology For UX And Product Design This workshop will provide you with a practical, hands-on way to understand how the human brain works and apply that knowledge to User Experience and product design. Learn the psychological principles behind how our brain makes sense of the world and apply that to product and user interface design. Read more…
Vitaly Friedman on New Front-End Adventures In Responsive Design With HTTP/2, Service Workers, Responsive Images, Flexbox, CSS Grid, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and building responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time? Read more…
Maybe you’ve already wondered why our friend the Smashing Cat has dressed up as a movie director for SmashingConf Toronto? Well, that’s because our conference venue will be the TIFF Bell Lightbox. Located within the center of Toronto, it is one of the most iconic cinemas in the world and also the location where the Toronto Film Festival takes place. We’re thrilled to be hosted there!
Why This Conference Could Be For You
SmashingConfs are a friendly and intimate experience. It’s like meeting good friends and making new ones. Friends who share their stories, ideas, and, of course, their best tips and tricks. At SmashingConf Toronto you will learn how to:
Make full advantage of CSS Variables,
Create fluid animation effects with Vue,
Detect and resolve accessibility issues,
Structure components in a pattern library when using CSS Grid,
Build a stable, usable online experience,
Design for cross-cultural audiences,
Create effective and beautiful data visualization from scratch,
Transform your designs with psychology,
Help your design advance with proper etiquette,
Sketch with pen and paper,
… and a lot more.
Download “Convience Your Boss” PDF
We know that sometimes companies encourage their staff to attend a different conference each year. Well, we say; once you’ve found a conference you love, why stray…
Think your boss needs a little more persuasion? We’ve prepared a neat Convince Your Boss PDF that you can use to tip the scales in your favor to send you to the event.
Diversity and Inclusivity
We care about diversity and inclusivity at our events. SmashingConf’s are a safe, friendly place. We don’t tolerate any disrespect or misbehavior. We also provide student and diversity tickets.
(This is a sponsored article.) In my previous article on Building UX Teams, I explored the rapidly growing need for UX teams as a result of the emergence of design as a wider business driver. As teams grow, so too does a need for leaders to nurture and guide them.
In my final article in this series on user experience design, I’ll explore the different characteristics of an effective UX leader, and provide some practical advice about growing into a leadership role.
I’ve worked in many organizations — both large and small, and in both the private and public sectors — and, from experience, leadership is a rare quality that is far from commonplace. Truly inspiring leaders are few and far between; if you’re fortunate to work with one, make every effort to learn from them.
Managers that have risen up the ranks don’t automatically become great leaders, and perhaps one of the biggest lessons I’ve learned is that truly inspirational leaders — those that inspire passion and commitment — aren’t as commonplace as you’d think.
A UX leader is truly a hybrid, perhaps more so than in many other — more traditional — businesses. A UX leader needs to encompass a wide range of skills:
Establishing, driving and articulating a vision;
Communicating across different teams, including design, research, writing, engineering, and business (no small undertaking!);
Acting as a champion for user-focused design;
Mapping design decisions to key performance indicators (KPIs), and vice-versa, so that success can be measured; and
Managing a team, ensuring all the team’s members are challenged and motivated.
UX leadership is not unlike being bi-lingual — or, more accurately, multi-lingual — and it’s a skill that requires dexterity so that nothing gets lost in translation.
This hybrid skill set can seem daunting, but — like anything — the attributes of leadership can be learned and developed. In my final article in this series of ten, I’ll explore what defines a leader and focus on the qualities and attributes needed to step up to this important role.
Undertaking A Skills Audit
Every leader is different, and every leader will be informed by the different experiences they have accumulated to date. There are, however, certain qualities and attributes that leaders tend to share in common.
Great leaders demonstrate self-awareness. They tend to have the maturity to have looked themselves in the mirror and identified aspects of their character that they may need to develop if they are to grow as leaders.
Having identified their strengths and weaknesses and pinpointing areas for improvement, they will have an idea of what they know and — equally important — what they don’t know. As Donald Rumsfeld famously put it:
“There are known knowns: there are things we know we know. We also know there are known unknowns: That is to say, we know there are some things we do not know. But there are also unknown unknowns: the things we don’t know we don’t know.”
Rumsfeld might have been talking about unknown unknowns in a conflict scenario, but his insight applies equally to the world of leadership. To grow as a leader, it’s important to widen your knowledge so that it addresses both:
The Known Unknowns
Skills you know that you don’t know, which you can identify through a self-critical skills audit; and
The Unknown Unknowns
Skills you don’t know you don’t know, which you can identify through inviting your peers to review your strengths and weaknesses.
In short, a skills audit will equip you with a roadmap that you can use as a map to plot a path from where you are now to where you want to be.
To become an effective leader is to embark upon a journey, identifying the gaps in your knowledge and — step by step — addressing these gaps so that you’re prepared for the leadership role ahead.
Identifying The Gaps In Your Knowledge
One way to identify the gaps in your knowledge is to undertake an honest and self-reflective ‘skills audit’ while making an effort to both learn about yourself and learn about the environment you are working within.
To become a UX leader, it’s critical to develop this self-awareness, identifying the knowledge you need to acquire by undertaking both self-assessments and peer assessments. With your gaps in knowledge identified, it’s possible to build a learning pathway to address these gaps.
In the introduction, I touched on a brief list of skills that an effective and well-equipped leader needs to develop. That list is just the tip of a very large iceberg. At the very least, a hybrid UX leader needs to equip themselves by:
Developing an awareness of context, expanding beyond the realms of design to encompass a broader business context;
Understanding and building relationships with a cross-section of team members;
Identifying outcomes and goals, establishing KPIs that will help to deliver these successfully;
Managing budgets, both soft and hard; and
Planning and mapping time, often across a diversified team.
These are just a handful of skills that an effective UX leader needs to develop. If you’re anything like me, hardly any of this was taught at art school, so you’ll need to learn these skills yourself. This article will help to point you in the right direction. I’ve also provided a list of required reading for reference to ensure you’re well covered.
A 360º Assessment
A 360º degree leadership assessment is a form of feedback for leaders. Drawn from the world of business, but equally applicable to the world of user experience, it is an excellent way to measure your effectiveness and influence as a leader.
Unlike a top-down appraisal, where a leader or manager appraises an employee underneath them in the hierarchy, a 360º assessment involves inviting your colleagues — at your peer level — to appraise you, highlighting your strengths and weaknesses.
This isn’t easy — and can lead to some uncomfortable home truths — but it can prove a critical tool in helping you to identify the qualities you need to work on. You might, for example, consider yourself an excellent listener only to discover that your colleagues feel like this is something you need to work on.
This willingness to put yourself under the spotlight, identify your weaknesses, address these, and develop yourself is one of the defining characteristics of leaders. Great leaders are always learning and they aren’t afraid to admit that fact.
A 360º assessment is a great way to uncover your ‘unknown unknowns’, i.e. the gaps in your knowledge that you aren’t aware of. With these discoveries in hand, it’s possible to build ‘a learning road-map’ that will allow you to develop the skills you need.
Build A Roadmap
With the gaps in your knowledge identified, it’s important to adopt some strategies to address these gaps. Great leaders understand that learning is a lifelong process and to transition into a leadership role will require — inevitably — the acquisition of new skills.
To develop as a leader, it’s important to address your knowledge gaps in a considered and systematic manner. By working back from your skills audit, identify what you need to work on and build a learning programme accordingly.
This will inevitably involve developing an understanding of different domains of knowledge, but that’s the leader’s path. The important thing is to take it step by step and, of course, to take that first step.
We are fortunate now to be working in an age in which we have an abundance of learning materials at our fingertips. We no longer need to enroll in a course at a university to learn; we can put together our own bespoke learning programmes.
We now have so many tools we can use, from paid resources like Skillshare which offers “access to a learning platform for personalized, on-demand learning,” to free resources like FutureLearn which offers the ability to “learn new skills, pursue your interests and advance your career.”
In short, you have everything you need to enhance your career just a click away.
It’s Not Just You
Great leaders understand that it’s not about the effort of individuals, working alone. It’s about the effort of individuals — working collectively. Looking back through the history of innovation, we can see that most (if not all) of the greatest breakthroughs were driven by teams that were motivated by inspirational leaders.
Thomas Edison didn’t invent the lightbulb alone; he had an ‘invention factory’ housed in a series of research laboratories. Similarly, when we consider the development of contemporary graphical user interfaces (GUIs), these emerged from the teamwork of Xerox PARC. The iPod was similarly conceived.
Great leaders understand that it’s not about them as individuals, but it’s about the teams they put together, which they motivate and orchestrate. They have the humility to build and lead teams that deliver towards the greater good.
This — above all — is one of the defining characteristics of a great leader: they prioritize and celebrate the team’s success over and above their own success.
It’s All About Teamwork
Truly great leaders understand the importance that teams play in delivering outcomes and goals. One of the most important roles a leader needs to undertake is to act as a lynchpin that sits at the heart of a team, identifying new and existing team members, nurturing them, and building them into a team that works effectively together.
A forward-thinking leader won’t just focus on the present, but will proactively develop a vision and long-term goals for future success. To deliver upon this vision of future success will involve both identifying potential new team members, but — just as importantly — developing existing team members. This involves opening your eyes to the different aspects of the business environment you occupy, getting to know your team, and identifying team members’ strengths and weaknesses.
As a UX leader, an important role you’ll play is helping others by mentoring and coaching them, ensuring they are equipped with the skills they need to grow. Again, this is where a truly selfless leader will put others first, in the knowledge that the stronger the team, the stronger the outcomes will be.
As a UX leader, you’ll also act as a champion for design within the wider business context. You’ll act as a bridge — and occasionally, a buffer — between the interface of business requirements and design requirements. Your role will be to champion the power of design and sell its benefits, always singing your team’s praises and — occasionally — fighting on their behalf (often without their awareness).
The Art Of Delegation
It’s possible to build a great UX team from the inside by developing existing team members, and an effective leader will use delegation as an effective development tool to enhance their team members’ capabilities.
Delegation isn’t just passing off the tasks you don’t want to do, it’s about empowering the different individuals in a team. A true leader understands this and spends the time required to learn how to delegate effectively.
Delegation is about education and expanding others’ skill sets, and it’s a powerful tool when used correctly. Effective delegation is a skill, one that you’ll need to acquire to step up into a UX leadership role.
When delegating a task to a team member, it’s important to explain to them why you’re delegating the task. As a leader, your role is to provide clear guidance and this involves explaining why you’ve chosen a team member for a task and how they will be supported, developed and rewarded for taking the task on.
This latter point is critical: All too often managers who lack leadership skills use delegation as a means to offload tasks and responsibility, unaware of the power of delegation. This is poor delegation and it’s ineffective leadership, though I imagine, sadly, we have all experienced it! An effective leader understands and strives to delegate effectively by:
defining the task, establishing the outcomes and goals;
identifying the appropriate individual or team to take the task on;
assessing the team member(s) ability and ascertaining any training needs;
explaining their reasoning, clearly outlining why they chose the individual or team;
stating the required results;
agreeing on realistic deadlines; and
providing feedback on completion of the task.
When outlined like this, it becomes clear that effective delegation is more than simply passing on a task you’re unwilling to undertake. Instead, it’s a powerful tool that an effective UX leader uses to enable their team members to take ownership of opportunities, whilst growing their skills and experience.
Give Success And Accept Failure
A great leader is selfless: they give credit for any successes to the team; and accept the responsibility for any failures alone.
A true leader gives success to the team, ensuring that — when there’s a win — the team is celebrated for its success. A true leader takes pleasure in celebrating the team’s win. When it comes to failure, however, a true leader steps up and takes responsibility. A mark of a truly great leader is this selflessness.
As a leader, you set the direction and nurture the team, so it stands to reason that, if things go wrong — which they often do — you’re willing to shoulder the responsibility. This understanding — that you need to give success and accept failure — is what separates great leaders from mediocre managers.
Poor managers will seek to ‘deflect the blame,’ looking for anyone but themselves to apportion responsibility to. Inspiring leaders are aware that, at the end of the day, they are responsible for the decisions made and outcomes reached; when things go wrong they accept responsibility.
If you’re to truly inspire others and lead them to achieve great things, it’s important to remember this distinction between managers and leaders. By giving success and accepting failure, you’ll breed intense loyalty in your team.
Lead By Example
Great leaders understand the importance of leading by example, acting as a beacon for others. To truly inspire a team, it helps to connect yourself with that team, and not isolate yourself. Rolling up your sleeves and pitching in, especially when deadlines are pressing, is a great way to demonstrate that you haven’t lost touch with the ‘front line.’
A great leader understands that success is — always — a team effort and that a motivated team will deliver far more than the sum of its parts.
As I’ve noted in my previous articles: If you’re ever the smartest person in a room, find another room. An effective leader has the confidence to surround themselves with other, smarter people.
Leadership isn’t about individual status or being seen to be the most talented. It’s about teamwork and getting the most out of a well-oiled machine of individuals working effectively together.
Get Out Of Your Silo
To lead effectively, it’s important to get out of your silo and to see the world as others do. This means getting to know all of the team, throughout the organization and at every level.
Leaders that isolate themselves — in their often luxurious corner offices — are, in my experience, poor leaders (if, indeed, they can be called leaders at all!). By distancing themselves from the individuals that make up an organization they run the very real risk of losing touch.
To lead, get out of your silo and acquaint yourself with the totality of your team and, if you’re considering a move into leadership, make it your primary task to explore all the facets of the business.
The Pieces Of The Jigsaw
To lead effectively, you need to have an understanding of others and their different skills. In my last article, Building a UX Team, I wrote about the idea of ‘T-shaped’ people — those that have a depth of skill in their field, along with the willingness and ability to collaborate across disciplines. Great leaders tend to be T-shaped, flourishing by seeing things from others’ perspectives.
Every organization — no matter how large or small — is like an elaborate jigsaw that is made up of many different interlocking parts. An effective leader is informed by an understanding of this context, they will have made the effort to see all of the pieces of the jigsaw. As a UX leader, you’ll need to familiarize yourself with a wide range of different teams, including design, research, writing, engineering, and business.
To lead effectively, it’s important to push outside of your comfort zone and learn about these different specialisms. Do so and you will ensure that you can communicate to these different stakeholders. At the risk of mixing metaphors, you will be the glue that holds the jigsaw together.
Sweat The Details
As Charles and Ray Eames put it:
“The details aren’t the details, they make the product.”
Great leaders understand this: they set the bar high and they encourage and motivate the teams they lead to deliver on the details. To lead a team, it’s important to appreciate the need to strive for excellence. Great leaders aren’t happy to accept the status quo, especially if the status quo can be improved upon.
Of course, these qualities can be learned, but many of us — thankfully — have them, innately. Few (if any) of us are happy with second best and, in a field driven by a desire to create delightful and memorable user experiences, we appreciate the importance of details and their place in the grand scheme of things. This is a great foundation on which to build leadership skills.
To thrive as a leader, it’s important to share this focus on the details with others, ensuring they understand and appreciate the role that the details play in the whole. Act as a beacon of excellence: lead by example; never settle for second best; give success and accept failure… and your team will follow you.
As user experience design matures as a discipline, and the number of different specializations multiplies, so too does the discipline’s need for leaders, to nurture and grow teams. As a relatively new field of expertise, the opportunities to develop as a UX leader are tremendous.
Leadership is a skill and — like any skill — it can be learned. As I’ve noted throughout this series of articles, one of the best places to learn is to look to other disciplines for guidance, widening the frame of reference. When we consider leadership, this is certainly true.
There’s never been a more exciting time to work in User Experience design. UX has the potential to impact on so many facets of life, and the world is crying out for leaders to step up and lead the charge. I’d encourage anyone eager to learn and to grow to undertake a skills audit, take the first step, and embark on the journey into leadership. Leadership is a privilege, rich with rewards, and is something I’d strongly encourage exploring.
There are many great publications, offline and online, that will help you on your adventure. I’ve included a few below to start you on your journey.
The Harvard Business Review website is an excellent starting point and its guide, HBR’s 10 Must Reads on Leadership, provides an excellent overview on developing leadership qualities.
Peter Drucker’s writing on leadership is also well worth reading. Drucker has written many books, one I would strongly recommend is Managing Oneself. It’s a short (but very powerful) read, and I read it at least two or three times a year.
Finally, HBR’s website — mentioned above — is definitely worth bookmarking. Its business-focused flavor offers designers a different perspective on leadership, which is well worth becoming acquainted with.
Software developers all over the world can benefit from an increased understanding of intellectual property (IP) laws and how those laws may affect their work. Software programs are often complex works that include both functional and artistic elements and may be covered by a variety of different types of IP laws. This can be very confusing for those who haven’t been taught about IP and can cause them to miss out on opportunities to protect their own work or to accidentally infringe on the work of another.
The purpose of this article is to provide information about one type of IP law, copyright law, for software developers who live or work in the United Kingdom. Below we will discuss the definition of copyright law, the source of UK copyright law, and how it applies to technological works. I’ll also elaborate on what is not covered by copyright law, as well as the UK concepts of fair dealing and moral rights as they are related to copyright law.
Copyright Law Essentials
You can learn more about copyright law in general and about how it applies to software in my previous article. Go to article →
What Is Copyright Law?
Copyright law is a type of intellectual property law that protects creative works, which can include things like plays, movies, drawings, songs, and many other things. Around the world, copyright laws give the authors or creators of literary, dramatic, musical, or artistic works the right to control the ways in which their material may be used. With regard to software, copyright law generally covers the artistic elements of a software program as opposed to the functional elements.
What Is The Source Of Copyright Law In The UK?
Copyright law originated in the United Kingdom from a concept of common law; the Statute of Anne 1709. It became statutory with the passing of the Copyright Act 1911. The current act is the Copyright, Designs and Patents Act of 1988. Those interested can read the full text here.
The relevant government office for copyright inquiries is the UK Intellectual Property Office. The UK is also a signatory to the Berne Convention, an international agreement concerning copyright law that has been adopted by 172 countries worldwide.
How Does UK Copyright Law Apply Specifically To Technological Works?
Copyright law can apply to all kinds of technological works that are used with computers, tablets, smartphones, or video game systems. This includes apps, computer programs, databases, spreadsheets, screen displays, and even virtual reality environments. Copyright also applies to works that are used or distributed on the internet like websites, blogs, and other online content. In the UK, computer programs are specifically protected as literary works.
Throughout the European Union, the Computer Programs Directive provides guidance regarding the legal protection of computer programs. The Copyright (Computer Programs) Regulations of 1992 extended the rules covering literary works to include computer programs in other European countries as well.
What Is Not Covered By UK Copyright Law?
Copyright law in the UK, as elsewhere, does not protect ideas, procedures, methods of operations, or mathematical concepts (though other types of IP may protect them under certain circumstances). In other words, copyright law is about protecting a particular expression of an idea, not the idea itself, and not functional elements of a work. Additionally, names, titles, short phrases, and colors are not generally considered unique or substantial enough to be covered by copyright law. However, a work that combines some of the elements, such as a logo or design, could possibly be eligible for copyright (and perhaps trademark) protection.
How Long Does Copyright Protection In The UK Last?
Because the UK is a signatory to the Berne Convention which covered this issue, a copyright in the UK will typically be protected for either the life of the author plus 70 years from the death of the author or, for published works, for 70 years from the date of first publication. However, there are many exceptions to this rule, and each work should be treated on a case-by-case basis if there are any doubts.
One notable UK-specific exception has to do with the boy who never grew up, Peter Pan. Author J.M. Barrie gifted all of the rights to his creation to a children’s hospital in London. When the original copyright expired in 1987, an extension was added to the Copyright, Designs and Patents Act of 1988 mentioned above so that the hospital could continue to collect royalties based on uses of the work (though the hospital has no creative control over how the work is used). Ultimately, this is only an unusual — and perhaps endearingly British — exception to the normal copyright term.
What Is Fair Dealing?
The copyright laws of almost all countries allow exceptions for certain permitted uses of copyrighted works such as news reporting, educational uses, or where the use of the work is de minimus. In the United States, one can assert a “fair use” defense if accused of infringing a copyright if the use was due to one of these permitted activities. In the UK, these permitted activities fall under the legal concept known as “fair dealing.” According to the University of Nottingham, eligible activities which can be conducted without infringing a copyrighted work include:
Private and research study purposes;
Performance, copies or lending for educational purposes;
Criticism and news reporting;
Copies and lending by librarians;
Format shifting or back up of a work you own for personal use;
Caricature, parody or pastiche;
Acts for the purposes of royal commissions, statutory enquiries, judicial proceedings and parliamentary purposes;
Recording of broadcasts for the purposes of listening to or viewing at a more convenient time;
Producing a back-up copy for personal use of a computer program.
How Does “Fair Dealing” Affect Technology Copyrights In The UK?
The “fair dealing” exceptions mentioned above may specifically impact copyrights for technology-related works such as software programs or databases. For example, producing a backup copy of a software program for personal use only would not be considered copyright infringement under a fair dealing exception. Though fair dealing explicitly excludes decompilation or copying a software program during decompilation, the European Software Directive allows software licensees to use their copy of the software “to observe study or test the functioning of the program” in order to “determine the ideas and principles which underlie any element of the program.”
Therefore, users may freely observe a program as it operates to determine their functions and its underlying ideas, even if the goal is to create a competing program (see the UK case SAS Institute v. World Programming for more information on this concept). However, actual copying, for example in the case of source code copying, is not tolerated since this is explicitly protected by copyright.
For practical reasons, database copyrights would not be infringed if a person with the legal right to use part or all of a database performs steps necessary to use or access the contents of the database. Also, accessing a database for the purposes of private study or non-commercial research does not infringe copyright in a database.
Moral Rights In The UK
Another difference between the UK and other parts of the world with regard to copyright law is the UK’s emphasis on the importance of moral rights. Though this issue may not often arise in technology-related copyright disputes, moral rights are additional rights over and above the economic rights typically protected by copyright law.
In the UK, moral rights are: the right to attribution, or the right to be known or recognized as the author of a work; the right to object to derogatory treatment of a work, which includes any addition, deletion, or adaptation of a work that would distort or “mutilate” the work or injure the honor or reputation of the author; the right to object to false attribution, which basically means that you would not be named as the author of something you didn’t create; and the right to privacy of certain photographs and recordings, such as those commissioned for a private occasion.
One reason moral rights might be important for developers is that the moral right to attribution gives the developer the right to be named as the author of the software program, even though it is not common industry practice to do so. By the same token, if a developer doesn’t get their name associated with projects they didn’t work on, the right to object to false attribution protects them also. Find more information about moral rights here.
It is our hope that this information has been helpful for UK software designers and developers. Though this is only introductory information, and should not be substituted for legal counsel in the event of specific questions or disputes, education about copyright law issues and other IP issues helps to empower software designers and developers to make sure their works are fully protected.
It’s quite popular these days, and dare I say a damn fine idea, to build sites with components. Rather than building out entire pages one by one, we build a system of components (think: a search form, an article card, a menu, a footer) and then piece together the site with those components.
Static sites are all the rage these days, and rightfully so, as they are fast, secure, and inexpensive to host. Even Smashing Magazine is a static site, believe it or not!
Let’s take a walk through a site I built recently using this technique. I used CodePen Projects to build it, which offers Nunjucks as a preprocessor, which was perfectly up for the job.
A Four-Page Site With A Consistent Header, Navigation, And Footer
HTML alone doesn’t have a good solution for this. What we need are imports. Languages like PHP make this simple with things like <?php include "header.php"; ?>, but static file hosts don’t run PHP (on purpose) and HTML alone is no help. Fortunately, we can preprocess includes with Nunjucks.
It makes perfect sense here to create a layout, including chunks of HTML representing the header, navigation, and footer. Nunjucks templating has the concept of blocks, which allow us to slot in content into that spot when we use the layout.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Power of Serverless</title>
<link rel="stylesheet" href="/styles/style.processed.css">
% include "./template-parts/_header.njk" %
% include "./template-parts/_nav.njk" %
% block content %
% endblock %
% include "./template-parts/_footer.njk" %
Notice the files that are included are named like _file.njk. That’s not entirely necessary. It could be header.html or icons.svg, but they are named like this because 1) files that start with underscores are a bit of-of a standard way of saying they are a partial. In CodePen Projects, it means they won’t try to be compiled alone. 2) By naming it .njk, we could use more Nunjucks stuff in there if we want to.
None of these bits have anything special in them at all. They are just little bits of HTML intended to be used on each of our four pages.
<p>Just a no-surprises footer, people. Nothing to see here.<p>
Done this way, we can make one change and have the change reflected on all four pages.
Using The Layout For The Four Pages
Now each of our four pages can be a file. Let’s just start with index.njk though, which in CodePen Projects, will automatically be processed and create an index.html file every time you save.
Here’s what we could put in index.njk to use the layout and drop some content in that block:
That will buy us a fully functional home page! Nice! Each of the four pages can do the same exact thing, but putting different content in the block, and we have ourselves a little four-page site that is easy to manage.
For the record, I’m not sure I’d call these little chunks we re-using components. We’re just being efficient and breaking up a layout into chunks. I think of a component more like a re-usable chunk that accepts data and outputs a unique version of itself with that data. We’ll get to that.
Making Active Navigation
In our _layout.njk we have the body output a class name as a variable:
<body class=" body_class }">
Then before we call that layout on an indivdiual page, we set that variable:
% set body_class = "home" %
% extends "_layout.njk" %
Let’s say our navigation was structured like
Now we can target that link and apply special styling as needed by doing:
body.home .nav-home a,
body.services .nav-services a /* continue matching classes for all pages... */
/* unique active state styling */
Oh and those icons? Those are just individual .svg files I put in a folder and included like
% include "../icons/cloud.svg" %
And that allows me to style them like:
Assuming the SVG elements inside have no fill attributes already on them.
Authoring Content In Markdown
The homepage of my microsite has a big chunk of content on it. I could certainly write and maintain that in HTML itself, but sometimes it’s nice to leave that type of thing to Markdown. Markdown feels cleaner to write and perhaps a bit easier to look at when it’s lots of copy.
This is very easy in CodePen Projects. I made a file that ends in .md, which will automatically be processed into HTML, then included that in the index.njk file.
We need to create some “cards” based on a simple template, so we can build things like this:
Building a repeatable component like that in Nunjucks involves using what they call Macros. Macros are deliciously simple. They are like as if HTML had functions!
The whole idea here is to separate data and markup. This gives us some pretty clear, and tangible benefits:
If we need to make a change to the HTML, we can change it in the macro and it gets changed everywhere that uses that macro.
The data isn’t tangled up in markup
The data could come from anywhere! We code the data right into calls to the macros as we’ve done above. Or we could reference some JSON data and loop over it. I’m sure you could even imagine a setup in which that JSON data comes from a sort of headless CMS, build process, serverless function, cron job, or whatever.
Now we have these repeatable cards that combine data and markup, just what we need:
Make As Many Components As You Like
You can take this idea and run with it. For example, imagine how Bootstrap is essentially a bunch of CSS that you follow HTML patterns in which to use. You could make each of those patterns a macro and call them as needed, essentially componentizing the framework.
You can nest components if you like, embracing a sort of atomic design philosophy. Nunjucks offers logic as well, meaning you can create conditional components and variations just by passing in different data.
In the simple site I made, I made a different macro for the ideas section of the site because it involved slightly different data and a slightly different card design.
A Quick Case Against Static Sites
I might argue that most sites benefit from a component-based architecture, but only some sites are appropriate for being static. I work on plenty of sites in which having back-end languages is appropriate and useful.
One of my sites, CSS-Tricks, has things like a user login with a somewhat complex permissions system: forums, comments, eCommerce. While none of those things totally halt the idea of working staticly, I’m often glad I have a database and back-end languages to work with. It helps me build what I need and keeps things under one roof.
Go Forth And Embrace The Static Life!
Remember that one of the benefits of building in the way we did in this article is that the end result is just a bunch of static files. Easy to host, fast, and secure. Yet, we didn’t have to give up working in a developer-friendly way. This site will be easy to update and add to in the future.
CodePen Projects handles all the Nunjucks stuff we talked about here, and also things like Sass processing and image hosting, which I took advantage of for the site. You could replicate the same with, say, a Gulp or Grunt-based build process locally. Here’s a boilerplate project like that you could spin up.
As I learned at the start of February, if you’re a lucky enough to get one-on-one time with Purna Virji, Senior Manager of Global Engagement at Microsoft, you ask her about the future of search, AI, and pay per click (because she makes everything sound pretty exciting).
Purna—named the #1 most influential PPC expert in the world by PPC Hero in 2016—is on the forefront of what’s coming down the pipeline in our industry. She’s joining us February 21st as a speaker for Marketing Optimization Week to share her insight into AI, and today we’re sharing a sneak peek of what to expect in that session.
Watch our chat below, or read on for the condensed Q&A.
Jen: What do you imagine the day-to-day life of a marketer will be like with access to exciting AI? You grab your morning coffee, log on to your computer, then what?
Purna: [Then] you’ll be getting all kinds of wonderful notifications about performance, new insights, and ideas for engaging with your audience. AI solves some of our biggest problems—including [how to] engage with people in this world full of distractions.
AI is super helpful because it can analyze all of the different data and touchpoints to see what’s working (or not), and it can help us get really good at personalization and engaging with people in the way they’d like to be engaged with.
It also gives us new interfaces. Things like chatbots or digital assistants, as well as virtual reality. So if I interest somebody through a chatbot to look at the latest collection of shoes, I can just put on my HoloLens and take a look at a 3D hologram in front of me of all the latest styles.
It’s really about cool ways to engage with brands and people in a very seamless manner.
Jen: You’re speaking at Unbounce’s Marketing Optimization Week February 21st on how to prepare for AI’s emerging role in marketing. As a preview, can you share one of those things we can all prep for?
Purna: Yes! I think one of the things marketers can prepare for is to understand what AI can do for us and try to touch the waters a bit more with a chatbot. [In my talk] I’ll be giving people some tips for how to incorporate a chatbot within search. For example, Bing offers a conversational bot right in the SERPs, so I’ll give some tips on how you can set this up and a strategy you can use for your bot.
Jen: Chatbots are very hot right now.
Purna: It’s because they’re so easy and convenient. You’re already using a platform you’re familiar with—whether it’s Skype or Facebook Messenger or Kik—or whatever platform you use to talk to your friends. In that same platform, I can order a pizza or check on a status of my order, or do anything I need to do with a brand in that same place. There’s no multiple hops that have to happen.
Jen: It seems like, for customers, chat is very natural. It’s how we already go about our world.
Purna: yes—conversation is the first thing we learn. From babies to now arguing about who’s going to take the trash out. Conversation is [still] at the forefront of all of our lives.
Jen: Here at Unbounce we’re a Conversion Platform for marketers, and many of our customers pair landing pages with PPC in social or search. How do you see AI impacting pay per click the most in the next few years?
Purna: I think AI will have a couple of different roles…
For one —it’s going to make it easier to hone into the right person. We’re already seeing some signs of this with our much more advanced audience targeting, such as in-market audiences—which lets you slice and dice audiences based on people who are more likely to buy —so it’s going to [enhance] reaching the right person at the right time.
It’s also going to help us take a lot of the effort and pain out of the administrative side. We saw this with bit automations…it’ll make things like reporting a lot easier, keyword research a lot easier. Anything that’s really a repetitive task can get automated and can be improved by AI. Time savings and more effective ads – it’s a win win for all.
Jen: Y’know, we hear some marketers kind of demonize AI, or see it in a sort of detrimental way. But you don’t see it this way.
Purna: No, I don’t think so. I think the way AI has been designed and actually, the way companies like Microsoft, Google or IBM, who are at the forefront of creating AI…I think the responsibility is on people like us to infuse the technology to respect humans. And, I mean, that’s one of the pillars we’re building our AI on, that it is respectful to the human. It’s there to augment what we can do. It’s not there to replace us or destroy us or anything like that.
All AI is doing is taking what we’re good at and giving us a little super power. It’s like wearing a little jet pack so we can run faster or slide faster. When you think of it that way it’s giving us gifts we didn’t have access to before.
Jen: You’re no stranger to setting up an AdWords or Bing campaign. So, what’s a little known technique that anyone managing paid spend can do today for more impact with their PPC ads?
Purna: I’d say there are two things. The first is to make sure you’re implementing in-market audiences. If someone was to ask me, “what’s one tip for success for 2018?”, I’m a big believer of the power of in-market audiences, it’s still in pilot in open beta so anyone can sign up an be a part of it and test it.
Throughout the testing period we’ve seen such amazing results from many people. It allows you to reach an audience that’s in the market or looking to buy specific products or services you’re selling. We have over 120 different categories, so if you just layer them onto your existing ad groups or campaigns and just adjust the bids accordingly, you have a better chance of reaching people who are interested in what you sell but may not know who you are…you’re just reaching this very qualified audience.
If you can do [this] and combine it with the wonderful landing page learnings you get with Unbounce, I think that’s a really win win solution.
Jen: We know voice search is going to have a much bigger role to play. What should PPC’ers be thinking about to prepare for this?
I would say PPC marketers should think about the differences or what’s unique to voice. First, it tends to be much more local. If you’re running local campaigns, you’ll want to think about the queries relating to your business that people may ask if they’re in a hurry or on the go.
And second, all marketers (including SEOs too) should consider: are we providing the right information? I.e. do we have some sort of structured data or schema markup that can give the search engine much more insights into understanding what the page or information is about.
Lastly, [we can] look at the keywords. Voice is of course more conversational and with conversational queries, we tend to have longer phrases, [so] we’re much more clear on the intent. If you can, look at testing some of the most common, broader questions or phrases that get asked and actually test adding them in keywords. Ask yourself what could be the right way to answer [the query].
In the old days (ha, just last year!) we would look for shoes, like mens sandals. We’d go to the website, select colours, size and width. But now with voice, you self-select in the query itself. You say “show me blue strappy summer sandals in size 8”. If I then [have] to go to the website and do the selections again I’m quite annoyed, but if I got to a page that showed just what I was looking for? It’s about making it very seamless for the customer.
Jen: so prepare for more granularity… Purna: exactly, [it’s] on page as well, which is why it’s important to look at some of the landing page options you have, [and ask] —“are we answering the right questions” in the right way.
Jen: You’ve seen dozens of landing pages for PPC. What do you think is the biggest mistake people make when creating landing pages to pair with their search ads?
Purna: It’s not being specific enough. If [someone’s] looking for something and your ad promises something, does your page deliver on that promise?
For example, if I’m doing a search for waterproof digital cameras and see an ad that talks about waterproof digital cameras on sale, and I go on your landing page and its all of your digital cameras —again you’re giving the searcher more work to do.
You want to make life as easy as possible, answer the right questions, and don’t go too broad. Yes – there’s the temptation, especially with newbie PPC marketers— Let’s just send people to the homepage. As you know that’s just not going to work and they’ll realize that soon.
Also, as you say, the call to action—even sales people fail at this sometimes—you don’t or forget to ask exactly what you want [visitors] to do. So making sure you do that is a huge advantage.
Don’t miss Purna’s session February 21st as part of Marketing Optimization Week. She’ll be joining other experts from Drift, Hanapin, and Emma delivering the latest tactics you can use to see better results. See the agenda here.
It’s Day 4 of Product Marketing Month. Today’s post examines churn, and accelerating your customer’s Time to Value. — Unbounce co-founder Oli Gardner
What’s The Easiest Way to Make a Sticky Product?
Build a product and call it a Sticky Bar. Look over there >>
With that dad joke out of the way, I want to talk about some important SaaS metrics, that will help product marketers understand what is or isn’t sticky about the products you’re building. I’m also going to talk about how to find some clues in your data, and finally how we’ve been working on fixing our own stickiness problems at Unbounce.
What makes a SaaS product sticky?
In short, it’s a product that becomes part of someone’s daily routine. Something they can’t do as good or enjoyable a job without. It’s something they need. But even more than that, it’s something they love. And that love comes from two main places; either it’s a one-of-a-kind solution that’s simply awesome, or it’s a many-of-a-kind solution that includes a superior customer experience.
Unless you’re selling frying pans, having a product that isn’t sticky just means that you have a churn problem.
Why do people churn from a SaaS product?
There are many reasons why someone would decide to stop paying you money every month, and a great way to find out what they are is simply to ask. At Unbounce we have an in-app cancellation survey that gets seen by anyone who downgrades to free from a paid plan. It’s a single open-ended question: “What is your reason for downgrading?”
On average, about 27% of people answer the question. Here’s a pie chart showing the breakdown of responses over a 6-month period.
There are some fascinating responses in there, but the one that stands out the most is the “Under-Utilized” (31.40%) category. This is the response you don’t want to hear. They were using it, and probably deriving value from it, but they weren’t using it enough to warrant an ongoing subscription.
We noticed that certain cohorts of customers were more likely to see fluctuating value from using landing pages. This could be due to an irregular number or timing of campaigns, so when there’s nothing going on, they cancel or downgrade their plan. They may come back again, many do, but the inconsistent behavior – known as flapping – can be a symptom of a product that isn’t fully sticky.
It could also be because they were not able to effectively calculate or realize the ROI of our solution properly, which can happen when customers are running campaigns not directly tied to paid spend. When there is money involved, it’s easier to calculate your returns, speeding up the time to value (TTV).
Increase Stickiness by Reducing Time to Value (TTV)
Time to Value (TTV) is the velocity of a customer seeing the value from your product – how long does it take them to get to those ah-ha moments that make them see the benefit?
It’s a great way to think from the customer’s perspective. The tough part is discovering what those ah-ha moments are. But when you do, product marketing has its mission.
When your TTV goes down, your stickiness and your LTV (Lifetime Value) goes up.
One of the ah-ha moments we’ve identified for Unbounce is when people get inside the builder, and they see how easy, yet how powerful and customizable it is. The problem is, they don’t get to see that until they slap down a credit card.
To amplify this, we just released a preview mode of our builder, designed specifically to help shorten the TTV.
If you click the image, you’ll notice that upon arrival, you see a popup with a welcome message and a bit of contextual information about where you are and what you can do.
Speaking of popups, I’ve heard this question a lot in the past 6 months:
“Why did you choose popups and sticky bars as your next products?”
Why did we choose popups and sticky bars?
With the landing page product, we knew we’d solved the pain of customers increasing conversions for their paid traffic, but those same customers (and their teams) also need ways to optimize the organic traffic they already have.
Popups and sticky bars are both tools that have a short time to value, for three reasons:
They are less complex than a landing page (to build and to understand)
Most businesses get more traffic to their website than they do to their landing pages, so they’ll see conversions coming in more quickly
If you remember back to the chart at the beginning, 4.45% of canceling customers said they had “poor campaign performance”. This is important to note because getting something up and running quickly and easily is one thing, but being successful – especially as a marketer – is another thing altogether.
Which is why our job as product marketers doesn’t stop until the customer is being successful using your software.
The other way to increase product stickiness
I mentioned earlier about needing to provide a superior customer experience, especially in a crowded competitive landscape. You need to have a company people trust more than the competition, and trust comes from transparency, security, reliability, and just giving a human shit about your customers.
Product differentiation, by itself, has become indefensible because today’s competitors can copy your better, faster, cheaper features virtually instantly. Now, the only thing they can’t replicate is the trust that customers feel for you and your team. Ultimately, that’s born not of a self-centered mission statement like “We want to be best-in-class X” or “to disrupt Y,” but of a culture whose beating heart is a strategic story that casts your customer as the world-changing hero.
How are you reducing your time to value (TTV)?
I’d love to know the techniques you’re using to discover your ah-ha moments, and what you’re doing to accelerate your customers’ access to them. Lemme know in the comments.