Learning how to create a user experience that is easy to navigate, works well for your customers and aligns with your business goals, is not always that simple but, you should not overlook this through critical thinking.

We have covered a simple approach previously to identify navigational changes to existing user experience by ‘Paving the Cow Paths‘. Here though, we look at a more foundational approach to create a user experience.

“It is essential to create a user experience that differentiates the company from its competitors, and it is user experience that determines whether your customer will ever come back.”

– The Elements of User Experience by Jesse James Garrett

 

UX should NOT be a business afterthought. Consideration for user experience should always begin before building the product; not afterwards.

 

Meet the Elements to Effectively Create a User Experience

The Elements of User Experience comes from a book of the same title, written by Jesse James-Garrett.

Often referred to as The UX Framework or The Five Layer Model.

Each plane in the framework supports the plane above, informing the next phase to create a user experience that works as the development process moves from abstract to concrete.

The Strategy Plane (Why?)

The Strategy Plane often referred to as the “Why Plane” as this is where most of the critical thinking takes place. On this plane, the way to create a user experience is through two areas of interest, the users’ needs and the business objectives.

Starting with the users’ needs, we build up an understanding of what pain the user is experiencing in their tech space and how a software solution can help ease these pains.

You can gather requirements by running focus groups, sending out questionnaires or speaking to individuals face-to-face. You need to understand each user on every level, from management down to the shop floor.

From this, we can create personas to help disconnect our thoughts and emotions from the development process. We also apply context to our research from another persons point of view.

Once user needs are gathered and critically analysed, the business goals are then defined. A value proposition canvas is used to align the needs of the user to the business objectives; through a process of relieving pains and accessing gains.

During this process, we ask several questions. “What does success look like?” or “how do we know when we have succeeded as a business?” This may be making money, saving users’ money or even saving users’ time.

Working through this exercise forms a strong foundation on which to build a software solution that will most certainly meet the needs of the users.

The takeaway from this plane is to document everything. Information gathered at this stage will form a starting point from which to begin writing a strong business plan as well as a continuous reference during development of your product.

The Scope Plane (What?)

Strategy becomes Scope when the user needs and business objectives are translated into a set of requirements for functionality and content.

The Scope plane is often referred to as the “what Plane” as here we ask “What do we need to build?” to meet the objectives set out in the strategy.

Here there are two areas of interest — the functional specifications of the software solution and the content requirements.

Functional specifications are application features the product MUST include and becomes the reference document. Draw up a feature list while analysing information defined by the strategy.

An example of how this can be achieved is by using the following statement:

As a <someone> I want to <something>.

Such as:

• I am a manager, I want to see all the users on the platform.
• As a user, I want to follow my favourite groups.
• As an accountant, I want to update my payment details.

Once his exercise is complete, the main features of the product will become apparent. This set of features are now closely aligned with the users’ needs and business objectives.

During this process, we can also define a set of non-functional requirements. These are attributes that the product will adopt, such as scalability, maintainability or accessibility.

Content requirements are content elements the product MUST include. These can be audio, video, text, files etc. Again, this is not a tick box exercise as the structure, format and source of each requirement will need to be explored.

The takeaway from this plane is to ensure everyone is signing from the same hymn sheet, so to speak. Very often developers, potential users, stakeholders and management come away from requirements meetings with a different mental model of how the final product should work. This process helps define exactly what is functionality and content is required.

The Structure Plane (How?)

The scope is given Structure when we define how the system responds to the user’s actions

The structure plan is often referred to as the “How Plane” as here we ask “how will the system behave when the user interacts with it?

On this plane, there are two areas of interest, interaction design and information architecture.

Interaction design is how the user moves from one step in the process to the next. We can define this by using mind maps to build an understanding of user interactions throughout the application.

We can also define a task analysis to understand if the application behaves as it should during a particular task.

Information architecture is how the user moves from one content element to the next. Here we define the hierarchy of information, how it is processed and the context in which it’s applicable.

The takeaway from this plane is to reduce cognitive load. If there’s too much going on, this will overload the user and cause jarring in their flow throughout the product.

The Skeleton Plane

Structure informs the Skeleton of the system – What it may look like and how the user’s move through tasks and information

The skeleton plane has three areas of interest. Interface design, navigation design and information design. The skeleton plane is where all the hard work begins to come together during the early prototypes.

The starting point for Interface Design is beginning with sketched wireframes on paper as a lo-fi prototype. Sketched wireframes form a base on which to build hi-fi prototypes using software like Adobe Illiustrator.

Once the prototypes have been adapted to meet the needs set out in the structure plane, then interactive prototypes are built.

Hi-fi wireframes can be adapted to incorporate interactive elements using software such as Adobe XD.

Navigation design facilitates movement through the product forming a base which defines the relationships between content and information.

Navigation comes in many forms and is often overlooked.

The whole user journey will need to be mapped out at this stage to understand where the user moves next at each step of the process.

Handing the user the right navigational element at the right stage in their process will create a fluid experience, and the product will appear intuitive.

Information design is often referred to as the glue that holds everything together. This process facilitates the comprehension of information.

Consider affordance, signposting and handholding as well as feedback and hierarchy of information to allow the user to process information clearly and concisely.

If the user has to overthink, it very often harms their overall experience.

The takeaway from this plane is content is king. You will, by this stage, be showing the prototypes to potential customers. Filling the product with lorem ipsum and placeholder images doesn’t show the full potential of the finished product. As a result, the feedback that is received will be convoluted and may hinder progression.

The Surface Plane

Skeleton supports Surface by enforcing visual elements of the application.

Here there is only one area of interest and that is visual design.

Visual design covers branding, typography, colours, feedback and visual cues. We are looking to re-enforce the meaning of our content through visual elements as well as align the look and feel of the application to match the business target audience.

Users are familiar with standard colours, styles and elements that they use every day within other products; they feel comfortable using them. Breaking away from the norm, having all clickable elements the same colour or too many colours on the screen at any given time may frustrate the user, leading to a poor experience.

Many believe that UX begins and ends with the visuals. UX is not UI design.

The takeaway from this plane is to enforce recognition. Allow your company brand to shine through. 

Conclusion

You can complete elements of user experience without having to write a single line of code. This framework aims to embed itself into any development process, agile or otherwise. Only by completing this process can you ensure the needs of the user are successfully aligned with the business objectives, to create a great user experience, from the ground up.

“User-centered design means understanding what your users need, how they think, and how they behave and incorporating that understanding into every aspect of your process.”

– Jesse James Garrett