In Amazon’s first year, Jeff Bezos made a wise and life-changing decision to invest 100x more into customer experience than advertising. Now, Amazon is known for its ‘reactive design’ which reacts promptly to a customer's activity. This feature is great for customer retention and satisfaction.
Why did Jeff Bezos invest so much money into design? Because anybody can design a website or app, but few people can design an experience that is intuitive, engages the customer and keeps them hooked to your site.
It’s as if Jeff Bezos knew this Forrester study that says that every $1 invested in UX provides a return of $100 (ROI = 9,900%). Or that 88% of consumers are less likely to return to a site with bad UX.
In today’s crowded online marketplace, UX is more important than ever. Users are getting pickier about which brands to place their trust in and are losing their patience for disorganized UX. Currently, 13% of customers will share their bad experiences with 15 people or more.
That’s right, customers will no longer play Mr or Mrs. Nice guy to companies with terrible UX resulting from little or no research about the needs of their users. Your customers expect you to get your UX right from the get-go. This article is going to teach you how.
Design-driven businesses have outperformed the S&P by a whopping 228% over the past 10 years. The bottom line, good design = good business. - Joanna Ngai, UX designer, Microsoft
The 5 elements of UX
Before we move on to the elements, let’s give them a it of context. According to Jesse James Garret, author of The Elements of User Experience, there are five elements of UX design: strategy, scope, structure, skeleton, and surface. These elements are represented in the form of planes.
As you go down the planes, the tasks move from abstract to concrete, with the most abstract concepts at the strategy level and the most concrete concepts at the surface level.
The choices available on each plane are constrained by the decisions made on the plane below it. Decisions made on the strategy plane have a ripple effect all the way up the chain. If you screw up on the strategy plane, you're going to be paying for it for the life of the project.
However, you don’t have to figure out all the decisions on one plane before you move on to the next plane. A better approach is to have work on each plane finished while work on the next plane is in progress. That said, here are the 5 elements of UX.
Element #1. Strategy
The foundation of every successful user experience is a well-defined and clearly communicated strategy.
Strategy informs the critical decisions of your product. Most products fail because of poor strategy. And to develop a great strategy, you need a solid understanding of the sweet spots between what your users need to accomplish with your product vs. what your company needs to accomplish with your product in order to survive. This is necessary to prevent wasting time creating half-cooked products.
Under the strategy umbrella, there are two sub-categories to observe—user needs and business objectives.
User needs
They are the desires and expectations that users have about your product or the outcomes that need to happen for users to have successfully completed a task.
User needs begin with an intimate knowledge of the identified users of your product. What are they looking for? What are their cultural and social preferences? What are their pain points?
The answers to these questions impose certain constraints and provide direction as to how to tailor your product.
To give more context, if your product is a time-tracking software and your audience is less savvy, you shouldn’t add all that extra layer of complexity to your UX. Always consider the context of your user's experience.
Identifying user needs
How do you identify your user’s needs? You research. Here are some ways to do it.
1. Stakeholder interviews: A stakeholder has a vested interest in the product and its outcomes. This is usually the CEO, president, or product marketer. You want to identify what their idea of success. What do they think is good or bad about their product? How is it benefitting their organization?
2. Competitor review: Identify what your competitors are doing or not doing well. What are people praising them for, and what are they complaining about? If you can find features and functions that people complain about in the competition's products and provide alternatives, you'll get an immediate advantage.
3. User research: Talk to your actual users. What do they like? What don't they like? What are their motivations? If they had to complete a task related to your product, how would they do it? Why would completing their task in a certain way be important to them? Take note of tools they already use. If they're already using a tool, uncover what they like about it.
4. Message mining: Social media like Twitter and Facebook, review sites like G2, Capterrra, and TrustRadius, and forums like Quora and Reddit provide a treasure trove of information.
Once you've got some interesting answers, it's time to identify and analyze patterns that will help you tailor your product.
Business objectives
Business objectives are the reasons why the company decided to make the product. It could be to make money, save money, or both.
Business objectives are the ROI on investments in money, time, and effort. And the biggest question that has to be asked is, what does success look like? How would you know when you've succeeded?
In more specific terms, does it mean attracting a ton of visitors to a site within a certain time period or converting them into customers? Define success upfront, so you can recognize it when you get there.
Element #2. Scope
The features and functions contained within the product itself fall under scope. Why is scope important? To prevent scope creep.
We all have our mental models about the way things work. So, it's common for everyone to walk away with different ideas about what the end result could be. Scope definition is important to prevent miscommunication.
Strategy becomes a scope. User needs and business objectives are turned into requirements for content and functionality. In the image above, the user need wasn't deeply understood, so the scope was entirely different from what the customer actually needed. There are two sub-categories functional specifications and content requirements.
Functional specifications
These are the features and functions of the product. They are the product's capabilities, appearances, and interactions with users in detail.
Content requirements
They are the stuff that need to get served up for people to manipulate or interact with—text, data, images, audio, and video. You need to know where your content will come from, how much of it will be displayed, how you're going to identify it, and how you're going to serve it up.
Why is content important?
Because nobody opens a magazine just to look at the ads. By the same token, nobody comes to a site just to experience the joy of well-organized information architecture. They're coming because they're looking for content. And they're hoping that what they find will be relevant to the reason they landed there in the first place. To meet their expectation, you have to find ways to catalog, track and present your content when, where, and how people want it.
Element #3. Structure
Structure defines the number of places you can go, organized in the context of use. Structure improves the usability and accessibility of your website by making it easy for users to find what they are looking for. Structure is composed of:
Interaction design
It's the nuts and bolts of how people interact with things on the screen. Think of it like a call and response. You input something, you get a response. For example, if the user clicks a button, a form is submitted. Or if the user hovers on a down arrow, a menu pops up. All these responses make up interaction design.
Information architecture
Information architecture is the arrangement of content or information throughout the entire site or application. How much stuff is there for users to look at, interpret, read, and interact with? How is it organized?
If you have a large application or enterprise-level website with hundreds of screens, then you'll have very complex information architecture. Scope is given structure when we define how the system responds to things that users do.
An example of structure is DevSquad’s contact form. When a potential client completes the form and clicks the submit button, the form is submitted. Also, the contact form has a simple information architecture. It's organized in a way to elicit information from the lead.
Element #4. Skeleton
On the skeleton plane, you have an optimized organization or arrangement of visual elements on a screen. Here, you must identify how things work together, not only on one screen or page but across an entire system. The skeleton plane comprises
Interface design
It refers to the visual elements on the screen that enable users to interact with the functionality of the system—the buttons, menus, tools, and control elements. What's to appear on the screen? How will you present these elements as seamlessly as possible?
Navigation design
Navigation design determines how the user accesses information. If interface design deals with the representation of visual elements, then navigation design deals with how the user moves through tasks and absorbs and utilizes information in a way that makes sense to them.
What means of transportation are available to them to get users from A-B-C and back again? Does the user get lost in transition? Does the user know where he or she is at any point in time or where he or she has been or can go?
Also important is intuitiveness. Is the site obvious? Does it fit with the user's expectation of how to move through the information? Does it match their mental model? Sometimes, users have an idea of how they would do things.
Your goal is to provide something that's in line with their expectations. You don't want to reinvent the wheel every time. Sure, you can be creative. Just make sure users are able to recognize some aspect of what you’re trying to do.
Here’s an example of skeleton. Look at Gong’s hero section. Here you have the Gong logo followed by product, solutions all the way to the book demo button. The way these are arranged tells you how you should navigate the page. Users will move from the homepage to the product page and so on. This is how SaaS homepages are typically designed so the expectations of users have been met.
Copilot does a good job with navigation design. It tells you where you are by highlighting, in green, the current page you're on.
Element #5. Surface
Surface is the visual contact that the person has with the product—the things that we can click on. The surface mainly consists of visual design.
Visual design is commonly known as the look and feel of your product. It’s made up of colors, images, typography, and effects that come together in a specific way.
Importance of visual design
1. Support and reinforce the meaning of the content. Visual design should never be arbitrary.
2. Guide the user through data, tasks, or information
3. Reduce cognitive load, enable recognition, and increase intuitive learning
4. Be culturally/socially appropriate. For example, your design for an investment bank should be different from your design for a construction company. It’s good to note that design failures are caused by a lack of understanding of the users' culture.
Spline is a 3D design software. We can see how Spline projects a 3D look and feel on their website. The colors, typography, and especially the image of the rabbit with the sunglasses walking on the grid scream 3D. Spline added a twist by allowing users to orbit the image by clicking and dragging (structure - call and response).
Customers expect you to take your UX seriously, and so should you. The Temkin Group found that companies that earn $1 billion annually can expect to earn an additional $700 million within 3 years of investing in customer experience. For SaaS Companies in particular, they can expect to increase revenue by $1 billion. That’s how important UX is and we’re here to help. Just shoot us a message so we can help you launch a beautiful, competitive product that attracts and retains your customers.
