Here are 10 of the most relevant UX artifacts that you should consider when designing and building a web project.
1. Understanding & validating the user needs
Probably this is the most critical step towards building a successful web project. No matter if it is a simple corporate website, a web application or a portal, it is fundamental to understand the user needs about it. Any successful business idea has at its root a rigorous understanding of the user needs.
One of the simplest ways to understand the user needs is interviewing. By interviewing potential users from your business area, you could gain an in depth understanding on what are their needs and behaviors. While conducting a user interview, try not to lead the answer in a specific direction. Instead, explore the roots of each affirmation by asking “why?”.
Advanced user researcher could rely on more sophisticated techniques such as: ethnographic research, focus groups or mental modeling.
2. Personas
Once you have an idea about the needs and the business niche, it is fundamental to focus on who your users will be. Who will consume your services or product? Is the main user also the person purchasing it? Are there secondary users? Then, what characteristics or purchasing behaviors do you notice about these users?
Your findings could help you to create your “personas”, fictive characters illustrating your key user types. These could help you to keep your user in mind later in the design and development process. Also, it will help your team to visualize and to understand better for what kind of users you are building your web project.
3. Use cases list – getting organized is an essential ux artifacts
What tasks are your users or visitors supposed to perform? What kind of activities do you expect to happen in your web project? There are many ways of documenting these. The simplest will be to create a list with all the tasks that could be done by your users (personas) in your web project.
Alternatively, you could use agile concepts such as user stories to define each of these user need. A user story is something that sounds like “As a user I want to be able to perform a search so that I could find a specific record”. Another way of listing these user tasks is to use the JTBD (“Jobs To Be Done”) methodology.
4. User Journey Mapping
You should imagine a user journey as the entire flow, experience of a user starting with the initial first contact with your project. For example, a user on your ecommerce website might go through various potential user phases such as:
- reaching your website,
- checking the homepage
- browsing a product category
- searching for a specific product
- reading the detailed page of your product
- adding the product to a shopping cart
- starting the ordering process
- the ordering process steps
- et cetera
Different users (personas) might go through different flows or states. Thus, you might need multiple user journeys to illustrate each case.
User journeys could be illustrated as diagrams where each phase it is a column. Some designers rely on generic phases that apply to multiple web projects, such as: awareness, consideration, decision, purchasing and onboarding. Then, in each column you could highlight the needs/tasks, the user touchpoints, and other insights which are helpful to you.
5. Information Architecture – probably the most relevant ux artifacts
You should always consider information architecture before starting to draw wireframes and to imagine how your web pages could look. This will make things so much easier later.
For example, you could start to list all the potential categories, product types and features. Then, you could go into details by specifying specific attributes or specific steps that needs to happen when you are performing a task.
Imagine that you want to create a product list. What kind of properties are relevant to appear for each product in your product list? Should your visitors be able to filter or to sort your list? If so what kind of filtering parameters or search criteria should be available? How about search or pagination?
6. Wireframing
Now we are getting closer to visualize your web project. Wireframes are low-fidelity sketches which you could do with a pen on paper or using a design tool. Each wireframe is intended to illustrate a page or a step from your web project. For example, you could create a wireframe illustrating your product listing page. Then, you could create another wireframe to show how the shopping cart might work.
Try to keep your wireframes simple and concise and do not focus on colors and identity at this point. What matters in this phase is to visualize the blueprint of these potential pages and steps.
7. Styleguide & Design system
Next it is about your brand identity and consistency. This is both a tooling and a consistency ux artifacts. User of your web project will expect a certain degree of predictability and consistency. For example, users will expect a consistent search functionality across your entire website. Therefore, you should consider such a phase in your design process. Here you can decide on the color scheme for your web project. Color schemes could be used to specify dominant or secondary colors for various UI elements of your website.
Advanced designers can formalize their style, color and typographic proposal in a style guide or in a proprietary design system. These could be used later by the entire team when designing or implementing specific pages or functionalities from your web project.
8. High Fidelity Screen
Now you should have everything in place for building a high-fidelity screen. These are normally created in tools such as Sketch or Photoshop and illustrate realistically how will look your web page. These screens will help you to visualize and to adjust the design of your web project before starting to develop it. By doing a few iterations on your initial high-fidelity screens you could improve the effectiveness and usability of your web project before starting to build it.
9. Early Prototype – an essential ux artifacts
It is always good to test your web project as soon as possible without investing to much into it. This will allow you to learn earlier about possible business or usability pitfalls and to fix these. Thus, once you have some screens on how your web project should look, you should aim to build fast a prototype instead of the full featured project. The prototype is one of the key UX artifacts no matter on the design process.
Now, what it is a prototype depends on stage where you are and what you want to validate with it. Sometimes a prototype is just a series of high-fidelity screens linked together so that user could click form one to another and to emulate the entire experience. In other cases, it is a dummy frontend mockup. Then, it could be an actual MVP functionable product that it is released fast on the market in order to get early feedback.
10. User testing & Usability testing
Finally, once you have your first MVP or prototype in production, you should consider testing it again. Now it is the perfect moment to run usability tests in order to learn how your users are experiencing the product which you just released.
This might not be something to expect in a UX artifacts list. But qualitative data is extremely relevant. Because it helps you understand the “why” behind your data.