by Ashley Heltne, Director of Client Engagement, YML

October 6, 2020

With the retail climate making a dramatic and immediate shift online in the past seven months, we, as digital makers and builders, have had an influx of clients asking the right questions: 

  • How do I mirror the in-store experience, online?
  • How do we make it better?
  • How do we convert with the same enthusiasm as in-store?

When recently partnering with Thrive Market, an inherently digital marketplace, our team defined three key rules that are true of every successful online retailer. The remit in this instance was to make a first-class user experience even better, with an emphasis on driving conversion.

In doing that, we were forced to deeply evaluate the components of a best in class experience in this new, socially distant, digital-dependent world. Here is what we learned, and is critical to consider when building your customer experience and, consequently, your evolved business model.  

1. Friction is the Enemy

Early development principles would have us believe that number of clicks, or time speed to checkout are the most important things to measure, but we keep finding that users are becoming more and more adept at navigating the online purchase process. In fact, several users actually look forward to searching, shopping, and creating carts.

In other words, online grocery shopping could soon replace the proverbial game of Tetris.

With this behavior shift, the real killer to conversion is friction. Upselling? Fine. Added recommendations engines? Fine. Inspiration boards? Fine. Additional features blocking the user's ability to add an item to cart? Friction.

Key takeaway: 16% increase in 1st time orders for Thrive Market members.

2. Try Everything, Pivot Quickly

To more efficiently make an impact on our client’s business in this shifting landscape, YML has evolved your typical client / agency relationship into a more transparent partnership. Gone are the days of waiting two weeks for your agency to put together a dog and pony show deck for the bosses waiting in Conference Room B.

To keep up with the rapidly changing nature of product development, our client teams collaborate in the same working files (shout out to Figma and Miro - our new necessities), to take notes, suggest edits, and build out new user flows in real time. Our rule here is simple: no idea is bad. Build it and test it. But if the idea doesn't work - move on. The only true expert in product development is the user, which will come to light in user testing. Even the most brilliant design system is out the window if our core user isn't able to navigate it easily.

Key takeaway: 9.7% increase in membership sign ups for Thrive Market.

3. Customization is Key

Navigating an online marketplace with over 7,000 sku's is overwhelming. But unlike brick and mortar stores, your digital product has the opportunity to learn and grow. With robust data collection and analytics, the ability to create customized experiences results in efficiency and stickiness; for example, when Thrive users search for an organic, dairy product, they have always been served a variety of recommendations based on those specifications.

Simple enough.

But now, when we also find out that this user is a mother of two who is married to someone with a peanut allergy, we offer meal suggestions, put together thoughtful shopping lists, and introduce recipes that inspire further discovery in the kitchen.

Key takeaway: 64% increase in Thrive Market customers who added products from personalized recommendations.

Users have come to expect these principles as table stakes from online stores. And every leading retailer has already conquered them; Target, Houzz and, of course, the all powerful Amazon know that users become loyal when they find delight in knowing that their online experience causes zero frustration, knows what they like, has fun searching around, and, most importantly, saves them the hassle of roaming crowded, picked-over store aisles for an hour on Saturday mornings.


About the Author: Ashley Heltne

Ashley is YML's director of client engagement. She has over 12 years of experience building successful and lasting client partnerships. She has worked at several top advertising and consumer experience agencies including R/GA, Digitas, and Y&R. While there, she led integrated marketing programs for brands like Verizon, Taco Bell, eBay, EA Games, and Liberty Mutual. Ashley’s agency tenure has equipped her to tackle any business problem from a strategic, solutions-first approach.

Several of the consumer engagement programs Ashley’s team built for Taco Bell, Verizon, and Liberty Mutual were regarded as first of their kind, securing three Cannes Lions, four Clios, and one Effie. While this work garnered attention from the industry, they also increased acquisition, retention, and loyalty for her clients’ business.

by Joe Johnston, Creative Director + Co-Studio Lead ATL

Today, when shoppers are likely to be skittish about being in stores—if they visit at all—those who adapt using technology strategically and design intuitively will be better positioned to survive. More than just ordering online, digital solutions will have to consider every aspect of the business: operating logistics, employee safety, the use of physical space. And, if social distance becomes the new norm, how can technology connect humans for the better? 

Contactless Shopping 

While stores are quickly rolling out contactless payments due to COVID-19, many still use self-service touch screens and pin pads for transactions and loyalty. Given new CDC guidelines, where people are being encouraged to avoid using touch screens and pin pads, in some cases, they may no longer be allowed to use them at all. Additionally, with supply chain challenges and keeping items in stock, customers have been left with limited choices on where and what they buy.

This has led companies to adapt to new technology solutions and speed up their digital transformation. Critically, they're working with customers in partnership toward creating a more safe environment for the benefit of both parties. Stores and customers alike have had to make huge adjustments in recent months. Relying on customers to use their own devices places greater ownership in their hands to help manage their own safety, as well as contribute to the safety of others, including store employees. With this new behavior, stores are discovering even more benefits to digital product strategy.

Mobile checkout can help save customers time, both in the aisles and at the register.

Utilizing personal devices reduces interactions with physical screens and pin pads, and enables real-time loyalty offers to be activated, as well as preemptive stock tracking. During COVID-19 when 52% of customers buy what's currently available, this creates an opportunity for stores to help shoppers shop more efficiently.


"Especially during this time of hygiene safety at the gas pumps, which option is better for the customer—wiping down every surface as they move through their day, or adjusting to a new and improved contactless experience?"


Going beyond in-store experiences, this same idea is being applied to companion services. Think grocery store gas pumps, for example. You know the drill—slide in the card, punch your loyalty and PIN number, push the fuel type and fill the car. Just like mobile shopping, mobile check out at fuel pumps can happen in a similar way. Especially during this time of hygiene safety at the gas pumps, which option is better for the customer—wiping down every surface as they move through their day, or adjusting to a new and improved contactless experience?

For companies that adapt to the latter, they are not only helping to curb the spread of germs, but discovering new ways to improve the customer experience. Shell has already shown how this shift can occur. The mobile experience can be as easy as sitting in your car, selecting the pump, adding your loyalty and paying digitally, reducing physical touch points as much as possible. This experience could extend after COVID-19 allowing customers to stay in the car and out of the elements.

Rearranging Space

 
For brick-and-mortar grocery locations, adding new mobile device and digital capabilities can also add a layer of complexity and challenges for grocery stores. A strong wifi network is needed to support customers checking out and scanning items. Also, monitoring accurate check out using a self-service mobile device increases risk of inventory loss in some cases.

Although, if customers are able to shop at home and simply pick up their groceries, it can reduce the burden on a central digital network and minimize the need for extra security considerations.

With other restrictions, like limited store capacity, using an app for customers to schedule shopping time could help. Stores like Walmart started limiting the number of shoppers and re-examining their entire shopping and checkout system. No more than five customers will be allowed in for every 1,000 square feet, which is roughly 20% of a store's capacity. If the app was mandatory before entering the store, things like virtual queuing and in-store monitoring could be managed more easily by the store. Think the Fast Pass at Disney, which allows pass holders to reserve ride times during scheduled windows and change as needed.

Another aspect of the contactless shopping experience we expect to see take on more prominence is the use of temperature scanning and contact tracing methods.

Currently Apple & Google are in partnership developing a contact tracing API that could help stores and customers understand when they are in range of a potentially infected person. This would require shoppers and employees alike to have the store app downloaded, assisting in additional safety and security measures.


As the uncertainty grows around traveling to grocery stores, let alone being in them, customers want to feel safe and showcasing hygiene transparently will act as a short-term customer experience differentiator for some businesses.


Hygiene theatre will play a crucial role for business because, well, customers have expectations of things being clean. The expectation is to see these things happening in front of them. From wiping down grocery carts in front of customers to seeing cleaning crews to communicating times the stores are closed each day for cleaning. Several grocery stores are installing physical plexiglas sneeze guards in checkout lanes to visually show the safety between employees and customers. This expectation will only grow.

As the uncertainty grows around traveling to grocery stores, let alone being in them, customers want to feel safe and showcasing hygiene transparently will act as a short-term customer experience differentiator for some businesses.

The Rise of the Grocery Consultant 


With more people ordering online than ever before, essential workers may find themselves shifting into more of a consultant-type role, learning customers specific dietary and budget needs, then packaging them up for pick-up or delivery.

Traditionally, professional personal grocery shopping has been seen as a luxury. But with apps such as Instacart opening this service up to more and more people, it has become a common activity. What’s missing from this experience, however, is specialized knowledge to help navigate the moments when a critical selection decision has to be made based on dietary or other shopping criteria.


The need for in-store employees to support customers who order online with meeting dietary needs, balancing healthy eating habits, or helping them to shop on a budget is a space ripe for exploration and optimization. 


As COVID-19 continues to increase online ordering and delivery activity by nearly 3.5X, the idea of people with specialized knowledge becomes a differentiator. Additionally, it creates a greater opportunity for essential workers to cultivate a growth path through UpSkill models,. This method can boost employee engagement and satisfaction that ultimately benefits everyone—employees, customers, and company managers alike. It’s one of the ways corporations can work toward greater operational goals that align with ESG(Environmental, Social, and Governance) practices.

One of the top reasons customers love to shop for groceries themselves is to be able to enjoy the range of items. In the current environment, with limited or inconsistent supplies, numbers suggest people are eating less produce (36%) and more processed foods (47%). Additionally, customers place more trust in an end-to-end experience, reducing the chance for errors or third party logistics that increase more points of contact.

The need for in-store employees to support customers who order online with meeting dietary needs, balancing healthy eating habits, or helping them to shop on a budget is a space ripe for exploration and optimization. 

Food Door-to-Door


Perhaps the largest shift in behavior during months of quarantine has been the move toward online food shopping. As restaurants were at first ordered to close their doors, many found a loophole to staying open and keeping a skeleton staff employed through pick-up or delivery only services. Those already with an online ordering system made the shift easily. Others who may have had a website, but not the capability to order, worked to expand their digital or mobile services. Newcomers found make-shift solutions to help them keep going.


Just last year, only 11% of consumers bought groceries online once a month. What was once a novelty experience for some, has turned into a practical solve for keeping the kitchen stocked, inspiring people everywhere to wonder why they haven’t shopped this way until now.


Grocery outlets and online food services, however, have seen the largest uptick in business. Just last year, only 11% of consumers bought groceries online once a month. What was once a novelty experience for some, has turned into a practical solve for keeping the kitchen stocked, inspiring people everywhere to wonder why they haven’t shopped this way until now.

Think about it—no more dragging screaming kids to the grocery store, no more wandering aisles aimlessly and hungry, the ability to manage spending and avoid impulse buys, perhaps putting those resources into buying higher quality food.

With some stores like Menards, creating no kids policies, this further focuses the opportunity for food delivery services.

Customers make 1.6 trips a week to the grocery store on average. This is trending down because of COVID-19 with nearly 73% of customers making fewer visits. Customers are also nervous and have high level of anxiety when shopping. 60% of customers report being fearful of grocery shopping and having a sense of panic. Controlling the full store-to-handoff experience as hygiene considerations increase will set some companies apart. For example, places like Chick-fil-A now allow you to select Chick-fil-A Team Member Delivery.

The Digital Employee Experience

Today, with everyone managing a new sense of normal, store employees have been among the most impacted. Having long-forgotten how they used to work, they have already adapted to new ways of interacting with daily tasks, as well as customers. Company leaders can further support their employees by adopting digital-first resources for education and learning.

Using mobile experiences to re-train employees will be key.


Topics around proper hygiene, how to stock shelves with customers nearby, or even training materials to help essential employees grow into greater service providers can all be supported by a contactless, online portal.


Communication is one of the best tools companies have in organizing a coordinated response to new ways of doing business. Creating learning modules that can be monitored for completion and designed for all types of learners is a valuable investment that will sustain a company well into the future. By using a digital platform, new policies and learning materials can be easily uploaded or updated. Topics around proper hygiene, how to stock shelves with customers nearby, or even training materials to help essential employees grow into greater service providers can all be supported by a contactless, online portal.

Loyalty doesn’t end with customers.

Incentivizing employee loyalty through a digital experience allows people to quickly learn and improve skills for new types of work. Companies like Walmart have a robust suite of associate apps that bring new skills opportunities to their employees.

If there’s one thing that has become vastly apparent during COVID-19, it’s that essential workers have given us all a life line. With grocery store employees and delivery personnel at the front lines, it’s a great time to bolster support and appreciation for their roles. 

Illustration by Kevin Tudball.

About the Author: Joe Johnston

Joe has over 18 years experience in the areas of experience design, service design, customer insight, and innovation for many notable brands including: Lowe's, Coca-Cola, UPS, Capital One, State Farm, Arby's, Bosch, Herman Miller, AT&T, TIAA, Freddie Mac, Meijer, Principal Financial & Sony Music. This includes experience and service design, future visioning and ideation across brand experience and strategy. He's also an accomplished author, speaker, and expert on user experience/customer experience and experience innovation. Formerly Joe was the Group UX Director at Huge in Atlanta leading a team on several top brand experiences and exploring new innovative technologies.

The unexpected spread of Covid-19 has upended institutions across the spectrum, forced an array of industries to rapidly evolve and shined a light on brands like Thrive Market that were born digital and prepared to serve a population stuck at home.

Money Magazine just celebrated Thrive Market, the beloved organic e-commerce retailer and a client of YML, as among the best digital grocery options for affordable and local groceries. Money shared:

"Frequently described as “Costco meets Whole Foods,” Thrive Market is an e-commerce membership club that promises low wholesale prices and home delivery on a variety of organic and non-GMO groceries and home and beauty supplies. For the most part, Thrive Market features pantry staples — crackers, pasta, condiments — from their generic house brands, but “thoughtfully sourced” seafood and meat is available too. Overall prices aren’t super low, but they are competitive if not cheap compared to their organic counterparts at most supermarkets. Membership costs $9.95 per month or $59.95 annually, after a 30-day free trial, and delivery is free for members on orders of $49 or more."

More than just ordering online, digital grocery solutions today have to consider every aspect of the business: from the how to design a clear and intuitive mobile experience to operating logistics, employee safety, the use of physical space. Thrive Market, despite being just six years old, is well on its way to not only making a consistent impact for its members, but a more significant impact on the grocery industry as a whole.

Related press:

  • Can Rivals Take Advantage of Amazon’s Pandemic Woes? It Isn’t Easy, Wall Street Journal
  • Thrive Market CEO faces challenges of keeping up with demand during COVID-19 crisis, Supermarket News
  • Why Thrive Market is, well, thriving, Barrons

How we helped Universal Music Group create the future of music

By Neil Stoeckle, Creative Director, YML

How do you design a product for rockstars? Pop singers? Metal heads? 

That was my, and my team at YML, challenge from none other than Universal Music Group just a few months ago.  First, you have to understand what a modern musician is. From there, what makes the artists at Universal Music Group so unique.

Universal Music Group is arguably the largest, most talent filled music label in the business, representing Grammy winning artists such as Kendrick Lamar, Lady Gaga, Elton John, Taylor Swift — the list goes on. 

Artists join UMG not only for their reach and distribution, but also their innovation. Appropriately named one of Fast Company’s 50 Most Innovative Companies of 2019, UMG continues to prioritize projects that rattle industry norms and progress music forward.

They invest in an array of start-ups that constantly increase the capabilities of music hardware and software. They sponsor annual hack-athons where people in the music and tech industries combine forces to create new digital products. They own multiple music focused incubators and partner with product accelerators all over the globe, where the most promising digital ideas go on to be nurtured and polished, ultimately forming the foundations of new music-driven startups like Spreadmix — a streaming platform aimed at connecting people through live music, and Soundbops — a tool which encourages hands on music making for children early in their development. 

It’s obvious that music is changing. It has been since the first note was played and will continue even after humans are no longer the ones listening. From the way people consume it to the way artists create and deliver it. Imagine a time lapse of the evolution of recorded music: vinyl record players with big brass gramophones turn into cassette tape walkmans with cushy foam headphones, which morph into shiny iPods contrasted on dancing silhouettes. 

Now look at us.  We’re living in the streaming age where owning music is a dead idea. 

Electronic stores have become graveyards for hard copy albums, embalmed in plastic and buried beneath their headstone-like clearance bins. The nostalgic teenager in me is in mourning. 

And as UMG has recognized up close and personal, musicians are changing as well. 

The rising stars of this generations aren’t the hotel-trashing rockstar stereotypes of the past. These are young, informed entrepreneurs who understand that it takes more than just good music to be famous. They have to have a strong social media presence, they need big brand affiliations, they need to anticipate future trends and and they need to identify marketing opportunities based on location, demographics and untapped and rising markets. 

The music-loving product designer in me is nerding out hard.

Welcome to Universal Music Artists

UMG’s ongoing quest for innovation combined with the recognition of the changing musician inspired the label to partner with YML.  Together we introduced Universal Music Artists  —  a new digital platform which brings data to the music industry. It aggregates user data from Spotify, Apple Music and YouTube, so artists have a holistic view of exactly who their fans are and how they can better engage them.

What does that even mean?

The musical data footprint today is growing at an unimaginable pace. Music lovers pamper themselves with streaming services defined by an “any song, anywhere” reality. Every time a Spotify or Apple Music account is created, a small amount of demographic information — including age, gender and location — is captured. 

This isn’t a bad thing.

 In fact, as someone who still crowd-surfs at the age of 30 and according to Spotify, listened to 93,876 minutes of music last year, it’s pretty damn amazing. 

While Facebook gathers and sells people’s personal information to the highest bidder, UMG uses only the most basic demographic data to provide a better experience to fans. It’s like a satisfaction survey you actually want to fill out. At the crux of the UMA offering is the simple truth that guides most, if not all, data-informed digital experiences: with more information, I can make more informed decisions. 

Now let’s translate that to Gaga or Kendrick: If an artist knows who is listening, where they’re listening and what they’re listening to, they can tailor the sound, the shows, the merch, even who their next collaboration will be with — everything to better entertain the constant change of the audience.

Data is better when it’s designed

UMG’s data team may be reading this so I won’t give away all my secrets, but the beginning of the project often had me sitting with my ears open and my mouth shut, desperately trying to keep up with the unfamiliar analytics jargon that effortlessly rolled off their tongues.

 Imagine yourself walking down the street and you come across people playing double dutch and they ask if you want to join. So you do. But you’ve only ever played with a single jump rope before and you’re trying to time your moves so you don’t interrupt their flow. Then, just when you start to get the hang of it, there are 5 more jump ropes added, and then a few juggling pins, and now you’re also riding a unicycle. 

Might sound like chaos, but I loved it.

As a creative director whose stakeholders are usually individuals driven by business KPIs and dollar signs, being able to work closely with a data and analytics team was a wonderful change of pace. Not only because I learned something new everyday and because they loved every design we showed them — whether it was a large format print out of the proposed information architecture or a pretty UI exploration quickly dropped into a photoshop mockup — but because they were passionate about what they did everyday: data. 

The team was brilliant and the back end they spent years developing had so much potential. But passion for analytics without intentional hierarchical inclusion would come with a price… at the expense of the experience.

Every data point was deemed essential. Every metric was just as important as every other metric and therefore was expected to be a part of the final product. Enter: Firehose. 

‘Firehose’ was the term we used when trying to convey what the experience would be like if we included everything, simply because we could. A firehose can save lives, but not if you aim it directly at the person climbing out of the top story window of a burning building. Another macabre analogy. Sorry. At least it was effective.

The above is the redesigned Information Architecture for Universal Music Artists.

The Who

With so many different roles in the modern music industry — label heads, artists, producers, managers, marketers, promoters, artist-aggregators, booking agents, promoters — we needed to redefine the target audience in order to whittle down the feature set.

Who would use this product the most? Who would find it most valuable? The answer turned out to be pretty obvious. Artists and artist managers. The ones that make the music and the ones that do everything else.

This was such a pleasant revelation because it meant stripping the product of any unnecessary clutter that wouldn’t be appreciated (understood) by musicians. It’s pretty uncommon for a musician to moonlight as a data scientist and we didn’t want them to have to start because of some new tool their record label gave them.

In turn, we decided that Universal Music Artists needed to intuitively answer 3 key questions: How am I doing? Who is listening? How can I improve?

How am I doing?

In all the interviews we conducted, this was the question that was echoed most by artists and managers alike. How am I doing? Am I up or down? 
Basically, is there more green or red on the screen?

 From the home screen, artists are immediately presented with three hero metrics, as well as the direction in which they are trending for each:

  • Total Audience (the artists unique listeners on Spotify and Apple Music)
  • Streams Per Listener
  • Total Streams

Next in the hierarchy are the artist’s Spotlight Songs and Videos — their most recent releases. 

Releasing a track or dropping a music video is like conceiving a child. You spend months reading the right books, eating the right foods, staying away from alcohol in anticipation of bringing this piece of you into the world. And once it arrives, you’re constantly checking on them to make sure they’re safe and healthy. 

It’s tireless work, but it’s all worth it when your kid grows up and buys you a house. 

Same thing. This product solves the classic artist’s dilemma: it gives them a real-time, credible view of the health of their latest launch, every time a fan presses play.

Who is listening?

While skill is an objective quality, the idea of good music is based on bias, defined by personal preference and influenced by popular trends.

Ultimately, it’s the people who decide whether an artist will rise or fall.

Through data driven insights, Universal Music Artists identifies opportunities of growth across the globe. For example, an artist will be notified of any irregular spikes in listenership for a specific location or demographic. So if their primary fan base is in San Francisco, California, they will continue to prioritize resources accordingly, but if listeners in Sao Paulo, Brazil, are increasing each week by the thousands, managers will know to target the hell out of that location through marketing and touring. 
In addition to triggered insights, artists can see how their audience is responding to their music through the week by week flux of:

  • Total Streams / Views (Spotify, Apple Music, YouTube)
  • Total Watch Time (Spotify, Apple Music, YouTube)
  • Active vs. Passive Streams / Views (did someone directly search for a song or did it auto play from a playlist)
  • Top Countries
  • Top Cities
  • Streams by Age
  • Streams / Views by Gender

Can you imagine if the Beatles had this? 

How can I improve?

Whether an artist is flying high or falling off, they’re constantly looking for ways to be better.

Better than their previous release, better than their genre, better than the rest. Period.

To help them get there, this product will identify areas that are lacking so teams can counter accordingly. For example, if an artist is blowing up on Apple Music, but fairly stagnant on Spotify, managers can adjust their marketing strategy to focus on the artist’s Spotify presence.

One way to get there is through exposure. Duh.

While in a usability session with the team that manages Marshmello and Illenium (nbd), we uncovered some amazing insights on how an artist’s music gets shopped around in this golden age of streaming — playlists. 
For better or worse, modern day listeners often discover their new favorite track or band by pressing play on a popular curated playlist and passively consuming whatever comes out. If a manager can get their artist’s latest single onto one of these playlists, it’s guaranteed exposure.

Universal Music Artists is basically ammunition for this goal in the form of data, where they can compare the listenership of a playlist’s existing tracks with the recent rise of one of their own. If a song is outperforming another without any playlist help, it’s time to plug the hell out of it.

Hedonistic Usability

There is a philosophy, coined by Danish architect Bjarke Ingels’, called Hedonist Sustainability —the idea that something shouldn’t be boring simply because its good for the planet. Composting isn’t fun and renewable energy isn’t terribly sexy, but Ingels challenges this tradition through his designs. 

It proved to be such an effective concept that we repurposed his thinking for product design, calling it Hedonistic Usability — just because something is utilitarian, doesn’t mean it can't be beautiful. Thanks Bjarke.

His most recent project, and the one that most obviously echoes this ideology, is the Copenhill Urban Mountain — a power plant that converts 400,000 tons of waste each year into low-carbon electricity for the people of Copenhagen.

Waste-to-energy wasn’t enough for Ingels, so he designed a ski slope to live on top of it. Breaking up the flat terrain, this artificial mountain gives people a place to test their snow skills from within the city while bringing Copenhagen one step closer to becoming the first carbon neutral capitol in the world.

Images by Alexander Vissing

The thought of “data” to anyone other than a data scientist probably sounds cold and boring — even to those who prioritize emotion and feeling in their craft. The product needed to house all of the invaluable insights that come with analytics, but it also needed to be attractive enough so music artists would be enticed to use it.

I’m pretty sure Universal Music Artists isn’t saving the planet, but I’m quite convinced it is saving music, which is why Hedonistic Usability — our recycled version of Ingels’ philosophy —was the basis for the entire interface.

The dark UI is designed to be viewed at all times of day and night — at the breakfast table, in the recording studio, in the club. It needed to be beautifully subtle, acting as a canvas for the analytics and album art alike.

The contrasting use of bright color against black puts emphasis on the most important content so that from any screen, artists will immediately know the direction in which they are trending. Green is good. Red is bad. Every platform is color coded so they know whether a piece of data is specific to Spotify, Apple Music or YouTube. We even added some subtle animation to the navigation bar because music inspires movement and…well… it’s easier to sell a design when it’s pretty.

And this is only the first launch. We have a healthy roadmap for the future of Universal Music Artists, aimed at building a stronger bond and tailoring the relationship between the fans and the music. Although this product will be used by artists and managers, it’s really for the people who are listening. 
Music is changing for the better. Sure, songs are written by teams instead of performers and roadies carry turntables instead of guitars, but now data is in the band — disrupting the music industry by bringing the audience closer to the artist.


I want to to give a huge thanks to all of the people involved in the creation of this product. All of those at YML—Jonathan Bongato, Mauricio Bucardo, Stephen Clements, Zain Jiwani, Jason Rzutkiewicz, Ramsundar Shandilya, Ryan Spencer, Shayna Stewart, Adam Talcott, Mayo Tobita, John Wilson and Bindushree. You are all incredible.

And it was topping on the cake to see the UMA work get recognized, both in the press (Rolling Stone, Billboard, Variety), as well as with a Webby recognition in the category of Apps, Mobile and Voice for the Best User Interface Award (out of the 13,000 entries from 50 states and over 70 countries.

About the Author: Neil Stoeckle

Neil is a multi-disciplined creative director who has been continuously pursuing design since he first learned how to photoshop his friends’ faces on the bodies of celebrities. Joining YML in its early days (2013), he helped structure and evolve the people-first practices that are still used today. Whether it’s a product experience for a client’s customers or an environment for his fellow employees within the walls of YML, Neil uses human-centric design to elevate the needs of people.

There is no industry Neil has not touched. He brought the artists of Universal Music Group closer to their fans through a seamless union of design and data. For State Farm, he created a simple and empathetic experience for the otherwise overwhelming maze of insurance. He’s created medical frameworks for Research Kit and fintech products for First Republic Bank.

Miscommunication is far too often responsible for defects in digital products. A clear design system goes a long way to reducing the risk of these types of defects.

By Sami Eljabali, Engineer, YML


The common thread of the most impactful digital products today is the design system; a common language for designers and developers to speak that guides the creation of a product, and facilitates the best possible experience for customers. That all starts, though, with design review meetings, which tend to be the most dreaded meetings amongst developers and designers, as well as their most frequented place of contact.

"This needs more padding." "That isn't the same blue as on the mockup." A meeting where one wonders why the other can't clearly see what they've being coding for the past few weeks, and the other wonders if they’ll ever be freed of the other's pixel chasing dreams. 

It's a mind numbing meeting for all parties involved. The reason is obvious: it's a game of spot the difference tasked by grown adults. A game even elementary students find boring eventually, yet routinely done by professionals seriously. 

Has our industry grown complacent to this game? Is it even seen as a problem worth eliminating in the first place? 

Being in an industry that's notorious for automating others' processes, it's about time we looked internally and automated one of our own. In this article I'm going to help you do just that for your design and engineering teams by introducing the power of a design system, brought to life by the concept of design tokens, better practices, and how to best communicate them across the board.

I’m then handing you two free projects for both Android and iOS that will help jump start your process in having your developers and designers thank you for the extra time they now have to play Pictionary post sprint reviews.

Design tokens

In trying to explain what a design token is, it’d help define what its parent system, a design system, is first. I liked this definition by Grinaker:

“A design system maintains the visual and functional elements of an organization in one place, in order to fulfill its brand principles through design, realization, and development of products and services.”[1] 

When it comes to mobile development, a design system encompasses all building blocks used, how they behave, when to use them, as well as all quantitive values used to describe pages visually. These visual, quantitive values can be categorized as design tokens. Think of these values as those used by designers in mockups that are then absorbed and used by developers in application development. These values include, but are not limited to: paddings, margins, text sizes, and color values.

Showcasing the value of clear, defined color schemes and solutions through design tokens.

The value in defining design tokens

Universal team language

Imagine a designer mocks up a mobile page with a margin of 4px (pixels) between two buttons. An Android developer then in implementing the mockup, has the margin as 4dps (density-independent pixels), as it's Android's standard unit of measurement for spacing.

In reviewing the page on a testing device, the designer measures the margin size in actuality being 6px. The designer points out the mismatch to the developer, who then show it's accurately 4px on a differing testing device.

What gives?

DPs scale in pixels according to the phone at hand’s screen size & resolution. iOS similarly use Points that too scale similarly between different iPhones & iPads.

Miscommunication is far too often responsible for defects. A clear design language goes a long way to reducing the risk of these types of defects.

Edward Cessna, Senior Director of Engineering, YML

The need here is clear: to instill a unified language to describe design tokens, in this case spacings, amongst all parties involved in development to avoid painstaking miscommunications from reoccurring time and time again.

The cement between building blocks

If widgets are an app’s building blocks, then design tokens is its cement that glues them together. Their usage is commonly used in application development and the implications are many should they not be well thought of nor defined.

If colors for example in an application are not defined, then developers will hardcode them impromptu as they see fit resulting in poor UX, as pages have no rhyme nor reason in color scheming. Should spacings be defined, but not as well thought of for example, an app may not be as visually pleasant from users’ standpoint.

Better practices in defining design tokens

Values ought to stand out from one another:

A common pitfall of curating design tokens is creating far too many of them that are too close in value to one another, which then makes it hard to discern when to use one over another.

When thinking of how to cut up real estate of a mobile page, convention states to create a grid (rows & columns) where each are of size 8. Naturally when defining spacing values, first thought is to go by 8 increments, where the first few values are fractions of an 8th. Let’s see visually what the problem with that is.

Bad linear growth using f(x)=8x. Notice how hard it is to tell side by side values at 16dp onwards.

Good exponential growth using f(x)=2^x. 
Notice how these values shine more.

Gotta name them all...descriptively:

Nathan Curtis, in his article “Space in Design Systems”, stated when it comes to naming design tokens one should: 

Name Each Step for Memorable, Accurate Reuse.”[2]

When it came to naming spaces, Curtis stated:

I love Gmail’s Compact, Cozy, Comfortable space toggle. So when we built our space system, I suggested we use those labels in our work.”[2]

Notice how these names are relatable to the average person and how practical they can prove to be in day to day interactions: "Hey, can we change the spacing between these two buttons from Compact to Comfortable please?” 

Naming schemes that are too technical or vague alternatively can be problematic.

Take for instance this scheme: single_spacing, double_spacing, triple_spacing, etc, where a spacing equates to 8dp.

Sure, one may be able to derive the actual quantity of DPs used per value, but the values themselves aren’t as memorable nor as outspoken as with the previous example. Think of also how limiting it would be to tie a name to its value. What if one were to change a value out of the many spacings, how would that be accomplished?

Find the balance between too granular and too general of values

Consider the example of spacings, which ought to have values for both vertical & horizontal use cases, and not only be generalized as spacings. The reason is, you'll be able to easily configure your apps' looks and feel depending on newer phone size trends.

Imagine phones got taller, but not any wider. Then simply increase your vertical spacing values, leave your horizontal values alone, and ta-da — you're done.

Text sizes defined alone would be considered too granular. Text appearances, however, are a better generalization that include: font, text size, and attributes applied, i.e. bold, italicized. This will tremendously simplify usage, however, require more upfront planning.

Colors directly referenced by name is not a good idea. Instead, create indirect reference of colors that allows for easier digestion:

 Bad granular color naming:

Showcasing how not to use color in a  design system.

Good general color naming:

Showcasing the value of a thoughtful color definition within a design system.

Use platform specific design tokens first

Using out of the box values for your app will create more commonality with apps found on its respective platform, thereby creating more immediate familiarity with your users.

Both Android & iOS have text appearances out of the box for example:

Showcasing the value of text appearances within a design system.

Android has a theming system that allow you to set a number of colors that are then applied to your widgets app wide:

Showcasing the value of a theming system within a design system.

Define values against a single device

Since design tokens display differently from phone to phone, it's best to define values against a single phone for the optimal experience. Naturally choose the device that's most commonly used by customers. Once customers shift usage to a more popular phone, see if your values need calibration against it. If need be, adjust accordingly and repeat.

How to best communicate design tokens

Attributes for all

When documenting your design tokens, your goal should be to make them as easy to digest by both designers and developers as possible. Whatever attributes that either side find useful ought to be noted.

For example, say your colors are well named and have their hex values defined. Designers may like to note their HSL lightness to help better tell between those grays. Although this serves no use to developers, their inclusion brings no harm, thus preferred.

Narration via visualization

An IKEA catalog is nothing without its images. Similarly, inlining displays of design tokens in action makes your document that much more compelling and outspoken.

Close to home

The further away your documentation gets from the app and those who work on it, the more likely it is to be out of sync. How much closer can the document be to the app, than to be inside the app itself?

Not much, therefore design systems that are in-app are the way to go. What do I mean by in-app? Literally embedding a page that’s accessible to designers, PM, QA, and developers within the app that’s being developed itself, however inaccessible to customers. 

“Is it really worth the hassle?” you may ask yourself. Consider this: it can act as a table of contents of the app’s used values for the reader, such as a QA, who can now ensure the table matches its contents. Furthermore, it can serve as a contract amongst team members to abide by. If a design mockup uses a value outside of the table of contents, then a discussion should ensue to whether this new value belongs to the system or not.

But wait, there’s more!

To help kick start your project’s design tokens, I've published a variety of values visualized for both Android & iOS! They’ve been released to the public domain making them entirely free in usage and modification.

Sources:

  1. Grinaker, Siw. “What is a design system?” https://enonic.com/blog/what-is-design-system. Enonic. February 13, 2019.
  2. Curtis, Nathan. “Space in Design Systems” https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62. Medium. September 25, 2016.

The consensus is in: No tool is more effective than Figma for remote design work and teamwork

Remote work has gradually been getting built into the fabric of our culture, and then when Covid-19 struck, that trend was rapidly accelerated. YML's team has practiced remote work and collaboration for many years because we are a global team with with six offices around the world. But that doesn't mean it still isn't hard.

Just as Covid-19 was becoming a fully realized, global pandemic in March 2020, YML’s design team decided to shift their efforts from Sketch fully over to Figma.  So much of our work relies on collaboration, sharing and discussing the work face-to-face, but in this new reality we had to adjust quickly without sacrificing time or quality. Figma has been vital to meeting that goal.  Our designers are beyond satisfied with it and the work continues to be strong and impactful. 10 designers share why:

Neil Stoeckle, Creative Director

I have to start with the live collaboration tool — how we never lose or overwrite another designers work because we both have the same file open at the same time. I love the seamless creation and distribution of a component library. It's a vital, all-in-one tool belt Figma has given us— wireframing, UI creating, illustrating, prototyping, shipping to devs, the list goes on.…

But one micro-feature the extrovert in me loves, especially in this new reality we live in, is the observation element. I can click on one of my designers, follow along and engage in what they’re doing— its like a high-fidelity, socially distanced, white boarding session.

Jon Sontag, Motion Designer

As a motion designer, Figma is a great way to quickly design, build, and export files for animation and prototyping. It's easy to use and has all the tools I need to get the job done.

The mobile app live preview is a really nice touch. It helps me manage the quality and nuance of what I'm designing. I'm excited to start collaborating on more projects with my team.

Hans Lee, Designer

Real time collaboration has changed the speed at which our team has been able to collaborate, create, and hand over designs to engineers.

The long term benefits of learning Figma now is never having to learn another software ever again. When I was a Sketch user, I had to learn my way around using Abstract, Zeplin, InVision and Principle whenever I needed to hand over designs, present designs, collab with a designer, etc. But Figma works with all these softwares combined. 

Chris Rowe, Art Director

Most designers know about the collaboration, sharing, and prototyping benefits of Figma — it’s awesome. It may turn everyone into a hovering art director, but at least they’re not standing behind you, right? On top of the long list of team benefits, Figma has actually addressed some of the visual design problems that pop up in other interface design tools.

And the biggest one for me is that I can actually use Figma to create custom icons and illustrations necessary to communicating ideas and stories. The node and path manipulations allow for fast and smooth creation that was highly frustrating and incredibly slow in other interface design tools.

AmberNechole Hart, Designer

Figma has the most important feature of all - it’s free. Our design tools have a legacy of paywalls, which creates significant barriers to entry. Being free makes design accessible to all people.

Mauricio Bucardo, Motion Designer 

One of my favorite things about Figma is how they empower users to make the tool their own. Unlike other design platforms, they surface access to plugins created by the design community. The ease of access and install allow users to have all the tools they need to work as efficiently as possible. Furthermore, emphasizing the plugins created by the users creates a community of exploration and collaboration, where we are all contributing towards a same goal: Creating the most powerful design tool out there.

Claire Yuan, Designer

Figma has become the playground for everyone on the team. Project managers and developers can come to Figma, checkout the work, and post their thoughts. With Figma’s extra smooth live collaboration, designers can more quickly learn new user needs or technical problems spotted, and work on more iterations in shorter time. As a designer, I feel lucky and thankful that I live in a time where Figma exists. 

Amit Garg, Creative Designer

The real value of Figma for me is that it’s totally cloud based, so version control has never been an issue now. It has built in 'Version History,' which I've used a lot ("where was that one screen I designed 2 months ago?"). And because you can have people work on the same file at the same time (like Dropbox Paper or GDocs), it's drastically improved our time efficiency.

What used to take a couple hours to design out, now takes 30 minutes with multiple people working at the same time. Figma's prototyping feel is easier to implement, compared to Sketch prototyping. It has a feature called 'Smart Animate' that I've used a lot recently for some more refined prototyping/animation concepts.

We also recently began presenting to our clients straight from Figma instead of using Keynote or Powerpoint, then switching windows to the Figma prototype. Our 'slides' are part of our prototypes now. You could obviously do that with Sketch, but the Figma difference is that when you want to transition to a new speaker in the middle of a presentation, you can simply click on their initials in the Prototype view and it'll go into "Observation" mode, so you can see what they're doing on the prototype in real-time without having to give up your screen share. Figma has made remote working unbelievably painless. 

Sadhvi Konchada, Product Designer

Auto Layout? More like auto-work! Auto Layout is one of my favorite things in Figma. It’s best used with repeated UI elements like tags, lists, menus, etc. With this feature, elements rearrange themselves when one component is moved around. It saves a ton of time and cuts down on redundant work.

Joe Johnston, Creative Director and Co-head of ATL Studio

Figma is really relevant right now and will be in the remote-world future. There are real cost and time savings as we’re seeing real-world, working challenges between some clients not using Figma and others that are. The time savings is amazing when designing as teams in Figma, especially remotely.

Figma has been critical for our team as we tackle projects across the digital experience spectrum, from fintech and healthcare to building products in insurance, grocery, home repair, and restaurants.  Reach out to us with any questions about how to partner on a future project.

YML partnered with Cepheid to create the interface.

Throughout the Covid-19 pandemic, a major problem has been access to reliable, quick testing. Cepheid, a Silicon Valley-based molecular diagnostics company and partner to YML, created a breakthrough test that dramatically cuts down Covid-19 detection time from three to four days to just 45 minutes. The U.S. Food and Drug Administration approved Cepheid's first rapid detection on March 21st.

The GeneXpert Xpress, a product created by Cepheid, is the first rapid coronavirus diagnostic test.

The U.S. FDA has been pushing to expand screening capacity for the virus while the World Health Organization has called for "order and discipline" in the market for health equipment needed to fight the outbreak.

Cepheid received an emergency use authorization from the FDA for the test, which will be used primarily in hospitals and emergency rooms. The company plans to begin shipping it to hospitals this week.

YML has been a design partner to Cepheid since December 2019, tasked with designing the product’s user interface to enable as much as speed and clarity within the test process as possible. 

Cepheid's test functions through the GeneXpert Xpress (above), an instrument designed for mass accessibility. By inputting a single test in each of its four cartridges, the GeneXpert can run up to 16 tests simultaneously, depending on how many instruments are connected. YML's team was responsible for reimagining the user experience on the built-in, attached touch screen, which is a landscape tablet running on Windows.

With 23,000 stations worldwide, Cepheid is making testing more accessible everywhere. Based on its series of products, including the GeneXpert Xpress and others, Cepheid has the capacity to run 80 tests simultaneously, which means 2500 tests a day if it’s running for 24 hours.

“We have developed a test that provides reference lab-quality results in multiple settings where actionable treatment information is needed quickly.”

Dr. David Persing, MD, PHD
Chief Medical and Technology Officer
Cepheid

Cepheid's collaboration with YML included internal and external clients and constant iteration to create a final, impactful product with the potential reach millions of people all over the world, and most importantly, flatten the curve.

YML's design collaboration with Cepheid is ongoing.

In the news

"U.S. FDA Approves First Rapid Coronavirus Test With 45 Minutes Detection Time."
The New York Times

"FDA Approves First Bedside Covid-19 Test by Danaher’s Cepheid."
Bloomberg

"FDA Authorizes New Test that Could Detect Coronavirus in About 45 minutes."
CNN

"FDA Grants ‘Emergency Use’ Coronavirus Test that can Deliver Results in 45 minutes."
CNBC

"A New Type of COVID-19 test Now Approved for Use Could Help with Frontline Diagnostics."
TechCrunch

"Xpert® Xpress SARS-CoV-2 has Received FDA Emergency Use Authorization."
Cepheid

Reach out to YML with any questions about the work or collaboration.

By Joe Johnston and Amit Garg

Jan 28, 2020

Why product moments are important

Finding the ‘just right’ experience

We all know the story of Goldilocks and the three bears: the little girl wants to find the perfect porridge. Not too hot, not too cold, but juuust right.

If Goldilocks was a business and the porridge an experience, you end up with the question: how can businesses find the just right experience for their customers? 

According to a recent Accenture study, 77 percent of customers feel a brand earns their loyalty if it takes immediate action when they are unhappy.

Conversely, the same study found that after a bad experience, 38 percent of customers gave a portion of their wallet to a different business, and another 39 percent stopped doing business with the brand. 

Those numbers are astonishing, and it got us to the realization that:

  1. Trust is earned when brands are there for customers in the moment, and
  2. It takes only a moment for brands to lose their customers’ business. 

Moments are emotional, and emotions dictate behavior. By designing for moments — for the emotions we want customers to feel when using the product — we can be sure to achieve that elusive ‘just-right’ experience.

We refer to these as Product Moments, and they form an overarching theme to our design philosophy here at YML.

How do you capture the right product moments?

Designing the right thing, the right way

Identifying the most important moments in your customer experience is just as crucial as designing for them.

In an ideal world, we’d kick off a project, come up with great ideas, design them, develop them, launch them, and get it all right the first time. Luckily, and you’ll see why in a moment (ha ha), our world doesn’t work that way. 

Rather, in our world the best and most efficient way to design the right product is by doing the right research. We’re not talking about a drawn out 6-month-hire-a-consulting-firm-with-100-page-reports type of research. There’s a time and place for that.

For capturing moments, we stand up and leave the office. We spend time with people in their space as they interact with the product (or your competitor’s). We ask the right questions that help us get to the right information. 

We’re lucky that our jobs require us to interact and empathize with people, face-to-face, so that we may design a part of their life to be just a bit more delightful. The crux of capturing the right moments lies there: do the research that helps you understand the behaviors, attitudes, desires, and frustrations of your customers.

Gathering that wealth of information helps create a future forward story with customer needs at the heart of the to-be product, and allows you to design for moments that drive better experiences and better business outcomes.

Experimentation focuses on understanding user expectations, behaviors, needs, and motivations through methodical, investigative approaches. Insights are then used to ensure that all product design decisions do benefit the user.

Let’s address the elephant in the room: design research is never really done. 

We capture questions from all of our stakeholders, send out surveys, host interviews, and conduct contextual research. But questions lead to answers and even more questions, and even more research.

For the insatiable UX researchers, marketing campaigners, designers, and strategists here, we know that feeling - and the frustration of research not making it into a project plan.

At YML, our approach to the ‘just right’ research with our partners is fourfold:

  1. Know what you don’t know. Gather all your assumptions and knowledge gaps, then draft questions that will fill them. 
  2. Draft a set of learning objectives and share it around to make sure there’s understanding on what the research will gather. 
  3. Create a prototype of something (yes, as part of research) that can be put in front of people, and see how it performs. We don’t call it ‘validation’ because we don’t assume that we’re right.
  4. Follow a directional, 2-week (agile) experimentation sprint that can run in tandem with design or development sprints depending on the phase of the project. 

For identifying moments, this almost always involves conducting field or remote research like interviews or mobile video diary studies (we like dscout). By seeing it ourselves, we recognize workarounds, physical artifacts, and motivations that are subconscious to our participants.

From the field: Look for the“wooden ruler”

While conducting observational research for a financial digital product, we conducted desk ride-alongs asking employees how they went about their day and how things got done. As you can imagine, the employees dove into several different applications going from one to another copying and pasting info across systems, showing all the normal challenges with complex financial software. 

While walking through all the same flows and challenges with the final participant, we noticed an old wooden ruler on her desk. You know, the ones we had in elementary school. We made a note to ourselves to ask her about it at the end of the ride-along. 

As we ended our conversation we asked the question: “Why the ruler? Her colleagues chuckled and she blushed and said, “It’s for me to keep track of my check list”. She said, “We have to follow a very rigorous list of items to make sure everything is done in the right order”. She had a hand written checklist on her desk and she used the ruler to keep track of each item she was on, and would move it down the list as she completed tasks.

This observation would later become the key to streamlining the digital product. Something we captured in a few days, not months, would point us in a direction that would have huge impact on the product. This manual checklist was integrated into the flow of the digital product and allowed the company to remove errors and increase productivity of investments going through the system.

Without this observational research the team would have never seen or uncovered the hidden pain points that can completely change a digital product’s success.

How to keep a customer focused mindset when designing for product moments

In their book on customer centricity, Peter Fader and Sarah Thomas lend us their definition of product centricity and how it vastly differs from customer centricity in practice:

  • Product Centricity is the practice of selling as many products as possible to as many customers as possible, no matter their level of anonymity.
  • Customer Centricity aligns the development and delivery of a company’s products and services with the current and future needs of its highest-value customers while also recognizing - and celebrating - customer heterogeneity. This practice maximizes these customers’ long-term value to the brand. 

Let’s unpack these for a minute. A product centric business strategy is not inherently bad. For some, it works.

A perfect example is the classic side of the street souvenir shop you see in tourist hotspots around the world. Owners of these shops don’t really care who you are, as long you buy their product, and as much of it as possible. For them, all customers are made equal and generally have an equal chance of a transaction.

We don’t really expect shops like these to transform with a customer centric business strategy because it wouldn’t be a worthwhile investment. Their value isn’t different enough from their neighbors to warrant a strategic overhaul (although admittedly, it would be a fun thought experiment). 

On the flip side, key to the definition of customer centricity is the recognition, acceptance, and celebration of customer diversity in the broadest sense. It’s the belief that in fact not all customers are made equal, and therefore don’t always deserve (or need) an equal share of your company’s valuable resources.

A customer centric brand seeks to understand the qualities and characteristics of its highest-valued customers, and strategically aligns business operations to meet their needs.

The culmination of these efforts leads to boosted CX metrics across the board, but most importantly to an increased customer lifetime value, or the value a customer brings to your brand over their lifetime. Achieving true customer centricity of course doesn’t happen overnight.

Transitioning from product to customer centric requires an organizational culture shift with a forward momentum increasing in maturity. We see our clients in various stages along the customer mindset maturity scale.

Our calling is to arm our clients with the tools, strategy, and execution to get to full customer-mindset maturity, and designing for moments is a key step along this path. We’re proud to have done that for leaders in entertainment like UMG, health and wellness like dosist, and insurance like State Farm.

Orchestrating moments across the organization

Connecting the dots

At YML, we take pride in design not living in isolation. A great solution can only be great when it fits within the holistic brand experience. When designing for moments, we take a service design approach to align internal services like roles, processes, and workflows including all physical and digital touchpoints.

It’s important to start with defining who the consumer of the service is - and we intentionally say consumer because Product Moments can apply externally (customers) or internally (employees) - and knowing the moments that matter to them. Then we define how the different parts of your organization can work together to support those moments. 

We treat products like theater: there’s a front stage with actors performing for an audience. Behind the curtain are backstage coordinators that support the actors in putting on the show. Those backstage do just as much to shape the final performance as those in front.

Your customers, employees, technology, products, processes and operations, your business model... all these relationships formulate who you are as an organization. The backstage employees, technologies, and processes help to power the touchpoints, that are then delivered by frontend technology and frontline employees into moments that the customer experiences.

All the pieces play their part in making the experience come to life.
The benefit of using a service design approach is that it guides decision making for the whole organization. Teams are able to see why their work matters and what value it brings to both the customer and the business. It brings to light the careful orchestration of all touchpoints, and the moments they’re designed to support. 

Creating a Product Moment Map

The details of a Product Moment Map

Moment Maps are like short fiction stories about how you want your customer to experience your brand. The only difference is that these stories are meant to become real.

How do customers become aware of you? What happens in their life where they will need you? How will they use a product or service you offer? Start by writing the story of each moment: what led to it, what’s happening during, and what happens after the moment has passed. 

Next, define the type of touchpoints that you’re providing in those moments. Is it an employee? A checkout screen? Maybe a kiosk? They usually fall into one of five categories:

  1. People, including employees and other customers, encountered while using or delivering the product.
  2. Place, such as the physical space or the virtual environment through which the product is delivered
  3. Props, such as the objects (Digital & Physical) used while experiencing the product 
  4. Partners, including other businesses or entities that help to produce or enhance the product
  5. Processes, such as the workflows and rituals that are used to produce the product (this relates the people, place, props, and partners)

Because you know your customers and your business so well, next describe the work that needs to be done, both in front and back of stage, to deliver on those touchpoints.

An employee that reaches out during an accident, a recommendation engine to suggest a product on a site, or a 3D map of a store for customers to browse -  these resources and processes either exist in your business now, or don’t and need to be built. You can even prioritize the moments based on the potential impact they might have on your business. Now you have a roadmap.

Finally, define the outcomes that you expect to see when fiction becomes fact. You can call them “metrics”, but they could include more than traditional KPIs. Use this space to talk about both business outcomes and the impact on your customer.

By following this process, you start to see customer centricity take shape: you’re crafting a business plan based on moments that define a customer’s experience with you, and everyone in your organization can see how their work supports your customer. 

How it’s different from a journey map

We know there’s other cartographers out there, making journey maps, experience maps, and the like.

While useful as a research deliverable or in compliment to a persona, we’ve found that limiting the map to thoughts, feelings, and emotions doesn’t result in the action needed to deliver on the moment. That's why many end up as stale posters on the wall or even rolled up in the corner collecting dust. Instead, we see a journey map as the precursor to a Product Moment Map. 

The value of Product Moment Mapping

  • Alignment - Share alignment across the product teams, leadership and the organization
  • Execution - Visibility in prioritization and the ability to make decisions  faster as teams.
  • Scale - Brings visibility on how a product moment can scale across the product teams and organizations
  • Organization - Easily see how the product teams needs to be aligned to execute the work and what product moments need to be road mapped into features. 
  • Cost reduction - Increased visibility and speed to marketing due to product team alignments 
  • Reduced Churn - Due to the team alignment less time spent on what should be done and how it should be done. 
  • Faster to market - Faster decisions and alignment creating with product teams lead to faster prototypes and faster to market with quicker feedback cycles to narrow the focus on product moments.

How to start Product Moment Mapping? 

The best way to design for product moments is to immerse yourself in the process, and YML is here to help.

Reach out to us and let’s make something that matters for your customers and your business.

Additionally, take a look at tangible examples of how designing for product moments is already driving impact for category leading brands like State Farm, dosist, and Universal Music Group

By Mauricio Bucardo, August 21st

I’m a user experience designer at YML and am passionate about motion graphics and photography. I love to prototype, build and bring emotion and delight to digital experiences. I had the pleasure of collaborating with the Cafe X team to animate, prototype and deliver their in-app animations.

Cafe X is a barista robot with an automated system that looks to ensure accuracy, efficiency and eliminate all human error while keeping the quality craft of your beverages.

Around a year ago, YML collaborated with their team to create a set of animated illustrations within the Cafe X App:

The goal was to echo a sense of humanity, cheerfulness, and humor throughout crucial and memorable moments of the App.

After exploring different styles, we landed on a set of cheerful illustrations with bright colors, along with bouncy and lively animation to contrast the minimal and industrial feel of the App.

Enabling Location

Most Apps forget what a nuisance it is to be bombarded with permission requests without context. This was the first crucial moment of the experience since it’s critical for the system to know the nearest kiosk available.

Having a looping animation here alongside the conversational text was designed to help and educate the user, and encouragethem to enable it.

Order Customization

Order customization is an emotional moment in the experience. The user gets to be creative and make their beverage perfect. So this is where — in my opinion — the most humorous animations occurs.

We decided to have a cow mascot that would react to the user milk type selection. We wanted to make this character feel alive, emotional and responsive to the user’s input, so even when he was not selected, he would hide and take a peek behind the milk carton.

The Shopping Cart

Another key moment in the App was access to the cart.

We all know that abandoned carts are common in e-commerce experiences. So having an animated icon in sync with the card modal was used to bring attention and emphasis to complete this user flow.

Waiting for Your Order

Finally, the last key moment of the experience was the waiting time between an order being placed and being completed. The possible lack of physical presence of the user could create anxiety due to the uncertainty of their order status.

So we created three animations for each of the steps: Order queuednow making and now ready. Each one transitioning to the next one as the order progresses in real-time.

Final Thoughts

Thoughtful micro-interactions and animations are an indication of awareness for your user’s emotions. That’s why they’ve seen a peak in the design community in recent years. At YML, we believe discreet, yet delightful, design moments like these drive positive feelings about a brand, and often influence user’s actions.

We continue to partner with the Cafe X team and are eager to continue helping them evolve in a dynamic brand.

Published on August 12th, 2019

Who are you, and what do you do?

I’m Caroline!

UX designer extraordinaire, team leader, collaborative ally, and creative strategist. I’ve been with Y Media Labs for 5+ years across two office locations. Currently I’m swatting at mosquitos in Atlanta.

Having one foot in design and one foot in leadership is the best place I’ve been in my career so far. There’s nothing more rewarding than coaching designers toward having their “aha” moments with big hairy problems. Or really, just opening their eyes to the possibilities out there as they grow in their own careers.

In my time with YML I’ve worked on core digital products for key clients including State FarmApple, HCA, StubHubForever21, AutoZone, and many more.

Where are you from?

I was born and raised in Atlanta; a southern girl from a family of five women (way to go, dad 👏).

I moved to San Francisco in 2010 where I lived for 7+ years. San Francisco is where I finished school, met and married my husband, fell in love with pork buns, and first started working with Y Media Labs.

When YML opened a new office location in my hometown I jumped at the chance to be back with my family, dragging my husband along with me (bless his heart he can’t stand the humidity). It has been an amazing opportunity to have a role in the growth of our Atlanta office from the bottom up.

Tell us a little about your background.

My background is in print and graphics, like so many others in our field.

What I love about print is that something so ephemeral can make you feel so much; the smell of a book, the excitement of opening a well-designed package, the satisfaction at the perfect stock of a business card — it creates a moment.

I challenged myself when I transitioned into digital with YML to create that same quality experience, but through a device in someone’s pocket. I am inspired by the intersection of physical and digital. I worked for a short period of time creating motion graphics for trade fairs, kickstarting my love of interaction design.

Interaction plays a critical role in user experience and can breathe life into the work we do; contributing to understanding through context, and sprinkling in surprise and delight.

Why did you choose to come to Y Media Labs?

At this point it’s less about why I came and more about why I’ve stayed.

Working with YML gives me the opportunity to touch everything from drones, wine, and music to banking, healthcare, and insurance.

Our fierce leader and badass office director, Marcela, has stopped at nothing to empower the women (and men) around her. We are a team of dreamers and doers keeping collaboration and critique at the heart of our process. We value honesty and integrity.

Collectively we’re weirdos with hobbies/passions inspiring our work that range from muddy to hoppy, and our culture is definitely one to be envied.

What about this industry are you most passionate about?

There’s so much to love about what we do.

We tell stories. We decide when and how people interact with technology in order for them to have the best possible experience. We leverage that same technology to facilitate inclusivity.

I’m humbled by the opportunity to be at the forefront of design and innovation. We’re in the unique position to fully immerse ourselves in a variety of other industries in order to inspire change from the inside out.

What are some other companies you admire?

  • Glossier (Emily Weiss) for a loyal dedication to what customers want.
  • Wendy’s for a supremely sassy social media personality.
  • Spanx (Sara Blakely) for being bold in the face of board rooms full of men telling her ‘no’ (and for making the LBD a possibility for everyone).

What are your favorite spots to eat in Atlanta?

Prison Tacos (or El Progreso) where Boulevard runs into the State Penitentiary is our favorite place for pastor. We order nothing else, just 3 pastor tacos (each). They’re to die for. We probably eat tacos way too many times a week… but really, is there such a thing?

There’s also a new place called El Tesoro that’s perfect for brunch or lunch. I hesitate to even mention it in hopes that the line won’t get too long. It’s that good. We love the tamales and the tostada.

How do you spend your spare time?

Turns out, I’m obsessed with pottery. And even better, I’m not that bad at it! I’ve been throwing pots on the wheel for the last year or so. I spend most of my spare time in my studio throwing, trimming, and glazing.

Other than that, my husband and I love to go backpacking (covered in deet), we have a vegetable garden (anything you can put on a taco), we both game (Zelda or ToeJam and Earl), and I quite often find myself with my nose in a Brandon Sanderson book that I can’t put down (sci-fi and fantasy only, please).

+

Join Our Newsletter