Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. 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. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Great Products Focus On A Motif

What does it take to craft a great product? For those of us who design and build apps, websites and software, a great product means one that delights its users. But digital product development is a complex beast.

Delivering a successful product requires multidisciplinary teams to efficiently work through varying opinions and conflicting views and, ultimately, to gather behind a common vision with a focused plan. This is a challenging act of team management and collaboration, requiring such audacity that it’s no surprise that the average success rate1 of a startup bringing a new product or service to market is one out of four.

Further Reading on SmashingMag:

Maintaining focus on a singular vision during software development projects is not easy, especially for designers. Designers are often required to deprioritize the overall product vision in favor of lower-level work — we’re asked to consider every edge case, rather than optimize for a few essential ones. We end up in the weeds of wireframes and UI specifications, thinking through details such as gestural interactions, affordances and user flows.

What can designers, or any team member for that matter, do to increase the overall quality and success rate of the products we craft and to elevate our team’s batting average? An answer lies in the way artists and composers have worked for centuries to create paintings and music — by focusing on a singular, finite element that unifies the whole: a motif.

Definition of Motif6
In art, music and even design, a motif is a singular, finite element that unifies the whole.

In art, literature and music, the word “motif” is often used to describe a salient, recurring element that has symbolic significance. Across artistic media, a motif is a small atomic unit that inspires everything else. In paintings, the motif could be a color, mood or message to be communicated. In music, a motif could be a set of notes, a melody or a rhythm. The great compositions and symphonies of the 19th and 20th centuries are masterpieces in which every note connected back to the motif.

A Motif Is Fundamental To Product Quality Link

In 1937, during the Spanish Civil War, Italian and German forces devastated Guernica, a small defenceless Spanish town. The bombing shocked and inspired many artists, including Pablo Picasso, who later painted a mural7 named after the desecrated village. The motif of Picasso’s work is the tragedy of war, and from a singular anti-war sentiment came a painting you could look at for hours because of its complexity — layers of symbolism, hidden images, bodies, animals and fire, all frozen in form on a massive canvas.

Guernica Painting by Picasso8
A portion of Pablo Picasso’s painting Guernica. (View the full painting.9)

Similarly, Beethoven’s Fifth Symphony is a classic example of the whole stemming from a single unit. The very first four notes of the symphony — three short, one long — are the genetic material from which the other thousands of notes stem. This motif is then transposed and transformed continuously through all four movements of the symphony. You can see this transformation in a visualization of the first movement10, and follow how the motif gives the music a sense of unity and inevitability.

Beethoven Symphony No 511
A visualization of the first movement of Ludwig van Beethoven’s Fifth Symphony. (Watch the video.12)

This concept of inevitability in music is often echoed in discussions of industrial design when we talk about an object or experience feeling “undesigned” — that is, having a level of quality and a perfection that would not benefit from any edits or changes. Jonathan Ive reiterates this13 in the film Objectified:

“A lot of what we seem to be doing in a product like [the iPhone] is actually getting design out of the way. And I think with that sort of reason — and they’re not just arbitrary shapes — it feels almost inevitable. It feels almost undesigned. It feels almost like, ‘Well, of course it’s that way. Why would it be any other way?‘”

This sense of designed inevitability is what Picasso, Beethoven and others achieved in the arts by focusing on motif.

The Motifs Of Great Digital Experiences Link

A motif in a digital product is something iconic and often part of the very first interaction a user has, as in the case of Vine. Vine’s motif is “capturing six-second video clips.” That’s the focal point of the product. So, making a looping six-second video clip14 the very first screen that new users see was a great design decision. The motif of Vine, as with Twitter, is a simple interaction that becomes part of every aspect of the product.

Quite similarly, do you remember your very first interaction with the iPhone? The first thing most new users do when picking up the device for the first time is slide to unlock. Swiping horizontally is also the gesture to navigate apps on the home screen; it’s the motif of the iPhone.

Before the iPhone, most consumers had only interacted with touchscreens at kiosks or with stylus-driven devices, and they had been accustomed to tapping and pressing rather than swiping. The decision to make a swipe the first interaction is the cornerstone of the iPhone’s brilliance: It introduces the motif right out of the box.

A poorly designed motif, on the other hand, can be a product’s Achilles heel. If you use LinkedIn, then you’re probably a job seeker, a recruiter or a professional networker. These three user types on LinkedIn all center on a common product motif: the professional profile page. Yet, for years now, LinkedIn’s search-indexed public profiles have been poorly designed. Small startups, including Vizualize.me15 and ResumUp16, have exploited this to their advantage, building products that are differentiated from another’s lack of focus.

To Create Better Products, Own The Motif Link

Behind every great product ever made was someone who championed the motif, whether consciously or not. This could have been a designer, a developer or perhaps a small team within the larger group.

Designers are best poised to “own” the motif, because design is so intrinsically linked to product vision and direction. However, at the end of the day, what is crucial is not the role, but collaboration and stewardship17. Everyone who works on a team can elevate the quality of the product they are helping to build by championing the motif. Below are three key ways to do so.

Be the Steward of the Vision Link

Think about your product and try to identify the most critical, singular element of the whole? Like LinkedIn’s career profiles, a product motif will span user types and apply to every customer. The motif will be as simple and small as a single screen or interaction. Identify that outstanding element, and build agreement and understanding across the team. When you find yourself in the weeds of wireframes or feature creep, use the motif as a guide to help the whole team regain focus.

Work the Motif Into the First-Use Experience Link

Like the iPhone’s slide to unlock, a product’s motif can unify an experience. From first use to navigation to lower-level screens, the motif should be infused throughout the customer’s experience. By making it a part of the on-boarding experience in particular, you’ll help to welcome new users in a natural, unforced way, rather than having to rely on instructional coaching screens or tutorials.

Perfect the Motif Before Deploying Link

We all understand that iterating through multiple versions and gathering user feedback to refine a product will lead to more relevant, useful experiences. But how do you decide what part of a product to spend the most effort on? The motif will form the basis of your marketing — that quintessential part of the customer experience and the part that people will use and see the most. If you are going to polish any one aspect of a product out of the gate and continually refine it, the motif should be it.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17

↑ Back to top Tweet itShare on Facebook

Ross Popoff-Walker has worked as a UX designer on sites and mobile apps for brands big and small. He now helps startup teams shape and execute big ideas with love and craft. You can find him writing at or on Twitter @rosspw.

  1. 1

    Very good article that helps you think deep before deploying any product.

  2. 2

    Alexandre Sartini

    July 24, 2013 2:40 am

    In French, “motif” means also the reason of doing something.

    Think about why you’re creating this product and then try to keep it in mind in every decision you will take about it.

  3. 6

    Well done! Really useful content and very helpful for my work! Thank you.

  4. 7

    Bruno de Florence

    July 24, 2013 5:40 am

    Your reference to Beethoven’s Fifth Symphony stemming from a single unit is a bit incorrect. First, the concept of motive-form (not motif or genetic material) was elaborated by Arnold Schoenberg. He saw that any music composed within the Western tonal system stemmed from an initial motive-form located in the first bars of the work. From this, he formulated the concept of Motivic Analysis, a practical tool for musicologists to speak to other musicologists, allowing to account for what goes on in a piece of music, irrespective of its style, orchestration, length, etc… Motivic therefore refers to movement, as in the concept of Motive Force in physics. Second, with regard to the Fifth Symphony, its motive-form is actually 2 notes in a relationship of a minor third, and that is for the first movement only. Not the entire material of a music work is reducible to its motive-form. Some of it can be independent, and Schoenberg called this material Liquidation. Also, Schoenberg made no assumption as to whether a composer is aware of the motive-form phenomenon or not. For reference, see Arnold Schoenberg, Fundamentals of Music Composition, Faber and Faber, 1967.

    • 8

      I love informal further detailed breakdown notes like these.
      Keep at it.

  5. 9

    Manav Sehgal

    July 24, 2013 10:06 am

    While I was reading this useful article, I associated with chaos theory and fractals. Same principles that form amazing complex “whole” from simple repeating “patterns”. Thanks for sharing.

  6. 10

    Jaydeep Gajera

    August 9, 2013 12:04 pm

    Nice article.


↑ Back to top