tools-and-tips-for-getting-paid

Getting paid for a service should be pretty straightforward right? But if you’re running a digital agency you’d know that it’s anything but straightforward. In fact, sometimes it’s an absolute headache.

But with these tips for getting paid, you’ll probably never have to experience these issues again:

  • Clients disappearing before you’re about to launch the site leaving you out of pocket
  • Chasing up payments for finished work
  • Doing small changes for clients after finishing the website for free
  • Feeling obligated to discount when a client is having money issues

Check Your Mindset

Before I even dive into your payment options, the very first thing you need to address is your mindset around getting paid.

The thing is, money is the oxygen your business needs to survive. Without it, you don’t have a business. You can’t help anyone if you go out of business because you “felt bad” for invoicing. You need to start charging for what you do and not feel bad about it.

Would you get in an Uber to go to the local shop and not pay because it was such a short trip?

If a client wants you to make a change to their website once the project is complete, then explain that you only make changes for clients who are on a maintenance plan. However, if you agree to make small changes for them, they will never have a reason to sign up! And having recurring revenue is imperative to sustain your business.

Our very own Troy Dean probably put it the most eloquently when he said:

You’re running a business, not a community service!

Getting Paid Overview

The workflow for getting paid goes a little something like this:

1. Provide proposal / quote / estimate


2. Send invoice


3. Invoice follow-ups


4. Get paid


5. Start work


6. Finish work


7. Get approval


8. Get paid


9. Launch live

In summary:

Don’t start work or launch live until you are paid! 

Options for Getting Paid

Milestone Payments

One of the best ways to ensure that you’re not left out of pocket is to invoice for the milestone once it has been approved. This is great for larger fixed-rate projects such as website builds.

  • 50% deposit to get started
  • 30% after design and functionality have been approved
  • 20% prior to launch

Milestone payments is one of the ways to get paid that we recommend in our Digital Business Blueprint Course. 

Periodic Payment via Credit Card

Set up payments to be taken automatically at certain intervals. This is great as you don’t have to worry about invoicing or follow-ups. This is great for cash flow as you know exactly what you are getting in and when.

For example: $9,000 project over 3 months would have a monthly $3,000 recurring charge applied.

50% Payments

This is good for customisations for existing sites. Get a payment upfront and a payment prior to launching the feature or change.

  • Estimate range e.g. 5 – 7 hours.
  • 50% upfront.
  • 50% prior to launching live

Sprints

You can ask the client to pay for 2 weeks of your team’s time. e.g. $10k per 2-week sprint.

Bending the Rules

For some clients that you like working with and have a good history of paying on time, the rules can be bent so that you invoice at the end of the project for small projects. Do so with caution.

Payment Tools & Software

Having the right tools and software can make your workflow a whole lot easier!

Here are my top picks:

  • Project briefs: Google Docs
  • Estimates: Better Proposals / Xero
  • Bookkeeping & Invoicing: Xero Stripe
  • Recurring payments: WooCommerce Subscriptions Stripe / Xero Stripe
  • Time tracking and margins: Harvest / Toggl

Additional Tools

  • Freshbooks
  • Pancake
  • Free Agent
  • Paypal
  • Western Union
  • Ezidebit (AU)

When it comes to choosing tools, be careful not to overcomplicate the systems that get you paid. The simplest solution is often the best. Find the shortest path to achieve the result before you go into fancy tools and automation.

Bonus Tip

For recovering failed payments on expiring credit cards in Stripe. Check out Stunning. Which is free if you have less than 250 customers.

Final Advice

The key is to keep it as simple as possible and make it automated. Credit card payments or direct debit are ideal options as you can set them up and they will charge without you needing to remember or follow up.

It’s your business so you are the one who sets the rules for how you’re paid. Set them to work for you so that you can spend less time chasing invoices and more time enjoying your life, your business and serving your clients. And if someone has an issue with your payment system then it’s a major red flag!

Let me know if you have any tools or tips that work for you when it comes to getting paid in the comments below.

Black Friday is going to be here in a matter of days, and you just got the go-ahead to use some additional budget to build awareness with YouTube ads. The problem is you don’t have enough time to get new holiday creative in time. Not ideal, but it’s not the end of the world. If you’re stuck with limited creative or you have to use the same videos you ran last year, I’m going to show you a few ways you can squeeze a little bit more juice out the orange before you have to throw it out. Let’s hop in.

Even if your creative is limited, test different targets

I’ve had plenty of e-commerce clients who have seasonal products so one tactic I like trying is utilizing site search. If you have site search set up in your Google Analytics, you will be able to see the search queries users were typing when they were visiting your site. As a marketer, I like to go back and see what was popular during the holiday season the previous year. Like this example:

We see flavors during last year’s holiday season that most likely are not made or not popular at other times of the year. And these season products were the most searched. If these are products this company plans on selling again this year, I will consider creating custom intent audiences based off of these site search queries to try and get in front of users who are looking for these products again in the new season. (Yes, I understand some of the site searches are very broad. So instead of just “peppermint,” I’ll try “peppermint coffee pod” instead).

Remember, for YouTube, custom intent audiences are based upon broad-match related variants of actual search queries people have typed on Google.com. Since custom intent audiences haven’t yet been merged with custom affinity audiences like we were warned at the last Google Marketing Live, you can try and capitalize on higher keyword intent with your video campaigns one last time.

One other solution is to create custom intent audiences using keywords of the top-selling products from the previous year (again, if they’re applicable for this year too). Head over to your conversions tab and review your e-commerce overview during your main holiday season. Take the product names (sorry had to blur mine out) and create audiences from these products as well as similar products users may want to buy during this time of year.

Refresh your product selections for TrueView for Shopping

It’s the holidays so of course, you want to promote your products. TrueView for Shopping campaigns are a great way for YouTube marketers to promote their products and potentially drive traffic to specific product pages. Last year I wrote an article on how to create evergreen TrueView for Shopping campaigns, and the theory definitely still applies to the holiday season. One of the options we have to select products for our TrueView for Shopping campaigns is custom labels from our Merchant Center feeds.

Just like how we can review previous holiday season data to find new targeting options, we can use that data to update our labels for product selections. Whether you want to use your main feeds or a supplemental feed, keeping your custom labels updated for the holiday season can help you promote the right products at the right time. Even if you don’t have new video creative to use, at least the products that will appear alongside your TrueView in-stream ads will be different and relevant to your holiday goals. 

Test your call-to-action extensions

At this time last year, we were still using call-to-action overlays on our TrueView in-stream ads to drive traffic to the site. Those days are gone, and now we have to use the call-to-action extensions. No matter what creative you have to use this year, keep testing out different call-to-action extensions to try and drive more traffic to your website.

Your video creative could be the same but test different headlines and call-to-action messages for higher CTRs. Remember even if the viewer skips your ad and goes on to the video watch page they originally intended on visiting, your call-to-action extensions will still be visible on the page. Make your holiday messages, offers, sales, etc. appealing enough to gain more clicks from your YouTube videos even if your creative is the same.

Final point

I will always recommend trying to get new creative that speaks as specifically as possible to your target audience, the products you are promoting and the deals you are offering during the holiday season. The more you cater your creative to match the feel of the season, the better chance you have of getting higher engagement rates in a competitive advertising season. But if you don’t new creative to use, try these tips I mentioned to maximize your performance with the limited creative you may have.

More about retail for the winter holidays


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

Joe Martinez is the Director of Client Strategy for Clix Marketing. While he is hands-on in all aspects of PPC, his true passions lie in Display, Remarketing, and YouTube. He is a regular contributor to Search Engine Land, Marketing Land, and WordStream. He has also written for PPC Hero, SEMrush, Unbounce, Leadpages, Optmyzr, and AdStage. He has hosted webinars for SEMrush, Unbounce, Quora and Bing Ads. He regularly speaks at conferences such as SMX Advanced, SMX West, SMX East, HeroConf, Confluence Conference, Digital Olympus and more. Finally, he was named a Top 25 Influential PPC Expert by PPC Hero in 2017 and 2018.



what-getting-let-go-from-a-design-job-taught-me

Bouncing back after being laid off

“This is going to suck”. Wait what? I didn’t expect to hear that from my manager during our one on one.

Photo by Saad Chaudhry

Earlier that morning I sat down with my boss to talk about recent work. He asked me about the research I was conducting. Since I was still in the middle of it I gave him a quick summary. He filled out a spreadsheet pressing me for more info. Two hours passed, he seemed satisfied.

“Alright let’s do our one on one” he blurts out walking out of the room. Hurriedly I grab my jacket expecting us to go outside as usual. But something feels off. As we’re going towards the exit he takes a sharp turn left and motions to the room in the corner, “this is going to suck” he mutters under his breath. Did I hear that right? The HR manager is already there.

The next moment passes like a blur. HR explains how the company has to cut staff due to lack of funding and that it’s nothing personal plus good news is that, “you now have the rest of the afternoon off!”. Good news indeed.

“It seems like you’re taking this fine, do you have any questions?” says my now former boss. I ask about reapplying, about waiting it out until the new funding comes in. It doesn’t matter. I’m desperately clinging to something that’s been decided long before this meeting.

When we’re let go — it’s easy to self blame. What did I do wrong? How did things come to this? The truth is, it’s not always about you. A company’s rapid decline or rapid growth can all play a role in one’s departure.

Running out of money happens in startups more often than not. The media portrays startups as glamorous places to work hard and make it big. But most of them fail. We all know the stats but it’s personal when your paycheck is on the line.

When I left one startup for another, the prior company closed doors a month later. The new startup didn’t fare well either. They went through multiple rounds of layoffs cutting over 90% of staff and shutting down multiple locations. One guy got laid off, was brought back, only to get laid off again within a week. What a rollercoaster.

On the flip side of rapid decline is rapid growth. For employees this means rapid change in skills. Previously strong generalists might find themselves scrambling to provide value when a new wave of specialists come in who can do their job faster and better. It’s not a failure to quit, you may find yourself bored with specialization and prefer to be a generalist elsewhere.

I head back to my desk, trying to figure out how I’m going to pack my remaining cans of red bull and soylent that I ordered to the office. During the last few months I’ve been coming in early and leaving late only to get home in time to hop on a call with our overseas office. I cram everything in my backpack and ask my boss for a final one on one.

We’ve all heard of the metaphor of “boiling the frog”. Put the frog in a pot of water. Adjust the water gradually, the frog won’t notice and gets cooked alive. Awful! But also false. Nature is smarter, the real frogs jump out when the water gets too hot for their liking. They have good instincts but we don’t.

Sometimes we’re the metaphorical frog trapped in a toxic workplace. We try to adjust. We rationalize. We convince ourselves that “it’s not so bad” and that we just have to “stick it out”. Little by little we give up our freedom. We work harder. We get by with less. We put our emotional guards up, spending significant amount of our mental processes fighting a culture that leaves us with little energy to do the work itself.

Sometimes it gets worse as the stress takes its toll. Anxiety spikes up, everything feels on fire as you’re always on the edge. The stress spills over outside of work and your personal life and health suffer.

When we’re let go, we cling to the past. We can’t imagine not working. But it’s not because we like the work. It’s because we’ve slowly contorted ourselves into someone beyond recognition to meet the demands of our workplace. Our gradual decline has become a habit we’re no longer aware of.

My manager and I head out of the office for our actual one on one this time. As we circle around, people from the office are everywhere. They’re in the office lobby, in the local cafes, and some are heading out to a local bar—at 11am nonetheless.

Finally the boss opens up. It seems as though some things were bothering him for a while but he was “too nice” or as Kim Scott calls it “ruinously empathetic” to say it then. He criticizes me for being “too junior”, that I can’t get work done without oversight, that I don’t deserve my title, that I’m not empathetic, and that I can’t meet standards. Yet three months ago my performance, according to him, was great. But that’s ruinous empathy.

We wrap up, I grab my stuff and head home.

As I’m standing on the train my watch buzzes. What’s that? Looks like my heart rate has been “unusually high” during my long period of inactivity. Yeah, no kidding. At home I toss myself into a chair staring out the window. The day is cloudy but beautifully bright outside.

Surreal.

That’s the word that comes to mind as I’m trying to process everything. But there’s too much to process. Did this really happen?

As a manager, letting go is never easy. Even if an employee was underperforming you wanna give them a second chance. You feel the mistake of bringing them on and not able to help them succeed. And yet your core skill is navigating relationships and setting up the right environment for people to do great work. The earlier you can flag issues and let an employee know of their mistakes, the faster their performance will improve. The more specific you are with your feedback, the easier it is for them to get better.

The last thing a manager can do is preserve an employee’s sense of self worth. You’re letting them go because they’re not performing to the company’s standard and that it’s not reflective of who they are as a person.

It’s Wednesday. Still the same day. Even though I feel like crap, it’s only 1 PM. Can’t be moping around forever so I hit up a local design event.

I’m licking my wounds over the next few days but by Friday a wave of relief wash over. No more 6am overseas calls. No more skipped breakfasts and Soylent binges. No more sacrificing evenings for the 9pm–11pm overseas calls. No more chronic stress. The more I think about it, the better life seems to be. Can I get let go again?

Being let go is in some ways a time of forced self-reflection. It’s a way to step back and think about what truly matters—not just in career but in life too.

My number one? It’s not work—it’s health. Without good nutrition, sleep, friends, mental, and physical health we’re on a path to burnout. Healthy boundaries make strong relationships.

How does one do this soul searching? Helen Tran, a design luminary, wrote a post about how to find meaningful work by uncovering our values:

  1. When have I felt happy, fulfilled, and proud of myself?
  2. When have I felt the most regretful?
  3. When have I felt the most frustrated, unfilled, or annoyed?
  4. What activities put me in ‘flow’ state?
  5. Who are my role models?
  6. What are my gifts and qualities?

Even when unemployed, we have more power than we think. You don’t have to choose any job that comes your way. You should define how the next opportunity should look like and hire a job that meets your needs.

Some time has passed and I’m grabbing lunch with a friend. “Why do you still talk about this, does it even matter? Most people would have moved on by now” she exclaims. But at this point my feelings of shame have transformed into something closer to gratitude.

I’m glad I got let go—without that proverbial kick in the pants I would’ve missed out on amazing opportunities.

There’s no sugar coating it. Getting fired, getting laid off, being in-between jobs — it sucks. The steady security of a paycheck is gone. We feel afraid, ashamed, and guilty. Only after some time has passed can we look back on our experience objectively.

Today, we have many opportunities to choose from. Before jumping into your next job search, before adjusting your resume — stop. Take a step back.

Outline your priorities. If you’re not going to do it, who else well? If you don’t have a plan you’ll be part of somebody else’s and that plan might not fit in with your values. Do the due diligence on yourself first.

Getting clear now will help you navigate later. Instead of getting any job—think of hiring a job for your needs. You’ll approach your job search deliberately, identify and land your dream job, negotiate your worth, and will be much happier at a place that’s the right fit.

You got this and this design interview guide is here to help.

getting-the-big-picture-for-the-future-of-email

This month I’m going to deviate from my regular series and talk up the new Periodic Table of Email that Marketing Land just released. 

After being in the email business for 20 years, I can recognize the effort and organization needed to put this grand data visualization together. I give total props to the Marketing Land team for the work and the value it will bring to our industry.

As I reviewed the chart, my eyes wandered immediately to the elements in blue and purple, and I began thinking about how they’re related and what they have to tell us about the global picture.

A screenshot of a cell phoneDescription automatically generatedhere.



About The Author

Origin Email and brings nearly two decades of worldwide online marketing and email experience. Ryan is a respected thought leader and nationally distinguished speaker with a history of experience from Adestra, Acxiom, BlueHornet, Sears Holdings, Responsys and infoUSA. In 2013 he was named one of the top 30 strategists in online marketing and is the Chairman Emeritus of the EEC Advisory Board. Ryan also works with start-up companies as an advisor, board member and investor.




Jennie Tan

It’s time to pull up a chair.

Do you sometimes feel a little invisible as a UX writer? Like you don’t have a seat at the table?

Getting a seat at the table means two things to me:

  • Being seen and treated as an essential member of the project team
  • Feeling empowered to make UX writing decisions for the project

Here are some tips on how to raise your visibility (and gain more recognition) for the work you do!

You might work with someone who has never heard of a UX writer. Or maybe you work with a designer who is used to writing their own copy.

Either way, it’s helpful to explain what you do as a UX writer and how you do it. Introduce yourself in a 1:1 chat when someone new joins the team, or get on the agenda at the next team meeting.

I recently gave a short presentation to our summer interns about UX writing at Dropbox. It included these introductory slides:

Share some slides on what you do as a UX writer

Don’t assume people know what you do as UX writer. And once you explain it to them, they’ll better understand what you’re bringing to the table as a project team member.

I have sometimes been accidentally excluded from team meetings.

Here are a few tips for this situation:

  • Tell people you want to be invited to team meetings. I know that seems obvious, but people may assume that you don’t want to be invited to every meeting, especially if you work on multiple teams.
  • Be clear about the type of meeting (team status, sprint planning, vision, brainstorm, retrospective, etc.) you want to be invited to.
  • Physically sit with your team. It’s easier to remember to invite you when you’re in the line of sight.
  • Check that you’re on the right email distribution lists.
  • Browse people’s calendars. If work calendars are shareable, occasionally check out member calendars to see if there are meetings you should be attending.

I track all my projects in an Airtable, and share it with the teams I work on. If your team regularly sends out status reports, ask to be included on them!

A sample project tracker

Are you sometimes consulted for copy at the last minute? That can be frustrating.

One way to minimize those last-minute requests is to add “UX writing review” as a formal item on the project’s sprint or pre-release checklist.

For example, there is now this item in our DoD (“definition of done”) template:

☑︎ If there is customer-facing content in this story (button labels, menu names, error messages, etc.), has Jennie reviewed it?

Not only will this make your workload a little more predictable, it’ll show that UX writing is an essential project task.

I write a document for each chunk of work I do for a project. I call these docs content specs.

You can include an approval section at the top of each content spec. This helps show that a content spec is as an essential component of every project.

Dropbox Paper makes this easy by letting you tag people in to-dos with due dates:

Add an approval section to the top of your content spec

Part of your job as a UX writer is to explain why you choose the words you do. By explaining your decisions objectively and on a regular basis, you’ll elevate your visibility as the go-to words person. I laid out a few tips about this in my previous article, 4 ways to show the value of UX writing.

To keep track of customer-facing terms I was using for a multi-team project, I created a terms list. I update it every few weeks and notify doc subscribers of updates.

The doc is simply organized as an A-to-Z list. It includes links (and acknowledgements) to other teams and their docs.

Doing this helped establish the doc as a go-to resource for the project.

A sample terms list

When the project is over, you can then spend some time to turn the terms list into a full-fledged style guide. Or integrate the list into the company style guide if it already exists.

UX writers often work on multiple workstreams and develop unique cross-project insights. Why not share learnings and boost your visibility companywide? Lead the way with docs and meetings that bridge teams and help solve common problems together.

For example, are there multiple teams at your company that contribute menu items to your product’s context (right-click) menu? You can be the person who tracks these items in a single doc to make sure they are consistent and follow your company’s style guide.

Doing this shows your ability to not only craft words, but craft content strategy.

I’m kind of a geek for apps, so this is definitely my favorite tip of the bunch!

Whatever tools your team uses to track work — whether it be Git, Jira, Trello, Figma, Dropbox Paper, or something else, learn them. And ask team members to tag you in them when they have UX writing questions.

Others will see you being tagged and will learn to tag you, too. This raises your visibility.

And if you really want to go deep on this one, learn how to implement strings in code. (It’s one of the most fun things I’ve ever done.) After getting set up by a few awesome engineers, I can now reply to their tags right in the code, as well as update actual strings!

This allows you more freedom and flexibility in making UX writing decisions.

The engineer tags me for help (red) and I update the string directly in the code (green)

My manager rallied to literally get me a seat at a leadership table for a high-visibility project. I’m the sole UX writing representative at a table full of group managers and directors. I never would have gotten a seat at that table without my managers’ support.

I share UX writing updates as well as give feedback on other members’ updates. This helps the project run smoothly.

Okay, there you have it. Yes, getting seen takes some work.

As Shirley Chisholm is quoted as saying, “If they don’t give you a seat at the table, bring a folding chair.”

Pull up that chair. And then ask for what you want, show and tell your value, and get help from your allies. Then repeat.

Changes won’t happen overnight. But with a little patience, you can get more seen and valued as a UX writer. Take an active role because it’s all part of steering your career.

Words matter. Writers matter. You matter.


getting-started-with-google-tag-manager

Ever put in a development ticket for what you thought would be a simple tracking code update? And then waited weeks for the task to be completed?

Google Tag Manager (GTM) saves marketers and developers alike by allowing you to set up tracking codes for analytics and ad platforms through one simple interface. In this article, I’ll walk through setting up a GTM account, creating your first tags and triggers, and using the platform to streamline your tracking setup process.

Understanding Google Tag Manager hierarchy

The account is the top level of GTM hierarchy. If you’re managing GTM from an agency login, you’d generally want to create one account per each brand you work with, and a container for each website that brand uses. You can access multiple accounts via the same Google login.

A container includes a unique GTM code, which you should add across the site you want to track.

Within each container, you’ll then set up tags that fire tracking codes on your site. Triggers define when tags will fire. Variables are functions you can use on a more granular level indicate when tags will fire.

Setting up your account

To start setting up your account, go here and click “Start for Free.”

Google Tag Manager for WordPress plugin.

Setting up tags

GTM includes several built-in tag templates for major analytics and ad platforms. These include Google products, such as Analytics, Ads, Optimize, and Surveys, as well as several third-party platforms, such as AdRoll, Microsoft Advertising, LinkedIn and Quora. If a tracking tag doesn’t have an existing template, you can also use a Custom HTML or Custom Image tag.

To create your first tag, click “Add a new tag” from the Overview screen. 

Install the Chrome extension and navigate to the site. Click the Tag Assistant icon, and select “Enable” for your site.

You should now be able to see what tags are firing on your site, as well as if there are any errors. Click on an individual tag to see more details about errors and any recommendations to fix your implementation.

Start streamlining your tracking

Once you’ve set up your GTM account, take the time to play with setting up tags. A global Google Analytics tag, a Google Ads remarketing tag and a Google Ads conversion tag are good ones to start.

Once all your ad platforms’ tags are represented, you can now make simple adjustments if changes are made to the site (for instance, if Thank You page URLs change) directly through GTM versus having to change hard-coded tags on the site.

When you’re ready to move beyond the basics, you can learn about additional actions you can track. On Nov. 13 at SMX East, I’ll be talking about how to amp up your user engagement with Google Tag Manager, through tracking actions like scroll activity, video views and PDF downloads.


Opinions expressed in this article are those of the guest author and not necessarily Marketing Land. Staff authors are listed here.



About The Author

getting-design-system-customization-just-right

Things to consider when deciding how flexible your design system should be

Koen Vendrik

Chris Coyier, the author of CSS Tricks and Codepen, recently published “Who are design systems for?”, in which he talks about the audiences for different open-source design systems.

In the article he discusses design system customizability and the role it plays in how usable a design system is for non-company use. He concludes that design systems have different levels of customization — ranging from “not at all” to giving people broad control of how they apply styles (or “BYO Theme” as he calls it).

I want to dive into this “customization spectrum”: the different options, the audiences they cater to, what their implementation might look like, and their risks.

This is where companies build a design system mostly for themselves. A design system that is in no way customizable is very hard to use if you want to build a distinct product, since you can’t give it its own look and feel.

When we launched Shopify’s design system, Polaris, it wasn’t customizable at all. In 2018 we decided to make Polaris partly customizable and we’re still working to expand on that to make most things customizable.

We implemented the customization options because we’ve found that, while zero customizability is a great way to enforce consistency, as the company grows, the lack of flexibility has become a real pitfall.

Teams have started to develop a visual style that is intentionally different from our company-wide branding, which Polaris doesn’t allow for. The Shopify Point of Sale team, for example, started experimenting with dark mode because it made the system more usable in dark storefronts, and the Shopify Plus team started experimenting with different colors, fonts, and spacing because they wanted to visually differentiate themselves from the core product. Third-party developers currently have the same problem, as they are unable to properly express their brand.

To be able to create these products using Polaris, these teams and third parties currently have to fork the system. As a result, we’ve ended up with a bunch of different forks that all do things slightly differently.

So if you want to create a design system that can’t be customized, take into account that there may be valid reasons for customizing your system that you don’t yet foresee.

This is the other end of the spectrum. This option gives full control over the styling to the user.

On the web you see a lot of pure HTML and CSS design systems that allow for this level of customization. Since they expose raw HTML, it’s very easy to customize just about anything.

A risk this approach has is that it’s very likely that consumers of your system will integrate CSS and JS hooks into this raw markup. This will make the system very hard to maintain, since any change to the markup has a good chance of breaking one of your consumers’ implementations.

Salesforce’s Lightning Design System’s Accordion Blueprint exposes raw HTML.

Design systems that utilize frameworks (or view layers) like React are a bit different. They hide their underlying markup, making it hard to change, which makes the system much easier to maintain. By creating this clear separation between what is publicly exposed and what is only available within the system, you create a much better definition of what kind of changes introduce the risk of breaking a consumer’s implementation.

Many React based systems still do allow for a similar level of customization by allowing for class overrides. You won’t be able to freely customize the markup as you can with raw HTML, but you’re still able to apply style overrides to specific elements, and thus still have a large amount of control over how the component looks and behaves.

Material UI (A React library for Google’s Material Design) for example, allows for class overrides

This level of flexibility can be very useful and appeals to a large audience. Its ability to fully adapt to a user’s needs is very powerful.

Depending on who your design system is for, and what they can do with it, this pattern can also be risky. Giving people this level of control over styling can create the same issue that design systems are supposed to solve in the first place: having a thousand different variations of the same component or pattern.

A good example of the problem we try to solve with design systems. Taken from Andrey Okonetchnikov’s React Amsterdam talk.

This level of customization, therefore, usually isn’t ideal for a design system that’s supposed to enforce consistency since it’s too inviting for consumers to completely modify components to cater to their needs. It is, however, a great way to provide a template that is fully customizable.

Guided theme building allows your components to be themed to a degree that allows third parties to use them to create their own product, with its own look and feel, but removes the risk of people over-customizing them. Which is exactly what we will be trying to do with Polaris going forward.

A lot of design systems allow you to modify certain Sass variables to customize things like colors and fonts. Guided theme building is essentially the same thing, minus the Sass and plus some extra features.

Instead of customizing things using Sass variables, Polaris uses an overarching React component called ThemeProvider that provides a set of colors. These colors are then used to style the component(s). If you only provide a partial set of colors, Polaris uses the colors you defined to generate the rest, making it as frictionless as possible to theme your interface.

Example of a theme object that customizes the colors of our TopBar component.

This approach has two big advantages over Sass variables:

  1. Being able to only provide a partial set of colors makes it very easy (and quick) to give your UI its own look.
  2. It provides consumers with a very deliberate public customization API that is far removed from things like SCSS variables and CSS classes, which, in Polaris, are technically modifiable, but should never be modified since they’re a private API.

There are two main reasons we find this distinction between the public and private API so important. First, when people modify things using our private APIs we don’t know what would be a breaking change, which is quite problematic in a public library. Second, we want to be able to enforce consistency. Our design system is built with a very specific set of design principles in mind, and by allowing too much customization we would create the risk of consumers violating those principles.

This approach does come with its own set of problems though. One is that it relies on CSS variables and, in a system like Polaris that heavily relies on built-in Sass functions (mostly color utilities like lighten, darken and rgba), this poses a real issue. Because the theming system doesn’t know what the colors are going to be until runtime, it can’t use these Sass functions to modify colors, and we therefore need an alternative way to generate them.

This is a problem we haven’t solved yet, but we’re working on a solution so we can start expanding this API. Currently, we only allow people to customize colors on our TopBar component, but we’re working on improving the system to also allow font customizations, and perhaps even animation customizations, across all of Polaris. We’re also exploring how we can make the API less component specific, as this can lead to UI inconsistencies. We’re exploring a pattern where you wouldn’t be able to customize these properties on a per-component basis, but only on a global level.

All things considered, we feel this implementation is a good start, as it provides just the right amount of flexibility. It does a good job of enforcing the principles we really care about while still giving consumers a way to give their product its own look and feel.

If you’re interested in exploring this level of customization for your own design system make sure to check out Theme UI, which is an open-source project that provides a very similar API to the ThemeProvider system that we use for Polaris.


I hope this gives a bit more insight into what the customization spectrum looks like. As Chris mentioned in his article, it’s important that you first define who a design system is for and what people should be able to do with it. When you have decided this, and start looking at the implementation for the level of flexibility you require, keep in mind that it’s okay to do something that’s different from what’s already out there. It’s easy to create a lot of flexibility or none at all, the trick is to get it just right.

Thanks to Kaelig, Tim Layton, and Dan Rosenthal for the feedback.

getting-ready-for-the-on-site-product-design-interview

Grab your essentials to the interview: your interview packet, portfolio, and backup. Photo by Anete

You’ve passed the phone screen and you’ve done the take home design exercise. Now you’ve got an on-site on your hands. Congrats on making it this far! So what’s next? By now you should have received an email from the company with an interviewing schedule. Generally it’ll look like this,

Your July 30th itinerary with Company A

1:00pm portfolio presentation with product, engineering, and design

2:00pm app critique with Marla Katie and Andrea Gartner

2:30pm whiteboard collaboration with Kim Donahue and Bailey Danny

3:30pm 1:1 with Sarah Greene, product manager

4:00pm 1:1 with Cathy Yang, product designer

4:30pm 1:1 with Andrew O’Connor, engineer

5:00pm 1:1 with Mariko Katie, head of design

5:30pm interview wrap up with Richard Richards, recruiting

If you haven’t received the schedule — now’s a great time to ask for it. In my experience, smaller companies or startups sometimes forget or gloss over these. By asking for the schedule in advance you show initiative but most importantly you’ll know what to expect, which in turn will help you prepare in advance.

After learning the schedule, now’s the opportunity to learn more about your interviewers, if this company has already invested time in getting to know you — it’s only fair that you should get to know them too.

Start with LinkedIn and look at each interviewer’s profile: their experience, common connections, and recent posts. Look for their other online social networks or sites were they were mentioned or shared their work. If you’re applying to a startup or a smaller company be sure to research the leadership team too.

This info will be useful during the interview itself as it helps you,

  • Anticipate types of questions you’ll get asked
  • Select relevant portfolio pieces to address potential concerns
  • Ask specific questions to each person given their role and experience
  • Build rapport with the interviewers based on common organizations or connections

Having a schedule isn’t a guarantee the interviewer will be there. One time I was researching a product manager who had a fascinating design and search background. I agonized over which questions to ask him only to learn the day of that all PMs are having a last minute off-site.

Despite this, research will still make you stand out. To the interviewers it’s a signal that you’re interested in the job and the team. This goes for all levels — from new designers to experienced design leaders. If, as a candidate, you don’t have any questions or don’t show curiosity when given the chance to ask questions, it’s a strong red flag you’re unsure. Luckily this isn’t hard to do, nor is it time consuming as you can get this info in less than half an hour of online searching.

Your on-site packet

My deliverable at the of this exercise is an on-site packet composed of:

  • Summary page with the name of the company, schedule, street address, point person for the interview and their phone number in case I need to call when I arrive or get lost
  • Pages for each interviewing event with any interesting facts and questions I want to follow-up with for each person
  • Extra pages for note-taking

This packet makes it easy to keep track of interviews, take notes, and cross reference information all in one place.

For the day of the on-site, it’s important to have the basics covered. That means eating well a few hours before and getting proper rest. Think of this as a test. You have the knowledge and skills, now it’s important to demonstrate your major skills and accomplishments in one go.

Gather your belongings

If this is a full or a half day of interviews, it will probably be demanding so be sure to bring your:

  • Laptop (even if you’re presenting on an iPad, have it as a backup) with a charger
  • Notebook, sketching kit (or at the very least pen and paper)
  • On-site packet
  • Excitement

Now you might scoff at some of these above. Getting rest? Excitement? Who cares! I’ve been doing design for years. While it’s important to bring your whole self to the interview, it’s also important to show interest — after all you’ve selected this company to interview with and if at all goes well, you’ll be working with these folks everyday.

Show your excitement

And what about excitement? One time, after a friendly chat with a head of product I got passed for the role due to my lack of passion. I thought the interview went well but I was later told that I didn’t come off enthusiastic and was too professional. I took that lesson in stride and applied it to all of my on-sites since.

Tom Cruise demonstrates the upper bounds of excitement

I knew I mastered it when a founder at another company sympathized with my passion for design and the team, “I can see how excited you are about design and this opportunity that it must be draining at the of the day so please take some time to rest afterwards”.

Rethink stress

Lastly, if you’re starting to feel stressed out — you’re actually excited. As professor Jamie Jamieson’s research on stress suggests (as recounted in Kelly McGonigal’s book The Upside of Stress), it’s not that high performers don’t feel stress, it’s that they ascribe this stress to be a positive force that helps them reach peak level performance.

In one of the studies participants who were asked to think of stress as a positive force, were rated as better speakers and appeared more confident (as opposed to those who were told to ignore stress).

Get there on time

When it’s time for the interview I usually figure out when my transportation options are so that I can get there at a comfortable time, about 30 minutes before the start. This leaves you a 10 minute buffer in case something goes wrong, 10 minutes to sign-in, with 10 minutes to settle in or get a quick office tour before you start. You definitely want to leave yourself enough buffer so as not to shortchange yourself by being late.

Have a backup plan ready

Finally, It helps to have a backup plan in case technology fails — maybe your laptop dies, maybe there’s no internet connection. It’s surprising how often simple things that should work fail during moments that matter. To prepare, aside having your portfolio downloaded locally to your laptop, have it as a backup on a thumb drive, or a private online link that you can access.


Interviews can be grueling but if you’ve done all this work upfront you’ll thank yourself later. With prep done you’ll arrive with confidence on time and will have a process in place when facing the unexpected.

What’s next?

In the next article we’ll dive into the most important interview event — the in-person portfolio presentation. Don’t make the mistake of presenting your online portfolio that got you here, this presentation should be deep dive into one or two case studies showing your process, deliverables and outcomes.