The four (4) main activities involved in the UX design process

The User Experience (UX) Design Process:

The UX design process is simply a series of steps that are repeated to continuously tweak, improve and polish the design with each cycle.  It aims to provide positive experiences that keep a user satisfied because of the product.

There are four (4) main activities in the design process:

1. Identifying needs and establishing requirements 
2. Designing alternatives 
3. Prototyping/Wireframes 
4. Evaluating

Identifying needs and establishing requirements 

The exact needs and requirements of the target users must be fully assessed to know what kind of support an interactive product would provide.  This involves conducting user research, which gives data required about the users’ behavior, goals, motivations, and needs, in order to begin building the product.

Below are some commonly tools used for conducting the research:

1. Interviews: This involves one-on-one conversations. Users are asked about the problems they generally have with this particular service and where their greatest issues are.
2. Surveys:  This is a questionnaire consisting of a set of very precise questions sent to a sample target audience to find out their attitudes towards a specific topic.
3. Observation: This involves watching users interact with the product in a controlled or natural environment.
4. Card-sorting: This is used for finding patterns in how users would expect to find content or functionality.  It allows the designer to focus input on content hierarchy, organization and flow, whereby the most important information receives the most emphasis, and the least important information receives the least emphasis, usually from top to bottom order.

Developing alternative designs that meet those requirements

Developing alternatives suggests ideas for meeting the requirements and can be divided into two sub-activities; namely, conceptual design and physical design.

1. Conceptual Design helps to create a clear user interface. It helps to describe the roles of different users and their requirements in detail so that the project is better understood from the onset.  It describes what the product should do, behave and look like. 
2. Physical Design considers the detail of the product including colors, sounds, images, menu and icon designs.  The designer would aim to keep the interface simple, consistent and the page layout purposeful.  Colours and textures are strategically applied and typography is used to arrange text in a way that is visually appealing and easily read.

 Prototyping/Wireframes

Once users’ wants, needs, and expectations from a product are clear, UX designers next move is to create prototypes and wireframes.

 Wireframes

A Wireframe is a layout of a user interface that demonstrates needed elements. Wireframes resembles a schematic or blueprint, and is typically black and white illustrations, however, sometimes colours are used to outline specific areas or points.

Wireframes may be used as communication devices to generate ideas and get feedback from users. They are quick to make and can be easily amended after feedback is given and with each design iteration. Wireframes intentionally look the way they do to communicate that the design is not final. This ensures that the designers focus on the structure over details, once the structure is finalized then the visual design can become the focus.

Above: Example of wireframes for a hotel website design.

Prototypes

A prototype is a sample version of the final product, which can be used for testing, evaluation and feedback generation before constructing the final product. The prototype may be changed as the team revises the design iteratively based on feedback. Prototypes can serve multiple cases such as visualizing an idea, use as a blueprint, assessing technical feasibility, or for testing the effectiveness of a design.

Prototypes have four main qualities:

1. Representation —The actual form of the prototype, such as paper, mobile, HTML or desktop.
2. Precision — The prototype's fidelity, meaning its level of detail, polish, and realism.
3. Interactivity — The level of functionality open to the user, e.g., view-only, partially functional, or fully functional.
4. Evolution — Describes the prototypes lifecycle. Some prototypes are eventually discarded while others evolve into the final product.

 Prototypes vs Wireframes

All wireframes are prototypes, they are low fidelity prototypes without a lot of detail. However, not all prototypes are wireframes, a high-fidelity prototype can look like a screenshot of the product, however does not work the same way as the finished product would.

Evaluating

In the evaluating phase, the usability of a product is assessed to uncover the user’s perception during and after interaction with the product. This is to identify problems or obtain usability metrics and find answers about the design’s effectiveness. 

Generally, there are two methods of evaluating user experience; namely, formative and summative evaluation, their main difference is the questions they answer. 

Formative evaluation is used to assess the usability of a product while the design activities are in progress. It is used during the early stages of design and development to solve early issues that may arise. Observation data is collected during formative evaluation that answer and deal with the quality of the design.

Summative evaluation is used to indirectly assess the designs usability. The usability of the design is rated based on the performance of test users on task. Summative assessment is performed after the product has been launched or shipped. Data collected is based on larger groups and is about the quantity of the design, for example, what percentage of users receive errors when using the product.

References

Jaffar, A. (2020, August 13). Digital Terminology Cheat Sheet (Marketing, Design, and Development). Key Medium. https://keymedium.com/web-development-terminology-cheat-sheet/

 

O. (2019, December 13). UX Design Processes. UX Beginner. https://www.uxbeginner.com/ux-design-processes/

 

Reese, D. R. (2020). What is wireframing. Experience UX. https://www.experienceux.co.uk/faqs/what-is-wireframing/

 

The UX design process in 6 stages | Inside Design Blog. (2019). Inside Design. https://www.invisionapp.com/inside-design/6-stages-ux-process/

 

Usability Evaluation Methods | Usability Body of Knowledge. (2020). Usability BOK. https://www.usabilitybok.org/usability-evaluation-methods

 

UX Collective Editors. (2018, June 21). UX Design Methods & Deliverables - UX Collective. Medium. https://uxdesign.cc/ux-design-methods-deliverables-657f54ce3c7d

What Are Wireframes? | Wireframing Academy | Balsamiq. (2020). Balsamiq. https://balsamiq.com/learn/articles/what-are-wireframes/

 

What Exactly Is Wireframing? A Comprehensive Guide. (2019, August 1). Career Foundry. https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/

 

Wikipedia contributors. (2021, January 17). User experience design. Wikipedia. https://en.wikipedia.org/wiki/User_experience_design