Tag: Faster

28 May

How To Build And Launch Responsive Websites Faster With Editor X

by TBSCategories: News

As designers, we are used to having a lot of creative freedom within our tools. We intuitively select, move and fine-tune things until they look just right. Once the work leaves the design tool, we give away this level of control to an unpredictable, diverse, and fluid browser environment. There, some of our decisions suddenly will need to be refined, and as we want to introduce changes, we need to dive into code. Or explain these changes clearly and unambiguously, to avoid misunderstandings down the line. The latter part can be frustrating for all parties involved.

While web builders have been around for a long time, it wasn’t until recently that they became practical for professional use. Closing the gap between design and code has become the north star for many companies, and often this issue is seen as the most critical pain point that every team attempts to solve in their own way.

In this article, we’ll look into Editor X, a sophisticated platform for professionals and agencies to build websites, driven by an ambitious goal to close the gap for good.

What’s Editor X?

Chances are high that you’ve stumbled upon web builders in the past — often with a grain of skepticism and doubt about the outcome of these tools. Many of such builders heavily rely on pre-made templates with some level of customization. Editor X goes far beyond that by providing a platform for professional designers and agencies to create web experiences with a wide variety of flexible components and a series of advanced features.

The best way to find out what Editor X is capable of would be to build something with it and in this article, we’ll create a website from scratch.

Editor X follows well-established patterns and anyone with design experience will feel comfortable with it within a few minutes. For the most part, we’ll repeat the same workflow of adding elements, moving them across the canvas, and adjusting their properties.

On the top left side, we have toggles for panels that will help us add elements, navigate layers and manage pages. Then at the center of our workspace is the canvas, where we’ll directly interact with the design of the page. You’ll notice that the canvas is also resizable, which allows us to easily experiment with different viewports. Whenever we select anything from the canvas, we’ll see the Inspector panel open on the right.

The earlier the entire team is involved in the conversation about a new design, the more issues can be resolved early. Often you’d need to take a screenshot and paste it on Slack, or use another tool to discuss a design via a clickable prototype. On Editor X, you can invite teammates to the project, and assign them individual roles and permissions. There’s also an option to communicate with your team in real-time by leaving comments on the page or on specific components.

Creating The Structure Of The Website

Before we start adding content, we’ll create sections that will serve as a skeleton for our page. Sections in Editor X are essentially large containers that hold our content. As soon as you create a new page, you’ll see a header and footer section already added to the canvas. To add new sections we can click on any existing one and we’ll see a blue “+” icon at the edge of it.

Adding Content And Styling Our Page

Adding elements in Editor X is straightforward. We open the “Add” panel and drag elements into the canvas. Within that panel, we have a wide range of elements, components and entire sections that will become the building blocks for our website.

Every element that we drop on the canvas can be easily moved and aligned. We can also control how elements react to changes in the screen size by using the “Docking” feature. When the screen is being resized, docking options will determine the vertical and horizontal position of elements within different types of containers.

For the right side of our section, we’ll add an image that we’ll replace with our illustration. To make this work, we just need to click on “Change image” and then upload our assets to the media library. You’ll notice that apart from the assets we’ve added, you have direct access to a large library of free stock photos and pre-designed illustrations.

To implement the three steps of our “How it works” section, we’ll use a repeater element with three items and 20px space in between. The repeater is essentially a list of items where the style and layout of the first item are repeated automatically for the rest while the content can be different.

First, we’ll add the title and paragraph within the first item and see them repeat in realtime. Above them, we’ll add a container with a border and a text element inside the container by going to Quick add → Container → Inspector → Design → Corners.

Now that we have the content of our header, it’s time to start applying some styles to it. We could go the usual route and apply styles element by element, but we can also use the “Theme manager” to create global typography and color styles that will automatically define these changes everywhere. This goes beyond the scope of our page along, so we can use it to match the style across our entire site.

Click on the theme manager icon on the top bar of the editor. From there, we can manage the global text and color styles on the site. We’ll start by changing the background color to #030F1D and the color of our action items to #030F1D. Then we’ll change the headline fonts to Sora and also adjust the typography colors to fit our palette.

This concept goes even further as we can save our themes to a design library that can be used across all the websites we create with the tool. This makes it easy for teams to implement and manage their design systems. Also, imagine working on a series of themes and designs that you might want to reuse across a wide range of your products, or if you want to maintain a series of products for your clients. This could save quite an amount of time — and managed from one central place.

The next section will serve as a showcase of the product. First, we’ll add a headline, sub-headline, and an image element to the canvas and turn them into a stack. Then we’ll dock them to the center and increase the height of the section.

To achieve the overlapping effect we’ll add the particles in two separate image elements and arrange them to appear in the back.

Lastly, we’ll update the colors to match our palette, for the background we’d use #FFECE4, while the color of the sub-headline will be #836153.

Forms are essential for most websites and in our case, we’ll need one to collect the contact information of visitors interested in our product.

To create a form we’ll need to go to the Add panel and select “Contact & Forms”, from there we can see a variety of templates that we can use as a starting point. For our page, we will choose the “contact form” by dragging it to the canvas.

In the last step, we’ll add a menu to our website. With the tool, we can create complex websites with many pages tied together by seamless navigation, but in our case, we only need to navigate between the sections of this specific page. For this purpose, we’ll use a feature called “Anchors”. We’ll go over the sections that will be part of our menu and we’ll add an anchor that we’ll later use in the menu settings.

Select any element, then click the “Anchor” section in the Inspector panel on the right side of the editor. Then click on the toggle and simply name the anchor. We’ll repeat this for all sections we’d like to have in the navigation.

Now to add those in the menu, click “Manage menu” and then “Add link”. From there. we need to select the Anchor option and the anchor we want to link.

Making The Site Come To Life

One way to make the site more interactive and distinctive is to add animations to our elements. Of course, we can add animation on the platform as well, and apply it to any element or section on the canvas. To achieve that, we need to select the elements we want to animate, and then click on the Animation icon.

There are plenty of presets that we can use out of the box, but there’s also the option to fine-tune variables such as duration and delay.

In our case, we’d like to add a subtle fade-in animation to all of the headlines and images on the canvas.

Animation showcase (Large preview)

Designing For Different Screen Sizes

It’s common to see mock-ups created for desktop first, or for mobile-first, but in practice, we actually need to be creating both at the same time. The priorities that we define for our content blocks might need to change from one screen size to another, but we need to explore how we can put the right emphasis on the right elements, and choose the right way to position them both on desktop and on mobile. With the tool, we can achieve that by designing for individual breakpoints and using fluid and relative size units of measure.

Obviously, it’s a good idea to add breakpoints only when we need them, so we can add our custom breakpoints as we are previewing the site growing from small to large viewports. Obviously, we can do that without leaving the tool. Whenever we need a breakpoint, we can add them (or edit already existing ones) by clicking on the three-dotted menu next to the breakpoints.

If you’ve used relative sizes till that point, many of the elements will already resize properly. For the rest, we’ll go through the different breakpoints and create design overrides to make sure that everything looks as expected. The changes that we make will be applied to the specific breakpoint range that we’ve selected, and they will cascade down, too.

It’s important to note that we don’t have to rely on the pre-made building blocks alone though. If you need to build in a complex functionality for your projects, you can do it as well. In fact, you can add your own JavaScript, connect to APIs, use npm packages and automate client-to-server interactions with web modules. These features are available via an integrated development platform called Velo.

But for the scope of this article, although we mostly combined a few elements without rewriting or fixing code, the results are quite solid compared to what one would normally expect from a website builder. Overall, the score is quite high on performance and accessibility, especially on desktop, although you might need to optimize your site more for mobile devices.

Wrapping Up

When it comes to web builders, it’s not unusual to be disappointed by the outcome — with plenty of accessibility and performance issues, along with bulky and messy markup, overly specific CSS, and slow JavaScript. When we look into the website creation process on Editor X, it appears to be a platform that has gone quite far to provide a straightforward environment for building good websites, while also including collaboration features, responsive testing, and some components that might need quite a bit of time to prototype or set up otherwise.

If you are working with agencies or organizations where you plan to reuse components, or if you need to set up and maintain sites quickly for a variety of your clients, Editor X could be an interesting option worth considering. It comes along with personal and business plans, support for online payments, eCommerce, domains and storage, online bookings, ticket and event management, as well as video monetization. Chances are high that you’ll find what you need — both for quick prototypes and extensive client work.

You can create an Editor X account for free and test all features, without any strings attached.

Articles on Smashing Magazine — For Web Designers And Developers

28 May

How To Build And Launch Responsive Websites Faster With Editor X

by TBSCategories: News

As designers, we are used to having a lot of creative freedom within our tools. We intuitively select, move and fine-tune things until they look just right. Once the work leaves the design tool, we give away this level of control to an unpredictable, diverse, and fluid browser environment. There, some of our decisions suddenly will need to be refined, and as we want to introduce changes, we need to dive into code. Or explain these changes clearly and unambiguously, to avoid misunderstandings down the line. The latter part can be frustrating for all parties involved.

While web builders have been around for a long time, it wasn’t until recently that they became practical for professional use. Closing the gap between design and code has become the north star for many companies, and often this issue is seen as the most critical pain point that every team attempts to solve in their own way.

In this article, we’ll look into Editor X, a sophisticated platform for professionals and agencies to build websites, driven by an ambitious goal to close the gap for good.

What’s Editor X?

Chances are high that you’ve stumbled upon web builders in the past — often with a grain of skepticism and doubt about the outcome of these tools. Many of such builders heavily rely on pre-made templates with some level of customization. Editor X goes far beyond that by providing a platform for professional designers and agencies to create web experiences with a wide variety of flexible components and a series of advanced features.

The best way to find out what Editor X is capable of would be to build something with it and in this article, we’ll create a website from scratch.

Editor X follows well-established patterns and anyone with design experience will feel comfortable with it within a few minutes. For the most part, we’ll repeat the same workflow of adding elements, moving them across the canvas, and adjusting their properties.

On the top left side, we have toggles for panels that will help us add elements, navigate layers and manage pages. Then at the center of our workspace is the canvas, where we’ll directly interact with the design of the page. You’ll notice that the canvas is also resizable, which allows us to easily experiment with different viewports. Whenever we select anything from the canvas, we’ll see the Inspector panel open on the right.

The earlier the entire team is involved in the conversation about a new design, the more issues can be resolved early. Often you’d need to take a screenshot and paste it on Slack, or use another tool to discuss a design via a clickable prototype. On Editor X, you can invite teammates to the project, and assign them individual roles and permissions. There’s also an option to communicate with your team in real-time by leaving comments on the page or on specific components.

Creating The Structure Of The Website

Before we start adding content, we’ll create sections that will serve as a skeleton for our page. Sections in Editor X are essentially large containers that hold our content. As soon as you create a new page, you’ll see a header and footer section already added to the canvas. To add new sections we can click on any existing one and we’ll see a blue “+” icon at the edge of it.

Adding Content And Styling Our Page

Adding elements in Editor X is straightforward. We open the “Add” panel and drag elements into the canvas. Within that panel, we have a wide range of elements, components and entire sections that will become the building blocks for our website.

Every element that we drop on the canvas can be easily moved and aligned. We can also control how elements react to changes in the screen size by using the “Docking” feature. When the screen is being resized, docking options will determine the vertical and horizontal position of elements within different types of containers.

For the right side of our section, we’ll add an image that we’ll replace with our illustration. To make this work, we just need to click on “Change image” and then upload our assets to the media library. You’ll notice that apart from the assets we’ve added, you have direct access to a large library of free stock photos and pre-designed illustrations.

To implement the three steps of our “How it works” section, we’ll use a repeater element with three items and 20px space in between. The repeater is essentially a list of items where the style and layout of the first item are repeated automatically for the rest while the content can be different.

First, we’ll add the title and paragraph within the first item and see them repeat in realtime. Above them, we’ll add a container with a border and a text element inside the container by going to Quick add → Container → Inspector → Design → Corners.

Now that we have the content of our header, it’s time to start applying some styles to it. We could go the usual route and apply styles element by element, but we can also use the “Theme manager” to create global typography and color styles that will automatically define these changes everywhere. This goes beyond the scope of our page along, so we can use it to match the style across our entire site.

Click on the theme manager icon on the top bar of the editor. From there, we can manage the global text and color styles on the site. We’ll start by changing the background color to #030F1D and the color of our action items to #030F1D. Then we’ll change the headline fonts to Sora and also adjust the typography colors to fit our palette.

This concept goes even further as we can save our themes to a design library that can be used across all the websites we create with the tool. This makes it easy for teams to implement and manage their design systems. Also, imagine working on a series of themes and designs that you might want to reuse across a wide range of your products, or if you want to maintain a series of products for your clients. This could save quite an amount of time — and managed from one central place.

The next section will serve as a showcase of the product. First, we’ll add a headline, sub-headline, and an image element to the canvas and turn them into a stack. Then we’ll dock them to the center and increase the height of the section.

To achieve the overlapping effect we’ll add the particles in two separate image elements and arrange them to appear in the back.

Lastly, we’ll update the colors to match our palette, for the background we’d use #FFECE4, while the color of the sub-headline will be #836153.

Forms are essential for most websites and in our case, we’ll need one to collect the contact information of visitors interested in our product.

To create a form we’ll need to go to the Add panel and select “Contact & Forms”, from there we can see a variety of templates that we can use as a starting point. For our page, we will choose the “contact form” by dragging it to the canvas.

In the last step, we’ll add a menu to our website. With the tool, we can create complex websites with many pages tied together by seamless navigation, but in our case, we only need to navigate between the sections of this specific page. For this purpose, we’ll use a feature called “Anchors”. We’ll go over the sections that will be part of our menu and we’ll add an anchor that we’ll later use in the menu settings.

Select any element, then click the “Anchor” section in the Inspector panel on the right side of the editor. Then click on the toggle and simply name the anchor. We’ll repeat this for all sections we’d like to have in the navigation.

Now to add those in the menu, click “Manage menu” and then “Add link”. From there. we need to select the Anchor option and the anchor we want to link.

Making The Site Come To Life

One way to make the site more interactive and distinctive is to add animations to our elements. Of course, we can add animation on the platform as well, and apply it to any element or section on the canvas. To achieve that, we need to select the elements we want to animate, and then click on the Animation icon.

There are plenty of presets that we can use out of the box, but there’s also the option to fine-tune variables such as duration and delay.

In our case, we’d like to add a subtle fade-in animation to all of the headlines and images on the canvas.

Animation showcase (Large preview)

Designing For Different Screen Sizes

It’s common to see mock-ups created for desktop first, or for mobile-first, but in practice, we actually need to be creating both at the same time. The priorities that we define for our content blocks might need to change from one screen size to another, but we need to explore how we can put the right emphasis on the right elements, and choose the right way to position them both on desktop and on mobile. With the tool, we can achieve that by designing for individual breakpoints and using fluid and relative size units of measure.

Obviously, it’s a good idea to add breakpoints only when we need them, so we can add our custom breakpoints as we are previewing the site growing from small to large viewports. Obviously, we can do that without leaving the tool. Whenever we need a breakpoint, we can add them (or edit already existing ones) by clicking on the three-dotted menu next to the breakpoints.

If you’ve used relative sizes till that point, many of the elements will already resize properly. For the rest, we’ll go through the different breakpoints and create design overrides to make sure that everything looks as expected. The changes that we make will be applied to the specific breakpoint range that we’ve selected, and they will cascade down, too.

It’s important to note that we don’t have to rely on the pre-made building blocks alone though. If you need to build in a complex functionality for your projects, you can do it as well. In fact, you can add your own JavaScript, connect to APIs, use npm packages and automate client-to-server interactions with web modules. These features are available via an integrated development platform called Velo.

But for the scope of this article, although we mostly combined a few elements without rewriting or fixing code, the results are quite solid compared to what one would normally expect from a website builder. Overall, the score is quite high on performance and accessibility, especially on desktop, although you might need to optimize your site more for mobile devices.

Wrapping Up

When it comes to web builders, it’s not unusual to be disappointed by the outcome — with plenty of accessibility and performance issues, along with bulky and messy markup, overly specific CSS, and slow JavaScript. When we look into the website creation process on Editor X, it appears to be a platform that has gone quite far to provide a straightforward environment for building good websites, while also including collaboration features, responsive testing, and some components that might need quite a bit of time to prototype or set up otherwise.

If you are working with agencies or organizations where you plan to reuse components, or if you need to set up and maintain sites quickly for a variety of your clients, Editor X could be an interesting option worth considering. It comes along with personal and business plans, support for online payments, eCommerce, domains and storage, online bookings, ticket and event management, as well as video monetization. Chances are high that you’ll find what you need — both for quick prototypes and extensive client work.

You can create an Editor X account for free and test all features, without any strings attached.

Articles on Smashing Magazine — For Web Designers And Developers

27 May

How To Build And Launch Responsive Websites Faster With Editor X

by TBSCategories: News

As designers, we are used to having a lot of creative freedom within our tools. We intuitively select, move and fine-tune things until they look just right. Once the work leaves the design tool, we give away this level of control to an unpredictable, diverse, and fluid browser environment. There, some of our decisions suddenly will need to be refined, and as we want to introduce changes, we need to dive into code. Or explain these changes clearly and unambiguously, to avoid misunderstandings down the line. The latter part can be frustrating for all parties involved.

While web builders have been around for a long time, it wasn’t until recently that they became practical for professional use. Closing the gap between design and code has become the north star for many companies, and often this issue is seen as the most critical pain point that every team attempts to solve in their own way.

In this article, we’ll look into Editor X, a sophisticated platform for professionals and agencies to build websites, driven by an ambitious goal to close the gap for good.

What’s Editor X?

Chances are high that you’ve stumbled upon web builders in the past — often with a grain of skepticism and doubt about the outcome of these tools. Many of such builders heavily rely on pre-made templates with some level of customization. Editor X goes far beyond that by providing a platform for professional designers and agencies to create web experiences with a wide variety of flexible components and a series of advanced features.

The best way to find out what Editor X is capable of would be to build something with it and in this article, we’ll create a website from scratch.

Editor X follows well-established patterns and anyone with design experience will feel comfortable with it within a few minutes. For the most part, we’ll repeat the same workflow of adding elements, moving them across the canvas, and adjusting their properties.

On the top left side, we have toggles for panels that will help us add elements, navigate layers and manage pages. Then at the center of our workspace is the canvas, where we’ll directly interact with the design of the page. You’ll notice that the canvas is also resizable, which allows us to easily experiment with different viewports. Whenever we select anything from the canvas, we’ll see the Inspector panel open on the right.

The earlier the entire team is involved in the conversation about a new design, the more issues can be resolved early. Often you’d need to take a screenshot and paste it on Slack, or use another tool to discuss a design via a clickable prototype. On Editor X, you can invite teammates to the project, and assign them individual roles and permissions. There’s also an option to communicate with your team in real-time by leaving comments on the page or on specific components.

Creating The Structure Of The Website

Before we start adding content, we’ll create sections that will serve as a skeleton for our page. Sections in Editor X are essentially large containers that hold our content. As soon as you create a new page, you’ll see a header and footer section already added to the canvas. To add new sections we can click on any existing one and we’ll see a blue “+” icon at the edge of it.

Adding Content And Styling Our Page

Adding elements in Editor X is straightforward. We open the “Add” panel and drag elements into the canvas. Within that panel, we have a wide range of elements, components and entire sections that will become the building blocks for our website.

Every element that we drop on the canvas can be easily moved and aligned. We can also control how elements react to changes in the screen size by using the “Docking” feature. When the screen is being resized, docking options will determine the vertical and horizontal position of elements within different types of containers.

For the right side of our section, we’ll add an image that we’ll replace with our illustration. To make this work, we just need to click on “Change image” and then upload our assets to the media library. You’ll notice that apart from the assets we’ve added, you have direct access to a large library of free stock photos and pre-designed illustrations.

To implement the three steps of our “How it works” section, we’ll use a repeater element with three items and 20px space in between. The repeater is essentially a list of items where the style and layout of the first item are repeated automatically for the rest while the content can be different.

First, we’ll add the title and paragraph within the first item and see them repeat in realtime. Above them, we’ll add a container with a border and a text element inside the container by going to Quick add → Container → Inspector → Design → Corners.

Now that we have the content of our header, it’s time to start applying some styles to it. We could go the usual route and apply styles element by element, but we can also use the “Theme manager” to create global typography and color styles that will automatically define these changes everywhere. This goes beyond the scope of our page along, so we can use it to match the style across our entire site.

Click on the theme manager icon on the top bar of the editor. From there, we can manage the global text and color styles on the site. We’ll start by changing the background color to #030F1D and the color of our action items to #030F1D. Then we’ll change the headline fonts to Sora and also adjust the typography colors to fit our palette.

This concept goes even further as we can save our themes to a design library that can be used across all the websites we create with the tool. This makes it easy for teams to implement and manage their design systems. Also, imagine working on a series of themes and designs that you might want to reuse across a wide range of your products, or if you want to maintain a series of products for your clients. This could save quite an amount of time — and managed from one central place.

The next section will serve as a showcase of the product. First, we’ll add a headline, sub-headline, and an image element to the canvas and turn them into a stack. Then we’ll dock them to the center and increase the height of the section.

To achieve the overlapping effect we’ll add the particles in two separate image elements and arrange them to appear in the back.

Lastly, we’ll update the colors to match our palette, for the background we’d use #FFECE4, while the color of the sub-headline will be #836153.

Forms are essential for most websites and in our case, we’ll need one to collect the contact information of visitors interested in our product.

To create a form we’ll need to go to the Add panel and select “Contact & Forms”, from there we can see a variety of templates that we can use as a starting point. For our page, we will choose the “contact form” by dragging it to the canvas.

In the last step, we’ll add a menu to our website. With the tool, we can create complex websites with many pages tied together by seamless navigation, but in our case, we only need to navigate between the sections of this specific page. For this purpose, we’ll use a feature called “Anchors”. We’ll go over the sections that will be part of our menu and we’ll add an anchor that we’ll later use in the menu settings.

Select any element, then click the “Anchor” section in the Inspector panel on the right side of the editor. Then click on the toggle and simply name the anchor. We’ll repeat this for all sections we’d like to have in the navigation.

Now to add those in the menu, click “Manage menu” and then “Add link”. From there. we need to select the Anchor option and the anchor we want to link.

Making The Site Come To Life

One way to make the site more interactive and distinctive is to add animations to our elements. Of course, we can add animation on the platform as well, and apply it to any element or section on the canvas. To achieve that, we need to select the elements we want to animate, and then click on the Animation icon.

There are plenty of presets that we can use out of the box, but there’s also the option to fine-tune variables such as duration and delay.

In our case, we’d like to add a subtle fade-in animation to all of the headlines and images on the canvas.

Animation showcase (Large preview)

Designing For Different Screen Sizes

It’s common to see mock-ups created for desktop first, or for mobile-first, but in practice, we actually need to be creating both at the same time. The priorities that we define for our content blocks might need to change from one screen size to another, but we need to explore how we can put the right emphasis on the right elements, and choose the right way to position them both on desktop and on mobile. With the tool, we can achieve that by designing for individual breakpoints and using fluid and relative size units of measure.

Obviously, it’s a good idea to add breakpoints only when we need them, so we can add our custom breakpoints as we are previewing the site growing from small to large viewports. Obviously, we can do that without leaving the tool. Whenever we need a breakpoint, we can add them (or edit already existing ones) by clicking on the three-dotted menu next to the breakpoints.

If you’ve used relative sizes till that point, many of the elements will already resize properly. For the rest, we’ll go through the different breakpoints and create design overrides to make sure that everything looks as expected. The changes that we make will be applied to the specific breakpoint range that we’ve selected, and they will cascade down, too.

It’s important to note that we don’t have to rely on the pre-made building blocks alone though. If you need to build in a complex functionality for your projects, you can do it as well. In fact, you can add your own JavaScript, connect to APIs, use npm packages and automate client-to-server interactions with web modules. These features are available via an integrated development platform called Velo.

But for the scope of this article, although we mostly combined a few elements without rewriting or fixing code, the results are quite solid compared to what one would normally expect from a website builder. Overall, the score is quite high on performance and accessibility, especially on desktop, although you might need to optimize your site more for mobile devices.

Wrapping Up

When it comes to web builders, it’s not unusual to be disappointed by the outcome — with plenty of accessibility and performance issues, along with bulky and messy markup, overly specific CSS, and slow JavaScript. When we look into the website creation process on Editor X, it appears to be a platform that has gone quite far to provide a straightforward environment for building good websites, while also including collaboration features, responsive testing, and some components that might need quite a bit of time to prototype or set up otherwise.

If you are working with agencies or organizations where you plan to reuse components, or if you need to set up and maintain sites quickly for a variety of your clients, Editor X could be an interesting option worth considering. It comes along with personal and business plans, support for online payments, eCommerce, domains and storage, online bookings, ticket and event management, as well as video monetization. Chances are high that you’ll find what you need — both for quick prototypes and extensive client work.

You can create an Editor X account for free and test all features, without any strings attached.

Articles on Smashing Magazine — For Web Designers And Developers

30 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

30 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

29 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

29 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

29 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

28 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

28 Nov

Design Shopping: Get A Faster Client Buy-In Through A Guided Design Showcase

by TBSCategories: News

Regardless of where you live, getting your driver’s license renewed or the address updated on your personal ID card may often be a painful chore. It’s such a frustrating experience that Disney’s Zootopia movie (IMDb) thought it best to represent DMV employees as sloths. Despite popular opinion, however, the California DMV (California Department of Motor Vehicles) is highly motivated to better serve the 30 million licensed drivers in California.

Better serving those citizens means improving a frustrating website experience — the primary way Californians access necessary services. That’s why the DMV Strike Team hired our design team at 10up to reimagine the entire California DMV website.

In the following case study, we’ll take a close look at a design exercise that we call internally Design Shopping. This exercise allows us to better communicate with the client and to more easily move our collaboration in the right direction.

Note: This article is geared more towards experienced UX/UI design teams working on some rather large projects.

Design Shopping?

Before we get to the finished product (the new DMV website), we have to start at the very beginning: understanding the client. As a government agency, they (therefore, we) had many stakeholders to juggle with varying motivations. This meant gaining client alignment during the discovery phase was our top priority.

While we don’t expect clients to be design-savvy — many find the concept of design confusing or intimidating — we need to get everyone on the same page. But how were we able to move the needle on design in a government works project?

We took them shopping. Design Shopping, that is.

Why “Design Shopping”?

When it comes to client services, first impressions are everything. Leaving a lasting impression, however, isn’t always easy, especially when working with a large and varied stakeholder group. To do so, let’s take a lesson from the great American poet, Maya Angelou:

I’ve learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.

— Maya Angelou

Cue the trumpets! From the very first to the very last interactions with our team, to leave a lasting impression on clients, we must make them feel good.

With these precious first moments in mind, our team experimented with various approaches to provide the DMV team a safe space to feel a connection and build rapport so everyone feels confident and comfortable sharing their ideas and opinions without judgment.

What we landed on is a concept that everyone simultaneously understands and immediately puts them at ease: shopping!

Shopping removes the pressure of being right or wrong — a layman immediately understands “picking and choosing” the right “fit.” Shopping also releases dopamine, which activates the brain’s reward and pleasure centers. This is important because it creates positive feelings while driving clients toward action.

Voilà — the birth of the Design Shopping exercise! Good feelings and design discussion equal nerd out!

Live look at design nerd-out! (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Yay! Now that we’ve set the tone, let’s get into the thick of this process: defining why and what we’re shopping for. This gives our team a much-needed opportunity to slow down and get inspired. In other words — get deep on the project. Our research and final set of artifacts are what frame the design conversation during the exercise.

To have a meaningful “I see you” moment with the DMV team, we needed to demonstrate to the stakeholder group that we were engaged and ready to translate their goals into tangible design results.

Swim In That Research

Ground your design thinking prior to visual exploration and workshop planning. Not all of these are required, but if it’s within your team’s control, have the following ready:

  • Identified project goals;
  • Problem statements;
  • Competitive analysis;
  • Mental model comparisons;
  • Historical context;
  • Project brief;
  • Preliminary UX discovery;
  • Content maps.

Sharing all the love for design. (Image source: ‘Mochimochi Land’ by Anna Hrachovec)

Go Deep

Make time for your brain to wander and get lost. When collecting artifacts for the design shopping exercise consider both sides of the coin: successful and unsuccessful examples that demonstrate what you’ve grocked from the research above.

Lead the conversation with ease by using the artifacts as a path and conversation trigger. Look for opportunities to point at:

  • Aesthetics or preferences;
  • Design understanding toward user experience;
  • Business goals;
  • Specific calls to action;
  • And how design can help support all of that beyond just looks.

This gives clients greater ownership of the design vision based on tangible benefits to their organization or user experience.

Tactical Inspiration

Don’t limit design inspiration to what you’re familiar with. Get weird! Here’s a brief list of where our team looks for inspiration:

Focus Your Artifacts

We’ve found that limiting the number of design shopping artifacts to 5-7 total, helps the team maintain focus and avoid fatigue. To narrow down the website artifacts, choose:

  • One in their vertical for familiarity and showcasing an understanding of fundamentals.
  • One outside the vertical that demonstrates or challenges brand attributes.
  • One that demonstrates challenging design choices (you think they’ll hate it).
  • One that demonstrates thoughtful design choices (you think they’ll love it).
  • Something they outlined in your research (ie. something the client has already pointed out) you want to dive deeper into.
  • One that’s reflective of the mental model of their audience (what you think will appeal to your understanding of their target).

Set Those Wheels In Motion

Choose Your Champions

Pump the breaks — before you jump into showing the client these sites, assign a facilitator. This champion will guide the group through the workshop, encourage participation, and help the group work toward outlined goals. Also assign an official notetaker to document the conversation to allow our facilitator(s) much appreciated space to focus on the participants.

With the DMV, we had an unusually large stakeholder group so we had two facilitators run the room. To achieve the same experience in a virtual setting, using multiple breakout rooms with more than one facilitator also works really well.

Workshop Materials

Next, gather your materials. Virtual or on-site, you should have:

  • Red and green color coding labels aka dot stickers;
  • Emoji stickers — these are a fun addition to the traditional red and green for votes;
  • Post-it notes for comments;
  • Screenshots of websites.

Here’s how it looks set up on a Miro board:

Stop, Collaborate And Listen

Whether your workshop is online or in-person, you must first set ground rules. Take the first 5-10 minutes of the workshop to break the ice — make sure the loudest stakeholders don’t control the entire conversation.

If driving a virtual workshop (the answer these days is a resounding YES), be sure to unblock technology paralysis. Confirm all systems are a go with a quick demo of how to use the tools you’ll be accessing during the workshop. This can take another 5-10 minutes.

If time is of the essence, send the virtual board ahead of time with some DIY instructions so workshop participants are more prepared to participate.

Then, set clear expectations and reiterate the purpose of the workshop.

Voting Parameters

Make sure to limit the number of votes each participant has. Whether these votes are virtual dots or real stickers, limit the amount of dots to 5 green and 5 red, for a total of 10 votes.

We’ve found that limiting the number of votes forces participants to be more deliberate when shopping, which leads to richer conversations and results. As a fun bonus, we provide a set of emojis for those emotionally charged shopping moments. This tends to get a lot of love from participants!

Ready, Set, Shop!

Once your client has all the tools, it’s time to shop shop shop! Set the timer for 15 minutes and invite participants to mingle while they vote on their favorite and least-favorite aspects of the designs before them. While they vote, ask pointed questions about the “whats” and “whys.”

We’ve found that standing while completing this exercise shifts the lens and puts participants on an even playing field. During this pandemic, we’ve explored options to add this experience to the virtual space and found that pre-filling the voting panels with avatars of the participants adds a nice human element and shifts the lens in much the same way as standing together does. Ghost cursors are just weird, am I right?

Guiding The Conversation

When the timer runs out, discuss the team’s shopping success. This is where you get to the heart of the shared language for the project. As you walk through each artifact, discuss patterns that start to emerge — both negative and positive.

We invite shoppers to volunteer. For example, say “I’m seeing a lot of green dots here. Let’s talk about why?”

Rather than singling out participants, this opens up to the room for discussion and evaluation. This is especially important when dealing with a large and varied stakeholder group like the DMV. This is a team effort and every step should feel collaborative.

The intent is to eliminate the pressure of a “correct answer.”

You want to hear the client’s design vocabulary and build upon that. Through this evaluation, you can begin to connect the dots and lead the team to foundational design principles and decisions you’ll be making throughout the following design phases.

Communicate Results

After everyone is done shopping, validate with the team what you’re seeing as a result of the exercise.

Outline all the areas where you have consensus, where you diverge, and note what the next steps look like.

We are not responsible for any impromptu dance moves from participants.

Once More, With Feeling

While we just outlined all the major ways you can run the design shopping workshop, this isn’t limited to a one-time exercise. We often have one final round of Design Shopping at another date.

This is where you take what was established in the first workshop and create.

Once in the middle of prototypes, moodboards, style tiles, and design principles — whatever you deem to be the best platform for expressing the design direction — you can use the Design Shopping exercise as a way to validate your own design solutions. If still stuck, throw in a Design Spectrum exercise to get really specific.

With a comfortable rapport already built and the client already familiar with the workshop, you can move past the initial aches of building a design vocabulary and move straight to evaluating and discussing the design.

Conclusion

The Design Shopping workflow allows you to move quickly toward a shared design vocabulary and foundational design principles in a deliberate, meaningful way. It’s like taking a road trip across California: you need to review your destinations and how you want to experience them before hitting the road.

As an industry, we are always talking about educating the client, but rarely structure that education in a way that’s not only painless but fun. Considering the amount of pressure the DMV team was under, the last thing our team wanted to do was add further stress, as further stress leads to poor outcomes for client relationships and of course, design.

The thing to remember is that the fun has a purpose — you’re gaining collective agreement for future communications to preemptively head off conflict. The visual nature of this workshop also adds value for stakeholders that may have missed the live session. When they refer back to the shopping exercise, it’s clear what direction to double down on and what to avoid.

In the end, Design Shopping is less about shopping for nice fonts or colors and more about showcasing the ROI (Return on Investment) of thoughtful design. It’s about creating a forum that allows creative possibilities to be discussed openly in an accessible way.

When done right, this exercise allows your client to see real potential because you showed them real examples where design has come to life. The abstract has now become concrete! With that foundation in place, you can look forward to creative innovation and confidence from your toughest critics: your clients.

Special Thanks

All the Kudos to Lea Alcantara (Visual Design Director at 10up), my design nerd out partner (who helps me craft useful workshops for our clients at 10up, including this one), and for the additional article tweaks and research done!

Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts
×

Powered by WhatsApp Chat

WhatsApp Chat is free, download and try it now here!

× Chat with Us