Back to articles

UX / UI Design: A Beginner’s Guide

User Experience (UX) and User Interface (UI) design is concerned with the creation of digital products such as apps and websites. These terms are often used interchangeably in design teams working with stakeholders to improve their services online, but what exactly is involved within UX/UI design, and how can it help to create more intuitive and enjoyable digital products?

What is User Experience (UX) Design?

User experience (UX) design is a process which helps companies, and more importantly their designers, develop digital products such as websites and apps based on their users’ needs. Rather than designers, stakeholders or investors making important design decisions, the key idea is to give the users the strongest voice in the process.

By considering and consulting the users about their needs, wants, and typical problems, the result will hopefully be a stronger, more competitive and enjoyable product to use.

The UX design process is often broken down into 5 phases to help build an appreciation of these pain points, and guide design decisions. This process looks linear, but is actually designed to be quite fluid, allowing designers to return to each stage if and when they need to. These 5 stages, created by the d.School at Stanford University, are:

  1. Empathise

User research is the foundation of the UX design process. Gathering information about user habits through quantitative and qualitative research methods can help a design team map out a user journey, and better define how their products need to function. This is often done through user surveys, interviews, analytical data gathering and focus groups.

  1. Define

Once this data has been gathered, and typical user journeys mapped out, a UX designer needs to narrow down the scope of their work with the use of problem and hypothesis statements. This allows them to validate the content of a minimum viable product (MVP) before putting pen to paper with some designs.

  1. Ideate

With a design focus now understood based on validated and genuine user needs, a UX designer begins to ideate possible design solutions based on specific user flows. This is done by creating low, mid, and eventually high-fidelity wireframes which represent how the final solution will function.

  1. Prototype

These wireframes now need to be connected together, and a working prototype produced in order to validate the solutions and find out what works well, and what doesn’t. Online platforms such as Figma and Adobe XD are great prototyping tools, and help replicate the usability of the final solution as closely as possible.

  1. Test

With a solution now defined, created, and prototyped it’s time to go back to the users and test it. Through a variety of methods such as moderated and unmoderated user testing, the designer will be able to receive genuine feedback about their designs before any handover to developers. This means changes can be made quickly and tested again before any investment in development is made.

By following this common UX design methodology, the user is put at the heart of the design process. The result of this is a design solution that reduces the reliance on assumptions, meets their genuine needs, and targets previously common pain points, building a more robust product as a result,

What is User Interface (UI) Design?

User interface (UI) design is concerned with the aesthetics of a digital design. All of the elements of a digital product which users interact with in order to navigate through a product can be defined as UI components.

The personality of a product is often defined by the branding, and this can be portrayed in elements such as the buttons, icons, navigation bars, and image carousels. All of these are in the realm of a UI designer, and quite often overlap with more traditional graphic design methodologies. 

The process a UI designer goes through in order to help develop strong UI elements and a visually fun product includes mood boards, creation of design systems and style guides. All of these can be guided by design specific user research and are again linked to user needs, wants and pain points.

In addition, interactive components and animations are now becoming commonplace in UI design as the complexity and capabilities of digital products increase, and as users come to expect more fun interaction with the products they use.

How are UX and UI linked?

Putting the user front and centre of the design process is key to producing a successful digital product with respect to its usability, and offering the best chance of converting users into customers. However, thorough user research and a great understanding of user needs and pain points only goes so far without an interesting, fun and enjoyable user interface. 

In return, conversion rates are likely to be very low on products which look fantastic, but where the design isn’t intuitive or logical. 

With this in mind, a UX and UI are very often interlinked into a holistic package where designers produce solutions which not only provide users with an effective product, but one which is enjoyable and brings them back time and again.

Design

Inspiring behaviour change through visual experiences. Our digital design services ensure instant clarity and visuals that cut-through in a cluttered market.

Build

Engineering intelligent solutions is what we do. Shopify experts, we have extended the capabilities of what’s possible through our suite of in-house software.

Grow

Accelerate what’s possible with media and strategy. Blending dynamic thinking with plain logic to deliver a digital marketing toolkit, tailored for growth.