Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Giving Your Product A Soul

After a few years of designing products for clients, I began to feel fatigued. I wondered why. Turns out, I’d been chasing metric after metric. “Increase those page views!” “Help people spend more time in the app!” And it kept coming. Still, something was missing. I knew that meeting goals was part of what a designer does, but I could see how my work could easily become commoditized and less fulfilling unless something changed.

I thought of how bored I’d be if I kept on that path. I needed to build some guiding principles that would help me find my place in design. These principles would help grow and would shape my career in a way that fits me best.

What I’d like to share here is how I found my principles and regained a sense of fulfillment. I’ll also discuss one of them and hopefully convince you that it’s worth considering when we design products. Speaking of convincing, I’d also like to help you convince your boss that these things are important.

One small string that began to tie it together was watching Bret Victor’s talk “Inventing on Principle1.” The first half is mostly a code demo; then, he gets philosophical and talks about how goals and principles help you. I believe that living by principles can lead you to some really interesting places — for me, they’ve helped me to find the right ways (and places) to work and the right projects to take on (like designing a typeface), and they’ve helped me to identify which areas of my life need to be nurtured so I don’t burn out.

Advocate For Design Having A Soul Link

I’ve worked on projects whose goals varied from increasing email signups by 10% to boosting ad impressions by 30%. It was honest work, to be sure. It’s important that our designs meet the needs of the product owners and our clients — this isn’t art school, and there are real constraints and requirements we need to address.

However, it’s not enough to do metrics-based design. That in itself is a bit too clinical and detached, and where’s the fun in that? We need more.

Validating and then meeting a project’s requirements should be the minimum of what we set out to do. Once we set those metrics as our baseline, we’re allowed to be more impactful and thoughtful as we get to the root of a design problem.

What we need to shoot for is to help people fall in love with our products. That means pushing to give our designs a soul.

Here’s what “emotionally connecting” means: It means you’ve created a product that stands out in someone’s heart. The product becomes what people reach for because it’s the most helpful. People might not be able to understand what you’ve done, but they’ll perceive that it’s better. This is one way to make a product that’s indescribably good.

I usually ask these two questions, which get at part of what helps people fall in love with a product:

  • What’s going to help someone really find this useful?
  • What’s going to make them care about it?

For years, we’ve focused on making our websites and products be functional, reliable and usable. These qualities are the bedrock of any good product, but it’s when we add a soul to a product that it really comes alive.

My first hint of a design having soul came back in 2005 when I logged into Flickr2 for the first time. Sure, Flickr has undergone many, many changes since then, but I’d like to explain how it helped me, as someone who hadn’t shared much online before. I wasn’t sure how to share something, but I noticed right away that the website greeted me with a friendly “Hello.” The website helped me breeze through the process, and the friendly tone was really assuring.

My Flickr experience was like a pal gently leading me through the process, making it easy to succeed. It was a warm experience that made me want to return. Incidentally, I can say “hello” in a lot more languages now, thanks to what Flickr taught me.

Moving forward to newer examples, we can also consider Slack3, its competitors and email. All of these options help people communicate, but Slack has a personality that helps you feel more connected with it. Slackbot helps you get started by asking you questions in a conversation, much like a real human would when you meet them for the first time. The makers of Slack eschewed the standard idea of filling in a registration form in favor of something more conversational — this makes other services feel stale and unfriendly by comparison. Slack has soulful flourishes everywhere: from smooth animations to a cute little emoji4 that is shown when you’ve scrolled all the way to the newest message in your group.

To be fair, Slack and Flickr (which, by the way, share cofounders) weren’t the first to try for something more human — that desire has spanned centuries. Lovers of typographic history may recall that Gutenberg wanted the movable type he created to mimic the look of handwriting. He used blackletter-style letters, which were similar to the bible manuscripts that monks illuminated.

5
The Gutenberg Bible (Image: Wikipedia6) (View large version7)

These examples makes a strong case for design having a soul. The personality that develops from having one is what wins someone’s heart and makes competitors feel like poor (or, at best, passable) copies. Consider this statement by John Medina in “Brain Rules8“:

Emotionally arousing events tend to do better remembered than neutral events… Emotionally charged events persist much longer in our memories and are recalled with greater accuracy than neutral memories.

In other words, we’re wired to remember products with a soul. Let’s use that to our advantage.

Next, let’s get a little more specific and see how that can play out.

Fiddle Factors Link

One example of a way to give a product a soul is by adding a “fiddle factor.” A fiddle factor is a playful part of a product that imparts a sense of joy or playfulness when used. I first heard this term in Jony Ive’s unofficial biography, Jony Ive: The Genius Behind Apple’s Greatest Products. Ive had a new take on, of all things, a pen. Noticing that people tend to fiddle with their pens when not writing, he added something to his pen design to give people something to play with when they were idle. Of course, Ive started by making the best possible pen, then added the fiddle factor.

According to Clive Grinyer9, Ive’s once-boss:

This was a new idea back then, to put something on a pen that was purely there to fiddle with. He was really thinking differently. The pen’s design was not just about shape, but also there was an emotional side to it.

Fiddle factors invite people to idly toy with them and form a deeper connection with what you’ve made. They become that warm little blanket that wraps a product around your heart and makes you want it more.

I’ve described one already with Slack and its emoji use, but here are a few more digital fiddle factors:

  • That pull-to-refresh spinner with the really cool spinning animation? A fiddle factor.
  • That fun animation you click to like something on Twitter? Fiddle factor.
  • In MailChimp, when you find out that Freddy’s arm can extend almost forever when you’re testing an email’s responsive breakpoints? That’s a fiddle factor (albeit a cruel one).

One Way to Add a Little Soul to Your Project Link

To give a project a soul is to cultivate a relationship with it. You need to know what it needs and understand its nature. In this sense, this relationship is the same as a potter with clay or an architect with wood and steel. Once you understand the nature of your materials, you will know what it can become and what its limits are. This will help you to mold a soul in the right ways. Not doing this will ultimately cause your project to feel inauthentic and fail.

Let’s say you’ve built a playful iOS app. It’s meant to send short, fun replies to friends. In the app, you’ve got an overview page showing the latest emails, and the user can go into a detail view to read a particular message. You could go the standard route of sliding in the email from the right — it’s a simple thing to do, and it’s built right into iOS.

The drawback with built-in transitions is well covered: Anyone can use them. Sure, there are definite benefits to them (namely, that they’re cheaper and faster to implement), but it’s difficult to build something that’s soulful if you only use stock components and animation.

Instead, consider an alternative kind of transition. Think about it like this: Consider the personality you think the app should have. Think about the people who will use this app. I use this chart to help me determine the tone of a project:

10
Brand personality spectrum graph (View large version11)

Back to our email app. Let’s say it’s a fun email client. In this chart, it shows most strongly in the casual, energetic and easygoing categories. If we think about the animations we’ll use here, it makes sense to be more playful.

So, let’s animate the email message to come up from the bottom of the screen with a little spring in its step. When you’re finished with it, you can swipe it away or pull it back down.

Let’s take that even further, based on the chart and animation:

  • Maybe the animation could be the basis for how you approach other animations in the app. Your other animations could be similarly fun (but don’t overdo it).
  • Maybe it will affect which typefaces you choose.

What’s important here is to avoid forcing something in where it doesn’t belong. Don’t be different just for the sake of being different, and don’t overdo it. If we saw the President of the United States deliver the State of the Union address in a Hawaiian shirt, we’d probably feel like something’s amiss and might not take him as seriously as we should. Same here — what we do has to feel natural.

Other Ideas Link

Any interaction, be it with a button or a scroll, is a perfect place to explore adding a fiddle factor. Explore what might happen when the user scrolls to the bottom of the content. Or perhaps you could come up with something unexpected when the user hovers over a photo for a long time. Maybe you could make a neat hover or focus animation.

Adding soul isn’t limited to animation, either. It goes much deeper!

  • How does it sound? Each person’s voice is totally unique, and your product’s should be, too.
  • How does it look? We need to stand out and be ourselves; so do the things we make.
  • How does it act? Could your product know the user on a deeper level and anticipate their needs? That would be deeply soulful.

Convincing Your Boss And Team Link

It’s all well and good for designers to talk about giving their products a soul, but here’s where it gets real: You have a deadline, and a budget. Your boss might not want to go for it, and your engineers might be resistant because it would take them extra time. Let’s talk about a framework for those conversations.

12
Effort versus impact graph (View large version13)

The framework I use to have these discussions centers on the effort required to implement an idea and the idea’s impact on the customer and the business.

While there will inevitably be high-impact, high-effort items in a project, the sweet spot is low-effort, high-impact ideas. These types of ideas help the user in meaningful ways, without significantly affecting your timeline and budget.

This way of looking at ideas also helps me to let go of ideas that might be a little too egocentric. Those usually have low levels of impact and high levels of effort. Mapping them out in this way helps me to focus on what matters most.

I’ve found this approach effective because it enables us to differentiate our products, while making the most of our time.

Let’s go back to custom animations for a moment. If we’re talking about adding fiddle factors and animation to our email app, we can’t build something great by assembling it entirely from off-the-shelf components. If we use only basic components and built-in animations, the product wouldn’t be memorable enough to matter to people. Plus, it will make it difficult for us to fall in love with what we’re building and to give the product a soul.

14
The Kano model (View large version15)

One additional framework to keep in mind is the Kano model16, which was developed in the 1980s by Noriaki Kano.

There is a great explanation video17, but, in short, this model covers three areas:

  • basic needs (Does the product work?),
  • performance needs (How efficient is it?),
  • attractive needs (What makes me love it?).

The soul of a product lives in the attractive needs. The Kano model invites us to think of one or two features that set the product apart from its competition. Framing your high-impact, low-effort ideas with this model will help you make a strong case for soul.

At our core, we’re people who care about our craft. We want to build great products, and the products need to have those nice touches. Being able to fully ply our trade also helps with employee retention. We’re happier when we’re able to do our best work. If we’re able to fully stretch ourselves to make something great, we’re going to keep giving our best in future. Conversely, if we’re prevented from doing our best work, we’ll become disconnected and disinterested, motivating us to go elsewhere when the opportunity presents itself.

If your boss or company doesn’t give you this freedom and you think it’s important, it might be time to plan your next transition.

Wrapping Up Link

It’s not enough to simply design something and meet a goal. This is a surefire way to burnout and boring products. We’ve got to do more for ourselves, our products and our industry. Finding our principles will help us find the right place to work and to do our best work.

Giving our products a soul will make them better, more engaging products. The next time you’re designing, ask yourself what would make someone find your product useful, and what would make them care about it more than another product? Once you do that, you’ll be well on your way to cultivating a healthy relationship with your products and building things that people really love.

Also, it’s not enough for us to have these ideas; convincing our team members and bosses to come along with us is important. Once we test and articulate the value of what we do, we’ll have a much easier and more rewarding time.

(mb, al, il)

Footnotes Link

  1. 1 https://vimeo.com/36579366
  2. 2 https://www.flickr.com/
  3. 3 https://slack.com/
  4. 4 https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/10/the-gutenberg-bible-new-york-public-library-large-opt.jpg
  6. 6 https://en.wikipedia.org/wiki/Gutenberg_Bible
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2016/10/the-gutenberg-bible-new-york-public-library-large-opt.jpg
  8. 8 https://thrupages.com/2015/10/22/brain-rules/
  9. 9 https://kindle.amazon.com/post/a5V977pDT6-sxrsR53eB6g
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/10/brand-personality-large-opt.png
  11. 11 https://www.smashingmagazine.com/wp-content/uploads/2016/10/brand-personality-large-opt.png
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2016/10/effort-graph-large-opt.png
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2016/10/effort-graph-large-opt.png
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/10/kano-model-large-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/10/kano-model-large-opt.png
  16. 16 https://en.wikipedia.org/wiki/Kano_model
  17. 17 https://www.youtube.com/watch?v=iuOrEIBVQX4

↑ Back to top Tweet itShare on Facebook

Joshua Mauldin is a mobile-focused product designer and aspiring typographer. He's probably thinking about prototyping an app or petting a dog.

  1. 1

    Anthony Wijaya

    October 27, 2016 6:10 am

    Hi Joshua,

    Love the brand personality spectrum chart! Planning to bring it up on the next rounds of clients so that we can both figure out a clear direction on the micro-interactions.

    However, you also talked about the sweet spot (low effort, high impact ideas), but on some perspectives (including mine), animations will usually be more of a high effort, low impact thing, especially if you are not using off-the-shelf solutions. What do you think about this kind of mindset?

    4
    • 2

      Joshua Mauldin

      October 28, 2016 2:04 am

      A couple thoughts come to mind.

      First, I’d first ask if those animations were the best way to express the soul—which I think is what you’re doing. It’s important to remember we aren’t limited to just animation, and it could be that there’s a better way to accomplish the goal. Since soul lives in the “attractive needs” section of the Kano Model, they’re a small part of the overall project.

      Second, I think this could also depend on your team’s strengths. If this because they’re unfamiliar for your team, know that there are animation frameworks out there that can help. SwiftTweaks is one such framework and it lets a designer tweak animations on the fly. These things take a lot of pain out of making custom animations but give you all the benefits.

      Hope that helps!

      2
  2. 3

    Hi!

    Very good article, thanks!

    It is such good feeling when someone have the same mindset :) and can put thoughts to a great text!

    BR/
    Maksim

    -1
  3. 4

    The article is starting on the premise of “injecting soul into a product”, but then take as an example Flickr.

    > For years, we’ve focused on making our websites and products be functional, reliable and usable. These qualities are the bedrock of any good product, but it’s when we add a soul to a product that it really comes alive.
    >
    > My first hint of a design having soul came back in 2005 when I logged into Flickr for the first time.

    The Flickr team didn’t inject soul in their product. They cared about the product and the project. The soul came from there at the beginning. And I see a creepy thing into trying to make it more soulful as an objective. Flickr has lost its soul when it was sold to Yahoo! and this doesn’t relate to the design of things, but about the essence of priorities. The small team initially thought they will change Yahoo! (Jason against the Titans), but little by little the giant machine of Yahoo! just made a bite of Flickr once it was not amused anymore by the small one.

    The soul of the project is not in the design, or the brand. It is just here in the process and the care for the community which addresses the needs of a specific community. The bigger the community, the less chances you will have to “stay true” to the project initial soul. Soul is not a marketable thing.

    1
  4. 5

    Abegail Louise Acosta

    October 28, 2016 6:43 am

    Hi Joshua,

    I agree! You should give your product a soul. Which can be approached by those who is in need to #build professional website.

    P.S.
    Continue inspiring people.

    0
  5. 6

    Elegant and Excellent!

    0
  6. 7

    Hi Joshua,

    Thanks for this-some great ideas here. Your wonderful works inspire us so much.

    I’m from the UX team of Hujiang in shanghai, China. If you agree, we want to translate this article into Chinese, and organize a workshop in our team. We promise to respect and protect the copyright, and we will indicate the author and the original address in the translation and send it to you .So please consider my application, OK?

    Looking forward to your reply.

    1
    • 8

      Markus Seyfferth

      November 20, 2016 4:57 pm

      Hi Bianning, thanks so much for your request. Can you please email me at markus at smashingmagazine.com? Thanks!

      0

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top