the-art-of-persuasion:-how-to-handle-clients-with-mad-ideas

Crazy, impractical, out-of-budget suggestions are a fact of life for web designers everywhere. A deeper understanding of your client’s needs and motivations will help you navigate through challenging situations, and avoid them in the first place.

We’ve all been there. It’s 4pm on a Friday afternoon, you’re already in your “weekend outfit” (underwear and hoody combo) and you get an email. It’s Client X: Hey, erm, I’ve just had a couple of thoughts, can we talk?

Wearily, you reach for the phone.

Sure enough, the “couple of thoughts” become a rambling monologue on the virtues of asymmetric grid layout, mouse-controllable content and parallax scrolling (“that shouldn’t be too hard, right?”) which lasts for 90 minutes. They basically want this, on their budget of $1200.

If that wasn’t bad enough, of course you also know that what they’re asking for — even if you could deliver it on time and in budget — will make no sense at all to their users.

Don’t panic, here’s what you can do.

1. Make a Connection

Believe it or not, from a certain angle, there’s probably method to their madness. By discovering it, you’ll not only unlock ways to solve the problem, but develop your working relationship in a positive direction too.

Have you ever wondered why Client X wants their app to auto-play “We are the Champions” every time it loads? Maybe they’re trying to send a positive message about their company or looking for a lighthearted feel. Have they seen something similar that actually works? Are they trying to express their personality through the work they’re asking you to do?

In his book Nonviolent Communication, psychologist Marshall Rosenberg argues we can find resolution to any conflict by addressing the needs that underlie it, and urges us to start by acknowledging the other person’s reality.

Here’s how it works: don’t argue. At least not yet. Let them talk. Ask questions. Acknowledge what they’re saying. Listen. At the same time, try to build up a picture of what’s important to them at the emotional level. When you do talk, reflect back what you’ve understood. You’ll probably find the situation calms right down.

Maybe this seems time consuming. It is. But then again, so are those rambling “wouldn’t it be great if we…” phone-calls. You may as well put them to some use…

2. Sell Your Vision

From another perspective, in trying to persuade someone out of their mad idea, you’re really trying to sell them your own. As such, the psychology of selling has a lot to offer you, if that’s your cup of tea. Just remember: Your ability to sell is only as good as your understanding of the client. If you try to use a one-size-fits-all approach, it will sound naff. Invest time and effort in understanding what they really want, then find ways to link your sane ideas to it.

Be honest. Don’t try to sell something that isn’t going to satisfy. Most people will see through it, and the ones that don’t will leave the interaction feeling bitter.

Appeal to Emotion

Client X isn’t going to change their mind because of logical arguments. They’ve made their decision on a whim, a feeling. You can only really address it at the same level. Maybe they want people to respect their business: If so, use words and examples that evoke respect for your preferred idea: “Have you seen the Armani website? They’ve used more of a symmetric grid and it looks pretty strong don’t you think?”.

Pain, Problem, Solution

As any good salesperson will tell you, Client X’s unhinged desire for parallax scrolling arises first and foremost from pain, as in: “Jeez, this design is boring!”. They formulate this as a problem: “There’s not enough movement”. A (naive) solution follows: “We need more animation”.

You can use your understanding of the deeper need (more movement) to highlight the advantages of something simpler: “Yeah I see your point. We can also look at the colors and typefaces. Do any of these look more dynamic?”

Offer Choices

Sometimes, clients are challenging because they “want to be involved”. You can help them scratch that itch by offering choices, like the example above.

Tell a Story

Story is the difference between the value of my autograph, and the value of Neil Armstrong’s. You can dramatically increase the appeal of your vision by finding preferred brands that use it, or examples of work which went really well because of, say, grid layout.

3. Full Charm Offensive

Although you might feel like throwing your phone (or possibly them) out of the window, by giving Client X short shrift, you’ll probably dent their ego and leave them plotting ways to get revenge.

The more you nourish and protect your relationship with clients, the more they’ll respect and respond to you, and the easier your life will be. Here are some suggestions:

Put Your Effort in Early

By getting it right at the briefing stage, when the train-smash moment arrives, you can steer it towards a reasonable outcome.

Don’t be a Prima Donna

The days of the genius designer toiling away in secret are over: Clients want to be involved in the creative process and probably have a right to be. Co-creation in the planning stage will give the client ownership, and a warm feeling about you for letting them experience it. Once they’ve seen how complex the work is, they’ll probably be less inclined to chuck it, or haggle over the price as well.

Compromise

If the client insists on something that really won’t work, and won’t listen to your carefully crafted vision, you know what? That’s on them. You don’t need to fight it. If it involves extra work that wasn’t in your brief then say so, explain, and suggest alternatives. Work with the client. Find ways to identify what their real needs are, and work towards those. Keep track of decisions that are made, and who made them in case of blowback.

Over Deliver

Use your knowledge of the underlying (often unconscious) desires of the client to completely wow them. Go the extra mile in areas which will likely have big impact, even if these aren’t core priorities from a pure design perspective. Try to understand the client’s expectations and exceed them in any way you can.

Be Confident, not Abrasive

In most situations with clients, you genuinely are the expert. Share stories about your experiences in a lighthearted way, explain why you think that something will or won’t work. Smile, relax. Don’t be like Sheldon.

4. Be a Proper Professional

Painful as it may be, challenging clients, like plagues of fire-breathing locusts, are an unfortunate part of life as a web designer. Get prepared up front.

Nail the Brief

As well as specifying the finished product, do yourself a favor by going beyond it: discuss brand strategy. Get the client talking about their target market, and where this project fits into their global vision. Use mood-boards, even a design principles framework, to nail down hard evidence of what you’ve both agreed are the priorities. This will be important later on!

Establish a Point of Contact

Find out who will be the decision maker(s), and who will be communicating with you. Then you know who to contact when the project starts to drift towards fantasy land. If you’ve ever found yourself on a call to client X’s great Aunt Lilly who “went to design school once” and “knows all about UX”, you haven’t done this right!

Be Organised

If you’re not using a project or client management tool, you’re probably making it hard for yourself to keep track of things. With challenging clients, you’ll often need to quickly find that email where “he literally said the exact opposite of what he’s saying he said”, even if just for your own sanity.

Be Firm

Be flexible, but set limits. Use the evidence you’ve collected to make your points. Negotiate a budget increase if the work is out of spec, or politely say no if you need to. Give reasons and alternatives.

The Real Secret: Know Your Customer

It’s a cliché, but an important one: The better you understand the mad behaviour you’re seeing, the better you can influence it.

The fact is, everyone, even Client X, is coming from somewhere. Sure they’ve got a bit lost, but at the end of the day, just like you, they’re trying to reach their goals.

If you can bring yourself to find out where they’re coming from and where they’re going, you might be able to help. At the very least, you’ll keep your phone, and also yourself, the right side of the window.

Featured image via Unsplash.

how-creatives-handle-tough-transitions-and-moments-of-uncertainty

Major life and career shifts bring with them a host of nerve-wracking feelings. Whether it’s an exciting promotion or a significant setback, it’s natural to be overwhelmed by the circumstances. The anxiety can be part and parcel of being in a state of flux, but it doesn’t need to define your approach to change and how you handle it. From small rituals to embracing the in-between, we gathered insights on how to make it through times of transition from those who have been through it all. 

***

Embrace the Unknown

Making a leap into uncertain circumstances wouldn’t be such a daunting step if there were a roadmap to show you the way. Brian Buirge felt the trepidation of diving into the unknown when he was about to embark on a two-month road trip with his business partner as they were preparing to launch GFDA. “The most important part of the experience was embracing the unexpected.” Waiting for the “what ifs” to materialize is the quickest way to disappointment. In Brian’s case, relishing in the unpredictability of his tour was what made it a success, and the obstacles that inevitably presented themselves pushed him beyond his comfort zone. 

Reject the Fear of Failure Mindset

Stanford University Professor of Psychology Carol Dweck points out how a fear mindset can hold us back from taking risks. Failure is inevitable but still carries a heavy stigma that needs to be dispelled. Accepting that not every project or idea will be a success can give you the breathing room that lets unexpected possibilities take root and flourish. 

Look for the Person in Your Corner

The perspective and support of someone who knows you well can push you outside your comfort zone. Erik Rodin looked to a trusted advisor for support when striking out on his own with his company Able. “Having mentors has given me trust and confidence that no matter what I’m faced with, I’ll be okay.” A trusted sounding board can be the confidence-booster that gives you the necessary push to dive in. For Erik, his mentor’s “honest and direct” perspective is a continual source of ambition and courage.

Portrait of Ilya Milstein in his Brooklyn neighborhood.

Ilya Milstein shot by Eric Ryan Anderson.

Remember Your Personal Passion 

Whether it be a promotion or a major career transition, you might get caught in the mire of working through the details of the endeavor. Take the time to step back and remember what gives you the drive to keep going. As artist Ilya Milstein points out, “That’s why working on personal projects is so crucial, to develop and expand. I’ve seen a lot of people who have fallen into the trap of doing the same thing again and again and again. They’re miserable but don’t see how they can reframe their career.”

Rely on Rituals 

Kursat Ozenc teaches at Stanford’s d.school, and studies the impact and value of rituals in teams. “Often thought of in a religious or spiritual context, rituals can be any series of activities that helps connect people to something bigger than what’s directly in front of them.” Setting up specific routines can be the soothing presence you need to recenter your focus daily. 

Embrace the A4

Whether it’s a pro/con list, a stream-of-consciousness journal, or a running catalog of tasks, putting your thoughts and to-dos in writing can be a boon to your productivity and help you prioritize what matters. When a handful of creatives shared how they manage their to-do lists, we found that good ol’ fashioned paper is still the gold standard for getting organized. In times of upheaval or change, taking a minute away from the screen to sketch out your ideas can bring much needed clarity. 

Hang Out in the Ambiguity

Major career upheavals come with a lot of unknowns and stretches of uncertainty. It can be tempting to make snap decisions just to feel in control. But as career coach Tina Essmaker puts it, “Being able to hang out in that state of ambiguity long enough to know what’s next for you [is important]. If you try to make a decision out of fear or a scarcity mentality, you’re probably going to make the wrong one.”

Kill the Comparisons

As tempting as it might be to measure your progress against others in your industry, it is ultimately debilitating. Artist Lisa Congdon found herself starting on an entirely new path in her early 30s, having been through a personal upheaval and finding herself with a whole new set of questions to answer. The transition was difficult but remembering that there is room for everyone helped her through the process. As she said, “Just because someone else you admire has some amazing accomplishment doesn’t mean that your work has any less value, or that your path is any less significant.”

Julia Bainbridge at home.

Julia Bainbridge shot by Audra Melton for Gossamer.

Connect with Your Community… 

Author and podcast host Julia Bainbridge’s career has been defined by exploring human interconnectedness and loneliness. She hosts a podcast that examines how technology has worked to distance us from each other and what the effects of that distance are on our relationships and lives. Introverts or extroverts, we humans are social creatures who need to reach out every so often to feel necessary connection, especially during times when everything is in flux. 

…And Find Time for Yourself

Bainbridge also acknowledges that time spent alone can be necessary and healing, and work as a jolt to your creativity. As she says, “I am my most creative in moments when I am alone — when I’m on a quiet walk, not listening to anything on my iPhone. That’s when I come up with ideas.” If you’re struggling with big life changes, it’s worth taking a time-out with only yourself for company. 

how-we-handle-kiwi.com’s-design-system-with-figma

The mobile design team at Kiwi.com is tiny, there are only two of us. But there are around twenty people contributing to our designs in some way. Whether they’re commenting on our latest iterations, fixing copy, or designing cross platform features. Currently, our front end is designed in Sketch, as is Orbit, our design system. But since the mobile part of Orbit is visually different, we decided to try designing it in Figma and see how it works for us.

  • Why we built our mobile design system in Figma
  • How the latest update changed the way we work
  • How we’ve designed our design system (with examples)

A Sketch-oriented workflow relies on tools like Zeplin to handle handoffs, Abstract to cover version control, and Marvel to design static prototypes. But, from time to time, things get out of sync. Prototypes get stuck on the latest tested iterations, people forget to push commits to Abstract, maybe Zeplin hasn’t been updated with the latest approved visuals, or the PNGs embedded in Dropbox Paper are 3 weeks old. These tools are, by design, bound to get out of sync ?

Before I joined Kiwi.com, I was playing with the idea of trying Figma, but it was hard for me to get to it. I didn’t see much much value in using it, and the need to keep all the tools in sync just wasn’t there.

I was also put off by the browser/cloud approach to it. I liked that I could fire up Sketch whenever I wanted, and it’s a native mac app. And then it hit me, there’s no way around it—you either have everything in the cloud and it’s in sync 100% of the time, or you have things offline in desynchronized workflows. So, I tried working with Figma, just a little bit at first, and I liked it a lot.

Then I joined Kiwi.com last November. Vojta was the only one working there on mobile at the time. He was covering all the platforms and all the devices by himself ?. While he was doing a great job, his work lacked a consistent system behind it.

We wanted to try it, but betting on Figma without the whole team, and designing Orbit in it, seemed like a bad call. It wasn’t very clear what direction the Figma team would be heading in, and what they would focus on. Additionally, some of the features just weren’t quite ready. And yet, we decided to try it anyways, but with mobile only. Our front end and Orbit are still designed and maintained in Sketch.

Until recently, managing components was a pain. It lacked the features to make the design system scalable. If you wanted to work with a DS efficiently, you were limited to a single file.

Fortunately Figma introduced a huge 3.0 update. I won’t go into much detail here (just follow the link), but basically the update:

  • Made enabling, disabling, and managing updates easy
  • Enabled users to share components with overrides across files
  • Enabled users to share different styles for layers (which makes it more atomic than Sketch, as it enables you to combine text styles with colors and effects).
    Our Design Library Component Principles

Whenever we design a new library component, or any other addition to the design system, we try to follow a couple of UX principles. Which should ensure the library remains consistent, efficient, and easy to work with.

Working with components and nesting them seems pretty powerful at first. Buwt as you know, with great power comes great responsibility. It’s very easy to go overboard and over engineer your design system. I’ve found that going about 2 levels deep provides the best balance of usability and possibility.

The term hit box comes from FPS games, it is an area which you need to hit, in order to do damage to your opponents. In our case, it is an area you need to double click, in order to edit or select the layer. Sometimes ordering the layers is enough, other times you might need to make things bigger. Either way you need to make it easy to work with 🙂

Component override suggestions are based on the size of the components. So, when you want to replace a component with something else, and you want to select it from the suggestions window, it needs to be the same size.

It really helps to define a separate file, which contains all the small things which we use to structure the design files. We’ve created a file called Helpers. It helps to distinguish components visually and gives your canvas a sense of structure. We do this because we share these files with everyone in the company, even with non-designers, and they often need some visual helpers to navigate the documents.

We wrap all of our components in groups. This way they don’t clutter the sidebar in the file components library. This makes working with page with lots of components far easier. This is something I miss in Sketch quite a lot.

When working with photos or any other bitmaps in our designs, we work with them as we would if they would be web assets.

  • We optimise the images: with tools like ImageOptim, Optimage, tinyPNG and such. I’m not sure, if Figma does any optimisation, but we do it anyways.
  • We optimise the file format: PNGs for simple illustrations and JPEGs for photos.
  • We resize the assets: We generally don’t need a billboard sized photos in our mockups.

Following this practice improves the download time of our files and library components. It also makes reopening files less of a hassle.

I’ve recreated the following examples so you can easily use them yourself. Just copy them, and feel free to adapt them to your workflow.

One file per project or flow. We have files like place picker, date picker, search and similar. But this also has its own problems, since you cannot connect two files and create a prototype from them. But still, this is the best solution management wise.

We use pages as different versions of the project with a standard X.Y naming convention. X represents huge version updates, while Y smaller iterations. With the latest iteration on top. And components page, hosting component candidates which we consider moving to the main UI library.

It might seem like a little thing, but navigating through Figma can be a pain when you have lots of files and projects. File titles work, but it is hard to scan them fast. That is why we use cover images.

Only the mobile team is using Figma at the moment, but that might change in the future. So we had to set up the files in a way which supports both mobile and front end libraries.

Helpers source file

I mentioned this a bit earlier. It only has a couple components which are used to help our team structure and navigate files. We use Page, category, and section to distinguish between different components, comments are there for anyone not using Figma directly, and the color sample is for our token library.

This file is rarely touched. It contains the most atomic components of the entire design system. The file has three pages: colors, typography, and shadows. Basically everything you can define in Figma Libraries, except for components.

Tokens source file

This file is very rarely touched. We’ve already defined the colors we use.

Typography source file

Typography is the same as colors. We’ve already defined everything we need in our design system (it is missing some FE font style definitions), and thus is rarely touched. The typography defined above seems rather simple, but when combined with other shared styles, it’s everything we need on mobile.

Shadows source file

Shadows are something we’re still experimenting with, but so far we’ve defined 4 elevation levels, and this seems to work well for us.

Shadows source file

Icons have their own page, they are all split into different sections, and are placed in 24×24 frames. Almost all the icons are standard Material Design Icons.

Illustrations are very similar to icons. It’s just a huge canvas full of our product illustrations. They all share the same size. But due to some import limitations of SVG to Figma, we have to work with bitmaps for now.

Orbit for Mobile source file

Initially we had two different mobile libraries for iOS and Android. But since they overlap a lot, we’ve decided to combine them. It’s easier for us to maintain it this way. But differences in the presentation of some of the UI elements still remain, for example switches and such. This is still a work in progress, and we need to catch up with Android a little bit ?

While Figma lacked in features before the 3.0 release, most of my must-haves have been added, and it became a serious competitor to other tools. Building a design system with it proved to be relatively easy. Actually I feel like managing it in Figma is far easier than in other tools. It is by no means perfect, but it fits my taste the most.

The way we structure our files and split the design system logic is constantly evolving with every update, but the things mentioned in this post have stuck with us the longest and proven really effective.

In the upcoming post I would like to cover how to actually build a design system in Figma, some of the gotchas behind working with nested components, and some other tips. If this is something right up your alley, the safest way to know about it once it’s out is to smash the sub button below ?