We use “cookies” to analyze user traffic and remarketing. Detailed information can be found in Privacy Policy.


to know how
31/5/2018

How is the UX design process?

Illustration of, laptop, notebook, person reading

trial UX design new solutions should involve two parties equally: customers and designers. This significantly affects the quality of work and the sense of control over the task at hand.

Below we present an example description of the process of designing a new website. It presents in detail all the key elements of the implementation necessary to create a customer-oriented service tailored to business needs.

Analysis of the competition

About 10 websites from the international market and from Poland will be analyzed. Elements affecting the advantage of a given service in the eyes of consumers will be defined. Next, there will be a distinction between trends in the development of competitive websites and interesting new features offered by these services — potentially interesting for the Polish consumer.

The analysis will be presented in the form of screenshots of interesting parts of the services together with a description and a summary comparative summary. The scope of work may be expanded by the analysis of the data of the Customer's service including the evaluation of data coming from the analytical tools owned by the Customer.

Users will also collect ratings of competitors' websites, press releases, concerning the business aspects of competing websites (traffic on the website, reach, acquisitions, valuation).
A minimum of 3 independent people will work on the analysis of the competition, which will allow to maintain greater objectivity and reach a wider spectrum of interesting solutions.

Overview of competition analysis and collection of requirements

During the meeting there is a presentation of the competition analysis and discussion of its most interesting elements. The presentation of the conclusions of the competition analysis consists in outlining the answers to the following questions:

  1. Which services are defined as strict competition, and which ones as further.
  2. What features are most popular among users.
  3. What competitive advantages do competitive services have.
  4. Which of the functions found on foreign websites may be of interest to Polish users.

An important stage of such a meeting is the collection of opinions on the competition from the Customer's team and a preliminary assessment of the possibility of competing with the presented services (obtaining information from the Customer about the fields where a competitive advantage can be obtained).

Brainstorming. Preparation of the concept of the service

It is recommended to conduct 2 brainstorming sessions in the Counterparty team. Brainstorming takes an interdisciplinary team of 5 to 8 people. The team includes sociologists, cultural experts, business analysts, interaction designers, project managers.

The result of the brainstorming is the creation of about 5 loose concepts for the Service. The loose concept provides a general description of the competitive advantage of the Service. The concepts are then subjected to expert evaluation, concepts that do not comply with the assumptions made are eliminated and the concept is selected for further refinement. 2-3 concepts are refined in the form of 1 A4 description page. The following are described: the main values in the service for the consumer, methods of building a competitive advantage, the most important functions of the service, the strengths and weaknesses of the service, the possibilities of development of the service

Meeting — discussion of the concept

The concepts created in the previous point are presented to the Client at the meeting in a manner consistent with the prepared description. Opinions are collected on the concept.

Together, the leading concept emerges and it is determined whether and if so which elements of the other concepts should be added to the leading concept.

Creation of information architecture

A UX designer creates an information architecture. It is a list of subpages with an indication of the relationships between them. It constitutes a kind of framework of the designed service and is consulted with the Client.

Preparation of site mock-ups (low accuracy prototype)

Low-accuracy prototypes graphically represent the most important elements of the site and their distribution on the main page and key pages of the site. Example key pages: category page, results list page, search results page, article content page, gallery page, contact form page.

On low accuracy prototypes, individual elements of a given page are presented by blocks — details of a given block are not described. The purpose of preparing low-quality prototypes is the preliminary layout of the information architecture of the site. Low-accuracy prototypes are prepared as Axure presentation file

Teleconference — overview of site mockups

Prepared low-accuracy prototypes are sent in the form of PDF or HTML files to the Customer. Then a teleconference is held in which the Contractor talks about the prototypes — each element is discussed separately. The functions of each element and the methods of implementation are discussed. After the teleconference, a summary of the findings is sent by the Contractor via e-mail.

Modify site mockups

According to the content of the email from the previous point, modifications are applied to the prototype. A high-accuracy prototype is created. The high accuracy prototype contains all the features and options (links, texts) outlined on the main page and the most important key subpages of the site.

The high-accuracy prototype is created as an Axure presentation file. A high-accuracy prototype is the basis for graphic work, but it is not a graphic design.

Conducting tests with users — verification of mock-ups

Prepared high-accuracy prototypes are verified in tests with users. Tests with users are tests of a qualitative nature. In subsequent tests, the understanding of the prototype by the potential user is examined. As part of a single test, the user is asked to describe the prototype, specify what it is for, and use the prototype to perform a specific test task. Thus, the usability of the website is checked.

Jakob Nielsen and Tom Landauer have shown that testing with 4-5 users can detect 85% of problems with website functionality. Hiring more users does not guarantee a linear increase in the number of detected errors. The tests will be carried out on 4 more users from the target group of the service.

On the part of the Contractor, two people take part in the test — the person conducting the test and the observer recording the test results. The tests will be carried out at the Contractor's office.

Users will implement two types of scenarios:

  1. Understanding the site — presenting the prototype to the user and then checking that they understand the way the information is organized, the navigation and the concept of the site
  2. Execution of the activity — the user works with the prototype —
    tasks closed, tasks open.

Before the start of testing, test scenarios will be prepared, which will be sent to the Customer. The results of the tests will be communicated to the Customer in the form of a summary in the form of an e-mail. Tests can be recorded at the request of the Customer.

Optionally, the tests can be expanded with In-Depth Interviews (IDI). In-depth interviews allow to learn about the motivation of users, their opinions and experiences in the context of a given product or service. Thanks to this method, you can get to know the potential consumer well, analyze what needs and expectations he has and determine how he usually tries to satisfy them. The data collected in this way allow us to answer the question of whether the designed solution is optimal for customers and whether in their opinion they are competitive with others present on the market

Modify site mockups

Based on the conclusions of the tests with users, the prototypes of the site will be modified and the final mock-ups of the site will be created.

Those elements of the prototype that are not understandable to users, interrupt or delay the execution of test scenarios or where their occurrence was questioned by users during the test will be modified.
The final site mockups will include home page mockups and key subpages. They will be prepared as an Axure presentation file.

Design of the graphic layout

The work on the graphic design is divided into 3 stages:

  1. Collection of requirements and preparation by the agency of so-called mood boards presenting on the basis of references proposals of the most important elements of the project — typography, iconography, color palette, character and mood of photographic materials.
  2. In the second stage, the homepage is designed by two independent designers in two versions. The aim of this stage is to choose, based on the presented proposals, the final design of the website.
  3. The final stage is to create graphic views for all models and supplement them with a webgiudlin containing the presentation of all elements of the website, including: headers, buttons, tables, forms, etc.

Preparation of service documentation

The closing and summing up stage of all the work carried out will be the preparation of the service documentation. The documentation will contain information enabling the creation of graphic designs based on it and the implementation of the website.

Meeting — discussion of documentation, closing of the project

The meeting will discuss the service documentation prepared in the previous point.
The project will be summarized (schedule, completed stages, conclusions). The design process completes the signing of the acceptance protocol.

13 stages create an ideal design process, thanks to which we prepare a tool dedicated to specific groups of users. It should be emphasized that the very process of creating and testing solutions can be carried out using iterations. Thanks to this, at the testing stage, it is possible to eliminate as many errors as possible.

Share this entry:

Related publication

Check the publication

featured entries

Let's do
something together!

Thank you! We will get back to you soon with an answer
Oops! Qualcosa ha insegnato il modulo.
Nikodem krajewski speek into microfon on conference