Who are you, and what do you do at YML?

Hello! I’m Sunil, Director of Engineering at YML, and I can't deny that I am a geek at heart.  My role demands that I drive the best engineering solutions for our customers and the best support for our top-notch engineering teams.

What’s the craziest thing you’ve ever built?

The entrepreneurial spirit in me is always active and I’m always tinkering and building things. From a novel pet-store to an IoT child tracker to building a mobile app that takes a picture of a car's damage, I’ve tried it all. I want to keep the programmer in me active. 

Before I got my hand on a computer, I also used to build model airplanes.

SE5A - The Vintage Model Company

Where are you from and where do you live now?

I was born and brought up in the Silicon Valley of India, Bengaluru. While a large part of my career was spent working (and lots of travel!) in the US, I now live in Bengaluru. There’s so much happening on the tech front here that it’s infectious. Bengaluru brings out that innate entrepreneurial and innovation spirit in anyone that lives here.

Apart from being the tech capital of India, it’s also is the brewery capital of India! Who wouldn’t want to live here?

Tell us a little about your background.

I was born a computer engineer! My first tryst with programming was with BASIC back when most of my peers hadn’t seen a computer. I was hooked on programming and it’s still the thing I do to clear out my mind. A large part of my early career was devoted to building solutions in the Biometrics space. I’ve also spent the recent years building products and solutions in the Fintech and InsureTech space.

Outside of work, I have a knack for finding great places to travel to and great places to stay. I’d say travel has played a large part in shaping my personality.

Why did you choose to come to YML?

I am excited to be part of YML for the sheer promise it holds of a great career for anyone who’s part of its journey. I am amazed at the incredible work we do and I’m super excited to be part of it. We don’t just talk design and technology here, we go ahead and build it!

What about this industry are you most passionate about?

I feel it’s the people and minds that are shaping our lives with technology and the privilege to be part of that. To be able to create something that alters and changes people’s lives is just unbelievable and I feel lucky to be doing what I’m doing. I’m a Sci-Fi geek and to be able to experience mind-bending stuff that are coming into our lives is just fascinating.

What are some other companies you admire?

Marvel Studios.. period! Black Panther is definitely my favorite.

The Passionate Politics of “Black Panther” | The New Yorker

I also admire any company that stretches the imagination and are disruptors. I admire anything from Apple to SpaceX to Reliance Jio, who are making tech accessible, as well as pushing the boundaries of what humans can do and achieve.

How do you spend your spare time?

While we're not working (or not binge watching on Netflix), my wife, Ranjitha, and I are mostly traveling. We love seeing new places.  If we’re not traveling, we’re likely pondering over our next destination. We always have a travel bag ready to go! I also love playing racket sports and running.

June 1, 2020

We stand with the black community and against the many faces of systemic racism.

For anyone that is terrorized by this abuse of power and gross injustice, we hear you and we are here for you. 

At its core, we are looking at our country’s most important design challenge.

The murders of George Floyd, Ahmaud Arbery, Tony McDade, Breonna Taylor and countless others are incredibly painful signs of an unjust system. We feel the weight and responsibility of how much work we have to do to fight institutionalized racism to build a stronger, safer society for everyone.

And we won’t relent. We know we may not get it right the first time. But we know how to design, iterate, experiment, strategize, and ultimately how to introduce change that makes a lasting impact.

YML's mission for the last 11 years has been to build experiences that make a lasting impact for people everywhere. But 'to make a lasting impact' reads differently now — it makes us feel different than ever before. We must rethink how we make that impact going forward for our team, our clients, and for the communities we serve.

Here's how we're responding:

  • Donating to Black Girls Code and Color of Change’s campaigns for recent injustices
  • Supporting our team's education on racial justice. 
  • Ensuring that we continue to hire with diversity and inclusion in mind.
  • Establishing a set of guidelines to pursue client partnerships with active diversity, inclusion, social justice and environmental sustainability efforts.

We know our response is one of many and may not solve everything. But that is what design is about — using the tools we have to solve a problem. 

YML built Credit Karma's foundational digital product.

A start-up known for providing free credit scores, Credit Karma has officially been acquired by Intuit, the software and financial firm that also owns financial products like TurboTax, QuickBooks and Mint.

The deal is worth just over $7 billion, and highlights the value of the financial data of ordinary Americans. Credit Karma grew to be worth billions of dollars by selling credit card offers to its customers after building their credit profiles.

Over the last decade, Intuit has been building its brand around helping businesses and consumers manage their financial data, which is why this acquisition is in many ways a natural fit.

Check out the Credit Karma App, which has a 4.9 rating and 1.8M reviews.

"Credit Karma has been at the leading edge of a large group of start-ups in the financial technology sector over the last decade," according to The New York Times. "It says its customers include a third of all Americans who have a credit profile."

Credit Karma has over 1,100 employees and is based in San Francisco. The volatility of start-up I.P.O.'s — from the rocky I.P.O. of Uber to the failure of WeWork’s planned offering — created a tense environment for budding start-ups. The Credit Karma-Intuit successful acquisition comes on the heels of Plaid's acquisition, another successful fintech start-up, which sold itself to Visa for $5.3 billion rather than stage an I.P.O.

Sheel Mohnot, a venture capitalist who focuses on fintech start-ups, shared with The New York Times that after this recent acquisition, Intuit's portfolio is so robust that it could become a sort of Facebook for financial services.

“They would have all of this rich information, and they would basically be an ad network,” he said. “You’re almost forced to advertise with them.”

In the news

"Intuit confirms that it's buying Credit Karma for $7.1 billion in cash and stock"
Tech Crunch

"Intuit Is Expected to Buy Credit Karma in $7 Billion Deal"
The New York Times

"Why is Intuit's acquisition of Credit Karma a big deal?"
Fintech Magazine

"Here are the big winners of Intuit's $7 billion Credit Karma Acquisition"
Silicon Valley Business Journal

"Credit Karma-Intuit deal: What a $7.1B combination means for investors – and for you"
USA Today

Reach out to YML with any questions about the work or if you have a project in mind.

The awards were earned for mobile apps and websites across banking and fintech, health, insurance and music.

May 19, 2020

Out of the 13,000 entries from 50 states and over 70 countries in this year's Webbys, YML in partnership with our clients is proud to have won three Webbys, and earned one nomination and one honor.

The Webbys are the leading international awards honoring excellence on the Internet, and YML’s work with three different clients — State Farm, Universal Music Group, and dosist — was recognized for four nominations.

State Farm

This image has an empty alt attribute; its file name is sf-awards-shot-810x1080.png

State Farm won three awards across the Apps, Mobile and Voice category (Financial Services/Banking, Service/Utility app). YML has a been a partner to State Farm for product design and strategy for the last four years and been recognized for previous Webbys in the past. You can see more work here.

Universal Music Group

Universal Music Group was nominated in the category of Apps, Mobile and Voice for the Best User Interface Award.  Universal partnered with YML to leverage the new data-rich landscape of streaming services to serve both fans and artists, in turn, giving Universal Music Group the continued edge over competitors.  Combining Universal’s depth of knowledge in the music industry and YML’s product design expertise allowed for a breakthrough solution that wouldn’t have otherwise been possible. You can see more work here

dosist

This image has an empty alt attribute; its file name is finder-frame.jpg

dosist was recognized as an Honoree in the category of Websites for Health. YML collaborated with dosist to redesign and develop the brand’s website in a market that is still mostly undefined, culturally taboo, and challenges inconsistent legalities. You can see more work here.

The YML team is ecstatic for our client partners, and grateful to be recognized among the array of phenomenal work this year. 

In the news

"Universal Music Artists — Welcome to the future of data-informed music is a Webby Nominee in Apps, Mobile and Voice Best User Interface."
Official Listing

"State Farm — Here to make life go right is a Webby Nominee in Apps, Mobile and Voice: Best Service/Utility."
Official Listing

"State Farm — Here to make life go right is a Webby Nominee in Apps, Mobile and Voice: Financial Services/Banking."
Official Listing

"dosist — Building a digital flagship for the hottest startup of 2019 is a Webby Honoree in Websites: Health."
Official Listing

Reach out to YML with any questions about the work or if you have a project in mind.

Never take yourself too seriously, build awesome products and enjoy the moment. 

by Pablo Arce, former Senior Director of Project and Program Management, YML

Periods of change are certainly interesting.  They provide an opportunity to reflect on the past as one inevitably builds a mental image of what the impending future may look like.  A very significant change is about to happen in my life: after more than six years with YML, I'm moving on join my new team at Google (Google Cloud AI & Industry Solutions).

I'm saddened to leave the place that has been a home for so long.  Six years in the very fast-moving field of technology (a field I feel lucky to be a part of) feels like a very long time. I am certainly proud of what I have been able to help YML achieve during my tenure here and, as I announced my move to my coworkers, reports, and management, it felt good to have a consistent feedback of appreciation for my contributions.

I have deeply cared about YML, and will continue to do so for a very long time – even if not from within the building that now proudly displays the company name on its exterior. The combination of the impending change, the conversations with my soon-to-be ex-colleagues, and the many feelings surrounding this moment in life drove me to put some thought into what it is that I appreciated so much about my time at YML, and what lessons and new tools I will bring with me into my new position.  Let me try to summarize some of the conclusions running through my COVID-haired head.  

Focus on the user, but tune your brain to IMPACT

User-centric design has almost become a table-stakes approach to designing applications and user interfaces. However, that doesn’t mean it’s an easy thing to do – particularly when the team needs to implement, maintain, and update said application for years.

The idea of placing the user at the center of all work while keeping the future of the application in mind has become something every team member at YML keeps at the forefront in everything we do. An even more defining characteristic of our approach is balancing this user-centricity with the business impact that any decision related to the application should address. If I walk away with anything from YML, it's that features and applications should be created to solve a business problem, a need that matters to the user and to the company (our client). YML has learned to maximize impact to both the end user and client.

Further proof of our conviction is the fact that we often “put our money where our mouth is” – by offering our clients an impact-based compensation option so that when our work proves successful — we all win. Of course, this requires understanding the tracking and measurement post-release – which is another important skill that I was able to hone at YML. I firmly believe that this combination of looking at impacting both the user and the business will be present in my approach to any future project. 

Diversity of Work

Through strong work, YML forged a strong name, which in turn attracted more and bigger clients, from diverse backgrounds and verticals. In any given week I could be working on designing a user interface for a multi-screen robotic surgery platform (mind-boggling technology and opportunity coming in 2021!), developing a banking application that needed top-notch security measures, thinking about how to minimize friction for professionals buying the tools of their trade online while minimizing disruption to their operation, or how to introduce the quickest possible way to order a pizza for dinner.

Over my tenure at YML, I have been involved with over 55 different projects, and each one of them has been unique and different.  This diversity, and the frequently compressed timeframe of the projects, has allowed me to strengthen my “adaptation” brain muscle – allowing me to very quickly build a deep understanding of our clients’ businesses, come up to speed with the problem they are trying to address, and think about how to solve it. This skill and training will undoubtedly continue to be an invaluable asset in my professional life. I love learning, and YML has provided me with continuous learning through project diversity. 

Cross-discipline Collaboration

During my time at YML, we matured in our approach to creating solutions from a “design then build” linear pattern, to a research/design/develop cycle — with iteration built in throughout. That fostered efficient collaboration and communication between Product, Design, Engineering, and Strategy – all driven by Project Management, which I feel strongly is the critical pillar of all YML work.

Collaboration through effective and timely communication is, I believe, the key to project success. At YML we’ve been able to build effective interdisciplinary bridges that help ensure that real collaboration happens – and more importantly I have understood how to help ensure this works in a repeatable way through different projects with different clients – even when we’ve had to adapt slightly to satisfy the client’s specific needs.

Furthermore, this collaboration has often spanned the world, sometimes leveraging a team located in three or four of our global locations – thousands of miles away, with up to 13 hour time-differences, and with significant cultural contrasts. None of these factors have been an impediment to great output and full dedication from the teams. Solving problems by leveraging a global workforce is exactly where I think YML shines – and the way 21st century business will be increasingly required to operate. This ability to collaborate remotely was put to the test as the 2020 Covid-19 pandemic hit and we were required to put it to practice to the extreme – with every single team member working remotely.  YML didn’t miss a beat, because the systems and processes were already in place. 

Team Leadership

I entered YML as a Sr. Project Manager, and I am leaving as Sr. Director of Project & Program Management (say that title 5 times fast!). During that time, my leadership skills were developed much further than they previously had, and I was happy to meet every challenge I encountered, which lead to my continuous growth and learning.

My experience also allowed me to influence and grow the Project Management department, developing a hiring process that has resulted in a great team of committed professionals: hungry for growth and learning, providing results and ensuring the work moves ahead efficiently, and a team that gets along fantastically well, helping one-another and providing support when needed. I looked forward to 1 on 1s with my reports each week because I sincerely enjoy conversations with them: whether we are trying to solve a problem together, or talking about life outside the office walls, there is always a lens of learning and mutual respect that I sincerely appreciate.

Being able to provide leadership to this team has honestly been an honor and a learning experience that I will always cherish and continue to build on.  

Understanding the Management POV

Over the last 3+ years, I’ve had the privilege to be part of the YML leadership and management team. This opportunity has given me a new lens through which to look at how a company operates and the frequently tough choices management needs to make.  I have huge trust in the rest of the YML leadership team and firmly believe that they have the best intentions and abilities to continue to make YML grow and thrive.

I expect management to look very different at a very large company like Google, however, having this additional experience of how a company operates from the top will definitely help me better understand how certain decisions are reached and how the pieces fit together.

The People

I am definitely someone who cares and appreciates personal relationships. Maybe it’s my Spanish Mediterranean blood and upbringing, maybe it’s being the youngest of four siblings and growing up looking at so many people around me, understanding how things worked from each of their angles, trying to outwit my older brothers…

Whatever the cause, the consequence is I care about people – and YML definitely has a strong cast of characters. A talented and diverse team that deeply cares about what they do, and continuously wants to push for better. The people were definitely my #1 reason to stay at YML all these years.

I will confess that I am very excited to join Google.  It has been the company at the top of my list for over 15 years, and I am really happy they consider me a good match.  But I also know that a big part of why they do think I will be valuable to their team comes from everything I have learned at YML, for which I will forever be thankful for.  

It’s been a sincerely great experience to be part of this company.  Leaving it is like moving away from your hometown, leaving friends and familiar places behind. You physically change locations, but a significant part of what is past will always be a part of you, and in this case, YML will always have a place in my heart.  

Thank you YML.  I can’t wait to see where you go from here.

Nominations earned for mobile apps and websites across finance, health, insurance and music.

April 29, 2020

The Webbys are the leading international awards honoring excellence on the Internet, and today YML’s work with three different clients — State Farm, Universal Music Group, and dosist — was recognized for four nominations.  In this year’s competition there were 13,000 entries from 50 states and over 70 countries. 

State Farm’s mobile app has been nominated in the category of Apps, Mobile and Voice for two awards: Financial Services/Banking, and as a Service/Utility app. YML has a been a partner to State Farm for product design and strategy for the last four years and been recognized for previous Webbys in the past. You can see more work here.

Universal Music Group has been nominated in the category of Apps, Mobile and Voice for the Best User Interface Award.  Universal partnered with YML to leverage the new data-rich landscape of streaming services to serve both fans and artists, in turn, giving Universal Music Group the continued edge over competitors.  Combining Universal’s depth of knowledge in the music industry and YML’s product design expertise allowed for a breakthrough solution that wouldn’t have otherwise been possible. You can see more work here

dosist was recognized as an Honoree in the category of Websites for Health. YML collaborated with dosist to redesign and develop the brand’s website in a market that is still mostly undefined, culturally taboo, and challenges inconsistent legalities. You can see more work here.

The YML team is ecstatic for our client partners, and grateful to be recognized among the array of phenomenal work this year. 

In the news

"Universal Music Artists — Welcome to the future of data-informed music is a Webby Nominee in Apps, Mobile and Voice Best User Interface."
Official Listing

"State Farm — Here to make life go right is a Webby Nominee in Apps, Mobile and Voice: Best Service/Utility."
Official Listing

"State Farm — Here to make life go right is a Webby Nominee in Apps, Mobile and Voice: Financial Services/Banking."
Official Listing

"dosist — Building a digital flagship for the hottest startup of 2019 is a Webby Honoree in Websites: Health."
Official Listing

Reach out to YML with any questions about the work or if you have a project in mind.

Who are you, and what do you do?

I am a Program Manager with a passion for delivery excellence.  

Day to day I work to ensure our clients experience the same amount of surprise and delight in their account management as they do in our work. Outside of looking at overall strategic portfolio opportunities, you’ll find me in the trenches with the project teams making sure that they not only feel supported, but that they feel I continue to give my all to set them up for success. 

Since joining YML, I ran the State Farm portfolio for most of 2018-19, launched dosist in fall '19, and since then have been devoted to working alongside a major healthcare provider. 

See the dosist work here.

Outside of work I am a wife, dog mom, travel enthusiast, painter, lover of all things related to water, and an avid concert goer.

Where are you from?

Born and raised in Atlanta, Georgia, I spent my childhood at our family lakehouse. (We take fishing very seriously!) 

While I spent my younger days traveling the US national parks with my father, and my 20’s backpacking the world and living with a family in Ecuador, this January I made the leap with my husband and packed up for our big move to Silicon Valley to be here at YML HQ.   

Tell us a little about your background.

I’ve always had an entrepreneurial spirit and a passion to help businesses grow to the next level. I worked a series of service based jobs to get through college, but couldn’t wait for more. 

In my early 20’s I spent time in the education industry while I worked on websites on the side. After college I joined a consulting firm which continued to grow my skills in the technology space. 

I left consulting to focus on driving forward technical portfolios & strategic projects for product based companies which was fun and exciting. Each time feeling rewarded seeing the success of new features and products being launched. When I decided to return to client work, I knew I’d be able to bring that knowledge with me. 

Why did you choose to come to YML?

I loved the passion that came from the leadership team and knew this was an agency where the motto “Make a lasting impact” truly resonated with what I wanted to bring to the table. 

What about this industry are you most passionate about?

I am passionate about artificial intelligence. I love exploring the endless possibilities of its application and believe that it will shape the future of how we interact in almost every capacity of our lives. 

What are some other companies you admire?

As a hometown girl, I’ve always been impressed by the customer experience at Delta. They not only make it a point to give back to the community, but are known worldwide for their amazing experience. Naturally, American Express comes to mind as well. 

However, I am most impressed with many of today's startups because in a world where it “seems like all of the new business ideas are exhausted”, many are still bringing groundbreaking ideas to the table through technology. Robinhood and Truebill are a few examples I love. 

What are you favorite spots to eat in San Francisco?

Kitchen Story Tells a Familiar Yet Refreshing Tale | East Bay Express
Kitchen Story's 'Millionaire's Bacon' is no joke!'

I’ve just moved here so I still have a list of places to try, but I cannot stop myself from visiting “Kitchen Story.” It’s an amazing brunch spot with mouthwatering “Millionaire’s Bacon.” 

How do you spend your spare time?

When I’m not fiddling with side projects in technology, you can find me on the water in a kayak or boat, watching live music (I’ve seen some bands an embarrassingly high number of times) or packing my backpack to explore a new country. 

Change is constant with true transformation. Be sure your team is ready to learn and adapt. 

Stephanie Wiseman is fortunate to see dozens of requests for proposals in her inbox every week. As YML's VP of Business Development, Stephanie has seen them arrive in a variety of formats and lengths, but the gist is always the same: “Can you help us solve this problem? Tell us why you think you can do it.”

The age-old debate about how RFPs should be a thing of the past is it's own worthy discussion, but for now, she wants to focus on a recent trend: Brands seeking digital transformation that go through an entire agency selection process and then are unable to kick things off.

From Stephanie's point of view, it's a bummer for all parties involved—including agency folks who love what we do and get (very) excited about tackling your toughest problems. So it’s vitally important to ask a few questions before pressing “send” on that RFP email.

She wrote the following article for Ad Age, outlining the five things to consider before sending out an RFP:

  1. What is the single, simple and measurable goal we are trying to achieve?
  2. Is everyone on the RFP bus?
  3. Do we have the people we need to do this right?
  4. Can we afford this?
  5. Are we ready for indefinite change?

At the heart of her story is the idea that launching a new product is not the end of a process, but the beginning. With true transformation, change will be your constant. You’ll experiment with features, segments and variables and get real-time feedback from customers. It's critical that you're sure that you and your team are ready to learn and quickly adapt. 

Read the full story on Ad Age.

Stephanie Wiseman is the VP of Business Development at YML. She's a former developer turned business development professional with over 12 years of experience in digital transformation, product design and development. Stephanie has worked at top agencies including Work & Co, BBDO, and LBiDigitas, with clients including Louis Vuitton, CitiBank, Ralph Lauren, Cartier, Columbia Sportswear, Fox Sports and Bloomingdales/Macy’s. See more.

Even amid chaos, there's a chance for opportunity

Calm seas never made a great sailor, and in March 2009, Ashish Toshniwal and Sumit Mehra unintentionally broached into a tsunami.

It was the bottom of the recession, and the two engineers from Purdue University decided it was an ideal time to start a company. Turns out, it was. Remember, this was the great financial recession when no one, not even the most experienced CEOs, could predict the future of business.

Sound familiar?

With the stock market tanking, there was one very small silver lining: Ashish and Sumit didn’t have much savings to lose. What they did have was a lot of faith in their vision. As tech enthusiasts, they envisioned a digitally connected world where consumers not only wanted but required information on the go and on-demand.

Ashish and Sumit's story is part bad luck, part American dream, and part perseverance. They'd go on to be denied funding 21 times in a row, despite being in the heart of Silicon Valley with, what they believed, was a powerful, progressive vision.

11 years later, that vision is YML — a digital product and design agency with six offices around the world and 300 employees, building the digital experiences for Fortune 500 brands and hyper-growth startups alike.

Ashish looks back in this story for Adweek on how he and the YML team persevered, sharing seven tips for building a business during a recession:

  1. Anticipate where the market is going
  2. Take a risk on your beliefs
  3. Live by trial and error
  4. Be people first
  5. Cherish clients
  6. Great work means more work means more great work
  7. Don't let fear rule

Read the full story in Adweek

Ashish Toshniwal, CEO and Co-founder at YML, is an expert in mobile strategy, product design, and technology. Ashish has been featured on CNBC, ABC News, Forbes, and Adweek as a leader in technology, and has his very own TED talk about finding purpose in your work. See more.

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

Join Our Newsletter