Your Website Needs to Learn to Talk

Why every website design should be driven by a conversation

Consider this: A customer walks into a store and is greeted by an employee.

— Employee: Can I help you with something today?

— Customer: I just got a new job, and I’m looking for comfortable clothing that’s also unique.

— Employee: Well, we take pride in the fact that all of our clothing is created with recycled fabrics, which means every item is 100 percent different.

— Customer: Awesome! Where should I get started?

— Employee: Let me ask you a couple questions first: What sizes do you wear? What type of styles do you lean toward? What is your price range? Let me know, and I’ll get you a dressing room started…

—Customer: <smiles with a mixture of relief and excitement>

This is what I call a great user experience. The employee was able to provide all the information the customer wanted to hear. The employee was also able to represent the store’s brand in a way that connected with the customer.

What if your website could act as a digital version of that employee, to provide your customers the information they need—and even deliver them the same value they would experience in an actual store?

Your website design starts with a conversation

Successful UI design should act as a conversation between your brand and your users. All conversations are sparked by an idea, which leads to a string of communication between two or more people. When designing, I start with an idea which leads to an interaction between two “people”: One of those people is the customer, and the other is the website.

This is conversational UI.

Conversational UI: Design that connects with your customers, provides them with what they need, and responds when they need help.

To make sure this happens, I think of the user as the main character and the website as their plot. I use these ideas to create mini-scenarios that define how the the user will move through the site, and which types of content they’ll need prioritized over others.

For example:

Mary needs new clothes for her new job. She sees a new brand on Pinterest and decides to check out their website.

Mary’s questions: Is this place legit? How will I know I can find unique, durable clothing here?

Brand X’s response: We’ve created an online experience that reveals the quality of our clothing through detailed imagery. We want you to find what you need quickly, so we’ve provided the option to easily search for products you want. In addition, we’re different from other brands because all of our clothing is fully recycled and sustainable. Plus, no two pieces of clothing are exactly the same.

Much like a real conversation unfolds between two people, we can use a conversational design approach to gradually bring our ideas to fruition.

Here are the five steps I follow to make that happen:

1. Analyze

2. Brainstorm

3. Organize

4. Prioritize

5. Execute

1. Analyze

First, I look at the existing website and analyze what is there. I take each page and decipher all the current content elements (buttons, images, and text) and compare them with the new goals for the site. I take inventory of all of these things in my sketchbook, jotting down any and all information I can collect from the existing website.

I then ask questions like:

1. What do we already know about the content on the site?
2. What do we know about the customers using the site?
3. Does everything make sense, or does anything feel out of order?
4. What types of interactions are on the site? Are they purposeful?
5. What message/purpose does the brand portray?

Asking these questions helps me understand how customers are currently experiencing the website. This step lets me know if the current experience of the site matches up with the projected, ideal experience.

2. Brainstorm

Then, I investigate what other brands are doing well, to determine how Brand X can be both successful and unique with a redesigned site. I like to think outside the box to come up with ideas that would be useful/cool to incorporate while staying within the borders of the brand’s goals for the site. I add this list of ideas to my sketchbook.

To move forward in the process, I start to brainstorm new ideas by asking:

1. What types of interactions would be useful?
2. Which parts can we be creative with and which parts are set in stone?
3. What visual styles should we use to express personality (e.g., light and free vs. strong and heavy)?
4. What are competitors’ sites doing well? What can we leverage from them?

Sometimes I even go as far as creating a thesis statement—a unique brand message that will influence the tone and look of the design. Here’s an example:

“Brand X is a bold, sporty company that takes pride in its handmade skateboards that are also 100 percent eco-friendly.”

This is how we want the brand to be perceived from the start.

3. Organize

I look at the now-long list of information in my sketchbook and start to do two things: Cross out pieces that are unnecessary, and group together information and/or interactions that the customer would expect to be combined. I draw boxes around those groups of information or interactions and label how they should be executed (e.g., via buttons, links, graphics, and so forth).

4. Prioritize

After all the information is grouped, I prioritize those groups in order of importance to the customer. I keep in mind things the brand would want their customers to know about the brand right off the bat.

The hierarchy of these groups of information depends on:

1. What the customer needs from the website.
2. What messaging and goals the brand wants the customers to get from the website.

This turns into an outline. An example of such an outline would be:

I. Large, bold product photography, because customers want to see as much detail as they can.

II. Easy-to-access add-to-cart button and price, so customers can purchase whenever they are ready.

III. Precise messaging that informs the customer how this brand is unique.

IV. Clear access to continue shopping if the customer decides to look at different products.

5. Execute

Finally, I sketch out various layouts that follow the outline I created in step 4. By now, I understand the order in which different pieces of information need to appear, and which ones need to be more or less prominent.

I usually sketch out a few different directions before deciding which one is best. I want to make sure the website is laid out in a way that presents customers the information they need in the order they need it, so it speaks to them in a way that builds a connection. Consider the scenario in the beginning of this article: That customer was impressed with the clothes in the store, but what sold them was the friendliness and helpfulness of the employee.

Your website should serve as the digital version of the real person a customer would talk to if they were to call or walk into the store. To ensure that a website is “speaking” in a way that connects with its potential customers, I will also recommend some specific language the copywriters can use to ensure the brand’s messaging is as precise as possible.

From this point, I can easily jump into Sketch (or Photoshop if that’s your thing) and digitize my concept in whatever fidelity needed for the project.

If your UI is conversational, your customers will talk

So I’ve walked you through how to build a website that talks to your customers. Now I want to explain why taking the initiative to approach your design in this way makes a difference.

It lets you think outside the device

When I focus on the interaction between the customer and the website, I’m able to think of new ideas without the constraints of an iPhone or a desktop. I’m able to prioritize the brand’s goals and decipher what customers really want to see, rather than just designing with what’s trendy at the moment in mind.

It lets you focus on the audience

To ensure that I’m designing for the appropriate audience, I look at the design through the lens of the customer. I often create scenarios and talk through them in first-person as the user to make sure I hit every one of their potential needs.

This way, I’m able to create a measurement that will define success for the finished website and stop worrying if I’m “right” or not. Did we include everything the customer might ask for? Did we provide them with the right types of interactions? Are there any types of content they might look for that we left out? These are exactly the questions a conversational design approach helps answer.

Once a customer has experienced a smooth onsite experience grounded by precise messaging and thoughtful, conversation-driven design, a connection is formed. They’ll start to think of your site as an old friend, making it easy for them to come back for more and continue the conversation. And they may even extend the conversation with your website into their conversation with others.

That’s the power of conversational design.

Enjoy this article? Hit the Follow button below to find out whenever we post more great content on Thinkship.