Portals

How e-point approaches Content-Driven UX Design

Written content is one of the most frequently neglected aspects of website design. Knowing how users will approach your website’s information heavily influences its layout. Naturally, a website that’s designed in a way that makes sense to the user will be much easier for them to use!

When it’s done right, good content lets users quickly accomplish their goal, whether that’s finding information, comparing products, or making a purchase. Therefore, we always incorporate the client’s written message into our portal design process. We’ve called this approach Content-Driven UX Design.
 

What is Content-Driven UX Design?

When we refer to a "portal", we mean a large corporate website with information pages, a complete product range, and various types of corporate information. We’ve designed the following portals for the Polish market: ING Bank, PZU Group and BGŻ BNP Paribas.  

Content-driven UX Design incorporates written content in the website design process. It means making things easy for website visitors. They should be able to find the information they need, quickly understand it and leave feeling that they’ve had a good experience. For a banking portal, this means that users shouldn’t need a the help of an employee to find banking products or information, determine the best product for their needs, and order that product (i.e. by opening an account, taking out a loan, applying for a credit card, etc.)

When written content is low-quality, it’s not understandable or helpful. It’s also counterproductive; customers won’t be attracted to an offer and will not purchase it. Clearly, content is a key factor in UX Design.

Based on over a dozen years of experience, our UX Team has developed a few methods and techniques for planning and implementing great content. I’d like to share them with you in this post.

1. We start with a UX Writer

First, we add a UX Writer to the team at the very start of the project. This person will oversee the meaning of all user-facing communications; they’ll talk to the client and clarify the information and goals for the content. This sets the foundation for future communication from the start – we don’t wait until mock-ups are designed and that fake “Lorem Ipsum” text is in place. By cooperating with the UX Designer, the UX Writer will ensure that the client’s business outlook and its offers are placed and articulated in a way that’s going to work for their customers.

"The UX Writer creates the recommended copy for the website. In many projects, they are the ones to formulate the rules for creating website or service texts. They may even create “model texts” for an external copywriting agency or the client's own marketing team to use".

Filip Makowiecki

Senior Design Strategist

Linkedin logo

He adds that “while building the user experience, the UX Writer handles everything related to written content, from co-creating the information architecture of the entire service (including the design of accurate labels for categories or sections) to proposing the content structure for particular pages. Even the smallest bits of content  – button text, validation messages, etc. – come into this job.”

Not every company includes a UX Writer from the outset, but we’ve found that doing it this way results in a much better outcome.

2. We don’t ignore the basics

Although we have a lot of experience in UX Design, we approach each project with a very thorough mindset. Skimping on the basics may be tempting, but we’ve found there are no shortcuts to high-quality content.

Learning about the client and the business

Our initial priority is to get a deep insight into the client’s business. We have a lot of discussions with the client about the meaning and value proposition of  their offer. We also discuss how the website will support their organizational goals. And we dig into the needs and motivations of the client’s customer base.

This step takes time and effort. We conduct expert interviews, visit outlets and branches and learn how communication works on different organizational levels. This is an indispensable part of the process; you can’t build a meaningful product category page if you’re not aware of key product attributes and the differences between products. Without this knowledge, we wouldn’t know what products and product information to display, what filters to apply, and how to make it easier for the user to navigate to the relevant offer.

Writing a project brief

We always prepare our own project brief, even if the customer provides one for us. We strive to translate customer expectations into our own language, paraphrasing the client’s preliminary requirements to make sure we understand them correctly. Our brief may be an extended and detailed document, a one-page list of key assumptions, or anything in between. Sometimes, we make posters that serve as the project brief and hang them over our desks. This lets everyone on the team see the essentials, from business requirements to communication assumptions.

Using Product Canvas to sort key information

While working on the customer offer presentation and before we move on to designing product pages, we use a Product Canvas to help us catalogue and systematize our knowledge of each product. A Product Canvas allows us to clearly single out each product’s value proposition, which we will need to communicate very distinctly on the website.  It also facilitates the design of the product narrative structure. See a recent Product Canvas

Establishing the narrative structure first

Before we prepare detailed mock-ups or graphic design drafts, we work out a simplified narrative structure that will be presented to the user. In other words, we work out what we want to say to the user, what we want them to remember, and how we’ll convey this message at various “floors” or page sections.

The narrative structure usually takes the form of a matrix, as presented below. On the left side, we enter the exact words of what we want to say about the product and their form. We do this step-by-step. On the right hand, we have simplified presentations for particular elements, e.g. lists of benefits, numerical arguments, purchasing process schemes, etc.

We occasionally also have the client join us in the process of building the narrative structure. We’ll do a creative workshop, first collecting all our common assumptions and then having each workshop participant present, in the form of a sketch, their simplified concept for a given website. Then we collaboratively assess the concepts produced and the proposed narrative structures. Our goal is to decide which direction will be developed further or which concepts will be combined.

3. We test content with real people

During the design process, we ask potential users to verify our website concept.  We try out different portal paths and pay attention to what users spend time on, if they understand the presented content, and what they understand that content to mean.  We also verify proposed categorizations and the labelling of these categories and assess how content is placed on the page, i.e. whether the structure is in line with users’ perceptions. We always run our studies on the final content and preferably with the final graphic interface.

We also ask people's advice at the design stage. Before we establish labels and ways of grouping elements, we want to know how users think and how they associate ideas. For this, our favorite method is Card Sorting. When developing a model for grouping products, we want to make sure it feels intuitive to the user. We use Tree Testing tools to handle this.

4. We pave the way for serial content production

Finally, we should mention how we create a base for producing vast amounts of content. We are not a copywriting agency – that service is usually performed by either the customer’s team or a copywriting company. To ensure that content created elsewhere meets the assumptions we have worked out and is of the right quality, we provide some content guidelines. This takes the form of a product page layout that indicates:

  • What parts should be on the page
  • The information found on each part
  • Obligatory and optional content areas
  • Anything that needs special attention

We also present various visual forms that can be used in particular areas of the website. These can be used by copywriters and by the people who will later enter content into the CMS.   

Making sense with Content-Driven UX Design

Over 20 years of designing and developing portals has taught us that project success means we MUST work on the content as an integral part of the process.  Content must make sense, not only in how it’s displayed, but it the message it conveys.

It’s essential to discover and plan the meaning of all online communications; communicating the company offer properly not only affects the brand image, it also exerts an immediate impact on sales. If an unassisted user can receive efficient and meaningful service from a portal, they will be more willing to give the relevant offer a try.