The 5 Elements of UX Design for 2023

The 5 elements of UX design. They're the key to designing products that your users will love. In this guide, we'll talk about what those five things are and how you can use them to make products that do well. 

Written by:
David Yap
Sep 1, 2023
Last Update:
Oct 15, 2023
5 mins read

The top 5 elements of UX Design for 2023 are A, B, C, D and E. Here's why.

You already know how important it is to create products that provide the best UX design experience from a creative ux agency.  But what essential elements are brief enough for you to do so?  That's where the 5 elements of UX design come in. They're the key to designing products that your users will love. In this guide, we'll talk about what those five things are and how you can use them to make products that do well. 

Introduction to Elements of UX Design

UX design is a complex process that requires designers to consider many different elements. It involves creating products that provide users with a satisfying experience.  It focuses on creating a product that is not just functional but also enjoyable to use. 

So, smart organizations recognize how they need to understand their user's needs, goals, and motivations to then create a product that meets those needs. If you need a refresher on what UX design is, read the Quick Guide we wrote before. 

Here are the five elements:

Strategy, scope, structure, skeleton, and surface.

infographics of the 5 elements of user experience design
Summary of the 5 elements of user experience design

What are the 5 Elements of UX Design?

Strategy

Strategy is an essential element of user experience design that focuses on the long-term goals and objectives of a website or application. It is the process of making sure that the design and functionality of a product are in line with the business's overall strategic goals. This element is achieved by taking into account the user's needs and wants, as well as the business objectives and mission.

To achieve a successful strategy, development and design team must work together closely. User testing and research are done to find out what the user needs, and then the information architecture of the website is set up to meet those needs. Only after this, can the interface elements be designed to guide users toward achieving their goals while also aligning with the company's strategic objectives. If a product does not have a clear strategy to start with, even the most sophisticated technology will fail

Scope

Like in the UX design phase of Define, the scope is the next to be clarified.

a man walking a dog on a leash down a sidewalk
A different scope is needed, e.g. for disabled people. Pic by Unsplash.

Scope is an important element that focuses on defining the boundaries of a product. It means deciding what features and functions will be added and what will be left out. A well-defined scope is important for making a successful product that meets the needs of its users while still being doable for the development team.

To achieve a clear and effective scope, user experience designers typically start by defining user requirements and goals, as well as conducting user research and testing. You need to set out the requirements for functionality and content. What are these requirements? Functional Requirements: It's the rules about how the product's functions, or features, work with each other and how they relate to each other. Users need these parts in order to reach their goals.

Content Requirements: It's the information we need to be able to help. Information such as text, pictures, sounds, videos, and so on. Without knowing what the project is about, you don't know how big it is or how long it will take to finish.

Structure

Structure focuses on how information is presented to users. It ensures that your content is organized in a way that is easy to navigate and understand. When it comes to good structure, information architecture and interaction design are very important.

Information architecture involves organizing and structuring content in a clear and concise way. It ensures that users can easily find what they are looking for and complete tasks quickly. So, the way content is organized should be easy to understand and have a clear hierarchy that shows how important each piece of information is. Meanwhile, interaction design involves designing the way users interact with a product or service.

It is about creating intuitive and user-friendly interfaces that allow users to accomplish their goals with ease. The interaction design should work well with the information architecture and make it easy for users to find their way around the content. To achieve good structure, you need to carefully consider your target audience and their needs. Your content also should be organized in a way that aligns with the user's mental model, making it easier for them to understand and navigate.

Skeleton/ skeleton plane

yellow click pen on white printer paper
Wireframing and information architecture. Image from Pexel

Skeleton is an essential UX design element that is concerned with the placement and hierarchy of interface elements on a page or screen. It means putting content and information in a way that makes it easy for users to find their way around and complete tasks. Normally, this involves your web development team to create a rough layout or wireframe to test the effectiveness of the proposed design.

To do so, your web development team and you must consider the business objectives and user requirements based on your strategy and scope earlier. This means getting information from users and looking at how they use the site to figure out the best way to present information. So, user testing is a crucial step in the skeleton design process. It enables your team to identify any usability issues and adjust the design accordingly. Once you have a clear skeleton of how your web sites would look, you can then move to the last part.

Surface plane.

Surface

Surface is the final stage of the design process in user experience design. It is where designers finalize the product's features such as color, typography, and visual elements that the user will interact with. In other words, surface design is the visual representation of the product's interface, which includes the visual elements that the user sees and interacts with.

The main goal of surface design is to ensure that y product's interface is visually appealing and consistent with the brand identity. You do this by choosing the right color palette, typography, and other visual elements that make the product easier to use, more accessible, easier to find, easier to learn, and more enjoyable. You also need to ensure that the product's features are represented in a way that is easy to understand and interact with. By doing this, your users will find it easy to move around in the product, which will make their experience more enjoyable and memorable.

picture shows how kids can happily use computers as there is accessible introduction
Kids can access digital tools happily as the Surface is clear for them. Unsplash picture.


Examples of Successful UX Design Projects

Have you ever used Grab, the ride-hailing app that has become a superapp?  Grab's success is no accident– their user experience designers have focused on 5 key elements: usability, accessibility, discoverability, learnability, and delight. So, how do they use these various elements to offer a consistent user experience?

Strategy & scope in their visual design

Grab apps are not just aesthetically nice. It is highly usable with its vivid illustrations, sharp graphics, and clear explanations. 

Screenshot of Grab apps clear Surface design
Evolution of Grab apps design by UXCollective

Throughout their apps evolution, we can see how they designed their information architecture. They make sure users can easily find what they need and move around the app without getting confused. This is their head-on strategy. And, as their customer base grows, Grab has expanded their user experiences to cover a broader range of topics, while adhering to the same design principles as the World Wide Web.

So, this lets their users quickly find and use all the information they need to use the app's features to the fullest, whoever they are. Which leads to a positive user experience and ultimately contributes to Grab's business success.

Structure in their information architecture & visual design

Grab also puts a lot of emphasis on how easy it is to learn how to use its different features.  Grab has a well-defined structure that enables users to complete tasks easily and efficiently. Users can quickly find and use the key elements of the app, such as booking a ride, ordering food, or making a payment. The user interacts with the Grab app in a seamless way, thanks to its intuitive structure.

All the details and information are laid out in a way that makes sense. This gives the user a high quality experience. The app's structure is designed in a way that aligns with Grab's business success objectives. To achieve this, Grab apps use a structured approach to display information and functional requirements.  The app's key elements are presented with incisive clarity, making it simple for users to locate and fulfill their needs. 

This makes the app less overwhelming, even for first-timers. Grab has clear navigation tools that make it easy for people to get to all the features they need so that they can be found. 

Screenshot of Grab search button as the first thing seen
Search form that helps with Structure in Grab

Delightful surface

Another key aspect of Grab's success is its focus on delight. This is very visible on the Surface of their apps.

By making the app look nice and fun to use, they enable users will be interested in it and want to use it again and again. 

screenshot of Grab apps rewards interface as one of their product's feature
Grab delights their customers with reward

One way is through the use of animation and micro-interactions to provide immediate feedback to users. For instance, when a user orders a ride, the app displays a car icon on a map that moves toward the user's location in real-time. This small animation gives users a sense of control and makes them look forward to what's coming next, which makes the experience more interesting.

Grab apps also include elements of delight by providing rewards and promotions such as free rides or discounts. This feature not only adds surprise and delight to the user experience but also encourages users to continue using the app.

The Importance of the 5 Elements in Your Design

So, why do you need these 5 elements of the user experience when creating successful products?  Without considering these elements, a product can become difficult to use, inaccessible, and unenjoyable. 

Even if you do not aim to develop a super app like the Grab app, a successful user experience is still key for users to continue using your products.  Or else it can lead to user frustration and abandonment. You can look at how Justin Welsh, Pascio, and Jack Butcher created their digital products. 

Example of Jack Butcher famous diagram that helps customer understand an overwhelmingly complex topic
Jack Butcher sleek yet functional VisualizeValue products

Their products are not only good-looking, but they are also easy to use and help people a lot.  Although their products are not as big as Grab apps, but all the details are covered: from Strategy to Surface.

Conclusion: future of user experience design

Since the end of 2022 last year, the buzzword for 2023 has been AI or artificial intelligence. 

Artificial intelligence such as ChatGPT affected web design

So this field is directly impacted by this, as are you. Here are a few rising trends we need to be aware of: 

  • The role of AI and machine learning in UX design will continue to grow, allowing for even more personalized and predictive experiences.
  • User experience will now be not only about visual design, but the audio (podcasts, Alexa and Siri), videos, and more diverse forms of design. 
  • The demand for user experience design will continue to grow, with companies recognizing the importance of delivering high-quality experiences to their customers.

So, how do we adapt?

Keep on learning; understand the user's needs and tailor the design to them. It may take you a few more steps, but with the rise of AI, more human touches are needed to differentiate.

Stay up-to-date with the latest design trends and technologies, but don’t get bogged down with the FOMOs of AI tools; craft unique experiences for your user. 

Lastly, get in touch with us today if you need user experience consultancy to help you put the five elements of UX design into your next project.

Unlock your business potential through design with us

Empower your business with tailored strategy, innovative design, and seamless Webflow development. Ready to take your company or startup to the next level? Enter your email to receive a free website checklist.

Thank you! Your submission has been received! We will email your the checklist as soon as possible
Oops! Something went wrong while submitting the form.

About our author

photo of David Yap
Written by
David Yap

David is the founder of Zensite, a product design agency based in Singapore. Since 2016, David have been involved in many UI UX related topics covering user experience, product design, digital experience and also founded Friends of Figma, a Figma Community in Malaysia.

photo of Fiha Febiala
Reviewed by
Fiha Febiala

Fiha is a passionate product designer hailing from Indonesia. With a background as a Frontend developer, Fiha transitioned my career into the dynamic world of product design. Fiha is dedicated to translating conceptual visions into user-friendly interfaces that resonate with users. In meantime, Fiha serve as a mentor, guiding aspiring individuals who seek to delve deeper into the realms of UI/UX.

TABLE OF CONTENT

One plan, all things design for your business

Gain access to top-notch creatives from an experienced design agency through a flat monthly design subscription service. Start your design project with us today!

Get started
Subscribe to our newsletter

Join our community of 1,000 who receive the best in design and Webflow content.

SHARE

Contact us

We’d love to learn more about your company and how we can help you. Tell us about your project in the form, and we’ll put you in touch with the right team.

If you are looking for a retainer based service, please check out our design subscription.

hey@zensite.co
+65 3158 6926 (SG)
+60 3-2935 9156 (MY)
68 Circular Rd, Unit 02-01, Singapore 049422
OUR SOCIALS

By submitting this form, you agree to our privacy policy and allow us to contact you via email

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.