A new UX in the age
of product commodification

Sony wanted to brand its UX with a consistent visual look, one that applied to every customer touchpoint. How did the project get started?

MiyazawaI'd been heading up user interface (UI) design for smartphone apps and products, but I'd always wanted to provide customers with a more Sony-esque UX. A lot of it had to do with what manufacturers were going through: using Android for their smartphones meant that operating systems were all the same, which gave application expressions a kind of across-the-board conformity—there wasn't much unique customization or brand differentiation going on. It was hard for manufacturers to design their experiences for optimal usability.

When I took a good look at the Sony product lineup, I noticed a lot of variation. Since every product was a mix of different elements by different organizations, the customer touchpoints—from apps and websites to manuals and in-store catalogs—all had different visual styles, be it the way they used colors or the tone and manner of their illustrations. The messages were all oriented differently, so the products couldn't connect with customers like they should have. The operability wasn't where it could've been, either. The confusion in the messages ended up confusing customers. Then it hit me: the UI and UX we'd been designing for apps and products wouldn't be able to fix the problems on their own. We needed something with a broader reach.

To help customers navigate to the functions they're looking for and get to the heart of the product—the message and value inside—without getting confused, we had to get everything on the same page. We had to look beyond organizational boundaries and align the messages at every possible touchpoint. It was our job to create the Sony mode of communication, a vocabulary of expression and manner. In other words, we were setting out to brand the Sony UX vision.

Writing the definitions
of the Sony UX

To formulate a visual language for the full range of customer touchpoints, the team first had to define all the basic components of the entire UX—the colors, illustrations, and more. What kind of design process did you follow to make that happen?

MoriyaThe UX branding project was all about finding a balance between foregrounding the Sony brand experience and enhancing usability. With our sights set on that goal, we focused on developing a UX with the simplicity to work on global, multi-touchpoint scale and a distinctive Sony touch—a bit of the "play" concept so central to the Sony identity. That's what we wanted at the base of our UX design. We started out by identifying all the product touchpoints and taking a closer look at the existing designs, getting designers at our overseas sites involved in the conversation to iron out a solid, globally versatile approach to the colors, illustrations, and other basic elements of the UX design.

So, what does a "distinctly Sony" color palette look like? We explored different options and decided to go with a foundation of black and white, a combination that's been a kind of tradition at Sony, with product brand-specific colors serving as accents. The Xperia™ Smartphones UI, for example, uses a black or white background to create a Sony-esque vibe and splashes of Xperia color to grab users' sightlines and make it easier to navigate right to the spots or functions that they're looking for. We didn't want to overdo it with the accents, though; we decided to give each product one hue so that users could stay locked in on that single color even if the background color ever changed. Our color strategy really gives the UI great visibility, I think.

FygeIllustrations play huge roles in communicating the message of a product in app visuals and website designs—and the scope of that impact made capturing the Sony identity in illustrations, something that's already tough to do, even more of a challenge. As we played around with different ideas, we started narrowing our focus to the centerpieces of that Sony identity and finally came around to a concept that's a big part of the Sony Design mindset: chipping away at all the unnecessary "waste" in a design until all you've got is the essence of the product. When we looked at our illustration ideas, we focused on pinpointing those “essentials"—we'd take a line, for example, and ask ourselves if the visual really needed the line to serve its purpose. If not, it was out. The ones we kept gave us simple, minimal illustrations. In the end, we even started subtracting elements. To evoke a cityscape, we just used rows of lit windows to create an impression; for the image of a blue sky, a single contrail in open space was all we needed. Drawing something without actually drawing it—that was a key part of the Sony-esque tone and manner we came up with.

We also wanted to give designers some freedom in creating their own visuals for different touchpoints, not just force a standard set of illustrations on everybody. It wouldn't make sense to take that creative license away from designers; after all, they know their products and apps—and how to showcase those offerings—better than anyone else. They can put more feeling into their illustrations, and that mindfulness is what makes the message come through better. We had to establish a consistent tone and manner, though, and that's no easy task. To let all the designers follow their individual inspirations but still stay on the same basic page, we outlined a consistent set of illustration protocols and drawing methods around a common core of geometrical elements like circles and lines. Another piece was ensuring that the illustrations would translate smoothly into 3D renderings and video formats, which we did by laying out specific motion and interaction standards.

Besides creating the core components of the UX, the project also hinged on translating those basic definitions into multiple touchpoints on a global scale. Given that complex role, did the team run into any challenges in developing the necessary guidelines?

ItoFirst of all, we knew that we wouldn't be able to brand the entire Sony UX unless we could apply all the basic components to the whole scope: not just UI but websites, manuals, and in-store catalogs, too. That's why we drew up guidelines that laid out everything from basic policies on illustrations to rules for other elements and a standard production flowchart, giving the designers in charge of the visuals for every single touchpoint a consistent framework to work from. No two touchpoints are the same, though. Of all the challenges we came up against in rolling the guidelines out, one of the hardest ones to get through was figuring out how to translate the look and feel of color illustrations into the minimal palette of black-and-white manuals. We filled the guidelines with as many potential workarounds to the issue as possible: ideas like adjusting illustration line thickness, eliminating parts that weren't vital to the message, and adding elements in situations where a monochrome design would be too reductive. Whether it was color or monochrome, we worked to make sure that every touchpoint would have the same tone and manner.

The new UX guidelines are for more than just designers. To help marketing personnel and people in other departments take advantage of the guidelines, too, we needed to make them as versatile, intuitive, and applicable as possible—so we packed the documents with samples for different situations and simple, straightforward charts laying out dos and don'ts. All that key points are right there, clear as can be. We shared the guidelines with designers in Japan and countries around the world to get feedback on any potential concerns at a region-to-region level, a process that brought a lot of things to light. Some cultures tend to frown on showing too much skin, for example, so we made adjustments to align the guidelines accordingly. Incorporating those cultural and social factors helped make the guidelines even better.

Solutions to social issues,
all in the design

The guidelines aren't set in stone—they'll continue to evolve over time. How do you hope to see those changes play out?

MoriyaThe new UX branding is already in place across nearly the entire Xperia Smartphones, along with some of the UI and manuals for BRAVIA® TVs and several digital cameras. Right now, we're touching up the guidelines and other components so that we can roll the UX out past the consumer-product category and into touchpoints for medical products and other professional devices. We're hoping that consolidating resources and creating a shared pool of resources spark more creativity, too; by creating an archive of illustrations by Sony designers and making the visuals accessible across product and regional lines, we'll be able to give designers an environment where they can share resources and inspire each other. It's an ongoing process—and one that's going to keep reshaping the Sony UX for the better.

MiyazawaThe UX branding project was lucky enough to win a 2018 Good Design Award in the solution design category, which recognizes improvements in business environments. The Good Design judges were generous with their praise, saying that the UX reached across the often problematic vertical boundaries characteristic of major corporations to deliver a remarkably consistent user experience. What really made me smile, though, was hearing the judges talk about how we created a solution to an issue that so many Japanese companies are confronting: "projecting a clear identity in an age of shared platforms." The business environment is going to keep shifting; there's no doubt that things are bound to get more and more complex. That's why we're harnessing our design capabilities to enrich the Sony brand experience and enhance the experience value our customers get—what better way to make Sony stand out in a changing environment?