Hire us
Hire us
4 UX Artifacts to Help You Craft Beautiful Websites 3 4 UX Artifacts to Help You Craft Beautiful Websites
Review: -1 - 4 UX Artifacts to Help You Craft Beautiful Websites

The designer’s responsibility is to make sure that the team and the client are on the same page and agree upon project expectations. It is advisable to do this before the layouts appear. And the key UX artifacts will help you a lot.

4 UX Artifacts to Help You Craft Beautiful Websites 17
Designed by Fireart

 What are the UX artifacts?

What is an artifact?

Artifact is a description of a product from a certain point of view in a given format. It helps all participants in the process to agree, but the end-user will not see it.

Artifacts in design may be a solution to a problem. With their help, we communicate business goals and user experience. Designers may rely on them while defending a project as a fixed agreement. Other designers and team members may work out artifacts because most artifacts speak clear, human language, not graphics, business intelligence, or code.

Nevertheless, not all existing artifacts may and should be applied to a project. Not even all of them may be delivered by the designer: some artifacts may be delivered by the product owner or other team members. The client may come with ready-made CJMs, persons, etc. Or a project consultant may create them together with the client during a workshop. Sometimes no one will deliver them simply because the client may not need them.

Everything that is not a finished product is an artifact, including clean design models in Figma, unreleased prototypes, etc.

4 UX Artifacts to Help You Craft Beautiful Websites 18
Content Creator, Source: Dribbble

4 Key UX design artifacts

The task is to spend as little effort as possible to clarify the picture for all project participants. With experience, you will be able to estimate which artifacts need to be used for a specific task. It’s cool to try everything: you will understand what you are comfortable with, how much time and effort it takes to compile this or that artifact.

Delivering UX research artifacts much depends on the client demands and the cooperation type, but most often on a part of a designer there’s a need to create

  • CJM,
  • Scenarios,
  • Personas,
  • Wireframes,
  • Mood boards or references.

Sometimes – usability reviews, and seldom – JTBD. So, good UXers are more likely to work with the artifacts like this.

4 UX Artifacts to Help You Craft Beautiful Websites 19
Other Travelers

CJM

A CJM (customer journey map) is a tool for visualizing a customer with a product or service. Creating a CJM is both an analysis process and a method of generating new product/service improvement ideas.

CJM displays the interaction that unfolds in time, decomposed into atomic components. The interaction components are related to a process (customer goals and objectives, their actions, expected results, problems, and barriers that prevent them from moving to the next step. It also has the touchpoints, materials, tools, equipment, KPIs from a business point of view, etc.) and the psycho-emotional state of the customers (thoughts, feelings, emotions).

4 UX Artifacts to Help You Craft Beautiful Websites 20
Fireart makes scenarios to build highly effective apps.

Scenarios

It is also a tool for visualizing, discussing, and optimizing interaction scenarios. The map of scenarios shows the steps in the script, with questions, comments, and ideas for each.

A scenario map can be used both to analyze an existing process (reality map), where you indicate how users solve their problems and are created in cooperation with them. And for a projected, desired interaction (design map), where scenarios are created by a design team without user input, their goal is to help the team quickly explore new interactions that the product can and should support.

4 UX Artifacts to Help You Craft Beautiful Websites 21
A Persona

Personas

This one is a user archetype that represents a specific behavioral pattern. In other words, this is a description of a group of users with their expectations, experiences, desires, and needs, embodied within one unified profile. A person from such a profile is a user archetype that represents a specific behavioral model.

4 UX Artifacts to Help You Craft Beautiful Websites 22
Storyboarding

Wireframes

A wireframe is a static schematic illustration of a page (form) that displays the location and content of individual user interface (UI) elements. The task of the layout is to show the content of a particular page, the relative position of blocks, and individual elements. In the vast majority of cases, interface layouts do not reveal the peculiarities of visual design (black/white color and their shades, standard fonts, or simple icons are used).

4 UX Artifacts to Help You Craft Beautiful Websites 23
Referencing

References

Design reference is created at the beginning of a visual design and is a compilation of images that the designer will then rely on when creating a design layout. It may include examples of color schemes, fonts, individual block designs, interface photos, layouts, and individual graphics.

The selection may be:

  • structured (each block is signed, the purpose of each example is unambiguously clear),
  • or chaotic (a pile of pictures, from which the general mood can be considered, but not specific decisions).

In the second case, in fact, the reference turns into a mood board.

4 UX Artifacts to Help You Craft Beautiful Websites 24
Why not moodboards?

Mood boards

The word mood board is often referred to as a set of images created before the design. The difference is that mood boards are trying to convey not specific design decisions but emotions, which should arise in those who will interact with the final design.

In design practice, the mood board is more difficult to use later on because it is far from always obvious how to build a bridge from the desired mood to specific decisions that may cause it.

Both the moodboards and references are often used as one and the same notion.

To Wrap it Up

Interactions artifacts UI UX are a way to understand whether a team is thinking in one direction and to agree upon the optimal and most effective way of work: not on mock-ups, not in code, but literally in words.

What are the artifacts that you can use to tell your story UX? There are a lot of them; you need to select them to suit your needs. They can be handled by almost every member of the team, but usually – a product owner, analyst, and designer take an active part in their delivery.

At the beginning of a project, it’s great to start with personas, customer journeys, and scenarios that are great when you have an innovative product or a new market.

Personas are great for increasing user empathy for all team members. Or be a stand-alone artifact if character building is difficult. They may be used during workshops and appealed to their archetypes in disputes.

In any case, you are welcome with your design & development projects for an expert review.


Update:

Want to estimate a project?

Just tell us about your project, what are your goals, and let's start.

4 UX Artifacts to Help You Craft Beautiful Websites 28 4 UX Artifacts to Help You Craft Beautiful Websites 29 4 UX Artifacts to Help You Craft Beautiful Websites 30 4 UX Artifacts to Help You Craft Beautiful Websites 31 4 UX Artifacts to Help You Craft Beautiful Websites 32