Collective #542

Inspirational Website of the Week: Igor Mahr A web design full of lively motion with a truly unique feel. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Easily Secure and Manage All Your Apple Devices in Minutes Jamf Now Read more

Web Accessibility In Context

dreamt up by webguru in Uncategorized | Comments Off on Web Accessibility In Context

Web Accessibility In Context

Web Accessibility In Context

Be Birchall



Haben Girma, disability rights advocate and Harvard Law’s first deafblind graduate, made the following statement in her keynote address at the AccessU digital accessibility conference last month:

“I define disability as an opportunity for innovation.”

She charmed and impressed the audience, telling us about learning sign language by touch, learning to surf, and about the keyboard-to-braille communication system that she used to take questions after her talk.

Contrast this with the perspective many of us take building apps: web accessibility is treated as an afterthought, a confusing collection of rules that the team might look into for version two. If that sounds familiar (and you’re a developer, designer or product manager), this article is for you.

I hope to shift your perspective closer to Haben Girma’s by showing how web accessibility fits into the broader areas of technology, disability, and design. We’ll see how designing for different sets of abilities leads to insight and innovation. I’ll also shed some light on how the history of browsers and HTML is intertwined with the history of assistive technology.

Assistive Technology

An accessible product is one that is usable by all, and assistive technology is a general term for devices or techniques that can aid access, typically when a disability would otherwise preclude it. For example, captions give deaf and hard of hearing people access to video, but things get more interesting when we ask what counts as a disability.

On the ‘social model’ definition of disability adopted by the World Health Organization, a disability is not an intrinsic property of an individual, but a mismatch between the individual’s abilities and environment. Whether something counts as a ‘disability’ or an ‘assistive technology’, doesn’t have such a clear boundary and is contextual.

Addressing mismatches between ability and environment has lead to not only technological innovations but also to new understandings of how humans perceive and interact with the world.

Access + Ability, a recent exhibit at the Cooper Hewitt Smithsonian design museum in New York, showcased some recent assistive technology prototypes and products. I’d come to the museum to see a large exhibit on designing for the senses, and ended up finding that this smaller exhibit offered even more insight into the senses by its focus on cross-sensory interfaces.

Seeing is done with the brain, and not with the eyes. This is the idea behind one of the items in the exhibit, Brainport, a device for those who are blind or have low vision. Your representation of your physical environment from sight is based on interpretations your brain makes from the inputs that your eyes receive.

What if your brain received the information your eyes typically receive through another sense? A camera attached to Brainport’s headset receives visual inputs which are translated into a pixel-like grid pattern of gentle shocks perceived as “bubbles” on the wearer’s tongue. Users report being able to “see” their surroundings in their mind’s eye.

The Brainport is a camera attached to the forehead connected to a rectangular device that comes in contact with the wearer’s tongue.

Brainport turns images from a camera into a pixel-like pattern of gentle electric shocks on the tongue. (Image Credit: Cooper Hewitt)(Large preview)

Soundshirt also translates inputs typically perceived by one sense to inputs that can be perceived by another. This wearable tech is a shirt with varied sound sensors and subtle vibrations corresponding to different instruments in an orchestra, enabling a tactile enjoyment of a symphony. Also on display for interpreting sound was an empathetically designed hearing aid that looks like a piece of jewelry instead of a clunky medical device.

Designing for different sets of abilities often leads to innovations that turn out to be useful for people and settings beyond their intended usage. Curb cuts, the now familiar mini ramps on the corners of sidewalks useful to anyone wheeling anything down the sidewalk, originated from disability rights activism in the ’70s to make sidewalks wheelchair accessible. Pellegrino Turri invented the early typewriter in the early 1800s to help his blind friend write legibly, and the first commercially available typewriter, the Hansen Writing Ball, was created by the principal of Copenhagen’s Royal Institute for the Deaf-Mutes.

Vint Cerf cites his hearing loss as shaping his interest in networked electronic mail and the TCP/IP protocol he co-invented. Smartphone color contrast settings for color blind people are useful for anyone trying to read a screen in bright sunlight, and have even found an unexpected use in helping people to be less addicted to their phones.

The Hansen Writing Ball has brass colored keys arranged as if on the top half of a ball, with a curved sheet of paper resting under them.

The Hansen Writing Ball was developed by the principal of Copenhagen’s Royal Institute for the Deaf-Mutes. (Image Credit: Wikimedia Commons) (Large preview)

So, designing for different sets of abilities gives us new insights into how we perceive and interact with the environment, and leads to innovations that make for a blurry boundary between assistive technology and technology generally.

With that in mind, let’s turn to the web.

Assistive Tech And The Web

The web was intended as accessible to all from the start. A quote you’ll run into a lot if you start reading about web accessibility is:

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

— Tim Berners-Lee, W3C Director and inventor of the World Wide Web

What sort of assistive technologies are available to perceive and interact with the web? You may have heard of or used a screen reader that reads out what’s on the screen. There are also braille displays for web pages, and alternative input devices like an eye tracker I got to try out at the Access + Ability exhibit.

It’s fascinating to learn that web pages are displayed in braille; the web pages we create may be represented in 3D! Braille displays are usually made of pins that are raised and lowered as they “translate” each small part of the page, much like the device I saw Haben Girma use to read audience questions after her AccessU keynote. A newer company, Blitab (named for “blind” + “tablet”), is creating a braille Android tablet that uses a liquid to alter the texture of its screen.

Haben Girma sits at a conference table and uses her braille reader.

Haben Girma uses her braille reader to have a conversation with AccessU conference participants. (Photo used with her permission.) (Large preview)

People proficient with using audio screen readers get used to faster speech and can adjust playback to an impressive rate (as well as saving battery life by turning off the screen). This makes the screen reader seem like an equally useful alternative mode of interacting with web sites, and indeed many people take advantage of audio web capabilities to dictate or hear content. An interface intended for some becomes more broadly used.

Web accessibility is about more than screen readers, however, we’ll focus on them here because — as we’ll see — screen readers are central to the technical challenges of an accessible web.

Recommended reading: Designing For Accessibility And Inclusion by Steven Lambert

Technical Challenges And Early Approaches

Imagine you had to design a screen reader. If you’re like me before I learned more about assistive tech, you might start by imagining an audiobook version of a web page, thinking your task is to automate reading the words on the page. But look at this page. Notice how much you use visual cues from layout and design to tell you what its parts are for how to interact with them.

  • How would your screen reader know when the text on this page belongs to clickable links or buttons?
  • How would the screen reader determine what order to read out the text on the page?
  • How could it let the user “skim” this page to determine the titles of the main sections of this article?

The earliest screen readers were as simple as the audiobook I first imagined, as they dealt with only text-based interfaces. These “talking terminals,” developed in the mid-’80s, translated ASCII characters in the terminal’s display buffer to an audio output. But graphical user interfaces (or GUI’s) soon became common. “Making the GUI Talk,” a 1991 BYTE magazine article, gives a glimpse into the state of screen readers at a moment when the new prevalence of screens with essentially visual content made screen readers a technical challenge, while the freshly passed Americans with Disabilities Act highlighted their necessity.

OutSpoken, discussed in the BYTE article, was one of the first commercially available screen readers for GUI’s. OutSpoken worked by intercepting operating system level graphics commands to build up an offscreen model, a database representation of what is in each part of the screen. It used heuristics to interpret graphics commands, for instance, to guess that a button is drawn or that an icon is associated with nearby text. As a user moves a mouse pointer around on the screen, the screen reader reads out information from the offscreen model about the part of the screen corresponding to the cursor’s location.

Graphics commands build a GUI from code. Graphics commands are also used to build a database representation of the screen, which can then be used by screen readers.

The offscreen model is a database representation of the screen based on intercepting graphics commands. (Large preview)

This early approach was difficult: intercepting low-level graphics commands is complex and operating system dependent, and relying on heuristics to interpret these commands is error-prone.

The Semantic Web And Accessibility APIs

A new approach to screen readers arose in the late ’90s, based on the idea of the semantic web. Berners-Lee wrote of his dream for a semantic web in his 1999 book Weaving the Web: The Original Design and Ultimate Destiny of the World Wide Web:

I have a dream for the Web [in which computers] become capable of analyzing all the data on the Web — the content, links, and transactions between people and computers. A “Semantic Web”, which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy, and our daily lives will be handled by machines talking to machines. The “intelligent agents” people have touted for ages will finally materialize.

Berners-Lee defined the semantic web as “a web of data that can be processed directly and indirectly by machines.” It’s debatable how much this dream has been realized, and many now think of it as unrealistic. However, we can see the way assistive technologies for the web work today as a part of this dream that did pan out.

Berners-Lee emphasized accessibility for the web from the start when founding the W3C, the web’s international standards group, in 1994. In a 1996 newsletter to the W3C’s Web Accessibility Initiative, he wrote:

The emergence of the World Wide Web has made it possible for individuals with appropriate computer and telecommunications equipment to interact as never before. It presents new challenges and new hopes to people with disabilities.

HTML4, developed in the late ’90s and released in 1998, emphasized separating document structure and meaning from presentational or stylistic concerns. This was based on semantic web principles, and partly motivated by improving support for accessibility. The HTML5 that we currently use builds on these ideas, and so supporting assistive technology is central to its design.

So, how exactly do browsers and HTML support screen readers today?

Many front-end developers are unaware that the browser parses the DOM to create a data structure, especially for assistive technologies. This is a tree structure known as the accessibility tree that forms the API for screen readers, meaning that we no longer rely on intercepting the rendering process as the offscreen model approach did. HTML yields one representation that the browser can use both to render on a screen, and also give to audio or braille devices.

HTML yields a DOM tree, which can be used to render a view, and to build up an accessibility tree that assistive tech like screen readers use.

Browsers use the DOM to render a view, and to create an accessibility tree for screen readers. (Large preview)

Let’s look at the accessibility API in a little more detail to see how it handles the challenges we considered above. Nodes of the accessibility tree, called “accessible objects,” correspond to a subset of DOM nodes and have attributes including role (such as button), name (such as the text on the button), and state (such as focused) inferred from the HTML markup. Screen readers then use this representation of the page.

This is how a screen reader user can know an element is a button without making use of the visual style cues that a sighted user depends on. How could a screen reader user find relevant information on a page without having to read through all of it? In a recent survey, screen reader users reported that the most common way they locate the information they are looking for on a page is via the page’s headings. If an element is marked up with an h1h6 tag, a node in the accessibility tree is created with the role heading. Screen readers have a “skip to next heading” functionality, thereby allowing a page to be skimmed.

Some HTML attributes are specifically for the accessibility tree. ARIA (Accessible Rich Internet Applications) attributes can be added to HTML tags to specify the corresponding node’s name or role. For instance, imagine our button above had an icon rather than text. Adding aria-label="sign up" to the button element would ensure that the button had a label for screen readers to represent to their users. Similarly, we can add alt attributes to image tags, thereby supplying a name to the corresponding accessible node and providing alternative text that lets screen reader users know what’s on the page.

The downside of the semantic approach is that it requires developers to use HTML tags and aria attributes in a way that matches their code’s intent. This, in turn, requires awareness among developers, and prioritization of accessibility by their teams. Lack of awareness and prioritization, rather than any technical limitation, is currently the main barrier to an accessible web.

So the current approach to assistive tech for the web is based on semantic web principles and baked into the design of browsers and HTML. Developers and their teams have to be aware of the accessibility features built into HTML to be able to take advantage of them.

Recommended reading: Accessibility APIs: A Key To Web Accessibility by Léonie Watson

AI Connections

Machine Learning (ML) and Artificial Intelligence (AI) come to mind when we read Berners-Lee’s remarks about the dream of the semantic web today. When we think of computers being intelligent agents analyzing data, we might think of this as being done via machine learning approaches. The early offscreen model approach we looked at used heuristics to classify visual information. This also feels reminiscent of machine learning approaches, except that in machine learning, heuristics to classify inputs are based on an automated analysis of previously seen inputs rather than hand-coded.

What if in the early days of figuring out how to make the web accessible we had been thinking of using machine learning? Could such technologies be useful now?

Machine learning has been used in some recent assistive technologies. Microsoft’s SeeingAI and Google’s Lookout use machine learning to classify and narrate objects seen through a smartphone camera. CTRL Labs is working on a technology that detects micro-muscle movements interpreted with machine learning techniques. In this way, it seemingly reads your mind about movement intentions and could have applications for helping with some motor impairments. AI can also be used for character recognition to read out text, and even translate sign language to text. Recent Android advances using machine learning let users augment and amplify sounds around them, and to automatically live transcribe speech.

AI can also be used to help improve the data that makes its way to the accessibility tree. Facebook introduced automatically generated alternative text to provide user images with screen reader descriptions. The results are imperfect, but point in an interesting direction. Taking this one step further, Google recently announced that Chrome will soon be able to supply automatically generated alternative text for images that the browser serves up.

What’s Next

Until (or unless) machine learning approaches become more mature, an accessible web depends on the API based on the accessibility tree. This is a robust solution, but taking advantage of the assistive tech built into browsers requires people building sites to be aware of them. Lack of awareness, rather than any technical difficulty, is currently the main challenge for web accessibility.

Key Takeaways

  • Designing for different sets of abilities can give us new insights and lead to innovations that are broadly useful.
  • The web was intended to be accessible from the start, and the history of the web is intertwined with the history of assistive tech for the web.
  • Assistive tech for the web is baked into the current design of browsers and HTML.
  • Designing assistive tech, particularly involving AI, is continuing to provide new insights and lead to innovations.
  • The main current challenge for an accessible web is awareness among developers, designers, and product managers.

Resources

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Web Accessibility In Context

Collective #522

dreamt up by webguru in Uncategorized | Comments Off on Collective #522




















C522_slidertype

Embla

An extensible low level carousel for the web, written in TypeScript.

Check it out



C522_px

Px

Px is a tiny 2D canvas framework for turn-based puzzle games.

Check it out



Collective #522 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #522

Image Optimization In WordPress

dreamt up by webguru in Uncategorized | Comments Off on Image Optimization In WordPress

Image Optimization In WordPress

Image Optimization In WordPress

Adelina Țucă



A slow website is everyone’s concern. Not only that it chases visitors away but it also affects your SEO. So trying to keep it ‘in shape’ is definitely one of the main items to tick when you run a business or even a personal site.

There are many ways to speed up your WordPress site, each one complementing the other. There is not a universal method. Improving your site speed is actually the sum of more of these methods combined. One of them is image optimization, which we will tackle extensively in this post.

So read further to learn how to manually and automatically optimize all the images on your WordPress site. This is a step-by-step guide on image optimization that will make your site lightweight and faster.

The Importance Of Image Optimization

According to Snipcart, the three main reasons why images are affecting your WordPress site are:

  • They are too large. Use smaller sizes. I will talk about this later in the article.
  • They are too many, which demands as many HTTP requests. Using a CDN will help.
  • They contribute to a synchronous loading of elements, together with HTML, CSS, and JavaScript. This ends up with an increase of the render time. Displaying your images progressively (via lazy loading) will stop your images from loading at the same time with the other elements, which will make the page load quicker.

So yes, optimizing your images is an essential practice to make your site lighter. But first, you need to discover what makes your site load slowly. This is where speed tests intervene.

How To Test Your WordPress Site Speed

There are many tools that test your website’s speed. The simplest method is Pingdom.

Pingdom is a popular tool used by both casual users and developers. All you need to do is to open Pingdom and insert your WordPress site URL, choose the location that’s closest to the data center location of your hosting (based on your hosting’s servers), and start the test. If you have a CDN installed on your site, the location matters a great deal. But more on that later.

What’s nice about this tool is that, regardless of how simple its interface is, it displays advanced information about how a website performs, which is pure music to developers’ ears.

From these statistics, you will find out whether your site is doing well or it needs to be improved (or both). It’s nice because it gives you plenty of data and advice on pages, requests, and other sorts of issues and performance analysis.

pingdom website speed test

(Large preview)

pingdom website speed test for image optimization

(Large preview)

pingdom website speed test performance example

(Large preview)

On the same page, GTmetrix is another cool tool that’s similar to Pingdom and which will analyze your site’s speed and performance in depth.

gtmetrix website performance test

(Large preview)

Note: GTmetrix usually displays a rather slower WordPress website than Pingdom; this is how the tool calculates the metrics. There are no discrepancies, it’s just that GTmetrix measures the fully loaded time, unlike Pingdom which only counts the onload time.

The onload time calculates the speed after a page has been processed completely and all the files on that page have finished downloading. That’s why the onload time will always be faster than the fully loaded time.

The fully loaded time happens after the onload process when a page starts transferring data over again, which means that GTmetrix includes the onload times when it calculates the speed of a page. It basically measures the whole cycle of responses and transfers it gets from the page in question. Hence the slower times.

Google PageSpeed Insights is yet another popular tool for testing your site speed. Unlike the first two tools that only display your site performance on desktops, Google’s official testing tool is good at measuring the speed of your website’s mobile version, too.

Apart from that, Google will also give you its best recommendations on what needs to be improved on your site for getting faster loading times.

Usually, with either of these three tools, you can detect how heavily your images are affecting your site speed.

How To Speed Up Your WordPress Website

Of course, since this article is about image optimization, you guessed right that this is one of the methods. But before getting into the depths of the image optimization per se, let’s briefly talk about other ways that will help you if you have loads of images uploaded on your site.

Caching

Caching is the action of temporarily storing data in a cache so that, if a user accesses your site frequently, the data will be automatically delivered without going through the initial loading process again (which takes place when the site files are requested for the first time). A cache is a sort of memory that collects data that’s being requested many times from the same viewport and is used to increase the speed of serving this data.

Caching is in fact really simple. No matter if you do it manually or by installing a plugin, it can be implemented on your site pretty quickly. Some of the best plugins are WP Super Cache and W3 Total Cache and WP Super Cache — they are both free and best rated on WordPress.org official repository.

Content Delivery Networks

A CDN will request your site content from the nearest server location to your readers’ accessing point. It means that it keeps a copy of your site in many data centers located in different places around the world. Once a visitor accesses your site via their home location, the nearest server will request your content, which translates into faster loading times. Cloudflare and MaxCDN (now StackPath) are the most popular solutions for WordPress.

GZIP compression

Through this method, you can compress your site’s files by making them smaller. This will reduce your site bandwidth and will transfer the respective files to the browser faster.

Both WP Super Cache and W3 Total Cache come with GZIP compression feature that you can enable after installation. Also, many of the popular WordPress hosting providers have this feature already enabled via their standard packages. To find out if GZIP compression is enabled on your site, use this tool for a quick inspection.

wordpress site test gzip compression enabled

(Large preview)

You can also add GZIP compression to your WordPress site manually by modifying the .htaccess file.

Other simple and common (sometimes omitted, though) tricks would be to use a lightweight WordPress theme, deactivate unnecessary plugins (those that you don’t use anymore or those that you don’t need temporarily), and clean your WordPress database regularly.

Paying attention to these details also contributes to reducing the time that WordPress needs to build and display a page. Sometimes, a feature-heavy theme or plugin can be a major factor in slowing down your site. Caching plugins can intervene in this situation but keeping your WordPress site as light and clean as possible might be a better approach.

Image Optimization

This is a very efficient and simple technique that contributes to speeding up your WordPress site. And this is today’s topic, so let’s break it down into pieces.

Why Image Optimization?

Nowadays, websites are using more visuals than ever in their quest to catch the user’s attention. Multimedia (images, videos, podcasts) grew in popularity so much over the last five years, which led site owners to use pages that are increasingly graphical and image-heavy.

At this very moment, we are surrounded by billions of high-resolution images, videos, and graphics. They are the key to better-converting sites, hence to better marketing and business cards.

Sometimes, people tend to forget or simply do not pay enough attention to the fact that uploading images on a regular basis affects their WordPress site speed gradually.

Especially if you have an image-heavy site and your content relies mostly on images and visuals, this should be your main concern.

How To Optimize Your Website Images

This can be done either manually or with plugins. Let’s start with the manual method. (This is mostly for those of you who are very keen on having control over your site and doing everything on your own.) Optimizing images manually will also help you understand to a great extent how plugins (the automated method that we’ll talk about a bit later) work.

If you want to automate the process of image optimization, you have a backup. There are lots of great WordPress plugins out there that can save you a lot of time and also deliver great results. We’ll talk more about that and test a few tools later on.

Optimize Your Website Images Manually

Optimizing might mean a lot of stuff. Here, we can talk about compression, resizing, using the right formats, cropping and so on.

Use The Right Image Format

How can you tell what format is the best for your site images and which one has a higher resistance when it comes to editing and compression? The answer is, there is no general best format, but there are recommended formats based on the content that each image has.

PNG is mostly used for graphics, logos, illustrations, icons, design sketches or text because it can be easily edited in photo editors and still keep a great quality after compression. That’s because the PNGs are lossless — they don’t lose any significant data during compression.

JPG is more popular among photographers, casual users, or bloggers. It is lossy and can be compressed to smaller sizes while still preserving a good quality as seen with the naked eye. JPG is the format that supports millions of colors, that’s why people use it mostly for photos. It also supports high-compression levels.

An alternative to JPG and PNG could be WebP, a web image format introduced by Google, which has the role of providing even smaller sizes than JPG (or any other formats) while keeping the image quality similar to the latter. WebP format allows both lossy and lossless compression options. According to Google, a WebP image can get up to 34% smaller than a JPG image and up to 26% smaller than PNG images.

But WebP image format has its cons, such as not being supported by all browsers yet or by WordPress by default (you need tools for that). Learn more about how to integrate WebP images with WordPress.

The conclusion regarding the image formats is that there is no such thing as a universally right format. It really depends on the type of images that you need on your site. If you’re using photos with a large variety of colors, JPG might be the right format because it’s good at compressing color-heavy photos, which can be reduced to a considerable extent. It does not suit images with only a few color data like graphics or screenshots.

Let’s do a quick test. I saved a JPG image containing a multitude of colors, then converted it to PNG. After conversion, the photo became much bigger in size. Then, I used ImageResize.org tool to compress both images (I chose this tool because it allowed me to compress both formats and use files larger than 1MB).

This is the uncompressed image (via MyStock.photos):

testing jpg compression original image

(Large preview)

And these are the results:

results after testing JPG image compression

(Large preview)

On the other hand, PNG is the right format if you’re using many screenshots, graphics, logos, or transparent images — in general, images with very few colors or images that contain block colors (for instance, transitions between light and dark backgrounds). PNG is lossless and can often result in very small sizes after compression, which could otherwise be bigger as JPG. Saving this kind of images as JPG can make them low-quality and blurry.

Let’s do another test. I saved a screenshot of my WordPress dashboard both as JPG and PNG. Then I used the same ImageResize.org for compressing each format. It’s worth mentioning that the PNG file was saved in a significantly smaller size than the JPG to begin with.

This is the image:

testing png compression original image

(Large preview)

The results after compression:

results after testing PNG image compression

(Large preview)
Find Out The Maximum Display Size Of Your Images

If you’re into optimizing images by yourself, you should first find out what’s their maximum display size. Since your site is responsive, all the images you upload will be served at different resolutions based on the user viewport (the device they’re browsing your site from).

The maximum display size is the largest resolution the image can take counting all the potential viewports and screens that can access it.

How can you check the maximum display size of an image?

First, open a page or a post that contains the image you want to check. You need to resize your browser manually (make it gradually smaller by dragging its edges) to the point where the image jumps to the largest dimension. This point is called a “breakpoint” — because the image size suddenly breaks.

After the image jumped to the large dimension, press right click -> Inspect (if your browser is Chrome). Hover over the URL of the image in the top-right of the screen and you’ll see both the dimensions it is served at and its original dimensions (intrinsic). The latter is what the users will be downloading, while the former ones represent the maximum display size of the image on that page.

find maximum display size of an image Chrome

(Large preview)

With this information in mind, you can now resize and crop your image so it can correspond to the given dimensions. This way, you’ll make sure you will optimize it efficiently so it can still look great on the screen and, at the same time, not weigh much on your site.

For instance, if you want your images to be Retina-friendly, edit them using twice the maximum display size for better quality. The image in the screenshot has 428×321 pixels, so make it 856×642 pixels for a better Retina quality.

Resize And Crop Images

When you’re dealing with files that have dimensions a lot bigger than you normally need to showcase on your site, you can simply resize or crop them and only then upload them on your site. You will save disk space and keep your site lighter.

Of course, if you have a photography portfolio and it’s important for you that the visitors see your works in their original form, then yes, you have a real motive for presenting them at their best.

You can also crop your images anytime if there’s only one single detail that you want to show to the people and there’s no reason to upload the broad, full image if the rest of the content is redundant.

Compress Images

All the photo editors have this option where they ask you at what quality you want to save your edited image. You usually go with a quality of 100% (for obvious reasons), but you can lower it a bit to, say, 70-80%. You won’t notice a big difference if the image already has a huge resolution. Its size will be smaller in this case.

After you’ve set a lower quality percentage and saved the image, you can go deeper with another round of optimization of the same image by using an online tool to reduce its size even more.

JPEG Optimizer and JPEG.io have a reduction percentage of around 60%, while TinyPNG (if you choose to work with PNGs) of around 70%. Kraken is good for both formats, returning files of around 70% smaller via lossy compression.

Mac users can try ImageOptim, which compresses both JPG and PNG formats up to 50%.

Set Image Optimization On Autopilot

In order to automate the image optimization process on your site, you need tools (aka WordPress plugins). It means that they will do all the things that we talked about earlier but on autopilot.

There are several automatic WordPress solutions for image optimization but, in this post, I will only present to you those that come with solid features that can put on the table the full set for complete image optimization.

I’ll also show you the tests I conducted with each of the next three tools so you can observe everything in detail.

We are going to compare Optimole, ShortPixel, and Smush.

Optimole

optimole best image optimization wordpress plugins

(Large preview)

Optimole is probably the most complex of them all because it encapsulates all the features one might need for efficient image optimization. So if you’re looking for smart image optimization in its all aspects, then you might like Optimole.

Optimole transfers your images to a cloud where they are being optimized. Then, the optimized images are sifted through a CDN that makes them load fast. The plugin replaces each image’s URL with a custom one.

Adapting the images to each user’s screen size is another key feature of Optimole. It means that it automatically optimizes your images to the right dimension based on the user viewport, so if you’re seeing the image from a tablet, it will deliver the perfect size and quality for a tablet standard. These transformations are being made fast, without consuming any extra space on your site.

Another smart approach that you will enjoy about Optimole is its wit for detecting when a user has a slower connection. When it recognizes a slow connection, the plugin compresses the images on your site on a higher rate so that your visitors’ page loading time won’t be affected.

If you want lazy loading, the plugin also allows you to use it on your site. You just tick one box and Optimole does the work for you.

Another interesting thing about Optimole is that it won’t optimize all the images in your WordPress media library automatically. It only optimizes the images that people request by entering a page on your site. So don’t panic if you install the plugin and nothing happens. Once an image is requested by a user, the plugin will do what I already explained above. This is very space-saving since this plugin only uses one image, which it transforms in the cloud based on the users’ requests and devices.

What I love about this plugin is that it is smart and efficient and it’s never doing unnecessary work or conversions. We are using it on three of our sites: ThemeIsle, CodeinWP, and JustFreeThemes. You can check them out as demos.

ShortPixel

shortpixel best image optimization wordpress plugins

(Large preview)

ShortPixel is a popular WordPress plugin that’s great at optimizing your images in bulk. The plugin works on autopilot and optimizes by default every image that you upload to your media library. You can deactivate this option if you don’t need it, though.

The plugin offers lossy, glossy, and lossless compression, which you can apply even to thumbnails. All the modified images are saved in a separate folder on your site where you can always go back and forth to undo/redo an optimization. For example, convert back from lossless to lossy and vice-versa, or simply restore to the original files.

Moreover, if you go to the WordPress media library and select the list view instead of the grid view that comes by default, you will notice that the last column keeps you up to date regarding the compression status. This way, you can manually skim through all the images and compress/decompress those that you need. For every image, you will see by what percentage it was compressed.

If you want to optimize them all at once, just select Bulk Actions -> Optimize with ShortPixel (or any of its sub-items), and click Apply. Your images will be compressed in just a few moments.

Moreover, ShortPixel lets you convert PNG to JPG automatically, create WebP versions of your images, and optimize PDF files. It also provides CMYK to RGB conversion. It works with Cloudflare CDN service to upload the optimized images on a cloud server.

Smush

smush best image optimization wordpress plugins

(Large preview)

Another big name in the WordPress plugin space, Smush is a friendly tool that optimizes your images on the run. Smush comes with a beautiful tracking dashboard where it keeps you up to date on your website’s total savings, how many items were not optimized yet, how many were optimized already, and what methods it used for that.

It also has bulk compression, lazy loading, automatic PNG to JPG, and CDN integration. Same as ShortPixel, Smush also adds the compression status to each image in your media library, so you can either manage them individually or in bulk.

Smush uses lossless compression by default, focusing on keeping the images as close to their original version as possible. The downside of this plugin is that it doesn’t offer the same amount of features in the free version, like the aforementioned plugins do. You need to pay for some of the basic functionality.

Testing The Three Image Optimization Plugins

I took the next image of 904 KB from MyStock.photos and ran it through a series of tests with the three plugins I presented above.

image optimization wordpress plugins test - original image

(Large preview)

This is how the plugins performed:

  • Optimole: 555 KB (312 KB if you pick the High compression level)
  • ShortPixel: 197.87 KB
  • Smush: 894 KB

*Optimole and ShortPixel are using lossy compression, while Smush is using lossless compression.

The next approach is even more interesting.

I uploaded this very image on my WordPress site and used it in a blog post afterwards. Both Optimole and ShortPixel automatically reduced its size to make it match my screen resolution and post layout. So instead of using an almost 1 MB image, shrunk to fit the post, I am now using the same image reduced to its maximum display size. The plugins found the right size and dimensions needed in my blog post and modified the image accordingly.

And these are the reduced dimensions per each plugin:

  • Optimole: 158 KB, 524×394 pixels
  • ShortPixel: 71.7 KB, 768×577 pixels
  • Smush: didn’t optimize for this specific request

That being said, it’s important to note down two things:

  1. ShortPixel returned the best compression size but in larger dimensions; overall, a good result only it lost a bit of the image’s original quality.
  2. shortpixel image optimization test result desktop

    (Large preview)
  3. Optimole (which I set on Auto compression this time) returned a higher size but with smaller dimensions and with better quality as seen with the naked eye. Optimole somehow found a great mix between size and dimensions so that the quality won’t lose much ground here.

optimole image optimization test result desktop

(Large preview)

This is how it’s supposed to look on the live website:

wordpress blog post demo image optimization display

(Large preview)

If you ask me, Optimole adapted better to this specific request and the user’s viewport (in this case, my laptop screen).

Now, let’s have a quick peek at how these plugins adapt to mobile screens:

I followed the same routine. I activated one plugin at once and requested the same website page via my mobile (Android). The results:


optimole image optimization test result mobile
Optimole: 96 KB, 389×292 pixels.

shortpixel image optimization test result mobile
ShortPixel: 19 KB, 300×225 pixels.

Smush: didn’t optimize the image for mobile.

My mobile demo screen:

wordpress blog post demo image optimization mobile display

(Large preview)

As it happened in the first example, Optimole returned a bigger, more quality-focused version, while ShortPixel converted the image to a better size but with a slight loss in quality.

I initially used an image of 6 MB for the main desktop test but, since Smush doesn’t allow files larger than 1 MB in its free version (the others do allow), I had to pick an image under 1 MB.

I’ll do this test anyway with Optimole and ShortPixel only.

So, let’s do the fourth test, this time on a larger image.

The original image has 6.23 MB.

image optimization wordpress plugins test - original image

(Large preview)

The optimized sizes are:

  • Optimole: 798 KB with Auto compression level, 480 KB with High compression level
  • ShortPixel: 400.58 KB

There’s also EWWW Image Optimizer plugin that, similarly to Smush, only uses lossless compression and only reduces images by a fairly small percentage.

The conclusions after the four tests:

  • ShortPixel is delivering the best optimization rates (around 70-80%), while Optimole is somewhere at 40% on Auto compression level and at 70% on High compression level.
  • Optimole is adapting the content better to the users’ viewport and internet connection. If you set it on Auto, it will know how to both reduce size consistently and preserve a great quality. I like that it knows how to juggle with all these variables so it both helps to improve your site’s loading time and display high-quality images to your visitors.

If I had to put together not only the results of the tests but also the other features of the plugins (aka simplicity and user-friendliness), I would go with Optimole. But ShortPixel is also a great contender that I warmly recommend. Smush is a decent option too if you are willing to pay for it or you are a photographer that wants to keep their images as little processed as possible.

Wrapping Up

Do not underestimate the impact of image optimization. Images are always one of the main reasons for a slow website. Google doesn’t like slow websites and nor do your visitors and clients. Especially if you’re seeking monetization via your WordPress site. An unoptimized site will influence your SEO, drag you down in SERPs, increase your bounce rates, and will lose you money.

No matter if you prefer doing the image optimization manually or choosing a plugin to automate it for you, you will see the good results sooner rather than later.

What other methods are you using to hold the images in check on your WordPress site?

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Image Optimization In WordPress

How To Start Using Sketch And Framer X

dreamt up by webguru in Uncategorized | Comments Off on How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

How To Start Using Sketch And Framer X

Martina Pérez



When it comes to showing the transition, interaction and animation of elements in the user interface, a prototyping tool like Framer X can make a difference in the way you communicate your vision to the team and stakeholders and as a result, boost your efficiency as a designer.

With the following example, I will illustrate how you can add interaction to static designs. To profit the most from this tutorial, some basic experience with Framer X are welcome.

To get started, you will need the following tools and assets:

Note: This tutorial is for designers using MacOS, as Framer X is for Mac (although this may change in the near future), and Sketch app is also only for Mac.

Bringing Your Designs From Sketch

We will bring our designs from Sketch into Framer X. You might also create your designs in Framer X as there is a full bunch of layout tools to do so, but there are some reasons whereby you can be interested in continuing designing your interfaces in Sketch:

  • You are used to Sketch and not willing to learn a new design tool.
  • You have already some designs in Sketch and you want to build the interaction for them.
  • Sketch works much better with large files. Framer X seems to have some problems when moving elements around.
  • Framer X is still in his early stages as a design tool and there are not many tutorials about how to create some elements of design. On the other hand, there are plenty of tutorials about Sketch and also many plugins such as the Craft plugin for Sketch which allows you to speed up your design process.
  • You will find many more web design resources for Sketch than for Framer X.
  • There is still a lack of tutorials about some of the options available in Framer X, especially about how to use the Code components.

So first of all, let’s create a new file in Framer X. The first thing we will do is to bring the design screen we have in Sketch into Framer X. To do so, just copy the Static artboard from Sketch and paste it in Framer X.

Layout in Sketch and the same layout in Framer X, once imported.

Copy your designs from Sketch and paste them into Framer X. (Large preview)

As you can see in the Layers panel, we’ve got the same layers we had in Sketch.

Note: Sometimes, when bringing your designs into Framer X, some properties may be lost — in this case, it’s the border radius of the thumbnails. This is because we used a Mask in Sketch and Framer X doesn’t recognize it. To solve this, you can either select the Group in Sketch and Flatten it to Bitmap before pasting it into Framer X, or once you have brought the design into Framer X, double-click to reach the Frame element and manually change the Radius in the Properties panel.

Organize The Layout In Framer

To work on the interaction of the elements in Framer X, we need to create a new Frame.

Note: A frame is similar to an Artboard in Sketch (or to the HTML <div> element), but is more powerful. Frames act more like containers as a frame can contain other frames.

To create a new Frame, go to the Layout tool panel, select Frame and drag and drop in any part of the canvas; or simply press F.

To create a new Frame, select Frame in the Layout tool panel. (Large preview)

Second, we will set a device for the Frame. Select the Frame and in the Properties panel, Device, choose Apple MacBook Pro.

Select a Frame, Device in the Properties panel and choose Apple MacBook Pro.

To set a device for a Frame, select a Device in the Properties panel. (Large preview)

Take a look at the Static frame we’ve imported. We will build the following interactions:

  • Header: Fade in when scrolling through the content.
  • Floating Action Button (FAB): Default, hover and pressed states.
  • Nav: It is displayed from right to left when clicking the FAB.
  • Content: It is resized when clicking the FAB.

Highlighting the elements we will build the interaction for: header, nav, FAB and content.

We will build interactions for the header, nav, FAB, and content. (Large preview)

First, create new Frames on top of the layers in such a way that you end up having one Frame for each of the abovemention interaction elements. For instance, we will add a new Frame to group all the layers that are part of the Header (Cmd + Enter) and name the Frame as header.

Select the elements of the header and add a Frame on top of them.

Group the layers to have one Frame for each of our interactive elements. (Large preview)

For the sake of clarity, change the name of the Apple MacBook Pro frame to Interactive. In the following section we will create a Scroll component.

Scroll Through The Content

First, we will duplicate (Cmd + D) the Content frame and take it out of the Static frame. Change the name of the new frame to i_content.

Content Frame has to be out of the Static frame.

Duplicate the Content frame and take it out of the Static frame. (Large preview)

Secondly, we will create a Scroll component in our Interactive frame. To do so, go to the Interactive tool panel and select Scroll. Drag and drop in any part of the Interactive frame.

In addition to that, modify the width of the Scroll component to 1141px (same as the Content) and position it in the same coordinates as the Content is on the Static frame (left: 149px, top: 140px). Apart from that, increase the height of the Scroll component as it reaches the bottom of the Interactive frame.

Position the Scroll component where it was on the Static frame.
Modify the width and height of the Scroll component and position it in the same coordinates as the Content frame. (Large preview)

Next, we will connect the Scroll component to our i_content. To do so, click on the connector and connect it to i_content.

Connect the Scroll component to the i_content.
Connect the Scroll component to the i_content. (Large preview)

Lastly, select the Interactive frame and Cmd + P to enter the Preview Mode. You should be able to scroll through the content now.

Scrolling through the page on Preview Mode.
To access to Preview Mode, press Cmd + P. (Large preview)

Next, I will explain how to position the Header and the FAB (Floating Action Button) button to make them fixed while scrolling with no need for any special coding.

Fixed Elements

We will position the elements so as they remain fixed when scrolling through the page. To that end, duplicate the Header frame and position it in the Interactive frame. As before, change the name to i_header. Do the same with the Floating Action Button button. Your Layers panel should look like this.

i_fab and i_header are in the Interactive frame.

Duplicate the Header and the FAB frames and position them within the Interactive frame. (Large preview)

As the Header and the FAB are out of the Scroll component, they will remain fixed while scrolling.

In Preview mode, Scroll through the content, whereas the header and FAB remain fixed.
You can scroll through the content, whereas the header and FAB remain fixed. (Large preview)

In the next section, I will explain how to build the transition of the Header.

Header Transition

To build the transition of the Header we will make use of the Scroll away component created by Lukas Guschlbauer. To start using this component, go to the Framer Store, search for Scroll and install the Scroll Away component.

Framer store where you can search the Scroll Away component.

Search for ‘Scroll’ in the Framer Store and install the Scroll Away component. (Large preview)

Next, go to the the Components panel, click the Scroll Away and drop it onto the canvas. Take the Header frame out of the Interactive frame and position the Scroll away component where the Header was. Change the component size as to be the same as the Header (1440x80px).

Now, select the Scroll Away component and connect it to your i_header frame. You can change multiple properties of the component such as alignment, effect, direction, easing or timing in the Properties panel. We will change the effect to Fade Move. Once that is done, the options below will change accordingly.

Applying the Fade Move effect in the Scroll Away component.

Take the Header frame out of the Interactive frame and change the effect to Fade Move. (Large preview)

For the effect to work, we need one more thing. Select the Scroll Away Component and click the Override in the Properties panel. Click File and select New File. Then, click Override and select useScrollData. Next, click the Scroll component of your Interactive frame. Click Override again and select getScrollData in Override. To preview the result, press Cmd + P.

Note: Overrides are a unique concept to Framer X. Code overrides are functions that allow components to communicate with each other. You can write them yourself in code and apply them to any Frame or component on your canvas. These functions allow you to override visual properties like opacity and fill, and allow for interactivity and animation. Code overrides can live in any code file in your project. Framer X interprets these based on the type. You can apply any code override to any Frame or component on the canvas by selecting Override from the Properties panel.

There is a white space at top when scrolling through the content in Preview Mode
The transition of the Header works, but there is a white space at the top. (Large preview)

The transition works, but you will notice that there is a white space at the top. This is because the Scroll component is positioned at y: 140. Let’s change this. Increase the height of the Scroll component to occupy the whole height of the Interactive frame. Next, go to your i_content frame and position the elements 140px from the top of the frame.

Positioning the content 140px from top in the i_content frame.

In the i_content frame, position the content 140px from top. (Large preview)

Your interaction should be now similar to this one.

Header goes away with Fade Move effect while scrolling through the content in Preview Mode.
Header transition when scrolling through the content. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to change the state of a button when interacting with it.

States For Buttons

In this section, we will work on the different states for the Floating Action Button (FAB). We will make use of the Magic Move component created by Henrique Gusso. So first of all, go to the Framer store and install this component. In the Components panel, select the component and drop it on the canvas.

At first, select the Floating Action Button frame and take it out of the Interactive frame. Next, position the Magic Move component where the FAB was. Change its size to 72×72px.

The i_fab is out of the Interactive frame and the Magic Move component is where the FAB was.

Take the FAB out of the Interactive frame and position the Magic Move component where the FAB was. (Large preview)

For some reason, the graphic imported from Sketch doesn’t work with this component, so we will create our own circle. In the i_fab frame, remove the frame that contains the graphic and create a circle with the same color and properties instead.

Detail of the layers of the i_fab frame.

Remove the graphic imported from Sketch and create your own circle. (Large preview)

For the different states of the FAB, we need to create a Master and three Instances (default, hover, and pressed states). To do so, select the i_FAB, right-click on it, and select Create component.

Right click on the i_fab, Create component to get a Master of the element.

To create a Master, select the i_fab frame, right-click, Create component. (Large preview)

Note: Design Components are similar to Symbols in Sketch. So if you want to create reusable components for your Design System this is a very useful tool. To change the properties of your instances all at once, just select the Master and modify the properties you want. For further information, take a look at the Framer X guide to create Design Components.

Now, duplicate the i_fab Master frame 3 times to get the instances. Change the name of the new frames to i_fab_default, i_fab_hover, and i_fab_pressed.

The Master and the three instances of the i_fab: default, hover and pressed.

To create the Instances for the states of the button, duplicate the Master 3 times. (Large preview)

Next, we need to connect the Magic Move component to the instances. Connect Initial to i_fab_default, Hover Start to i_fab_hover, Tap to i_fab_pressed and Hover End to i_fab_default.

Connect the Magic Move component in the Interactive frame to the instances: default, hover and pressed.

Connect the Magic Move component to the instances. (Large preview)

Finally, we have to go into each one of the states and change the color and scale. Go into the i_fab_hover and change its color to #2244BF. To do so, double click until you see the Fill option in the Properties panel. Next, go into the i_fab_pressed, reduce its size to 56px and change its color to #172E80. Check the result in the Preview Mode.

Note: If you see a black screen in the Preview Mode, check the compatibility of the component with your Framer Library Version. To do so, go to the page of the component in the Framer Store. If the package is not compatible with your version you will see a warning message. To change your Framer Library, navigate to File → Framer Library Version.

Different states of the FAB in Preview Mode while hovering and clicking it.
To access the Preview mode, press Cmd + P. (Large preview)

In the next section I will explain how to display the nav from right to left by clicking the FAB button.

Note: If you need it, download the source file for this step.

Open The Nav When Clicking A Button

Now, we will work on the interaction to display the Nav when clicking the FAB button. We will make use of the Link to and the Magic Move component again for the transition.

Go to the Static frame and duplicate the Nav frame. Position it in any part of the canvas and change its name to i_nav.

i_nav is out of the Static frame.

Duplicate the Nav frame, take it out of the Static frame and change its name to i_nav. (Large preview)

Now, we need to create two different states for the Nav. First, the initial state (no nav is shown) and second state, the nav is displayed. To do so, create a new Master with the i_nav (right-click and select Create component, or use the shortcut Cmd + K). Once you have the Master, duplicate two times to get the Instances. Name them i_nav_default and i_nav_displayed.

The master of i_nav with the two instances: default and displayed.

Duplicate the Master to get the instances of i_nav. (Large preview)

Next, position the elements of the i_nav_default out of the frame (Right: -80px).

i_nav_default is positioned out of the frame.

Position the i_nav_default out of the frame. (Large preview)

So, the Nav will be displayed automatically from right to left when clicking the FAB. To build this animation, we need to create a new Frame. Duplicate the Interactive frame. Change the name of the new Frame to Interactive02.

Interactive frame and its duplicate: Interactive02 frame.

Duplicate the Interactive frame. (Large preview)

To display the Nav in this new Frame we will create a new Magic Move component. The size (80x392px) and the position (Top: 140, Right: 0) need to be the same as the Nav.

Magic Move component in the Interactive02 frame.

Add a new Magic Move component in the Interactive02 frame. (Large preview)

Next, go to Interactive02 frame, select the Magic Move Component and connect it to the instances. i_nav_default to the Initital state and i_nav_displayed to the Automatic state. By doing so, when entering on this second Frame, the Nav will be displayed automatically.

Connect the Magic Move component in Interactive02 frame to the instances of the i_nav.

Connect the Magic Move component to the instances. (Large preview)

Now, we will build the interaction between screens by linking the Frames. Go to the Interactive frame, select the FAB, right-click → Add Frame. Change the name of the new frame to interactive_fab. Press L (Link to) and connect it to the Interactive02 frame.

Linking the FAB to Interactive02 frame.

On the Interactive frame, add a new Frame on top of the FAB and press L to connect it to the Interactive02 frame. (Large preview)

Change the transition to Instant and preview it. You can change the transition effect between screens in the Properties panel.

Select the FAB and changing the transition to Instant.
Change the transition to Instant. (Large preview)

If you go to Preview Mode you will see that the Nav is shown when clicking the FAB button, but we need to reverse the interaction when clicking again on it. To do so, duplicate the Interactive02 frame (give the name Interactive03 to the new Frame).

On Interactive03 frame, select the Magic Move component and assign i_nav_displayed to the Initial State and i_nav_default to the Automatic State.

Assigning states of the i_nav to the Magic Move Component on Interactive03 frame.
Assign i_nav_displayed to the Initial State and i_nav_default to Automatic state on Interactive03 frame. (Large preview)

Finally, press L (Link to) the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 frame to the Interactive02 frame. Remember to change the transition effect in the Link properties to Instant.

Linking screens with the FAB in Interactive02 frame and Interactive03 frame.
Link the interactive_fab in the Interactive02 frame to Interactive03 frame and the interactive_fab in Interactive03 to the Interactive02 frame. (Large preview)

Preview the interaction from the Interactive frame. The result should be as the one below:

When clicking the FAB button, the Nav is displayed from right to left.
When clicking the FAB button, the Nav is displayed from right to left. (Large preview)

Note: If you need it, download the source file for this step.

Next, I will explain how to resize the content when clicking the FAB button.

Resize The Content When The Nav Is Displayed

To resize the content when the Nav is displayed we will write some React code. We will use Playground (a code editor integrated in Framer X) that allows you to play with some React and HTML code to build advanced animations.

Note: If you are not familiar with React, you may be interested in taking a look at some React tutorials.

So first, go to each of the interactive frames, select the Scroll component and add a Frame on top of it.

A Frame was added on top of the Scroll component.

Add a Frame on top of each of the Scroll components. (Large preview)

Next, go to the Properties panel and click Override. On File, select App. If you don’t see it, select New file. Then, click Edit Code. The Playground will be opened automatically.

Make sure your App file has the following line at the top. If not, add it:

import { Data, animate, Override, Animatable } from "framer"

Note: (*) This code works with Framer v. 25 and the latest API version v. 1.0.7. While this code works, keep in mind that Framer is now encouraging users to use React Hooks functions instead of class components. Learn more at the new Framer API documentation pages.

We will declare a variable called contentScaleValue and indicate that it can be animated. Also, we will set the default toggle state as true.

//Value by default
const contentScaleValue = Animatable(1);
let toggle = true;

Then, we will create a function ResizeContent for the Content to be scaled when clicking the FAB. Besides that, we have to set its originX and originY as so it scales from top left.

//Assign to content
export const ResizeContent: Override = props => {
 return {
   scale: contentScaleValue,
   originX: 0,
   originY: 0
 };
};

Next, we will create a second function togglePosition for the FAB. We will say that onTap, if toggle is true, Content will be rescaled and the toggle state will change to false. Otherwise, do the reverse animation.

//Assign to FAB
export const togglePosition: Override = props => {
 return {
   onTap: () => {
     if (toggle) {
       animate.ease(contentScaleValue, 0.9, {duration: 0.2});
       toggle = false;
     } else {
       animate.ease(contentScaleValue, 1, {duration: 0.2});
       toggle = true;
     }
   }
 };
};

After writing this code, select the Frame you created on top of your Scroll components, go to the Override section in the properties panel and select File: App, Override: ResizeContent. Next, select the FAB, File: App, Override: togglePosition.

The Override is set to ResizeContent on the Scroll component. The Override is set to togglePosition on the FAB component.

Select the Frame on top of your Scroll components and set the Override as ResizeContent. Select the FAB and set the Override to togglePosition. (Large preview)

Check that the result works as the following.

The Content is resized when clicking the FAB in Preview Mode.
To preview the interaction, press Cmd + P. (Large preview)

Note: If you need it, download the source file for this step.

Prototyping

Go to the the Sketch file and import (copy and paste) the User profile artboard into Framer X. Once in Framer, duplicate the Frame. Give it the name Interactive_user_profile.

User profile artboard in Sketch and once imported in Framer X.

Copy your User profile artboard in Sketch and paste it into Framer X. Then duplicate your frame and give it the name ‘Interactive_user_profile’. (Large preview)

We will build automatic transitions for the right sidebar, the boxes at top and the content. Take each of the Frames out of the Interactive_user_profile frame.

Highlighting the elements that we will build the interaction for: right sidebar, boxes at top and content.

We will build automatic transitions for the right sidebar, the boxes at top and the content. (Large preview)

Create a Magic Move component for each of the elements and position them in the Interactive_user_profile frame.

Magic Move components for the elements are in Interactive_user_profile frame.

Create a Magic Move component for the elements to be animated. (Large preview)

Next, create a Master and two instances for each of the components. For the sidebar, position the first instance out of the Frame. For the boxes and the content, change the opacity of the first instance to 0.

A Master and two instances for each of the components. The opacity of the second instance is set to 0.

Create a Master and two instances for each of the components. (Large preview)

Connect the Magic Move component to each of the instances. Assign the first instance to the Initial State and the second instance to the Automatic State.

The Magic Move components are connected to the instances of the elements.

Connect the Magic Move components to the instances. (Large preview)

In the Properties panel, you can change the delay of each of the Move Magic components to set up the order to be shown. Assign the next delays:

  • Sidebar: no delay
  • First box: 0.4 delay
  • Second box: 0.6 delay
  • Third box: 0.8 delay
  • Content: 1 delay.
Selecting one of the boxes and setting a delay of 0.4.
Change the delay of the components in the Properties panel. (Large preview)

Go to the Interactive03 frame, select the header and Link to the Interactive_user_profile frame. In this frame, select the header and Link to Interactive frame. Remember to change the transition between the screens to Instant. Check the results.

Linking Interactive03 frame to Interactive_user_profile frame.
Prototyping with the Link tool. (Large preview)

Note: If you need it, download the source file for this step.

Clicking on the header leads you to User profile frame where the elements are displayed with an automatic animation.
Cmd + P to check the result. (Large preview)

Sharing The Prototype

To share the prototype, click FileExport Web Preview (Cmd + E). To see the prototype, open the index.html. It will launch the prototype in a web browser.

Conclusion And Takeaways

If you are looking for a design tool specialized in interaction, Framer X is the perfect one. Framer X allows you to build simple transitions between screens, micro interactions, but also to design complex interactions making use of React code.

By using Framer X, you will speed up your design process and will be able to better communicate the interaction of your designs to the team and stakeholders.

  • You can still design the interface in Sketch and paste your designs into Framer X to build the interaction of the elements there.
  • For this tutorial, I have have been using a design imported from Sketch, but you can create your layouts in Framer X as well.
  • There are multiple UI kits available in the Framer Store to help you build your design systems.
  • There is no single approach on how to build an interaction in Framer X. Experiment and learn.
  • To build some quick interactions faster, make use of the pre-built components in the Framer Store.
  • You just need a minimal coding knowledge in order to start building complex interactions in Framer X and there are multiple tutorials available online to start learning how to do it.
Smashing Editorial
(mb, yk, il)

Source: Smashing Magazine, How To Start Using Sketch And Framer X

Increase Customer Centricity With Workshops

dreamt up by webguru in Uncategorized | Comments Off on Increase Customer Centricity With Workshops

Increase Customer Centricity With Workshops

Increase Customer Centricity With Workshops

Claire Mason



Workshops are interactive group activities and exercises cohesively designed to meet a goal. Generally, workshops are in-person with a facilitator guiding participants. They take people out of their normal day-to-day environment and laser focus them on the task at hand.

In this distraction-free zone, what normally takes weeks or months to accomplish takes just a few days. You can harness this efficiency to build and nurture a customer-centric culture by introducing participants to thinking tools that they can apply to everyday decision-making and that can be shared with their teams.

During my time as a customer experience manager, I have designed, facilitated, and made speeches about workshops that do just that. In this article, I have distilled key components from these workshops and documented the process around four types of workshops that you (“you” as the facilitator or organizer of a workshop) can use to drive customer-centricity in your own companies.

For discussion purposes, I have broken the workshops into two categories: “general” and “project-specific”. General refers to workshops that are designed for anyone to participate. They introduce many basic customer-centric concepts with the end-goal of equipping participants to think about the customer differently and more often.

This article will cover two types of general workshops:

Project-specific workshops are best run with a particular, actionable outcome in mind. They are designed to be run in the context of a broader project or effort. Therefore, they are best suited for participants involved in the project (more specifics later).

Project-specific workshops are the most powerful because they contextually apply customer-centric tools to the project at hand, minimizing the mental leap participants have to make between the tools they gain and how to apply them first-hand.

I discuss two types of project-specific workshops:

Workshop Decision Table: When To Use Which Workshop
Workshop Who Time Goal Outcome
Name of workshop Who can participate Time commitment Increase customer centricity by… After the workshop, participants will have learned how to…
Customer Bowl Anyone 3 days Introducing customer centric principles in a fun, interactive competition
  • Empathize to understand customer needs
  • Apply design thinking principles
  • Innovate based on needs
  • Sketch/visualize ideas
  • Use customer feedback to iterate
Customer Canvas Anyone (but particularly good for product and sales) ½-1 day Teaching a customer centric mindset rather than a product-first mindset
  • Empathize to understand customer needs
  • Have meaningful conversations with customers based on what is important to them (and recommend relevant solutions)
  • Create and design products and services that provide value for customers
Journey Mapping Project-Specific 2 days Taking the customer’s perspective to identify experience improvements
  • Be empathetic towards customers’ experience and interaction with brand
  • Use research insights to uncover pain points and opportunities
  • Design experience improvements to address pain points and opportunities
Google Design Sprints Project-Specific 5 days Rapidly designing and testing ideas to address customer needs
  • Empathize to understand customer needs
  • Apply design thinking principles
  • Make decisions based on customer feedback
  • Sketch/visualize ideas

Customer Bowl

Workshop type: General

Who should participate: Anyone

In summary: This introduction workshop gamifies basic customer-centric concepts by having participants compete in the Customer Bowl, a contest to see who can innovate a solution that best meets customer needs.

Why it drives customer-centricity: It introduces thinking tools and methods that encourage participants to think differently and more often about customers.

Outcome: After the workshop, participants will learn how to empathize to understand customer needs, apply design thinking principles, innovate based on needs, sketch/visualize ideas, and use customer feedback to iterate.

Context: The Customer Bowl splits participants into groups. Each group is assigned a customer for whom they will be designing a solution. Groups will follow a basic design thinking framework, using tools such as personas, journey mapping, sketching, and testing in the hopes of having the customer-sanctioned “best” innovation at the end of the workshop.

Along the way, participants can also receive individual points for showcasing customer-centric behavior, such as stepping into the customer’s shoes, talking about value to the customer rather than features, and encouraging other group members to put on their customer hats.

This is my favorite comment from a participant after facilitating this workshop:

“Wow, customers are real people!”

The CX Bowl can be modified for any industry and context, but because I work at a travel company, the workshop example I outline focuses on travelers as customers with participants acting as travel agents or experience providers.

Agenda

Three day agenda for the Customer Bowl workshop

Customer Bowl agenda (Large preview)

Start With The Customer (1 Hour)

The Customer Bowl starts with an explanation of the contest and end-goal. To stoke the competitive spirit, break participants into groups, have them name themselves, and showcase the amazing prizes they stand to gain by winning the contest or earning the most individual points (amazing prizes generally means cheap candy).

Introduce each group to their customer, the person they are designing for and who ultimately decides their fate. If you can get actual customers to join the workshop and play along, great! If not, use personas to represent customers. If using personas, explain the concept of them, when you use them and why, and assign a different one to each group.

For fun, let’s use Pinterest’s newly released high-level traveler personas based on data from their 250 million monthly users:

The Group Vacationer Values spending time with friends, family or fellow travelers.
The Culture Chaser Values learning about local culture and history.
The Spa Sojourner Values rest and relaxation
The Adventure Lover Values being active.
The Eating Explorer Values a good dining experience.

Get groups to name their personas and add context around the persona’s goals and motivations. Encourage teams to make the personas their own and really step into their shoes.

Tip:

  • Your goal in this activity is to teach participants how to empathize with a persona, so it is ok if you create proto-personas not 100% based on data and research

Five sample persona images representing typical travelers

Print off persona sheets and let teams fill them in. (Large preview)

Map Journey (1 Hour 30 Minutes)

The groups will put themselves in the mind of a traveler and map the journey of their persona going on a trip: from research to shopping, booking, pre-trip, traveling, on trip, and post-trip.

  • Journey map: visualization of the process a persona goes through as they try to accomplish a goal.

Tip:

  • I like to use journey maps in the Customer Bowl workshop as the method to uncover opportunities for innovations, but there are many other approaches you can use as well, particularly if you are able to secure a real customer to participate.

Provide a simple journey mapping template for participants to use with the journey phases running horizontally on top and the customer jobs-to-be done, thoughts, and emotions running vertically on the side.

Journey map template with phases running horizontally across the top and jobs-to-be-done, thoughts, and emotions running vertically down the side

Journey map snapshot (Large preview)

Note that the first row in each phase is titled “jobs-to-be-done.” This refers to the things that a person is trying to get done or accomplish — problems they are trying to solve or needs that are trying to satisfy. This is a more powerful lens than focusing on “actions” or “steps” typically used in journey maps. Jobs-to-be-done encourages participants to consider not only the functional actions but also social as well as the emotional components to an experience (more on jobs-to-be-done later).

After groups complete their persona’s journey map, they vote on the most important or compelling jobs-to-be-done, thoughts, and emotions, paying attention to areas in the journey where there are pain points, opportunities and/or gaps.

With the journey map in mind, participants put on their traveler agent hats. For the rest of the workshop, they will use the journey map as the foundation for an innovation exercise in which they ideate solutions to address a need they uncovered in the journey.

Create A Problem Statement (30 Minutes)

Based on the top voted jobs, thoughts, and/or emotions, participants pick the area that they think travel agents could add the most value and articulate this by writing a problem statement.

This may sound basic, but this activity is important. It directs participants to define what problem they are trying to solve from their customer’s point of view. There is not one right format for problem statements. The key is to focus the statement on customer need.

I like this template from the Interactive Design Foundation:

User… (descriptive)] needs [need… verb)] because [insight… (compelling)]

Tip:

  • Encourage participants to find the right level of detail for a problem statement. Too broad and you won’t be able to narrow in on any solutions. Too narrow and you are limiting the potential solutions you could come up with.

For example, a group that mapped the journey of Ellen (the “Adventure Lover”) may have highlighted a pain point related to Ellen’s wardrobe. As a busy on-the-go adventure lover, Ellen might not have the time or money to wash her clothes while she is traveling. Therefore, a group could focus their problem statement on this aspect of Ellen’s journey.

  • Too broad: Ellen, the adventure lover, needs to be able to travel cheaply…
  • Too narrow: Ellen, the adventure lover, needs to be able to clean her clothing while traveling…
  • Just right: Ellen, the adventure lover, needs access to clean clothing while traveling…

Ideate Solutions To Address Problem Statement (Approx. 2 Hours)

Now that participants know what problem they want to solve, walk them through a process to ideate potential solutions to the problem. I like the Google Design Sprint process for ideating (check out the Google Sprint workshop section about sketching), which starts with individual brainstorming and ends with a collective vote.

Step Description Time
1 Participants review their persona, journey map, and problem statement, taking notes and reminding themselves of the problem they are trying to solve. and who they’re trying to solve it for. 20 minutes
2 Sketch out rough ideas or solutions. 20 minutes
3 Crazy 8s! Picking the best idea, participants draw 8 iterations to explore the solution from all angles). 8 minutes
4 Solution sketch. Participants create a shareable visualization that represents their idea. 45 minutes
5 Participants vote on the top sketches to create final solution sketch. 5 minutes

Tip:

  • A lot of people will be intimidated by the sketch and drawing portion of ideation. Let them know if they can draw boxes and circles, they can sketch!

Example of a sketch that has progressed from notes, to rough ideas, to many iterations, to the final solution sketch

Sketch process outlined in Google Venture’s Sprint book (Large preview)

Show Sketch To Customers For Feedback (1 Hour For Preparation, Half A Day For Interviews)

Now that participants have a solution sketch, they will prepare to share their ideas with customers (travelers) for feedback. As preparation, encourage participants to do a role-playing exercise in which one participant pretends to be the traveler and the other an interviewer. The goal of the interviewer is twofold.

First, the interviewer should learn what is important to the traveler, what their biggest pain points are, and where their opportunities for improvements are along with their travel experience. This will be validated against the assumptions made in the journey mapping exercise.

Second, the interviewer should validate the idea or solution they designed in order to gauge the traveler’s interest in the idea. Does it address a pain point? Is it useful? Would you buy it?

Tip:

  • Keep looking for customer-centric behavior to reward. A fun way to do this is to design your own Customer Bowl money to give out.

A couple of useful guidelines for interviewers:

  • Listen more than you talk;
  • Don’t be afraid of silence;
  • Keep asking why — dig into emotions and motivations;
  • Don’t ask leading questions;
  • Do ask open-ended questions.

With participants feeling confident in their interviewing abilities, get them out of the building! Encourage participants to find out what it is like to talk to customers or potential customers in the real world. They can go to airports, train stations, bus stops (really wherever as most people have traveled before, there aren’t any limitations of who participants can talk to or where to find them). Each group should talk to at least five people. After groups talk to customers, they should debrief and prepare for their pitches.

Wrap-Up (2 Hours Pitch Prep, 5 Minutes Each Per Group To Pitch, 15 Minutes Judge Feedback, 30 Minute Wrap-Up Discussion)

To wrap it all together, give participants a chance to “pitch” their innovations to the group. Give them prompts to answer as part of their presentation, such as:

  • What were the emotional highs and lows of your persona on their journey?
  • What needs does your solution address?
  • How did input from real travelers change your idea?

After each group has pitched, it’s time to pick a winner!

If you were able to secure real customers to participate, these will be your judges. If not, you can recruit a panel of impartial judges (it always helps if these folks are more senior, not only so participants will take the judging seriously but also so more senior executives are exposed to customer-centric principles).

Regardless of who judges, give them a scorecard to fill in after each group has presented, assessing things such as: familiarity of who customer is and what is important to them, extent to which solution maps to customer needs and an indication that customer feedback was incorporated into solution. Once the votes are tallied, announce the winners and celebrate*!

* By “celebrate”, I mean have a discussion on how to apply the principles from the workshop to their roles.

Customer Canvas

Workshop type: General.

Who should participate: Anyone but particularly good for sales and product people.

In summary: Introduction to the value proposition canvas as a tool to build empathy and understand products and services in terms of customer needs.

Why it drives customer centricity: Gives participants framework they can use in conversations with customers and product decisions.

Outcome: After the workshop, participants will learn how to empathize to understand customer needs, have meaningful conversations with customers based on what is important to them (and recommend relevant solutions), and create and design products and services that create value for customers.

Context: The Customer Canvas workshop introduces the concept of value proposition design based on Stategzyer’s Value Proposition Design book by lan Smith, Alexander Osterwalder, Gregory Bernarda, Trish Papadakos, and Yves Pigneur. It focuses on customer profiles which represent the “who” that a company serves with the “what” of products and services. This exercise is typically used as a way to innovate new offerings or act as a check that new ideas for products and services map to customer needs. However, I find that the workshop also works well as a way to teach customer-centric thinking rather than product-first thinking.

Though suited for anyone looking to become more customer-centric, the Customer Canvas workshop is particularly good for sales and product people.

For salespeople, it teaches how to speak the customers’ language, and better equips them to recommend solutions based on a deeper understanding of what customers are trying to accomplish. For product people, it provides a simple and practical framework for creating and improving products and services that map to customer needs.

Tip:

  • This is another good workshop to gamify with points for customer centricity (and candy)!
Agenda

One day Customer Canvas workshop agenda

Customer Canvas workshop agenda (Large preview)

Start With The Customer (1 Hour 30 Minutes)

Like with Customer Bowl, start with a discussion of personas and assign one to each group. Have participants familiarize themselves with their personas and modify as needed to make them feel real.

Introduce Stategyzer’s value proposition canvas, and give an overview explanation of the intent of the canvas. As Strategyzer summarizes:

“A simple way to understand your customers’ needs, and design products and services they want.”

Explain that they will be leveraging this framework in order to move from a product-first mindset to a customer-centric mindset.

There are two sides to the value proposition canvas. The right side is called the customer profile. It represents the observed or assumed set of characteristics that represent one of the customers.* It is comprised of three components: customer jobs-to-be-done, pains, and gains.

Value Proposition canvas with the customer profile to the right and the value proposition to the left

Stategyzer’s Value Proposition canvas (Large preview)

Note: Strategyzer calls the right side of the canvas the “customer (segment) profile” and focuses on customer segments. However, I find that using a persona and choosing a context for the persona is a much stronger training tool to build customer centricity. For example, focus on Ellen, the adventure traveler, who is planning her next trip (persona and context based) rather than focusing on millennial travelers living in Atlanta, GA (customer segment based). Therefore, I refer to the right side of the canvas as just “customer profile”.

Groups will stick their persona onto their customer profile. They will then proceed to fill in the jobs-to-be done, pains, and gains segments of the profile.

Jobs-To-Be-Done (20 Minutes)

As mentioned earlier, the jobs-to-be-done framework is a great way to understand what is truly important to customers from the perspective of what they are trying to accomplish in a given circumstance. This brings customers to life in a way that big data about customers and buyer segments correlations cannot.

Tip:

  • If you are tight on time and can only focus on one thing, focus on jobs-to-be-done!

Jobs-to-be done can be functional, emotional, or social. They represent the things customers are trying to get done in a given circumstance. Here are a few sample prompt questions:

  1. What is your customer trying to accomplish?
  2. What emotional and/or social needs are they trying to satisfy?
  3. How do they want to feel and what do they need to do to make this happen?

For the persona Ellen in a travel scenario, a few examples of her jobs-to-be done could be: functional — book a trip, social — go to a cool place to get Instagram likes; and emotional — feel a sense of adventure or excitement.

Example jobs-to-be done section filled out for an adventure traveler. Sample jobs include looking cool, feeling excited, and booking a tript

A few examples of customer jobs. A proper profile should be more filled out. (Large preview)

Pains (20 Minutes)

Customer pains are the things that prevent customers from accomplishing their jobs to be done, are risks, or are simply annoying. They also can be functional, emotional, or social. A few sample prompt questions:

  1. What is keeping your customer awake at night? What are their big issues, concerns, and worries?
  2. What makes them feel bad? What are their frustrations, annoyances, or things that give them a headache?
  3. What negative social consequences do they encounter or fear? Are they afraid of a loss of face, power, trust, or status?

Pains for Ellen could be: travel costs too much; as a single female, I don’t want to travel to dangerous places; I don’t have that much money, but I want to be perceived as glamorous and adventurous.

Tip:

  • Really drive empathy for the pains and gains that travelers experience. It helps to frame statements from a first-person point of view “I’m scared of flying!”

Example pains section filled out for an adventure traveler. Sample pains include too much money, danger, and scared to fly

A few examples of customer pains (Large preview)

Gains (20 Minutes)

The last section of the customer profile centers around Customer Gains. These represent the functional, social, and emotional benefits a customer might need, expect or desire (or be unexpected positive outcomes).

A few sample prompt questions:

  1. What would be a dream come true for them?
  2. What would make their jobs easier?
  3. What savings in terms of time, money, or effort would be beneficial?

Gains for Ellen could be: I found a really great deal on this flight!; wow, I am going to look so cool for my Instagram followers; getting to fly 1st class is a dream come true.

Tip:

  • People can have a hard time coming up with gains. Encourage them to think about the opposite of the pains they defined. For example, if a pain is “travel is so expensive”, then a gain could be “I found a really great deal on this flight!” It may seem repetitive, but it will be important later on when participants think of ways to address pains.

Time permitting, have participants rank each segment of the profile in terms of importance to highlight the most important jobs-to-be done, pains, and gains.

Example gains section filled out for an adventure traveler. Sample gains include great deal, flying first class, and great social media content

A few examples of customer gains (Large preview)

Profile Wrap-Up And Intro To Value Proposition

The last section of the exercise fills out the left side of the canvas, called the value proposition. The value proposition represents the value that a company offers in terms of its products and services, pain relievers, and gain creators.

When mapping the left side of the canvas (the value proposition) to the right side of the canvas (the customer profile), participants assess how well the products and services enable customer jobs-to-be done, relieve pains, and create gains. This mapping teaches participants how to frame the company’s products and services in terms of customer needs (stop leading the conversation with product features, and instead, talk about the jobs they enable and the value they provide!).

Tip:

  • As a takeaway, encourage participants to post their customer profiles around their offices to be a constant reminder of who their customer is and what is important to them. They can also print off the full list of jobs-to-be done, pains, and gains prompt questions to help focus future customer conversations.

Products And Services (20 Minutes)

Participants start filling out the left side of the canvas by listing out the products and services that their company offers. These could be physical products (i.e. the iPhone), or more intangible services (i.e. offer training on the iPhone), digital (i.e. online photo storage for your iPhone), and so on. Simply list offerings — this should be the easiest part of the exercise!

Tip:

  • Products and services may or may not enable your jobs-to-be-done. That’s ok, a good value proposition doesn’t need to address everything, but knowing where the gaps are can help facilitate more effective conversations with customers and lay the groundwork for future innovation and product improvements.

Example products and services section filled out for a travel agency. Sample products and services include booking travel, planning experiences, and handling emergencies

A few examples of products and services (Large preview)

Pain Relievers (20 Minutes)

Next is the pain relievers section. Here, participants outline how products and services reduce or remove pains or things that annoy customers. This section helps participants see products and services in terms of how they are eliminating pains.

A few sample prompt questions:

  1. How does your product or service help your customer sleep better at night? Or address issues or concerns?
  2. How does it make your customer feel better?
  3. How does it remove barriers and obstacles?

Example pain relievers section filled out for a travel agency. Sample pain relievers include discount travel deals, peace of mind, and removing logistical detail work

A few examples of pain relievers (Large preview)

Gain Creators (20 Minutes)

Gain Creators describe how products and services create customer gains or positive outcomes for customers to enjoy.

Sample prompts questions:

  1. How do your products and services save time, money, or effort for your customers?
  2. How do they outperform other related products or services customers could be using?
  3. How do they create positive emotional or social reactions?

Tip:

  • This section of the workshop can be tricky. People really struggle with this area of the canvas feeling redundant, and it is a little tedious after filling out five other sections of the value canvas already. It might be a good idea to take a little break here or do a quick exercise to get people’s energy up.

Example gain creators section filled out for a travel agency. Sample gain creators include more value for your money, travel upgrades, and time savings

A few examples of gain creators (Large preview)

Assessing Fit (1 Hour 30 Min Including Wrap-Up Discussion)

The last activity in the workshop is assessing how well the value proposition offerings map to the needs uncovered in the participant’s customer profiles.

  • Are there major jobs to be done that your products and services aren’t enabling?
  • Are there important pains and gain opportunities that are being left on the table?

Have participants discuss the “fit” and what they learned. Some great questions here:

  • How will this impact the way you think about customers?
  • How will this impact the way you talk to customers?
  • How can you use this framework to ensure you are designing and building the right things?

As an ideal after-workshop-activity, participants should test the assumptions they’ve made with real customers. This really brings customers to life.

Wrap-Up And Alternative Approaches

Tailored For Sales Training

Another way to run the workshop which is especially helpful for salespeople is to do the same exercise, but this time, have one person role play as the customer. And the other can only fill out the customer profile based on asking the “customer” questions about what is important to them, what jobs they are trying to accomplish, what their pains are, and so on. This not only gives salespeople a more customer-centric way to think about their products, but it also trains them to be able to talk (and listen!) to customers.

Tailor For Product Innovation

The canvas is intended to be used to design products and services that customers want. It acts as a gut check to ensure time and money isn’t wasted on designing something that doesn’t enable customer jobs-to-be done, relieve pains, or create gains. If this sort of innovation is your goal, simply have participants fill in the left side, or value proposition canvas, with their new product or service ideas and assess fit to see if the idea is worthwhile.

Journey Mapping

Workshop type: Project-specific.

Who should participate: Participants should be specific to a project and represent different business units supporting the relevant phases of the journey you are mapping.

In summary: Workshop to map specific phases of a customer’s journey, uncover pains/gaps/opportunities, and (end-goal) provide a more seamless end-to-end experience for customers. While the Customer Bowl taught journey mapping as an introduction to customer-centric tools (and innovation), this method is more geared towards experience improvements of existing products and services.

Why it drives customer centricity: encourages participants to step into the customer’s shoes and understand how the customer sees their business.

Outcome: After the workshop, participants will learn how to be empathetic towards the customer’s experience and interaction with the company brand, use research insights to uncover pain points and opportunities, and design experience improvements to address pain points and opportunities.

Context: Journey mapping is a critical activity that scales to any business size and a particular element of a journey. For example, people can map the customers’ end-to-end experience with a business, from the moment they discover it, sign up for a product or services, install and use it, get support, and so on. This high-level view ensures that the customer experience is seamless across each phase in their journey. This end-to-end view is especially important as so much focus can be given how the customer uses a product or service (the “use” phase), that other components of the customer journey are ignored.

People can also focus on one area of the journey in more detail. For example, people can map customers’ support journey from when they first encounter an issue, to seeking help, to waiting for a response, and issue resolution (or not). This secondary-level view is equally useful to ensure every aspect of the customer experience is understood because even seemingly inconsequential experiences can have a big impact on the customer’s perception of a business.

Agenda

Two day journey mapping agenda

Journey mapping agenda (Large preview)

Start With The Customer (1 Hour Readout, 30 Min Discussion)

Start the Journey Mapping workshop with a review of customer research that has been conducted prior to the session. For example, during a workshop focused on the customers’ support experience, do a readout of the qualitative and quantitative research conducted — customers talked to, survey results, and operational data analyzed. Your job here is to bring customer experiences to life. Have participants take notes because these will be useful when mapping the journey later on.

Tips:

  • If possible, record and play audio clips of customer conversations.
  • It can get a little sensitive when participants in the workshop are directly responsible for the negative experiences customers are sharing. Be sure to start the session by explaining that the feedback is not a commentary on anyone in the room but is an opportunity to improve.

Create A Customer Promise (30 Minutes)

After a discussion of the customer research, have participants create something called a “customer promise.” This is a statement written from the customer’s point of view that represents the ideal experience that they want, expect, and desire. It then becomes the participants’ promise to try to provide this experience for them.

As a customer, I want/expect/deserve:

  • To have easy access to useful help (without being made to feel stupid).
  • To have the impact to my business understood.
  • A response at the pace that I have to respond to my own customers.
  • An answer (either a solution or at least honest and frequent communication around my issue).

You will point back to (and update if needed) this promise throughout the workshop to ensure that the decisions being made support the promise.

Map The Existing Journey (1 Hour, 30 Minutes)

Journey maps are most effective when they tell a story. Therefore, focus on one customer in one specific scenario and map the corresponding jobs-to-be done, thoughts, and emotions (high and lows of the journey). Use examples from research to select a persona and scenario that best represent a typical customer and situation.

As an example, a scenario could be: Bonnie Jones, a travel agent, receives an error while using travel booking software and wants resolution quickly in order to be able to support a client’s travel schedule:

Same journey mapping template that includes the persona, goal of persona, phases running horizontally across the top with the jobs-to-be-done, thoughts, and emotions running vertically down the side

Sample template for journey map (Large preview)

Tips:

  • Generally, selecting a persona and scenario that represent the typical experience of a customer is representative enough of most customers’ experience and thus one journey map is sufficient. However, if a different persona and corresponding set of behaviors change the outcome of the journey in significant ways, or a different scenario would uncover key insights, you may choose to do another journey map.
  • You can modify what components of the journey you want to map depending on how you want to tell the customer story. For example, you can add additional components, such as touch points, images, and expectations.
  • Come prepared with the phases of your journey already defined, i.e. for a support journey map: experience an issue, analyze, seek help, wait for an update, and issue resolution (or not). This is easier than starting from scratch — you can always update if needed.

Start by mapping the customer’s jobs-to-be done along with the scenario. What are they trying to accomplish? What functional, emotional, or social tasks do they need to do? Then, capture the corresponding thoughts they have while trying to accomplish the jobs-to-be-done using actual verbatims from research. Last, plot a line to represent the emotional highs and lows the customer feels as their story progresses.

Tip:

  • Throughout the journey map, add notes from the customer research.

A sample journey map representing the existing customer’s experience when raising a support ticket when they need help. The emotional curve of the journey goes down as the experience becomes worse and worse

Simplified sample existing support journey map (Large preview)

Vote And Prioritize (10 Minutes)

Once the group has filled in the journey map, take a step back and walk through the journey again, telling the customer’s story from their perspective. Hopefully, what emerges is a rich narrative based on real customer insight. Discuss as a group — what surprised people? What did they learn?

Now it’s time to pinpoint the areas of the journey that could be improved. An easy and fast way to do this and build consensus is to give each participants dots or stickers that represent votes. They each have a number of votes they can use to indicate where the pain points/gaps/opportunities are along the journey. Give people infinite votes; this will create a sort of heat map and make sure that smaller, potentially easier-to-address areas are captured as well as the big and obvious issues.

Also, let people vote on the biggest or most important areas. Here, limit dots to around three in order to force people to prioritize. These big areas will serve as a gut check, making sure the group addresses the things that matter in the “to be” journey.

Journey map with examples of dot voting exercise. Green and purple dots on journey map to indicate where people have voted

Simplified sample of dot voting with heat map effect and priority items identified (Large preview)

Design The “To Be” Journey (2 Hours)

Now that the group has mapped the existing journey, it is time to design what they want that journey to look like in the future, or what the “to be” journey is. The “to be” aspect of journey mapping is often overlooked but critically important to drive improvements for the customer. It is not enough to identify the pains, gaps, and opportunities associated with the existing journey. Take it one step further, and design the end-to-end journey that customers desire. This also ensures that any improvements flagged are executed in the context of the full journey, supporting a more seamless experience.

Before designing the “to be” journey, revisit the customer promise for inspiration and guidance. Also review the top voted pains, gaps, and opportunities to make sure the future journey addresses these.

The easiest way to create a new journey is to overlay new aspects of the experience on top of the old journey. Retell the narrative, but this time, tell it from the perspective of someone who has just had a really good experience. For example, if the existing journey tells the story of a travel agent who has to wait weeks for an answer to a support ticket (in the meantime, making their own client upset), then the “to be” journey should tell the story of an agent who not only receives an immediate answer to their issue but receives it contextually without ever having to leave their workflow. And even better if they never experienced an issue at all.

After completing the “to be” journey, check it against the top voted pains, gaps, and opportunities of the existing journey. Are they addressed? Would the experience that the group designed enable them to deliver on the customer promise?

A sample journey map representing the “to be” customer’s experience when raising a support ticket when they need help. The emotional curve of the journey goes up as the experience gets better and better

Simplified sample “to be” support journey map (Large preview)

Wrap-Up And Next Steps (1 Hour)

If the group has time during the workshop, it is ideal to look at the internal actions and processes (the backstage and offstage) accompanying the customer journey (front stage). This helps the group pinpoint exactly what needs to change internally to be able to support the improved experiences designed in the “to be” journey. At a minimum, the workshop needs to wrap with a strategy of how to execute this journey. Ideally, the workshop will be run as part of a fuller program to drive change. The actions and recommendations uncovered in the workshop can be integrated into the overall program plan.

As a post-workshop activity, convert the existing and “to be” journey maps into nice visualizations, with the jobs-to-be-done, thoughts, and emotions clearly articulated. This is easy to share and consume and will serve as a reminder to participants of what it is like to be a customer and interact with their brand, and what participants can do to deliver improved experiences at every phase of the customer journey.

Tip:

  • Start every PowerPoint, presentation, readout, with following the workshop with the customer promise. Don’t let people forget what they promised and why. Everything they do should map back to this!

Tip:

  • For more journey mapping and workshop resources, Oracle’s Designing CX website is useful.

Google Design Sprints

Workshop type: Project-specific

Who should participate: Individuals supporting the ideation and validation of a new value proposition. In general, a technical person, product person, designer, and decision-maker.

In summary: Google Design Sprints enable participants to understand quickly if a new idea resonates with (potential) customers.

Why it drives customer centricity: Encourages decision-making based off of customer understanding and feedback.

Outcome: After the workshop, participants will learn how to apply design thinking principles in action: learn about customer need, define the problem to solve, ideate ideas to address the problem, create a prototype to represent the idea, and test with customers.

Context: The Google Sprint process was introduced by Google Ventures and documented in the book Sprint: How to Solve Big Problems and Test New Ideas in Just Five Days by Jake Knapp with John Zeratsky and Braden Kowitz. Designed to “solve big problems,” the Sprint can be run in 5 days or less. It is a great, hands-on way to introduce participants to the customer-centric design thinking framework in a way that is fun and results-driven.

There are many resources you can reference if you are interested in learning about Sprints in more detail, such as the Sprint book, newsletter, and an overview article that I wrote a couple of years ago. With these available, I will only summarize salient points below.

Agenda

Five day agenda of a google design sprint with map on day 1, sketch on day 2, decide on day 3, prototype on day 4, and test on day 5

Google Design “Sprint” agenda for the five days (Image source: Sprint) (Large preview)

Overview Of The Process

Day 1

Participants have to come into the Sprint process with a high-level understanding of the problem they are trying to solve or at least a general idea of what to focus on. Day 1 acts as a way to gather the information necessary to narrow focus enough to target the area of the problem to solve.

Tip:

  • Make sure to start the workshop with the customer — either a readout of research or interview actual customers in addition to the recommended customer experts.
Day 2

Day 2 starts with a review of existing products and services that each participant “lightning demos” to see if any ideas can be leveraged. I’ve never found this activity to be particularly helpful. While it makes sense from a design perspective not to have to “reinvent the wheel,” most designers already have tool kits and templates to draw from, so it’s not the best use of everyone’s time.

It is also not a useful exercise in uncovering potential ideas or value propositions. Rather, it is better to start with customer needs and ideate solutions that address those needs without relying on preconceived notions of what those solutions should be. So, if you’re looking to shorten a Sprint workshop, you might want to cut the lightning demos.

A more worthwhile exercise on day 2 is the ideate and sketch process. Participants use this process to come up with different ideas of solutions that may address customer needs. The Sprint book suggests a great step-by-step process to accomplish this.

Rather than group brainstorming, the process centers around individual ideating and sketching — resulting in more varied and diverse ideas. The process is also repetitive and iterative, encouraging participants to push past the most basic ideas and think of truly innovative ones.

Tips for ideation and sketching:

  • Visualize
    Sketch out different ideas. Asking people to capture ideas visually gets their creative juices flowing. It also helps frame solutions from the perspective of how a customer might interact with and obtain value from an idea.
  • Individual Brainstorming
    “Group think” does not encourage ideas that are out-of-the box. Instead, create as many individual divergent ideas as possible before converging as a group.
  • Everything Goes
    Ideation needs to be a criticism-free zone to allow creativity to emerge.
  • The More The Better
    As more and more ideas are generated, people start to push past the obvious answers and start thinking of new and innovative ideas.

For more ideas, check out Slava Shestopalov’s article on brainstorming workshops.

Illustration of a piece of paper being folded into eight quadrants to allow for the crazy 8s rapid iteration sketch

Crazy 8s, one method in the Sprint process, involves rapid iterations of ideas from different angles encourages people to think outside of the box. (Large preview)
Day 3

Participants review the sketches, vote on the top ideas, and create a storyboard to represent how a customer will interact with the winning idea.

Tip:

  • Some people are intimidated with the idea of drawing a storyboard. Don’t sweat it! The most important aspect of a storyboard is to communicate and tell a story in a customer-centered way. Do this by thinking about what the customer is trying to accomplish and how a solution might enable them to do so.
Day 4

After storyboarding, create a visual and interactive representation of an idea called a prototype. A prototype allows someone to interact with an idea to give a realistic picture of the value offered. A prototype can be a physical object, a clickable website, app — whatever best represents the idea.

Tip:

  • Participants often feel like they need to create an entire prototype to test ideas. This is generally not necessary. All that is needed is a representation of the value proposition to validate with potential customers. One easy way to do this is to create a fake landing page with an overview of what the idea is and why it is useful. For solutions further down the validation process, more complex prototypes may be more useful.
Day 5

After creating a prototype to represent the idea, participants conduct customer testing sessions. These sessions allow the group to see how customers will react to the idea before making expensive commitments. This initial round of testing should be aimed at understanding if the idea resonates with customers. Would they use it? Would they buy it?

Tips:

  • Create a test script ahead of time: this helps keep the flow of conversation going and standardizes feedback results for easier analysis. But be sure to still leave room for organic conversation and flexibility to go off script.
  • Ask open-ended questions: this encourages customers to talk more and gives more information about their reaction to an idea. Get them talking!
  • Be comfortable with silence: people have a tendency to want to fill silence to avoid awkwardness, resist the temptation and customers will talk more.
  • Turn questions back on the customer: when customers are interacting with a prototype for the first time, they’ll naturally have some questions. When they ask something like, “What does this do?” then turn it back on them and ask, “What do you think it does?” Again, get them talking.

Use the feedback heard from customers as a way to decide how to move forward (or don’t) with the idea. Maybe customers loved everything about it and can’t wait to see more. Maybe customers didn’t think it was entirely useful, or maybe customer feedback was somewhere in between. Whatever the outcome, remind participants that they learned something they didn’t know before.

In addition, even if customers hated the idea, think of all the money potentially saved by not further investing in the idea. As icing on the cake, the sprint outlines a formulaic approach that participants can use again and again for more customer-centric decision making.

General Facilitation Tips And Tricks

Rapid-fire facilitation tips and tricks for any workshop!

Before The Workshop

  • Understand the objective, define the scope (drive stakeholders to narrow focus and create clear definitions)​.
  • What is the problem you are trying to solve?​
  • Define your desired end-state. What would make your workshop a success?​
  • Identify and execute pre-work needed to make the workshop a success .​
  • Design high-level workshop to drive towards desired end-state. ​
  • Break down into more detail (define timings, breaks, lunch, and so on) for you to follow as a guideline. ​
  • Create and share a high-level agenda with participants to let them know what to expect​.

Day Of Workshop Prep

  • Hang up area for next steps/action items and parking lot.
  • Setup supplies (paper, snacks, etc.). ​​

During The Workshop​

  • Kick-off with a high-level intro (project sponsor, why are we here, what are we trying to accomplish, and so on). ​
  • Team intros & icebreakers.
  • Housekeeping: set expectations that you will be keeping people on track. ​
  • Document high-level goal, get team agreement​.
  • Continue into the flow of the workshop.

Best Practices

  • Set clear expectations with stakeholders and participants. ​
  • Stay neutral​.
  • Keep people on track (“Great feedback, I’m going to capture that in our parking lot and move on…”).​
  • Individual brainstorming and sketching​.
  • Dot voting as a quick way to prioritize​.
  • Get people to take notes during presentations to stay engaged, use during later exercises.
  • Delegate other people to help facilitate or run different sessions.
  • Visualize as much as possible.
  • Breaks every 1.5-2 hours.
  • Define clear next steps and ownership.
  • Elicit participant feedback after the workshop.

Image of a woman holding a pencil to a green smiley face. There is also a yellow face and mad red face

Use participant feedback to design more effective and engaging workshops. (Large preview)

In Conclusion

The list of general and project-specific workshops discussed is neither exhaustive nor static. There is great flexibility to add, modify, or remove workshops and elements depending on what works, doesn’t work, or is missing.

It is my hope that we can create a collective bag of tools to enable us and our colleagues to think about things differently — about the customer more often — and ultimately make decisions that are first filtered through the customer lens. So the next time you want to jolt your organization with a good dose of customer centricity, run a workshop (and tell us about it!).

Smashing Editorial
(cc, il)

Source: Smashing Magazine, Increase Customer Centricity With Workshops

Collective #521

dreamt up by webguru in Uncategorized | Comments Off on Collective #521

C521_cdn

Self-Host Your Static Assets

Harry Roberts outlines the disadvantages of hosting your static assets “off-site”, and shows the overwhelming benefits of hosting them on your own origin.

Read it







C521_ui

Uibot

Uibot is an experiment on how far one could automate the generation of visual designs, what kinds of advantages it would lead to and what issues one would face.

Check it out












C521_creatives

Creative Machine (Beta)

Easily create one ad template and generate any number of dynamic creatives with one click. Free in beta.

Check it out




Collective #521 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #521

When Do We Need A Design System? An Interview With Brad Frost

dreamt up by webguru in Uncategorized | Comments Off on When Do We Need A Design System? An Interview With Brad Frost

When Do We Need A Design System? An Interview With Brad Frost

When Do We Need A Design System? An Interview With Brad Frost

Vitaly Friedman



Design systems have been around for quite some time. We’ve even published a book on design systems, yet just as they can be difficult to maintain, how do we know when we actually need one in the first place?

Design systems are a wonderful yet intricate tool. They provide us with a solid ground to stand on as we tackle the increasingly diverse and fast-moving digital landscape. However, like most things in our field, the hard part of design systems isn’t specific design tools or code frameworks; it’s wrangling people and all their quirks.

I had a chance to speak with Brad Frost, author of the book Atomic Design that introduces a methodology to create and maintain effective design systems, and one of the speakers who I’m looking very much forward to bringing onto the stage at SmashingConf Toronto in just a few weeks.

Vitaly: Okay, so hello everyone and welcome again to one of those interviews where we’re talking to interesting people behind the scenes, doing the magic, sometimes silently, sometimes quite publicly, openly, and so today I’m happy to have with us our one and only Mr Frosty.

Vitaly: Hello, Mr Brad Frost, how are we doing today?

Brad: Hi, I’m doing great, thanks for having me Vitaly.

Vitaly: Oh it’s my pleasure. I’m looking forward to see and explore some of the things you’re going to cover in Toronto but most specifically, I’m kind of looking forward to see what’s going on in your head right now? What are you thinking of right now?

Brad: Oh my. What am I thinking of right now?

Vitaly: Yes.

Brad: I’m thinking about, uh, we’re doing a big design system for an airline, and so I am fixing an excessive [inaudible 00:01:07] and a date picker calendar widget.

Vitaly: Oh, that sounds—

Brad: That’s what I’m doing, like, literally right this second.

Vitaly: Okay, this sounds like it’s a lot of fun.

Brad: Yes, or something.

Vitaly: I heard rumors, maybe it’s just me, I don’t know, but I heard rumors that you’re involved in some way to design systems and atomic design and stuff, so I’m wondering, design systems, does every website need one really at this point of life?

Brad: I generally think so, yes. I mean, the degree of formality around the design system is probably not every website needs, but I think that every single website could benefit from component driven architecture, design, and development principles. Just as one example, my wife is a jeweler and also she just has a five pager kind of website and I was able to build that in four days, because I was following good reusable component based design and development. So the first template I had to make, I obviously had to build all of those components sort of from scratch, but then the second page template, I was able to reuse some of those and by the time I got to the third and forth and fifth template, I already had a lot of the building blocks in place, so those latter templates were able to roll off the assembly line a lot faster.

Brad: I think a lot of people will get in touch with me and ask me those kind of questions and say, well, I make these landing pages for a marketing company and people scan a QR code and go to these landing pages, and they have a shelf life of a month at most or something like that. It is like very short lived sort of websites, and they’re like, “Well, we could have used a design system,” and I said, well yes, you’re making the same type of page over and over again, and so rather than rebuilding those pages with 100% effort each time, if you are to put in place a pattern, and you could be as clever as you want when it comes to skinding them or theming them or whatever and making them aesthetically unique. But they have to rebuild a big splashy new hero component or a button every single time, just doesn’t make sense.

Brad: Even for these things that at face value feel very ephemeral, or it’s just like a one-page landing page, surely I don’t need a design system from that? Yes, actually you can benefit from them, so again, I think that, that’s important. Any project could benefit from solid component-based design and development. The whole, “Do you need this big glossy website (like a material.io or lightning design system with a bunch of design principles and a bunch of documentation and stuff)”? Probably not, for those smaller sites, and that’s fine. But that doesn’t mean that you should just be thinking of things as individual screens or individual projects.

Vitaly: So Brad, one more thing though, when we talk about things like again, design systems and so on, I think that especially larger companies, they always desperately try to find case studies, like this company may be preferably our competitor, they build a design system or design a design system and they did magic for them. However, I’m not sure if there are any publicly available data or publicly available case studies which show that we did this, our conversion improved, our maintenance improved, we’re building faster and so on. Do you think there is anything of that thing or is it still something that has to be discovered and then you actually get to see the benefits of a design system, maybe months or even years ahead of time? Is it an investment or is it something you can measure efficiently?

Brad: Yes, great questions, and the questions around metrics, it’s definitely hard to come by, hard numbers, just because sort of unlike just doing a big redesign where you have one site and then you redesign and then launch the new site and then you’re able to look at the Google analytics and see whatever metrics you’re looking for, whether that’s page weight has gone down or time spent on site has increased, or whatever your metrics are, it’s easy to see that result.

Brad: Obviously, if you’re creating a design system, you should still be able to see some of those results as new projects launch and get out into the world. You should see those metrics going in the right direction. Obviously, that’s a sign that the design system is doing what it need to do, but it’s hard to pin down metrics and public case studies because so many of the metrics for the success of a design system are internally facing — right? So it’s not really about like the public website — well, of course, it is, but (and again you can track that stuff with Google Analytics and the rest of them) but a lot of it has to do with how fast the internal teams are working right?

Brad: How quickly you can get projects out the door and how many UI-related bugs are you fielding, what are your customer support centers getting as far as UI-related issues with respect to your website and stuff like that, so there’s a lot of metrics that are tuned towards how many jitterbugs are there around the UI and those should be trending downwards as the design system gets adopted. Or like how many customer service calls are you getting or support tickets around (“Oh, I’m using this browser and this thing is broken, and I can’t do that.”)

Brad: It’s like those things should diminish over time. But because those are also internally facing things, not many companies publish that. There are a few examples though out in the wild, and a lot of them are wrapped up in case-study blog posts and things like that, but one of them that comes to mind is the Westpac design system. They’re gelled, their global experience language and they have some stats on their websites and stuff about how they were able to increase their velocity by 700% or whatever. So there’s stuff out there, but a lot of the stuff — if I’m honest — is pulling some numbers out of the air a little bit, just like looking at, “Here’s what we were doing before, we were able to launch projects in six months and now with the design system we’re able to launch them in six weeks.” And so just putting some marketing spin on that and saying, “oh, we’re able to launch things five times faster,” whatever that math works out to. So it’s just like putting a bow on it and stuff but that’s generally like the metrics that we want to follow as our people getting things out the door faster, is the overall code and design quality improved, are there less customer facing issues on the site and are our products, are people getting things done faster as a result of using a more consistent, cohesive user experience.

Vitaly: Yes, that makes sense. I’m curious though, so when it comes to specifics of a design system, it’s been very interesting because just recently I saw a project, and it’s also something that I explored sometime like in the past but every now and again you see people using interesting naming conventions in their design system. Like for three different sizes for different blogs, like the same media object, they would use something that’s memorable rather than something that’s functional. So they would use something like “momma bear”, “papa bear”, “baby bear”, but would you say, when it comes to naming, what would you prefer to use, what would you rather recommend to avoid?

Vitaly: Because obviously, when you have “papa bear”, “momma bear”, “baby bear”, how do you grow from there if you have a fourth part of the family, you need to find a really convenient name for that right? Is it better to use small, large, medium, like what patterns would you recommend to stay away from when naming things, what works for you best?

Brad: Yes, it’s a tough question that I think that every team faces. The short answer is, use whatever language makes sense for the team. You don’t want to introduce crazy, clever names if one person invented those names, and I was just thrusting them upon everybody else without their involvement, I guess. And I’ve seen that happen with atomic design, which is a naming convention that I created, but a lot of people will take that naming and adapt it or abandon it, or just call things or map them to whatever makes sense for their teams, like, “Oh, we call these things ‘components’, and we call these ‘smaller things’ or ‘modules’ or whatever, so we’re going to call it ‘elements’, ‘modules’, and ‘components’ instead of ‘atoms’, ‘molecules’, and ‘organisms’.”

Brad: And I love that, I think that, that’s really important for teams to establish a language that makes sense with them and how they’re already thinking and stuff like that. You don’t want to get new and jazzy and inventive if that isn’t warranted or if people are just going to, “Wait, what is ‘momma bear’ again?” So that’s important, but you’re also talking about, it’s like what happens when it goes to naming things that might need some space in between? So things like t-shirt sizes. It’s like, yes, there’s ‘small’, ‘medium’, ‘large’, ‘extra large’ or whatever, but what if you need a ‘medium two’ or a ‘medium three’ and a ‘large two’ and stuff like that?

Brad: And so you end up wedging these things in between and that never really feels right. My colleague, Dan Mahr, recently talked about this with respect to typography sizes. A lot of different design systems and style guides and things will tend to call things, ‘H1’ through to ‘H6’ for the different heading styles. But even that’s a little misleading, because one it like time, a semantic meeting to a stylistic thing, which isn’t always great. But then two, there tends to be more than six styles not just for headings for body copy, but also some may be stylized text or a block quote or a pool quote, so he explored that in a recent post where he’s talking about the naming of the stuff.

Brad: For a project we’re working on now, where basically we have just ‘typography preset one’, ‘typography preset four’ and ‘five’ and ‘six’, and the first few are loosely mapped two sizes and things like that, but for a lot of them, as the system has grown, and we’re like, Oh we actually need an additional preset, and we need the ability to add even more, they just get thrown onto the pile as ‘typography preset eight’ and ‘nine’ and ‘ten’ — and those aren’t terribly intuitive names. It’s not like, “Oh, this is ‘baby bear’” or whatever, and “Oh, this is…” (you know, Dan was toying around with the names of X-men or whatever — you could get clever like that.) But ultimately, at the end of the day, we picked a convention in a system that scales in that, “here’s what happens when you need to add a new thing” and crucially — the crucial bit to any of this — is the documentation and the shared understanding of that stuff.

Brad: In our style guide, in our reference website for the design system, we have a typography page where we spell out, here’s what ‘typography preset one’ is, and here’s what characteristics it has and here’s what usage it should be used for. And it’s like, “Oh, here’s ‘typography preset eight’” which is more of like a kicker, really small eyebrow, you know what I’m talking about, it goes above a title that might be the category of the blog post or whatever, I don’t know, but it’s like a little stylized, so it’s upper case, it’s spaced out a little bit, it’s like a thinner font, it’s like an understated typographic thing.

Brad: Now, none of that says ‘typography preset eight’, it just comes with the usage, you have to understand, “Oh, that’s the ‘kicker styles’.” But it can’t just be called ‘kicker style’ because we’re actually using it for a bunch of different things. We’re using it for a primary navigation, we’re using it for the eyebrows or the kickers above a title, but we’re also using it for a bunch of other things as well, which is why I think it’s important to establish more agnostic names, rather than tightly coupled to its usage names.

Vitaly: That makes sense, of course. I heard rumors that you might be doing or covering something along the lines of design systems in Toronto? May it be that I’m right or maybe I’m wrong? Maybe you’re even having a workshop in there — if I’m not mistaken?

Brad: Yes…

Vitaly: So I’m wondering, can you briefly describe maybe like within a minute or so, what you’re going to speak about, what is the session going to be like and also what the workshop is going to be like?

Brad: Yes. I’m super excited for Toronto and the gist of my session at the conference is going to be live in front of everyone, building a design system, so this is using what I call a workshop tool like Pattern Lab or Storybook to build out a design system, components as well as the screens that we’re building from those components, like live in a session. And that’s to demonstrate how that process works, how that component driven, so the design and development process works and how we iterate inside of this environment to build real pilot projects for the design system, as well as actually extracting the components from those projects.

Brad: So that’s the session, which I’m excited about and then the workshop is more of a deeper dive, there’s so many aspects to a design system initiative, and so basically the workshop is set up to go soup from nuts, from selling the design system to kicking the design system off, to planning what tools and technologies we’re going to use, what methodologies, what processes are we going to use, launching a design system, getting it into actual products, so deploying a design system, but then crucially maybe like the main bit is like, how do we maintain this over time? How do you set up your team structure? How do you set up your technology structure and infrastructure to support an ongoing living, breathing design system? So, that’s the workshop: it’s soups to nuts and how we build and maintain a design system?

Vitaly: That sounds pretty intriguing. So maybe then just the last one — the last question for you — and thank you so much for your time… I’m wondering if there were some lessons you learned the hard way, things that you would definitely not recommend to do when building or designing or creating or setting up our design system? What are some of the hard lessons you had to learn, things you definitely would recommend to stay away from?

Brad: There’s a bunch. I’ll say that one thing I’ve learned in consulting with a bunch of clients is, probably one of the biggest things (pitfalls we see teams falling into) is that they think that a design system is just the components and so I’ve worked with teams that they’ve spun up entire teams for, “Oh, this team is going to work on the buttons,” and, “Oh, this team is going to work on the cards,” and, “This team is going to work on the foreign fields” — it doesn’t work like that. You can’t just create these things in isolation and then cross your fingers and hope that they come together to form a cohesive experience.

Brad: Our big recommendation is, you have to start with real work, this is why pilot projects are so incredibly important. It’s like, you start with a real thing that really needs a built and then you use that as an opportunity to build your design system from. If your pilot project is the home page, you’re going to have a hero, you’re going to have some cars, you’re going to have a newsletter sign-up thing. You need to build all those in order to build the home page. And so through the lens of building out the home page, you’re able to extract those other components. So that’s my mistake to avoid is: don’t just build a design system in isolation. It has to be tied to the real products that your organization needs to produce.

Vitaly: Okay, that makes sense. Wow, Brad. I’m looking forward to your session. I’m wondering maybe you will be, I don’t know, building a design system for horoscopes, or maybe for, I don’t know, for something else? Is there a particular project you ever dreamed of, maybe like for NASA, design systems for NASA? No?

Brad: I mean that would be awesome. I don’t know, in my view I’ve never really thought of that in what would be like a dream client, I think that my sweet spot is where the technical ends of things but also the organizational end of things are both interesting. They have some interesting problems to solve, and so I love working with clients that are at that place where it’s like, “Oh, we need some technical heLp, but crucially we also need a lot of organizational or cultural help,” so I’m being vague here but I love that sweet spot in between. The work itself is good and I have fun as a web developer swimming in those waters, but then I also really like helping teams establish better processes and cultures around design and development.

Vitaly: Yes, well listen Brad, your curiosity of things, in things, and seeing things through and also making things a bit better, so let’s make things a bit better in Toronto then.

Brad: I’d love it.

Vitaly: Alright, thank you. Thank you so much for taking the time, I’m looking forward to seeing you soon. And please say ‘hi’ to Louis as well.

Brad: Alright, hey, thanks for having me.

Vitaly: Of course, my pleasure! Okay, talk to you soon Brad, thank you.

Vitaly: Alright, so thank you so much to everybody for joining in. Let’s see, well, I hope I will see some of you in Toronto as well. It’s going to be an interesting conference with a couple of live sessions along the way. And please stay tuned, we’re going to have a couple of more interviews like this one and if you’re interested, please do let us know in the comments, or even ask the questions we should ask next time. With that in mind, signing off, and see you next time.

That’s A Wrap!

Build a design system in less than an hour? That’s crazy, but not entirely impossible.

We’re looking forward to welcoming Brad at SmashingConf Toronto 2019, with a live session on building design systems. He’ll demonstrate how to use Pattern Lab to simultaneously build both a design system’s front-end components and several screens of a real pilot project. We’d love to see you there as well!

Please do let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it!

Smashing Editorial
(ra, il)

Source: Smashing Magazine, When Do We Need A Design System? An Interview With Brad Frost

Inspiring Wallpapers For A Colorful June (2019 Edition)

dreamt up by webguru in Uncategorized | Comments Off on Inspiring Wallpapers For A Colorful June (2019 Edition)

Inspiring Wallpapers For A Colorful June (2019 Edition)

Inspiring Wallpapers For A Colorful June (2019 Edition)

Cosima Mielke



No matter if June means the beginning of summer for you, that monsoon season is here, or that winter is just around the corner, our new wallpapers are bound to sweeten the beginning of the month with some fresh inspiration.

Created by artists and designers from across the globe, the designs featured in this collection are part of our wallpaper series which has been going on for more than nine years already. Every month, we challenge you, the community, to submit your wallpaper designs to it. It’s an opportunity to let your creative ideas run free and use your favorite tools — without the pressure of meeting project requirements or satisfying stakeholders. It’s only you and your creative process. And, well, we are very thankful to everyone who has taken on this challenge and is still continuing to do so to cater for diverse and unique results each time anew.

To accompany you through the new month — and beyond — the wallpapers all come in versions with and without a calendar for June 2019 and can be downloaded for free. For some extra variety, you’ll also find a selection of favorites from past years’ editions at the end of this post. Enjoy!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine, too. So if you have an idea for a July wallpaper design, please don’t hesitate to submit it. We’d love to see what you’ll come up with.

Further Reading on SmashingMag:

Summer Is Coming

“Imagine a sunny beach and an endless blue sea. Imagine yourself right there. Is it somewhere in Greece? The Mediterranean? North Africa? Now turn around and start wandering through those picturesque, narrow streets. See all those authentic white houses with blue doors and blue windows? Feel the fragrance of fresh flowers? Stop for a second. Take a deep breath. Seize the moment. Breathe in. Breathe out. Now slowly open your eyes. Not quite there yet? Don’t worry. You will be soon! Summer is coming…” — Designed by PopArt Studio from Serbia.

Summer Is Coming

Melting Away

Designed by Ricardo Gimenes from Sweden.

Melting Away

It’s Bauhaus Year

“This year is Bauhaus year – therefore I created a screenprint of one of the most famous buildings from the Bauhaus architect Mies van der Rohe for you. So, enjoy the Barcelona Pavillon for your June wallpaper.” — Designed by Anne Korfmacher from Germany.

It’s Bauhaus Year

Sunset With Crabs

“In the sunset the crabs come to the surface. That little boat can’t sail, but after seeing the crabs it gets power and finally… it sails!” — Designed by Veronica Valenzuela from Spain.

Sunset With Crabs

Monsoon Season

“Rain is the art of nature, and umbrella the art of man. Walking with your umbrella on a rainy day, you connect these arts!” — Designed by Themehigh from Calicut.

Monsoon Season

Take Your First Step In Spirituality

“Yoga is a way of finding your true self. This International Yoga Day, take a path of a spiritual journey and see where it leads you in your life.” — Designed by Kiran Shirke from India.

Take Your First Step In Spirituality

Oldies But Goodies

So many beautiful, unique, and inspiring wallpapers have come to life as a part of our monthly challenge in the past nine years. Here are some June favorites from past editions. Please note that these wallpapers don’t come with a calendar.

Deep Dive

“Summer rains, sunny days and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Deep Dive

Pineapple Summer Pop

“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.

Pineapple Summer Pop

Travel Time

“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — Designed by PopArt Studio from Serbia.

Travel Time

Summer Surf

“Summer vibes…” — Designed by Antun Hirsman from Croatia.

Summer Surf

Shine Your Light

“Shine your light, Before the fight, Just like the sun, Cause we don’t have to run.” — Designed by Anh Nguyet Tran from Vietnam.

Shine Your Light

Tropical Vibes

“With summer just around the corner, I’m already feeling the tropical vibes.” — Designed by Melissa Bogemans from Belgium.

Tropical Vibes

Window Of Opportunity

“‘Look deep into nature and then you will understand everything better,’ A.E.” — Designed by Antun Hiršman from Croatia.

Window Of Opportunity

Start Your Day

Designed by Elise Vanoorbeek from Belgium.

Start Your Day

Doughnuts Galore

“Friday, June 6th is National Doughnut Day. Designer Dorothy Timmer found inspiration in the sweet treats and brought the obscure holiday into the spotlight. Doughnuts are delicious. That is all.” — Designed by Clarity Creative Group from Orlando, FL.

Doughnuts Galore

Nine Lives!

“I grew up with cats around (and drawing them all the time). They are so funny… one moment they are being funny, the next they are reserved. If you have place in your life for a pet, adopt one today!” — Designed by Karen Frolo from the United States.

Nine Lives!

Getting Better Everyday

“The eternal forward motion to get better and excel.” — Designed by Zachary Johnson-Medland from the United States.

Getting Better Everyday

Expand Your Horizons

“It’s summer! Go out, explore, expand your horizons!” — Designed by Dorvan Davoudi from Canada.

Expand Your Horizons

Handmade Pony Gone Wild

“This piece was inspired by the My Little Pony cartoon series. Because those ponies irritated me so much as a kid, I always wanted to create a bad ass pony.” — Designed by Zaheed Manuel from South Africa.

Hand made pony gone wild

The Kids Looking Outside

“These are my cats looking out of the window. Because it is Children’s Day in June in a lot of countries I chose to make a wallpaper with this photo of my cats. The cats are like kids, they always want to play and love to be outside! Also, most kids love cats!” — Designed by Kevin van Geloven from The Netherlands.

The Kids Looking Outside

Good Design Is A Tough Knitted Job

“I came across this awesome tutorial on Tuts+, about creating a card with knitted effect, so I took it up a notch and said, hey, why can’t I make a couple wallpapers using what I’ve learnt… So here we are.” — Designed by Brian Jangima from Kenya.

Good Design is a Tough Knitted Job

Viking Meat War

Designed by Ricardo Gimenes from Sweden.

Viking Meat War

Sunset In Jamaica

“Photo from a recent trip to Jamaica edited to give a retro look and feel.” — Designed by Tommy Digiovanni from the USA.

Sunset In Jamaica — Preview

Gipsy Spirit

“Soft spring colors and boho feathers.” — Designed by Denise Johnson from Chicago.

Gipsy Spirit
  • preview
  • without calendar: 1024×768, 1280×800, 1280×1024, 1440×900, 1600×1200, 1920×1200
  • Hello Winter!

    Designed by Tazi Design from Australia.

    Hello Winter!

    Join In Next Month!

    Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

    Thank you to all designers for their participation. Join in next month!

    Source: Smashing Magazine, Inspiring Wallpapers For A Colorful June (2019 Edition)

    Collective #520

    dreamt up by webguru in Uncategorized | Comments Off on Collective #520


    C520_Airtable

    This content is sponsored via Thought Leaders

    Design, meet organization.

    What would you make if you had tools designed for the way you like to create? Stop tracking projects across emails, spreadsheets, and docs. Step into the future of work with a free Airtable template.

    Start now


    C520_zdog

    Zdog

    A great designer-friendly pseudo-3D engine for canvas and SVG. By David DeSandro.

    Check it out



    C520_planets

    Generative Planets

    An experiment that uses canvas and shaders over the Foundation Universe Planets list mentioned in the Robot, Empire and Foundation Series, created by Isaac Asimov.

    Check it out














    C520_futuredark

    The future is dark

    Ilke Verrelst writes about what to keep in mind when designing a dark mode for your app or website.

    Read it






    Collective #520 was written by Pedro Botelho and published on Codrops.


    Source: Codrops, Collective #520

    Creating Your Own React Validation Library: The Developer Experience (Part 3)

    dreamt up by webguru in Uncategorized | Comments Off on Creating Your Own React Validation Library: The Developer Experience (Part 3)

    Creating Your Own React Validation Library: The Developer Experience (Part 3)

    Creating Your Own React Validation Library: The Developer Experience (Part 3)

    Kristofer Selbekk



    If you’ve been following along this little article series, you’ve now learned how to put together your very own validation library. It can handle almost any challenge you can throw at it, and it even helps out with accessibility concerns! Its only downfall is that it sucks to work with.

    Yep, that’s right. The user experience from a developer point of view is seriously lacking. We don’t get any helpful warnings when we misspell words, misuse APIs or, well, anything, really!

    This article will guide you through how you can improve the developer experience of your validation library — or any library for that sake.

    Starting Out

    Since the last part of this article, we’ve pulled out all library code into its own files. Take a look at the CodeSandbox demo to see what we’re starting out with.

    Convenience Functions

    We want our library to be as simple as possible to use for the most common cases. A way to move towards that goal is to add convenient utility functions for certain functionality.

    One such feature could be to check if our form is valid — that is, if all error messages are null. This is something you typically check in your onSubmit handler, but it could be useful in your render-method too. Let’s implement it!

    const isFormValid = useMemo(
      () => Object.values(errors).every(error => error === null), 
      [errors]
    );
    

    We’ll provide this flag in our onSubmit form handler, as well as in our render method.

    There are plenty more of these that could be written, but I’ll let that be an exercise for the reader.

    Development Warnings And Invariants

    One of React’s greatest features is its many helpful console warnings while developing. We should provide the same sort of quality to our users as well.

    To get started, we’ll create two functions — warning for logging warnings to the console, and invariant for throwing an error — both if a given condition is not met.

    function warning(condition, message) {
      if (process.env.NODE_ENV === 'production' || condition) {
        return;
      }
    
      console.warn('useValidation: ' + message);
    }
    function invariant(condition, message) {
      if (process.env.NODE_ENV === 'production' || condition) {
        return;
      }
    
      throw new Error('useValidation: ' + message);
    }
    

    You want to use invariant if the error is going to crash your library (or render it useless), and warning for bad practices or other advice.

    When To Warn

    Deciding when to warn is pretty important. Too many, and you’re just annoying. Too few, and you let critical bugs ship to production. Therefore, we need to be smart with our warnings.

    Since our library accepts a pretty large configuration object, it makes sense to validate this somehow — at least while developing. We could solve it by using a type system like TypeScript or Flow, but that excludes all regular ol’ JavaScript users.

    Instead, let’s create a runtime schema checker, where we validate that the config contains the correct fields, and print relevant warnings.

    function validateConfigSchema(config) {
      if (process.env.NODE_ENV === 'production') {
        return;
      }
      if (typeof config === 'function') {
        config = config({});
      }
    
      invariant(
        typeof config === 'object',
        `useValidation should be called with an object or a function returning an object. You passed a ${typeof config}.`,
      );
    
      invariant(
        typeof config.fields === 'object',
        'useValidation requires a `field` prop with an object containing the fields and their validators. Please refer to the documentation on usage: https://link.to/docs'
      );
    
      
      invariant(
        Object.values(config.fields).every(field => typeof field === 'object'),
        'useValidation requires that the `field` object only contains objects. It looks like yours isn't. Please refer to the documentation on usage: https://link.to/docs'
      );
    
      warning(
        ['always', 'blur', 'submit', undefined].includes(config.showError),
        'useValidation received an unsupported value in the `showError` prop. Valid values are "always", "blur" or "submit".'
      )
    
      // And so on
    }
    

    We could probably go on doing this for a while if we wanted to spend the time. And you should! It’s a great way to improve the developer experience of your app.

    You don’t have to be writing these by hand, however. There’s a browser-port of the popular object schema validation library joi that could help out with creating a really nice runtime validation check. Also, as previously mentioned, a type system would help catch configuration errors at compile time for the users that use that type system.

    Allow For Flexibility

    A good developer experience is in large part not getting in the way of the developers. Let’s look at a few ways we can improve that experience.

    Compose Conflicting Props

    First, our prop getters apply some props to our inputs and forms that can be accidentally overridden by our consumers. Instead, let’s add a prop override object to our prop getters, which will compose any conflicting props together.

    Here’s how we can implement this in our getFieldProps:

    
    getFieldProps: (fieldName, overrides = {}) => ({
      onChange: e => {
        const { value } = e.target;
        if (!config.fields[fieldName]) {
          return;
        }
        dispatch({
          type: 'change',
          payload: { [fieldName]: value },
        });
        if (overrides.onChange) {
          overrides.onChange(e);
        }
      },
      onBlur: e => {
        dispatch({ type: 'blur', payload: fieldName });
        if (overrides.onBlur) {
          overrides.onBlur(e)
        }
      },
      name: overrides.name || fieldName,
      value: state.values[fieldName] || '',
    }),
    

    A similar approach can be followed in getFormProps.

    Help Avoid Prop Drilling

    Some forms might be large and split up into several components. Instead of making our consumers’ drill props down the tree, we should provide a context. This way, they can access all the stuff we return from our custom hook anywhere in the tree below.

    First, let’s create a ValidationContext with React’s createContext method:

    export const ValidationContext = React.createContext({});
    

    Next, let’s create a component ValidationProvider, that provides all the values from the useValidation hook in context instead:

    export const ValidationProvider = props => {
      const context = useValidation(props.config);
      return (
        
          {props.children}
        
      );
    };
    

    Now, instead of calling useValidation directly, we’d wrap our form in a ValidationProvider component, and get access to the validation props (getFormProps, errors etc) by use of the useContext hook. You’d use it like this:

    Import React, { useContext } from 'react';
    import { ValidationContext } from './useValidation';
    
    function UsernameForm(props) {
      const { getFieldProps, errors } = useContext(ValidationContext);
      return (
        <>
          <input {...getFieldProps('username')} />
          {errors.username && {errors.username}></span>}
        </>
      );
    }
    

    This way, you get the best of both worlds! You get a simple hook for those simple scenarios, and you get the flexibility you need for those complex parts.

    Documentation Is Key 🔑

    Whenever I’m using a library I didn’t write myself, I love great documentation. But what should you focus on, and where should you document?

    A first step should be to put together a simple to understand README, with the most basic usage examples readily available. Andrew Healey wrote an amazing piece on how to write a good README, which I highly recommend you read.

    When you’ve created a good README to get people going, a documentation website might be a good idea. Here, you can put a more in-depth API documentation, recipes for typical use cases and a good ol’ FAQ.

    There are great tools out there for generating documentation websites. My favorite is docusaurus from Facebook (humble brag: we used it when creating the create-react-app website), but there are several good alternatives out there.

    We’re not going to go through how to write good documentation in this article. There are several good articles out there — even a community called “Write the Docs”. They have written a great guide to how you can get started with writing great documentation.

    Summary

    Through this article series, we’ve created a pretty decent validation library. It has a pretty simple API, flexibility for when you need it, a good developer experience, and a lot of pretty dank features.

    We’ve gone through how we implemented things step by step, and I hope you got a deeper understanding of how you can make your own library, and how you make it something people would love to use.

    Please let me know in the comments what you think, and if there were some parts you got stuck on or had a hard time understanding. I’ll try my best to update the article as feedback trickles in.

    To end this article off — here’s the final version:

    Thanks for reading!

    Smashing Editorial
    (dm, yk, il)

    Source: Smashing Magazine, Creating Your Own React Validation Library: The Developer Experience (Part 3)