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 rate of a startup bringing a new product or service to market is one out of four.

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.

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

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 mural 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.

A portion of Pablo Picasso’s painting Guernica. (View the full painting.)

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 movement, and follow how the motif gives the music a sense of unity and inevitability.

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

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 this 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

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 clip 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.

The log-in screen for Vine on the iPhone is a looping video.

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.me and ResumUp, have exploited this to their advantage, building products that are differentiated from another’s lack of focus.

To Create Better Products, Own The Motif

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 stewardship. 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

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

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

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.

(al)

© Ross Popoff-Walker for Smashing Magazine, 2013.

Creating a brand is a tough task. There’s a lot of work and research that goes into it, and even more time that’s required. With building a brand, you also have to be very aware of the fine line there is with creating a gimmick or joke, as those don’t tend to have lots of longevity.

There are many ways to approach branding and rebranding: you can focus on the numbers and research; you can focus on customers or bottom lines; but after your approach, you have to make moves. And I believe the best way to build a brand is with design. Let’s break down this line of thinking.

1. Not just logos, but visual identities

Let’s first correct the misconception that a brand is a logo. I’ve heard this many times before and I cringe at the thought. A brand is typically signified or recognized by their logo. This is usually one of the first things done by a brand or business — they come to designers and get their logo created. It’s a great thing to do, but not the only thing there is to do.

People are visual. In order to create a recognizable brand, you have to tap into that fact. It’s not just about a logo but also about consistencies. It’s your company colors and fonts. It’s your icons, slogans and just the all around look. If you’re employed at a professional company, you don’t wear t-shirts, you wear suits to work. It’s all that type of visual consistency that goes into a brand.

Much like celebrities — they are their own brand and rely heavily on visuals. What do you they wear? What do they look like? Even, what events do they attend? Think of someone like a Ke$ha or Lady Gaga, we’d be extremely surprised if they showed up to an awards ceremony in a beautiful ball gown. That’s because they have a clear visual brand.

Think of companies as well. If you’re shopping at Target, for example, and happen to be wearing a red shirt and tan khakis, you may get stopped and asked about inventory. Why? Because they have a visual brand that goes from a very recognizable logo to the way their employees are dressed. 

With design, you have the ability to control what people see and how they see and remember your brand. A logo is great, but an entire identity is much better.

2. Not just a web designer, an interaction designer

One thing I’ve noticed about job titles as of late is half of them are asking you to do things completely unrelated to them. For example, some receptionists are required to essentially be office managers and customer sales representatives. Some administrative assistants are asked to be sales people and graphic designers. Some web designers are required to be — well, web developers and programmers. The jurisdiction of many titles has started to expand with the needs of the company and what individuals must know to do their job.

When it comes to branding, I believe this is something that’s required. For one, if you’re trying to build a brand and try to hire a bunch of different people for the sake of having a bunch of different titles, you’ll probably end up real broke, real quick. On the other hand, you want to have people who understand brand building and not just how to shoot up a website in a given amount of time.

In my opinion, brands are businesses that put their connection with the customer first. Brands are humanized businesses and should be developed as such. So for example, I may not just have any web designer or developer create my site, but I’m definitely going to have an interaction designer or at least someone who understands those concerns. An interaction designer is someone who strives to create useful and usable products or services. Their understanding comes down to user-centered design and how real users access the web. That person is going to help my brand make sense and be easy to access online.

I’m not just hiring someone who is a market researcher, but I’m going to hire someone who takes the research and uses it to help strengthen my connection with customers and not bottom lines. It’s imperative that brands gather groups of employees that aren’t going to do a job, but are going to help design a way to interact with customers.

3. Not just ideas, but prototypes

If you’re anything like me, you tend to have a new idea to go with each new day. I find it to be a huge gift and curse type of situation, but it is a wonderful thing when you’re able to actually bring forth the idea.

In any industry, if I sit down and begin talking to you merely about an idea I have, you may be interested, but you’re not that enthused. You’ll also end up leaving the whole idea to your own imagination; what it looks like, how it’s packaged, how it’s used even. With design, I have the ability to create examples and prototypes. These examples will more than likely get you more interested because you can actually see them. Whether I used a 2D or 3D interpretation, you have less misconceptions.

Prototypes are helpful if you’re attempting to build a brand and if you are looking for some type of funding. If you take a look at some of the best Kickstarter campaigns, you’ll see what I mean. They usually have prototypes which get people way more interested and invested. They can see it and they can imagine themselves or a friend using it, rather than using their own imagination, which may be wrong.

Not only have these prototypes gotten funding, but they’ve gotten together a small following of individuals who are invested in this brand. Now they’re sharing and talking about what is essentially only an idea. Prototypes invoke the same types of enticement for customers already invested in brands. People do this with mobile phones, shoes, etc. 

Controlling your ideas with design is totally possible with prototyping.

4. Not just projects, but a way of thinking

You may or may not have heard of what some people call ‘design thinking.’ It’s basically a way of thinking where you approach problem solving creatively. After all, design is a method of problem solving and should be treated as such. Design thinking means our problems aren’t solved with solutions of the past, but with creativity and an interest for the customer and brand. This also means business people, accountants, managers, and the like can all be designers when they use design as a way to solve their problems.

Why would you do this? Because design has lots of power and control. It controls what you feel, visualize and often where you go. Responsible brands use this to create connections and establish themselves with consumers. If a business wants that connection, that business has to have a deep understanding for design, creativity and innovation.

Some of our favorite brands today utilize design thinking and/or have CEO’s that put design first. Think of Steve Jobs or Dieter Rams. A guy like Mark Zuckerberg isn’t flourishing right now because he’s thinking about the bottom line and not interaction. The idea is not to break your business up into different design projects, but to make it all one big problem that’s approached creatively.

Conclusion

I cannot stress how powerful good design is. It’s more powerful than any type of marketing scheme or promotional technique I’ve seen in a while. Brands that are successful today know it and are using design to flourish and practically take over the world. Changing your business to a brand is as simple as learning good design and design thinking.

What are your thoughts about design’s role in creating brands? What brands have you built? Let us know in the comments.

8 Downloadable Web Design Courses – 90% off!

StrongLoop is making a move to become the premier software supplier for Node.js developers which includes their latest acquisition of the Node.js monitoring capability from NodeFly.