Design Systems - Part One - How we got here

Design Systems - How we got here: Brief History of the need for Design Systems and chapter pone of our ebook.

Published by J.P. Holecka on 08.05.2018

The path to design systems has been a long one. There has been a need for quite some time, but like many innovations, it takes an alignment of ideas, technologies, and vision to connect them in a way that will work. We will explore that path here to give you some context about how we got to the present day need for design systems. Know the story already? Jump to part two.

The Beginning of the Internet

The Internet was born in 1969 with email following soon after that, but it was not until the late 1990's that the Internet became common outside of colleges and universities. This was fueled by the efforts of Sir Tim Berners-Lee, whom created the tools that became the World Wide Web in 1991.

Figure 1.1

By 1995, the idea of buying everything you need online, from books to groceries to everything else imaginable, was no longer science fiction. Over the next ten years, society experienced some massive transformations with the birth of eCommerce and the DotCom Boom. During this time, companies jumped on the Web as the new hot marketing trend. It was going to make everything in marketing easier and better. When the DotCom Bust hit, it looked like all the promise about the new online world might have been all hype. What the DotCom Bust did was weed out bad ideas and allow others such as Amazon, eBay, PayPal, and others to flourish. While online purchasing did not take-off as quickly as predicted by many organizations, by 2005, it was becoming more commonplace.

As more users flocked to the Internet for online purchasing, companies began to reinvest in online innovation. Then something revolutionary occurred in 2007 — Apple hit us with the iPhone.

As more users flocked to the Internet for online purchasing, companies began to reinvest in online innovation. Then something revolutionary occurred in 2007 — Apple hit us with the iPhone.

The (Slow) Transition to a Cross-Channel Experience

On June 29, 2007, Steve Jobs unveiled the iPhone to the world. The iPhone was not the first Internet-connected mobile device. Lots of other devices could connect to and browse the Internet. But the iPhone was different: all touch screen, no keyboard, plus an early collection of apps that made the iPhone simply amazing.

Today all phones look and behave like iPhones. And as iPhones became popular, companies realized they needed to develop “mobile-friendly” websites to cater to this new, odd demographic of people who liked to use their phones to visit websites. There was just one problem. Most of those eCommerce sites did not work well on mobile devices (if at all). Before that would be fixed, the next revolution would hit: Apps.

In 2008, the Apple App Store launched with 500 apps, but by 2017 there were over 2.1 million apps in the App Store. Google’s version for Android has even more apps, and it’s safe to say that there is virtually an app for everything. Indeed, Apps and app stores have changed how we live, work, and play dramatically.

2007-2015

The App Revolution moved desktop productivity to mobile users and bridged the gap between desktop and mobile experiences for many companies. For a time, almost every company had an app, was building an app, or planning to build an app. When it sunk in that not every company needed an app, and that making, updating, and improving mobile apps — especially if you were developing Apple iOS and Google Android apps — was no picnic, companies started to abandon their apps.

The next major change to our digital world came, again from Apple, in 2010. Just two years after the launch of the App Store came the iPad. Within a year, it was not enough to have a desktop and mobile friendly website, you needed one for tablets too. The solution was a new kind of website and design style: Responsive Design.

Responsive Design Responsive Design involves creating a website that adapts to the screen size of the device viewing it. While there were responsively designed websites as early as 2001, it was not until 2011-12 that the first best practices and coding standards were established — found in the book Responsive Web Design by Ethan Marcotte. and another web revolution began. Responsive websites eliminated the need for dedicated mobile websites, which sometimes had to be updated separately from primary websites. With this new approach, one design would work for desktops, laptops, tablets, and phones. Responsive design helped unify sites and content. Websites had the ability similar on all devices, creating the opportunity to provide a seamless cross-channel user experience, but were also easier to maintain as well.

Responsive websites eliminated the need for dedicated mobile websites, which sometimes had to be updated separately from primary websites. With this new approach, one design would work for desktops, laptops, tablets, and phones. Responsive design helped unify sites and content. Websites had the ability to operate in similar manner on all devices, creating the opportunity to provide a seamless cross-channel user experience, but were also easier to maintain.

The need to “make our website responsive” forced companies to look at the experience the same user had while using different devices. Jarring differences between mobile, desktop, and tablets frustrated users. “Why can’t I do this on my tablet or my phone!” was a frequent complaint. Users were becoming less patient with companies lagging behind, and with good reason - within a few years of “The Year of Responsive Design”, mobile users outnumbered desktop users online. Realizing that customers wanted simple and consistent experiences regardless of device was the catalyst for a new era: design systems.

The Case for Design Systems

It was responsive web design that sparked interest in design systems, precisely because companies began to realize how disjointed and confusing their systems were. Here is an illustration of the kind of confusion we as organizations have come to realize now. Many companies build their website, especially eCommerce websites, in their own silo. Mobile web design and apps, the same. Often the three systems are barely connected, much less similar user interfaces. As customers, we’ve been living with disjointed experiences across real world experiences, apps and platforms, like this example which is still all too common today:

Figure 1.4

Say you buy something online from a company that also sells in brick and mortar stores. You receive your order, but there is something wrong, and you need to return it. However, the people in the physical store do not know how to handle online returns even though online, it says that you can return online purchases to any physical store. Or worse, they claim you cannot return the item to that store, and you have to ship that item back. This is a terrible experience that more often than not, results in a lost customer. There is a lot of competition out there to buy things online. If a company’s systems are not integrated, it is only a matter of time before customer frustration and attrition begins to become a problem.

This is where design systems can help. When prospects, customers and staff become frustrated because experiences are disjointed — your brand loses.

The desire for simpler, consistent experiences across all consumer and team member touchpoints are now the expected. Your brand, whether you like it or not, is being compared to the experiences designed by the big 5: Apple, Google, Amazon, Microsoft, and Netflix.

Brands have come to realize that winning the heart of the customer is no longer solely the role of marketing and advertising. Crafting a wonderful brand story may get customers to the door, but building a beautiful customer experience will get them buying more, returning more often, and evangelizing your brand to friends and family.

Drop us a note

Better digital experiences produce better outcomes. At POWERSHiFTER, we deliver brilliant digital solutions that put people first. Partner with us on your next digital project.

Send us a note or a call us at +1 (604) 227-9952.

Send