Collective #524

Inspirational Website of the Week: Kubikfoto³ A great design with wonderful details and smooth transitions. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Website Builder Software With Your Branding This B2B platform fits designers, freelancers, agencies and anyone who Read more

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)

    Should Chatbots Replace Forms On Mobile?

    dreamt up by webguru in Uncategorized | Comments Off on Should Chatbots Replace Forms On Mobile?

    Should Chatbots Replace Forms On Mobile?

    Should Chatbots Replace Forms On Mobile?

    Suzanne Scacca



    I recently was on Jeff Bullas’ website when I encountered a pop-up promoting an ebook. Nothing about that seemed too out of the ordinary. However, what struck me as odd was that the CTA wasn’t an Email field and “Submit” button.

    Instead, it just had a blue “Send to Messenger” button.

    Jeff Bullas Facebook Messenger chatbot

    Jeff Bullas sends ebook leads to his Facebook Messenger chatbot. (Image source: Jeff Bullas) (Large preview)

    To be honest, I was shocked to see that anyone would send their website visitors to engage with a Facebook Messenger bot. But when I shared this with web developers and designers, most of them responded with “That’s the direction marketing is going.”

    Facebook conversation about Messenger marketing

    These are some of the responses I received to my question about Jeff Bullas’ CTA. (Image source: Facebook) (Large preview)

    But…is it?

    Whether you put a chatbot on your website or direct visitors to one hosted on Facebook Messenger, is that a better solution for capturing leads and other contact information than with a traditional form? In all honesty, I’m not totally convinced that a chatbot can and should replace mobile forms (or just forms, in general).

    That’s why I’m bringing this topic to you, so we can look at this from all sides to decide what really makes the most sense.

    What’s Happening With Mobile Forms?

    About a year ago, I noticed an odd trend. Many times when I went to search for a Contact page in the navigation of a website, it wasn’t there. So, my next step was to scroll to the footer and see if they’d hidden it away there. That’s problem number one.

    There were also cases of websites that advertised a Contact page, only for it to turn out to be a Help Center or FAQs page. That’s problem number two. If you want visitors to support themselves, be clear about where you’re sending them.

    eBay sort of does this by labeling it as a Help & Contact page:

    eBay Contact page with articles

    eBay pulls a bit of a bait-and-switch by forcing visitors to sift through articles on the Contact page. (Image source: eBay) (Large preview)

    If visitors are willing to scroll through this self-help center, they’ll eventually reach some contact options:

    eBay contact options

    Contact options for eBay don’t appear until after the Help Center. (Image source: eBay) (Large preview)

    Note, however, that there is no contact form to be found, neither for basic inquiries nor support.

    Hubspot does something similar. When visitors click through the navigation to eventually find About > Company > Contact Us, they’ll see phone numbers, a fax number, a physical address and a link to Support.

    This is what the support page looks like:

    Hubspot support options

    Hubspot doesn’t include a contact form on its support page. (Image source: Hubspot) (Large preview)

    Again, there are no forms available. I’m assuming the support portal has them, but they’re nowhere to be found in the Contact or Support options on the website.

    So, what does this mean?


    Are visitors so fed up with filling out mobile forms that websites are ditching them altogether?

    What’s interesting about these two particular examples is that there are no chatbots or even live chat widgets to replace them. There just aren’t any easily accessible contact forms.

    As a consumer, this is something that frustrates me to no end. I know how websites work. When I see a “Contact” page, I should have contact options readily available, not a bunch of questions I have to sift through on my own.

    As someone who specializes in web design and marketing trends, I kind of get it. We have to build experiences that visitors will actually respond positively to. If forms just aren’t getting the levels of engagement you need, then ditch them. However, I think there needs to be a better replacement for them than a Help Center and list of phone numbers.

    Which is why I find chatbots as an alternative an interesting possibility.

    Are Chatbots Any Better?

    A lot of chatbots you see on websites are strictly navigational.

    Hey, what are you doing here today? How can we help?

    Similar to the examples above, they just provide visitors with a list of helpful responses or pages to explore.

    Drift is a company that’s in the business of building conversational marketing tools (i.e. chatbots). So, it’s no surprise that its website would utilize one in lieu of a contact form. The only problem is that it tries to do more than that. Here’s what I experienced:

    I located the Contact option labeled as “Talk to Us” in the footer:

    Drift Talk with Us

    Drift’s contact option is called Talk with Us. (Image source: Drift) (Large preview)

    DriftBot then opened with a friendly greeting and prompted me to ask a question:

    DriftBot introduction

    This is how DriftBot kicks off the conversation. (Image source: Drift) (Large preview)

    This was the question I asked since I figured it would be something a marketer or business owner was curious about:

    DriftBot question and answer

    I submitted a very custom question to DriftBot to see how it would handle it. (Image source: Drift) (Large preview)

    All DriftBot did was link out to a bunch of articles that didn’t really match any of the keywords in my question. As a result, I found the response unhelpful, which is why I marked it as such:

    Drift failure to answer question

    DriftBot didn’t do much in the way to offer an answer, but does offer support ticket assistance. (Image source: Drift) (Large preview)

    Eager for human assistance, I selected the option to “Create a ticket”:

    DriftBot support request

    DriftBot’s initiates the support request process. (Image source: Drift) (Large preview)

    Only then did Driftbot finally take me through the options of filling out a support ticket/contact form:

    DriftBot support form replacement

    DriftBot’s support ticket process is the same as a contact form, but much longer (Image source: Drift) (Large preview)

    What stinks about this exchange is that the chatbot not only wasted my time with ill-fitting self-help resources, but it wasted my time with unnecessarily long contact form questions. That’s one of the things we talk about all the time in designing forms for mobile:

    Keep the labels short.

    In this case, I absolutely do not think that chatbots should replace forms. It might seem faster or more natural to provide a response in a conversation-like format, but that doesn’t matter when that conversation takes you on a detour from the one thing you wanted to do.

    It’s like what İlker Köksal of BotAnalytics said:

    About 40 percent of [chatbot] users never get past the first text and another 25 percent drop off after the second message.

    It’s because of chatbot exchanges like the ones above. When you make it overly complicated or when you violate the rules of good design etiquette, how can you expect visitors to want to engage with your chatbot branded as a contact form replacement?

    That said…

    I do think there is an argument for chatbots replacing forms in certain cases. Let me explain.

    When Should Chatbots Replace Mobile Forms?

    Funny enough, a report from Drift (and partners) reveals why you might want to replace mobile forms (at least some of them) with chatbots.

    Let’s start by looking at the most commonly reported frustrations consumers express with websites:

    Drift report: consumer frustrations

    These are the most common frustrations consumers have had with websites. (Image source: Drift) (Large preview)

    A lot of this has to do with how difficult it is to navigate or get specific details from a website. If that’s the case, then chatbot widgets that live in the bottom corner of a website would actually be perfect for that purpose.

    Now, 31% say that it’s hard to get answers to simple questions and 22% say that online forms were poor quality. In that case, the Contact page chatbot would work well if it were simply there to make the contact form experience feel more personal.

    The Drift report also shows consumers’ responses for when they believe a chatbot would be useful:

    Drift report: chatbot predictions

    These are how consumers predict they may be able to engage with chatbots. (Image source: Drift) (Large preview)

    You can see that there’s a lot that people want to be able to do with chatbots. As mentioned before, though, you must be careful with them. If they’re not configured to handle complicated requests or questions, you might end up frustrating users more than satisfying them.

    That’s why chatbots might actually be best as a replacement for very simple and predictable mobile forms. For instance:

    Basic contact forms, of course, can be replaced by chatbots if you want to add just a tad bit more flavor to the exchange. Just be mindful of your visitors’ time. Landbot has a nice example of this on its Sales contact page:

    Landbot contact chatbot

    Landbot replaces a basic contact form with a basic but more friendly chatbot. (Image source: Landbot) (Large preview)

    You can see that it’s slightly more expanded from what you’d ask for on a contact form. However, it works in this case:

    Landbot chatbot questions

    Landbot’s chatbot mimics the questions of a contact form. (Image source: Landbot) (Large preview)

    You might also want to replace a basic support form with a chatbot so long as you’re clear that it only handles basic requests. This would be good for an e-commerce website that can retrieve details from tracking IDs and orders, as in the case of UPS:

    UPS support bot

    UPS offers to handle quick answers through its virtual assistant bot. (Image source: UPS) (Large preview)

    As you can see, the chatbot even reinforces this idea by telling visitors it will help with tracking-related questions:

    UPS virtual assistant

    UPS’s virtual assistant offers to help with tracking questions. (Image source: UPS) (Large preview)

    Order forms with preset options that visitors just have to click on would be good. When you remove the possibility of visitors throwing unpredictable questions or responses out there, your chatbot can successfully replace a form, like the case of Dom from Domino’s:

    Dom order bot from Domino’s

    Domino’s makes pizza ordering easy with preset clickable choices. (Image source: Domino’s) (Large preview)

    You could also use a chatbot to power other simple form-type engagements on your mobile website. For instances, surveys with multiple-choice answers and quizzes with preset options could easily translate well to a chatbot.

    Lead generation forms in pop-ups (like the Jeff Bullas example) or on landing pages might make sense. After all, how much could a chatbot possibly screw up the collection of an email address and a name?

    That said, with pop-ups, your only option is to use Facebook Messenger. And, to be quite frank, I’m not a fan of handing over any more data to Facebook than is needed — especially something as valuable as your list of leads.

    What About Facebook Messenger Chatbots?

    Drift’s survey found that 27% of people would be opposed to engaging with a chatbot if they could only do so through Facebook:

    Drift report: Facebook fears

    27% of people don’t want to engage with a chatbot only through Facebook. (Image source: Drift) (Large preview)

    That’s not surprising at all considering the security issues and privacy concerns surrounding the social media platform.

    But what about all of those people — including my colleagues from earlier — who seem more than happy to use Facebook Messenger to power their on-site bot? Even Neil Patel buys into it. He says that his Facebook Messenger bot gives him an 88% open rate and 56% click-through rate.

    I certainly get the appeal as you don’t have to worry about follow-up emails going unopened or lost to spam forever. However, I’m just not sure that Facebook should be the vehicle through which we power our chatbots. I’m also not sure how much longer consumers will be okay with it either.

    One of the reasons why I say that is this:

    A Facebook tracking notice

    The Facebook tracking pop-up users see after clicking on Send to Messenger CTA. (Image source: Jeff Bullas) (Large preview)

    It’s bad enough that websites are now littered with cookie consent messages, reminding us of how unsafe it can be to share data online. Now, our engagement with a CTA button is telling us that Facebook wants to do even more tracking while we’re on the website?

    To add more fuel to the fire, this is what happens as a next step:

    Messenger login request

    The next step in retrieving an ebook from the Jeff Bullas’ website. (Image source: Jeff Bullas) (Large preview)

    Because I’m being directed from the Jeff Bullas website to Facebook, I can’t actually be moved to my Facebook or Messenger apps. Unfortunately, mobile browsers just don’t have the ability to connect to apps that way; only other apps can.

    How many Messenger users do you think actually know what their Facebook login information is? So, what should be an easy one-click login step has now become a pain in the a** for mobile users.

    Honestly, I think that anything that pushes visitors away from your mobile site is a bad idea. I get that email can be a hard nut to crack sometimes. As Larry Kim summarized in this Hubspot podcast:

    Typical open rate for emails is 5-10%, so 90-95% of people aren’t engaging; open rates for chat marketing are 70-80%, and click rates are 10-20%.

    But here’s the thing: they’ve already taken the first step in giving you their email address through the chatbot. It’s not like you’re contacting cold leads. There’s no reason to think that only 10% of those chatbot contacts would open your emails.

    So, even though Facebook Messenger might make it easier to implement a chatbot and relieves your site and server from having to host your own chatbot solution, I’d say you should avoid this one at all costs.

    Wrapping Up

    Honestly, I have no problem with chatbots replacing mobile forms so long as:

    • They’re used in the right place and at the right time.
    • The purpose of the chatbot is made clear.
    • They replace only the simplest of forms.

    When done right, chatbots can reduce the need for typing, decrease the intimidation of answering a bunch of questions, and make a form feel more like a conversation.

    Smashing Editorial
    (ra, yk, il)

    Source: Smashing Magazine, Should Chatbots Replace Forms On Mobile?

    Tips For Managing Design Systems

    dreamt up by webguru in Uncategorized | Comments Off on Tips For Managing Design Systems

    Tips For Managing Design Systems

    Tips For Managing Design Systems

    Nick Babich



    (This is a sponsored article.) A design system enables a product team to create a product faster by making the design reusable. But quite often, despite everyone’s best intentions, all the effort that a product team puts into making a thoughtful design system can go straight down the drain.

    Nowadays, there’s no shortage of articles explaining what a design system is and how to create one. However, there’s still a lack of practical recommendations on how to manage a design system.

    Let’s fill this gap. In this article, I’ll talk about things you can do to set up your organization for long-term success with your design system.

    1. Encourage Adoption Of Your Design System

    More important than building a design system is encouraging everyone to use it. A design system sets a new direction for an organization, and whether the organization accepts this direction will largely depend on how people react to the changes. Depending on the size of the company, encouraging people to adopt a single design system can be a tall order. People will be happy to adopt the system only when they find it to be valuable.

    Here is what you need to do to get your organization to follow the direction you’ve established with the design system.

    Create A Vision Statement

    Where are we going? What do we want to achieve? Why do we want to achieve that? Those are fundamental questions that you need to answer in order to build a shared vision.

    A vision statement defines what your team, product or company is attempting to achieve and, more importantly, why. The vision statement will become your North Star — it will unite the team and guide it towards a common destination.

    A simple technique you can use to create your vision statement is to describe what your product or organization should look like in five years. By doing that, you’ll define a target condition.

    The vision statement is the answer to the question, “Where do we want to go?” (Image: UIE) (Large preview)

    Establish Guiding Design Principles

    How do you define good design? How do you know when something is ready to ship? When it comes to evaluating the quality of a design, designers often rely on their own set of standards. But as a team grows, following such an approach can introduce a lot of chaos in the product design process, because every designer will have their own subjective ideals. That’s where design principles can save the day.

    Design principles act as standards for the product team and help them to measure their work. They replace subjective ideals with clear standards that help team members make user-centered design decisions. However, in many cases, it’s not hard to make people follow guidelines, but rather it’s hard to make people agree on guidelines. That’s why it’s essential not only to establish grounding principles of design, but also to get a commitment to those principles from the people involved in the creation of the product.

    Here are a few things to remember when working on design principles:

    • Design principles should reflect the nature of the product.
      For example, when it comes to human-machine interface design for automobiles, the most important design principle should be “Safety first”. Every design decision should be measured for safety — the goal is to keep the driver and passengers safe.
    • Practice open discussion.
      If an organization has many design teams, then involving them in a discussion is vital. By getting their feedback on the design principles, you can adapt the principles to the needs of users.
    • Design principles should not sound like rules.
      Product creators should not feel limited or restrained. It’s important to make everyone comfortable when they do their work.

    Magera Moon has written an excellent article, “Creating Etsy’s Design Principles”, that describes the process of creation.

    Get Buy-In From Stakeholders

    A design system won’t take off if the people who decide on funding don’t buy into it. You need to get buy-in from executives to fund the system.

    Write a strategy with a clear proposal, and pitch it to key decision-makers. Your goal is to show that the system solves real problems. Identify key pain points — areas where people spend much time (especially routine operations), and pitch a presentation (or series of presentations) to show how the design system can save the day.

    Quick tip: Wrap your presentation in the form of a story. By telling success stories, you will have a better chance of engaging stakeholders.

    Promote Your Design System

    You can create the best design system in the world, but if you don’t actively promote it in your organization, the entire effort will suffer greatly. That’s why, from the first release of your system, you need to work hard to foster its adoption and create a community of supporters.

    Evangelize the design system. Create a group of volunteers, led by senior designers, who will pitch and sell ideas about your design system. The evangelists should participate in various activities such as workshops and webinars. The goal of all of those activities should be to raise awareness that the system exists and to educate people on how to use it.

    Show Value Through A Sandbox Environment

    It’s well known that the best way for people to see value is to experience it. So, create a sandbox environment that will allow product team members to quickly prototype apps using your design system. Using Adobe XD, it’s easy to create an environment that empowers people to experiment with their own ideas. Actually, it’s a two-step process.

    First, you need to teach people how to build things using XD. The XD team has prepared a series of tutorials to familiarize people with the basics of Adobe XD.

    Secondly, you need to set a solid foundation for your design system. Again, you don’t need to start from scratch. Ole Fredrik Lie has made a UI kit especially for design systems: Semantic UI Kit (download the ZIP file). The kit includes all of the basic components you need to start designing at scale, such as buttons, inputs, search, tabs and more.

    Semantic UI Kit for Adobe XD. (Large preview)

    2. Establish A Culture Of Communication

    Every team member should use the design system on a regular basis. In doing so, team members will learn to solve problems systematically, not individually. Communication plays a key role in this process. Invest in creating a culture of communication early in the process, because it will increase the likelihood of adoption of the design system.

    Shared Language

    Language is fundamental to collaboration. The design language needs to be shared among the people involved in the creation of the product. A shared language allows team members to follow the same approach when giving names to new components and interface elements and when referring to existing components in conversation.

    Communicate Changes

    Once the design system is being used in product design, it’s vital to communicate changes and updates to the entire organization. Ship updates regularly and with a changelog. The log should tell users what changes were introduced in the new version and how upgrades will impact their work.

    Release notes in the Salesforce’s Lightning Design System. (Large preview)

    Open Channels For Getting Updates

    Bake communication channels into the team’s daily workflow. This will help to keep both the design system’s users and makers engaged.

    Start simple. Create a trigger for the update — whenever someone pushes updates to the design system, send a notification to your Slack channel, announcing to the team that a change has been proposed. Also, make an effort to be available via Slack to answer questions.

    Establish A Practice Of Regular Checkups

    In addition to a day-to-day conversation between the design system’s makers and users, it’s worth scheduling regular meetings to review the design system with makers, users and stakeholders. Discuss what works and what does not, what needs to be improved and when. The meetings will help you set priorities and create a roadmap to improve the system so that it better serves the needs of the business.

    3. Improve Design Efficiency

    Reduce Duplication Of Design Elements

    Duplication of design elements leads to fragmentation, and fragmentation leads to inconsistency. Identifying duplication of design elements helps a team to avoid the scenario in which team members build an element from scratch and after a while find out that a version of it already exists.

    Conducting an interface inventory, as described by Brad Frost, is a popular way to understand what’s in use. It’s worth investing time in an interface inventory even before building the actual design system, because going through this process will enable you to identify problem areas that need attention and help you to understand how much design debt your team has.

    Interface inventory in action. Image: Brad Frost. (Large preview)

    Analyze How People Use Your Design System

    Similar to any other product you design, you need to find the answer to the following question: Who will use your design system, and how will they use it? Conduct research to find the answer to this question.

    If you’ve just started incorporating a design system into your organization’s design process, conduct a series of interviews to understand how people use it. By doing that, you can pinpoint problems ahead of time. Try to make time for in-person feedback sessions, because such sessions will give you more insight than you would get with remote interviews or online surveys.

    It’s also recommended to conduct user journey mapping. User journey mapping helps you better understand the user’s experience.

    Strive To Create Reusable Components

    Many design systems suffer from the same problem: Team members create components that are too focused on a single use case. As a result, the system becomes too inflexible, and its users (designers and developers) have to create their own components each time they need to cover a particular scenario.

    A successful design system is highly reusable. Take Bootstrap. Because it was architected with reusability in mind, thousands of websites use it as their foundation.

    Bootstrap framework. (Large preview)

    Try to develop components that are not tied to a single use case, but can be reused in multiple contexts. To be reusable and scalable, components need to be the following:

    • Modular
      Modular components are self-contained — they don’t have any dependencies.
    • Composable
      It’s possible to combine components to create new components.
    • Customizable
      It’s possible to adjust and extend components to make them work in a variety of contexts.

    Every time you want to introduce a new component, consider how it will work on the various platforms you are designing for. Ideally, every component you design should work on all platforms.

    Introduce Versioning

    Versioning makes it much easier to track changes. With versioned releases, users can reference a specific version as a dependency. They also have control over when and how upgrades to new versions are handled.

    Versioning also helps you deal with breaking changes — situations where changes to a component’s code break existing usages of that component.

    There are two types of versioning:

    • Versioning the entire system
      Here, everything within the system belongs to just one version number. As users, we deal with versioning for the whole system every time we update our mobile OS — when we update iOS, we’re updating the entire piece of software. Following the same approach for a design system will mean that users will have to update everything within the design system during the update. For example, if you changed a primary font, add a new secondary color or deprecate a particular UI element, when a user of the design system chooses to upgrade, they will get all of those changes together.
    • Versioning by modules
      This type of versioning involves having a version number for every component or style within the design system. Compared with versioning the entire system, versioning by module allows for more flexibility — users can choose to upgrade just the elements they need.

    Establish A Clear Governance Strategy

    Change is the only constant, as they say. Creating a clear governance strategy is essential to making sure your design system can adapt to changes. A robust governance strategy starts by answering some critical questions about how changes are handled, such as:

    • Who approves changes to the design system?
    • How are requests for new components handled?
    • What happens when bugs are found in the design system?

    The organization of a design system is really important to its scalability. In his article, “Team Models for Scaling a Design System”, Nathan Curtis describes the three models:

    • Solitary model
      In this model, an “overlord” rules the design system.

      In the solitary model, the one team make a system available. Image: Nathan Curtis. (Large preview)
    • Centralized model
      In this model, one team is in charge of the system and guides its evolution.

      A single, central design team produces and supports a system used by others. Image: Nathan Curtis. (Large preview)
    • Federated model
      In this model, several people from several teams are in charge of the system.

      Designers from multiple product teams work on the system together. Image: Nathan Curtis. (Large preview)

    Each of the models above has strengths and weaknesses, but the first is the most fragile because it has a built-in risk — when one person is in charge of so much, that person can quickly become a bottleneck to the completion of many tasks. As Nathan Curtis mentions in his article, overlords don’t scale. That’s why many teams are moving away from the solitary model to the centralized or federated model — those models are usually much better for scaling the design system.

    In many cases, it’s possible to try a combination of models. For instance, the Salesforce team’s model is a combination of the centralized and federated models. Though Salesforce’s Lightning Design System has a core team, there are also contributors who act as a federation of practitioners.

    Salesforce uses a hybrid of two models. Image: Jina Anne. (Large preview)

    Find The Right Balance Between Strictness And Flexibility

    One of the main goals of a design system is to extend creative direction. The system should give designers and developers the freedom to explore various approaches before they select one to follow.

    It’s vital that the system does not prevent designers from exploring different styles. In her book, Alla Kholmatova defines two types of design systems:

    • Strict
      Designers and developers have to follow a rigorous process when introducing a new pattern in a system.
    • Loose
      The system acts as a framework, allowing designers and developers to experiment and try various approaches.

    You have to find the right balance between the two extremes.

    Cross-Functional Collaboration

    Design is a team sport, and creating a design system is no exception. You need more than just designers to create an efficient design system. The expertise and creative energy of cross-functional collaboration will help you create a system that works best for your organization’s needs.

    Product managers, project managers, executives and other stakeholders have unique perspectives that can undoubtedly inform and shape the work.

    Here is a quick list of disciplines you’ll need to involve in the process of creating and managing the system:

    • Front-end development
      Front-end developers review the code and rework it to make it modular.
    • Back-end development
      Back-end engineers help to identify architectural decisions that could affect the front-end UI.
    • Content management
      Content strategists set the voice and tone of the design system.
    • UX research
      Researchers understand the needs of your users and help to bake those needs into the system.
    • Performance testing
      Performance engineers help you to avoid performance degradation.
      Leadership
      Leaders align the vision throughout the company.

    At the same time, it doesn’t mean that every discipline should be constantly involved in developing the system. Cross-discipline exploration is better. Conduct cross-team sprints: Create teams of people from different teams, and have them work together and explore different areas of design and development. Such activities will help them to find common problems that many teams think are important and to propose solutions — in other words, users of the design system will tailor the system to their own needs.

    Ship Early And Often

    As with regular products, the waiting time for updates plays a key role in adoption of the design system. Practice regular incremental releases, rather than big reveals, and work hard to integrate the components into the products as soon as possible.

    To make that happen, define clear timelines for new components, code reviews and other procedures.

    Test Your Design Decisions

    Some product teams believe that once a design system is built, the work is complete. Not true. A design system is a product, and it’s vital to manage it as a product instead of a project — a designs system requires ongoing maintenance and improvements as needs arise.

    It’s essential to test the design system and the products that use it. When you test the design system, you will become confident that you have a solid foundation for your design.

    If you’re just starting to introduce the design system into your design process, start small and test the foundation of the system before extending to larger parts. Find a pilot project — rebuild a real part of a product using this new approach — and see whether it works for your team.

    Here are three types of testing that will help you:

    • Functional testing
    • Visual regression testing
      Visual regression testing help you to catch unintended visual changes to component styles.
    • Manual and automated accessibility testing
      This ensures that your components are accessible.

    Measure Progress

    Assess how effective your design system is at achieving your goals. Define key metrics, and track them with each release.

    4. Invest In Documentation

    A well-crafted design system is an excellent tool. But even more important than having a great tool is knowing how to use it properly. Documentation is key to adoption.

    Write Documentation To Make It Crystal Clear

    Minimize jargon and specific terms. Write the documentation in simple, human-readable sentences so that everyone on the team can understand it. This decision will also save a lot of time when onboarding new team members.

    Keep Documentation Up To Date

    If some part of the system is not documented, it doesn’t exist. When some elements of the design system go undocumented, you run the risk of duplicating elements. Thus, try to keep documentation up to date with your system’s code by automating documentation — the documentation should be automatically updated when a component changes. This should include both visual references and code samples.

    Good Findability Of Information

    Prioritize sections with information in the documentation, and make sure search works fine. The structure you choose should follow the pattern that users follow when browsing the documentation.

    Users should be able to find what they’re looking for themselves and not have to ping other people to find it.

    Bake Best Practices Into The Documentation

    When best practices — such as accessibility, performance, ergonomics and so on — are baked into the system, it becomes much easier for users to apply them.

    Shopify’s Polaris design system has sections with best practices. (Large preview)

    Conclusion

    Incorporating a system into a design culture takes a lot of time; it’s a gradual process. And the way you manage the design system plays a vital role in its adoption. A successful design system needs to become part of the organization’s DNA, helping your team produce more consistent user experiences, building bridges between design and development, and improving your design process without exposing your orgchart.

    This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

    Smashing Editorial
    (ms, yk, il, al)

    Source: Smashing Magazine, Tips For Managing Design Systems

    Demystifying JAMstack: An Interview With Phil Hawskworth

    dreamt up by webguru in Uncategorized | Comments Off on Demystifying JAMstack: An Interview With Phil Hawskworth

    Demystifying JAMstack: An Interview With Phil Hawskworth

    Demystifying JAMstack: An Interview With Phil Hawskworth

    Vitaly Friedman



    Some of you might have heard of JAMstack, and perhaps even about how to switch from WordPress to Hugo, but is JAMstack a viable option for any kind of project?

    I spoke with Phil Hawksworth, a front-end engineer who (after 9 years of working at agencies has returned to working on a standalone product) is now focusing on developing strategies for JAMstack technologies to make building for the web simpler, faster, and more secure. Phil will also be co-hosting JAM_stack ldn, a conference dedicated to static site generators, serverless and JAMstack in London, on July 9–10.

    Vitaly: So hello and welcome to one of our conversations with our speakers at Smashing Conf and generally nice people. You might remember those times when FTP was a big thing and maybe actually you’re still deploying why FTP is a perfectly safe space so you don’t have to worry about that. But changes are high that you’re not using FTP anymore and instead move to Git based workflows, and probably continuous deployment. All this fancy whistles and bells. And so today I’m very happy to welcome Phil Hawksworth who is actually working at Netlify, Developer relationships [inaudible 00:10:00]. Hello Phil. How are you doing today?

    Phil: I’m great, how are you doing Vitaly? It’s nice to see you.

    Vitaly: Aw, I’m doing great. It’s always pleasure to see you. You’re like a sunshine streaming Netlify and Jump Stack and everything.

    Phil: I try. I’m not even branded up, what a missed opportunity.

    Vitaly: That’s okay, that’s okay. But you have to tell me, so that gem or jen or jeet, like, jem? Is it jem?

    Phil: Jam. It’s jam. It’s all about the jam.

    Vitaly: It’s all jam. So the JAMstack. For developers or designers, actually never heard the term before. If you wanted to maybe sum up what it is and why it’s good and what are the benefits of it in the first place. Why would you ever want to move from your traditional, good old stack to JAMstack. Maybe you could sum it up briefly.

    Phil: Let me see if I can try because it’s tempting just to say, JAMstack, the JAM stands for Javascript, APIs and mockup. But that in itself doesn’t really explain very much, just knowing what it stands for. So really, JAMstack is all about a way of deploying and serving websites that don’t rely on an origin server, they don’t rely on requests hitting an active server all the time.

    Phil: So you might be more familiar with stacks like the LAMP stack which was Linux, Apache, MySQL, and PHP, that was the kind of stack that was serving your site there. With JAMstack, it gets a bit different because we’ve kind of moved up a level, away from the server and closer to the browser so it’s thinking a lot about getting in a browser as fast as possible and then using technologies in the browser to enhance and augment it later on. So JAMstack is all about pre-rendering sites, getting it into the browser, and then maybe enhancing it, augmenting it, the experience with Javascript running in your browser, maybe making requests to APIs and that kind of thing.

    Phil: So that’s the model, trying to get away from having a server that you need to maintain because I know maintaining a server is difficult. I don’t know about you but I’ve got lots of sites that kind of went away when I just turned my back on them for a few years. I needed to upgrade PHP which meant I needed to upgrade the version of Linux which I’ve done once in a blue moon. So maintaining servers is difficult so the idea of the JAMstack is to try and make it as simple as possible to serve sites as static assets and then make the most out of all the APIs and inabilities in the browser to do augmentation and do more things with them there.

    Vitaly: Right, makes sense. Well, in fact, we moved to JAMstack 2 years ago or so now.

    Phil: Two years?

    Vitaly: Yeah, it was quite a journey for us. And of course, we learned a few lessons along the way. But I’m wondering, would you say that essentially every project could benefit somehow from moving or moving some parts of it to JAMstack or like, where do you see its limitations? Is it something that potentially every developer could use in a project or is it something that’s kind of dedicated to a particular group of websites or a group of projects?

    Phil: Yeah, I mean, it’s tempting to say, oh yeah, you can use it for everything but I think you should be careful saying that about any technology. You know, you really need to kind of pick the use cases and make sure it’s tailored well. I would say the first instinct when you think about a JAMstack site and maybe think about something which is served as static assets, maybe directly from a CDN. You might think, well that’s only good for sites that don’t change very often, they’re quote on quote, static, they don’t change. But in actual fact, that’s not really the case because so many tools exists now that can reduce the friction in deploying things.

    Phil: You can deploy many many times a day, or many times an hour if you want and actually make things feel a lot more dynamic than they might have done before. So some of those use cases where you think they wouldn’t be appropriate; those actually come into the fold as well. The time that it gets challenging, perhaps though, is when we’re creating sites that have many many pages, many hundreds of thousands or many millions of pages because the JAMstack model really makes a lot of sense when you can pre-generate your site so you might be using a static site generator. Those have really in vogue at the moment; those are really really popular.

    Phil: But of course, they have to do a piece of work every time they deploy an update so if you have a site, maybe like a newspaper site, that has many millions of pages, the work that is required to re-generate that can be quite, you know, that can take a long time so that’s when you start bumping into some of the limitations of where JAMstack can be, kind of, simply used. You can start to get a bit crafty and start to work around that if, you know, you’re very very crafty but it definitely introduces some challenges.

    Phil: One of the things I’m starting to see from a variety of different static site generators like Gatsby for instance or React Static, and also Hugo. The teams behind those static site generators are starting to explore ways that you can do progressive generation of the pages so in other words, you don’t re-deploy the entire site or regenerate the entire site every time something changes but try and find ways to do incremental builds. It’s kind of a challenging problem to overcome but there’s work being done on that at the moment so that will help to try and break down that barrier as well. But, certainly at the moment, finding ways to use a JAMstack site for a website that has many millions of pages or many hundreds of thousands of pages, that’s where it can be a little bit challenging right now.

    Vitaly: Oh, that’s interesting. So actually the idea of being then to serve a div of the state that you have and essentially that whatever you have to build, like a new portal has to be kind of paged into it so it’s interesting to see this happening. Because you also, just recently, I think two weeks ago, there was an article by Jason Pamental coming up where the idea was actually very similar where you would actually load the fonts, and then you load the first page that you need and then you load the second and then you actually merge them in a way to create a new font, like also incremental font loading.

    Phil: Interesting.

    Vitaly: That would be really interesting to explore that.

    Phil: Yeah, and it’s not just so much of the loading, it’s the generation-

    Vitaly: The generation, the build out.

    Phil: Yeah, exactly.

    Vitaly: I understand. But what do you think are kind of the common challenges that most developers have? Well, I mean, let me move back first. If you have never worked on JAMstack before and you are very much comfortable and happy with your LAMP stack and you wanted to maybe explore the possibility and advantages like security and performance of JAMstack. How would you actually start? What would you move, what does it mean to workflow change?

    Phil: So, the changes to the workflow can actually be quite profound because you are taking away a lot of the infrastructure that you’d normally depend on and say actually we can do away with that and start deploying things directly to a CDN. But in terms of how someone might get started experimenting with this, chances are they might be using some of the aspects of this already. You know, even on kind of traditional ways of building things for the web.

    Phil: If you think about how you might build something on the LAMP stack, chances are in your PHP there, you’re doing things like writing a template that grabs data from a data source, in this case, the MySQL database or some kind of database, rendering those things into view and then getting them served. And that’s kind of similar to how static site generators work. They have templates, they grab data from somewhere that might be kind of structured data in files or it might be hitting some kind of database or a content API. Either way, it’s grabbing data, combining that data with templates, generating views and the only difference is that it’s not doing that on demand, it’s doing that ahead of time. So, some of the logical steps in that kind of cognitive steps for a developer might not actually be that huge.

    Phil: The biggest change is in thinking about how you deploy things. Because really what you’re deploying is your built, rendered assets entirety every time you want to do a deployment. That starts to bring things like the management of the content and the management of the code all into the same place so that things like the vision control across all of those things together. So it starts to be a slightly different way of thinking about how you might develop and manage sites and the content within it. So there are a few changes there. But the nice thing is, a lot of static site generators can be quite straight forward to start experimenting with and the nice thing is you don’t need a ton of infrastructure to do this. So the nice thing is that you can really start to build things out right on your local machine. You’re running a static site generator right on your machine and you can get a really good sense of what the outcome is going to be without needing to lean on lots of other infrastructure.

    Phil: So that kind of first step, the on ramp, can be quite shallow for you to start to say, “well, I’ll try this particular set of tools. I can run them locally.” And you’ll have good confidence that when you deploy the output of that somewhere, that will be exactly the same where you deploy it as it would be locally. That’s one of the things that I love about rendering things that are static because you’re not depending on lots of infrastructure and moving parts to serve them. You can look at them on the static server on your own machine and think, “yeah, this is how it will work when it goes off to a CDN.”

    Vitaly: Mm-hmm (affirmative);And also the infrastructure when we look, for example, into the way we build single [inaudible 00:10:07], and there is a huge number of options of what you could do. For the server, for the client, and everything in between.

    Phil: Yeah.

    Vitaly: And so, I think, in our case because we are kind of building out a skeleton and it’s serving straight through CDI with content and all and enhance with Javascript. It was actually quite reasonable and quite, I wouldn’t say easy but it made sense to move to that kind of set up. Because in the end, it’s just content that leaves on the page. It’s just HTML with a few comment areas and search box and a few other things. But if you’re moving towards really standalone application, maybe even financial application, online banking, this kind of thing. Do you think still that JAMstack would be a good option to consider there if you’re having something that requests a lot of logic? Does it need a server or not?

    Phil: Well, I hate to trot out the old phrase, “it depends.” But it kind of does depend a little bit. With that said, there are lots of applications which work just as well being a Javascript application as actually having a service side component to them. I say that with a certain amount of caution because I’m a little bit old school when it comes web development and I really like getting things into the browser as HTML as much as possible and then having a really high watermark from where you progressively enhance from. So I don’t personally like doing everything in Javascript and just shipping an empty body tag and then running everything through Javascript.

    Phil: With that said, there are sometimes where that’s perfectly acceptable. If you’re thinking about a certain kind of application which, of course, would heavily depend on Javascript and you know your audience. That can be completely reasonably. There are things that have been shipped recently. I’m thinking actually of something that shipped to Google IO for, as an example, the chrome team put together a game which was very heavily Javascript and that worked beautifully served statically. There are plenty of use cases where that can work.

    Phil: Going back to your financial example, I used to work, my very first job actually, was putting numbers on screens for traders to trade off using web technologies and this was before web sockets, it was before Ajax, it was before anything really that was useful to help you do that and it’s kind of challenging but more recently, you would do a lot of that kind of thing in Javascript and that makes perfect sense. You can start to make secure requests to APIs right from the browser. There’s plenty of models now for doing authentication and authorization directly from your browser. So in many ways, this can simplify the stack for financial institutions that want to build some of these things out because the way that they can decouple some of these things can make them much more manageable. So I’d certainly think that the JAMstack model could perfectly work in that scenario as well.

    Vitaly: Okay, so maybe coming back now to explore that world of JAMstack and front end. What are you most excited about these days, Phil? If you look at JAMstack and front end in general, is it something that’s really keeps you awake at night where you wake up in the morning hoping that yes, I’m going to work on that someday. One day I will get it done. Do you have [crosstalk 00:13:33]

    Phil: Yeah, and this is the kind of thing where your answer can be different day by day because it feels like this world moves so quickly. And that in itself is one of the things that excites me so much. Now that we’re starting to see the browser APIs start to really progress and the kinds of things we can do directly in the browser without having to implement them ourselves. That’s kind of exciting to me. I’m still very much a duffer when it comes to SVGs. I should explain the word duffer, if anyone who’s not English and watching this, it means a fool. It means I’m way behind the curve.

    Phil: But I find myself really wanting to do more with SVGs and animations are kinds of things I’m just way behind on and I want to play with that. But things like the browser APIs whether that’s things for offline or for improving performance and particularly at the moment the way the font loading seems to be getting more and more accessible so that we can start to really create things that visually are very rich and closer to what we might want to make with typography. I’m a bit of a nerd for that stuff, I like that kind of stuff so I want to play more and more with that.

    Vitaly: So Phil, talking about JAMstack conf in London. Can you also explain in a few words like what is it going to be about, what’s the focus and who is it for and what is your role there? Just behind the scenes, taking care of the content and all. What is your role there?

    Phil: So I’ve had the fun part of the job. So I’ve had the opportunity to go out and find speakers and find interesting content so I’m really excited about how the programs come together. We’ve got people like Chris Coia who’s going to talk about empowering front end developers and how much we can do with front end technologies now based on this JAMstack model. We’ve got people like Jake Archibald and Surma from the Google Chrome team who are going to talk about things like performance in the front end and ways that we can really drive very performance experiences either with static hosting or infrastructure or code that runs right in the browser.

    Phil: We’re also going to have Yuna Kravitz talking about things to do with CSS and Houdini and all of those kinds of things. And much much more besides. We’ll also be talking about things to do with the cultural change that a JAMstack model can have on your organization and on your projects so it really reaches all over the place. So I’m kind of excited about that. I’ll get the chance also to introduce all of these people because they’ve let me go wild and be the MC as well so that means I get to talk to these people and ask a few questions and those kinds of things. So I think it should be very interesting for anyone who is interested in front end development and also new models of delivering projects on the web in a really efficient way.

    Vitaly: Oh, so you do like the spotlight on stage, huh?

    Phil: I’m an attention seeker. You should know that by now, Vitaly.

    Vitaly: Oh, actually I always thought you were very humble and nice and kind person, apparently I was-

    Phil: It’s an act, it’s an act.

    Vitaly: Okay, that’s fine. Phil, we’ll meet in a few, oh actually, tomorrow.

    Phil: I’ll see you soon for another event but otherwise I’ll see you in July, July the ninth and tenth.

    Vitaly: [inaudible 00:16:52] So with this in mind, thank you Phil and signing off. Bye bye everyone.

    Phil: See you soon.

    That’s A Wrap!

    We’re looking forward to welcoming Phil at SmashingConf Toronto 2019, with a live session on JAMstack. We’d love to see you there as well!

    Please 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, Demystifying JAMstack: An Interview With Phil Hawskworth