A UI/UX Design Process In Context

Understand the design process better and learn how user experience (UX) and user interface (UI) shape websites.

These days, in the world of design, it’s difficult NOT to come across the terms user experience (UX) and user interface (UI). They’re everywhere. Despite their popularity, UX and UI are more than hip industry jargon for web pages, as concepts and processes are integral to web design.

UX, or user experience, encompasses a person's entire user journey when engaging with a website or app. But remember, creating this exceptional experience is no magic trick. It's an art form meticulously curated by talented designers. These creative minds craft an information architecture rooted in thorough research and data analysis, keeping the target user groups and audience in mind.

The result? A structured and captivating experience that users won't get enough of. The well respected open source, online design school the Interaction Design Foundation breaks down the basics of UX with this infographic:

Source: IxDF

The target audience's motivations, values, and views inform the functionality and features of the site or app itself. These are then aesthetically brought to life through design and accessibility features. The larger strategy and vision of the brand or company are communicated to the target audience through the technical structure and design of the application or website. This user-centered approach to web design and usability is the essence of user experience.

User interface (UI) is a crucial but distinct element of user experience. It is the detailed, technical “look and feel” of the application or website interface. It is what users directly interact with. This includes the visual design, layout, buttons, links, text placement, graphics, and anything else that mediates the user’s experience. While UX considers the larger vision and perspective of the user in the experiential aspect of design, UI focuses on usability, functionality, and visual aesthetics of the user’s interactions. Therefore, UI is the piece of the web design puzzle that is more traditionally creative and visual.

Source: Karl Solano on Unsplash

But UX and UI are more than just concepts - they are design processes. Professionals work long and hard to fine-tune user experiences and user interfaces to bring them to life. These processes are cumbersome, so it’s understandable why most companies that need a website hire professional web design agencies to do the job. But for the many out there who want more insight into how the UX/UI design process works, keep reading. Below is a simple guide to approaching the UX/UI design process.

Context Is Everything

The UX/UI design process does not occur in a vacuum - its context determines it. This means several subjective factors go into the UX/UI design process. Take this video about UX designers at Google, for instance. They mention the autonomy of their design thinking process and control of their work environment as essential factors in producing creative design. The workspace's environmental factor must be key to creating successful UX/UI design.

Similarly, the reputable Nielsen Norman Group argues that much of the UX design process depends wholly on context. Each client's particularities fundamentally inform how the UX/UI design process proceeds. Even further, the grandfather of UX design, Don Norman himself, suggests that human-centered design is not about following a predetermined process but incorporating principles.

Source: Startaê Team on Unsplash

The UX/UI design process lacks wooden steps that should be blindly applied to any project. Instead, the design process should be imagined as several larger ideas and practices to follow that must always account for and consider the details of the project in question. For example, how a UX designer conducts UX research is not a one-size-fits-all approach - the particular industry and target users or audience in question will determine the researcher's approach. The UX design process for a company that provides services vs. one that sells a concrete product will require two user research methods. Similarly, a client’s size and scope might require UX design to play around with the steps of the design process.

To account for the subjectivity of the UX/UI design process, we’ve provided below not a pre-existing map of how each step must go but the important yet malleable elements of the process.

The Five I’s of the UX/UI Design Process

Immersion

UX designers' initial task is to understand the client and the user fully. The process of collecting data, the basis of the UX design process, is called UX research. It is commonly thought of in terms of basic demographic analysis to understand simple determining factors of a user’s choices and desires. However, as the UX design field develops, it has become clear that this UX research is only the tip of the iceberg. Beyond simple research, UX designers must embrace a practice more all-encompassing - immersion.

Source: Faizur Rehman on Unsplash

Immersion is surrounding oneself with the user's lifestyle, user behavior, business goals, thought processes, and emotions. UX research relies on developing a knowledgeable, empathetic connection with the users who make up the target audience to understand their goals, behaviors, needs, and desires. This is done through some strategies and practices.

• Surveys - Develop a series of questions to ask real users. Use proper survey methods to find an appropriate sample size and to get an accurate understanding of users' intentions, needs, and wants.
• Interviews - An in-depth discussion can help gain insight into a user’s thought processes and emotional drives. The format of a conversation adds more depth than just answering questions.
• User Personas - A typical user's personas are built as a reference point using existing data. They are profile sketches developed based on what is known about users. Suppose a company is redeveloping a website, for example. In that case, a user persona may be developed based on the analytics of the users the site already has to compare with other data acquired through UX research.
• Empathy Maps - These are made throughout the design process but are a key immersion element. One can better compare where these aspects align or diverge by placing what a user says, thinks, does, and feels onto a quadrant. It helps develop a clearer understanding of the drives of a user that do not rely solely on what they say but on deeper factors. Here’s an example of an empathy map for reference:

Intention

UX research is an element that will be needed throughout the UX design process. However, once enough information and understanding are acquired through immersion practices, it’s possible to start with intention. This step is where data is interpreted and reflected upon before concrete ideas are developed - the project's overall intention. It takes the data and applies it to real-life scenarios to determine the types of user problems and the roadmap to deciding solutions. There are two major, though not only, practices at this stage.

Source: Hugo Rocha on Unsplash

• Scenarios - Using the personas developed in the immersion process, a user scenario places the persona within a hypothetical situation. These situations are meant to simulate how a real-life user would make decisions. These help UX designers understand how to approach the problems they are trying to solve.
• Storyboards - This view is larger than the specific one offered in scenarios. Storyboards map out the daily life of a typical user to better imagine how a product or service would fit into their life. Storyboards look at a much bigger picture of the user, and this step helps develop more holistic questions and approaches for the UX design.

Ideation

Here’s where the creativity kicks in. With all of the data and imagining how the users interact, feel, and think, it’s time to create the concepts and ideas that will become the basis of the user experience. On the one hand, this necessitates combining the vision of the client and the data you have about the users. On the other hand, sometimes the best ideas do not come from well-thought-out intentions but in moments of free and flowing thought. For these reasons, combining both approaches is helpful during the ideation process.

Source: UX Indonesia on Unsplash

• Brainstorming is when the entire UX design team has time to digest the data acquired in the immersion and intention stages. With this knowledge, brainstorming sessions about more concrete goals can be beneficial. These sessions can be organized in several ways, but one universal must hold - there are no wrong ideas. Even the most outlandish-sounding ideas should be written down and discussed to let you or your team’s creativity truly flow.
• Idea Maps - Unlike brainstorming, this step is more formulaic and intentional. Write down a list of problems users have on the left, what they do or feel about them, and develop solutions to those problems on the right. This may sound simple, but when laid out like this, creating specific solutions for the UX design becomes much easier.
• Moodboard - This aspect of the process takes some artistic creativity. Using a basic webpage, take the data that has been collected and develop color schemes to match. This step of the process tries to articulate the mood of the UX design in a way that is informed by data and the emotional understanding gathered about users.

Initiation

At this point, it's time to turn the data accumulated and the interpretation of this data into a practical, functioning vision. It is the initiation of the actual user experience design. These are done through various forms of research phase prototyping and internal testing. This stage aims to initiate the project - turning ideas into something practical that can be used to build the website or application.

Source: Amélie Mourichon on Unsplash

• Flowcharts - A simple form of initiation, these graphs show how the user will experience the website from their first moment on the site until the last. It is necessary to write every possible decision a user could make. Seeing the user flow through this process visually is crucial.
• Wireframes - These are a specific type of prototype used to outline the website or application being developed. They can be manually or digitally rendered but are supposed to be a simplified and often contentless version of the website or application’s structure.
• Digital prototype - These are more flexible than wireframes as they may or may not contain any particular type or amount of content deemed necessary given the client or specifics of the project. This is the stage where it’s possible to digitally fill out a more stable sketch of the UX design with colors, images, and typeface.

Implementation

Once prototypes are developed, they can be fine-tuned into workable prototypes. For example, if wireframes were created manually, they could be transposed into digital prototypes and formed with more content into something usable. These usable digital prototypes are then used to get user feedback to determine what exactly needs to be reworked or reimagined for the larger user experience. This stage has three simple steps within it.

Source: Taras Shypka on Unsplash

• User testing - This is self-explanatory, but your prototypes should be in good enough shape to be tested by real-life potential users. One goal is to ensure that any dimensions you include in the prototype are intentional and elements that need feedback. Users should be testing an authentic product. Even though the end of the UX designer, it may not be entirely complete.
• Feedback - User tests should provide thoughtful feedback. Users who participate in user testing should be able to provide and develop comments on all aspects of the user experience or user interface. This piece is crucial for fine-tuning the final product.
• Further Development - Use the feedback to directly inform the changes that need to be made on the final version of the application or website. Listen to the feedback carefully yet ensure it is understood about the feedback of other test users. This part is a never-ending process as the feedback and further development can continue as long as the website or application exists.

Conclusion

The UX/UI design process is not a rigid set of rules to follow but steps to consider throughout the design process. Every client and project will be different, but the above-mentioned steps will always be important for the UX/UI design process. Keeping these in mind will ensure a successful user experience design process from start to finish.