Every conscious and dynamically developing company in the production of its digital products first builds and then develops its design system. Thanks to it, creating new applications and websites is much easier because you get the basics that can then be freely modified and developed according to your own needs and expectations. This elementary knowledge significantly increases the dynamics of digital production, thanks to which the brand is perceived as modern, progressive, ahead of the competition, and attractive. What exactly is a design system? How does it affect the aesthetics of design and the business itself?  

What is a design system? 

The design system takes the form of a library with ready-made, standard solutions used by designers in their work. It’s not just a visual presentation but something much bigger. The individual elements of the project are implemented in such a way that their operation is consistent with the available documentation and the so-called best practice. The design system significantly speeds up the work of entire production teams, including developers and designers. This definitely works in the so-called agile methodologies because the ability to update or correct one component has a positive effect on the entire design of the system. Quick delivery of the system also gives the opportunity to test its effectiveness on directly implemented solutions, not only on their prototypes. 

It should be remembered that the aforementioned library of design system is intended to increase the efficiency of designers’ work and is a library of pre-built components. However, all components have already been properly tested and implemented in other projects from many industries and branches of business.1 

How do design systems go beyond the visual aspects of design? 

As we already know, the design system functions in the form of a library, which contains extensive knowledge about code components and how they can be used in digital and business solutions. Thanks to the fact that they have already been tested, they are fully ready for use and often contain information on how to implement them in the code of a given digital product. 

The use of such a component makes the language of a given software or application consistent and standardized. This is extremely important because, during the implementation of a given project, organizational changes and changes within the team may occur. 

Examples of business outcomes influenced by design systems 

Properly used possibilities of the design system can result in many benefits for the business. They significantly improve business outcomes. Thanks to them, the ROI (return on investment) indicator, which determines how effectively a given business conducts its activities, is significantly improved.3 

System design increases the interaction and involvement of people using a given digital product. It also positively affects the user experience and improves business value by maintaining brand consistency and consistency in the operation mechanics of the entire design system. All these factors have a big impact on the business and its success. 

Below are some examples that show how system design can influence many business aspects, including revenue growth, increased efficiency, reduced development and customer satisfaction. 

Read also: The 10 most useful lessons from more than a 10 years of experience in building digital banking platforms

Sparkbox case study 

One of the proofs of the effectiveness of the design system is the case study provided by Sparkbox. A team of eight developers was tasked with developing the code for the contact form in Figma. Two methods were used for this purpose. First, the code from scratch was developed. It was then developed with the help of the Carbon design system. While developing the code, developers were timing themselves. 

Using the design system increased time savings by 47%. Developers developed code that was more visually consistent with the design and more accessible.

Shopify case study 

Another example could be Shopify. By taking advantage of the design system, they significantly reduced their development costs by 50%. At the same time, their developers devoted much less time to their work. They could focus not only on developing the basics but more on improving them and increasing their functionality. To scale their features and make their application consistent, they currently use Polaris—their own design system.

Design systems not only accelerate the work of the development team but also completely change the way of thinking about how to perform duties. The design system significantly improves collaboration between team members, even if they are scattered around the world. It also increases the quality of work and allows you to focus on new tasks thanks to design patterns. The component library reduces the time needed to develop a project8 and increases the dynamics of competitiveness in business. 

How does a design system contribute to the efficiency of design and development teams? 

Design systems significantly improve the efficiency of design and development teams. Most importantly, they are a source of components that are ready to use and complementary to existing code. Thanks to the established guidelines, their use is not problematic and is clearly explained step by step. 

Development teams also don’t have to spend time on “reinventing the wheel”. The developed code is transparent, understandable, and effective, and the possibility of error in the code is significantly minimized. At the same time, it is consistent with the other components used in the code. And the unified language increases the effectiveness of work, because it is understandable for each project and each project participant. Designers, developers and other employees can effectively use one source, which is the design system.

 The graphic below shows what the efficiency curve of a design system looks like. Initially, performance is reduced, but with the progress in the development of the design system, productivity increases significantly. 

How do design systems enhance and accelerate the product development process? 

Thanks to design systems, it is possible to enhance and accelerate the product development process. The design system is the source of code snippets, documents, and other digital assets that are reusable and design-established. 

Work on the product can take less time, and thanks to pre-tested components, you can focus on further development rather than on generally available basics. This significantly increases productivity. Developers and designers can focus on iterations and deployment of new features. 

Developers can take care of the dynamic development of the product and increase its consistency and availability for the end user. The design system can also be developed in a way that takes into account the WCAG guidelines. In times when the product life cycle is shorter, the ability to automate and use components in different versions allows you to keep up with changes and quickly implement new solutions.10 

How does a design system contribute to creating a consistent user experience? 

The components that are available in the design system are pre-tested, or they are built based on an already existing, implemented solution. However, it is impossible to determine the usefulness of a given component reliably. Whether they are understood by the user and function correctly depends on the context in which they are used. When a certain variant becomes common in many solutions, the user develops certain habits. He expects a particular component to perform a function he already knows. Therefore, they are known to increase a consistent user experience because they become visually friendly and identifiable. 

Also, combining them together is not a problem. It is also common to create components that are developed in several variants – each variant for a different device. Thanks to this, they will be displayed differently on devices with a desktop resolution than on mobile RWD running on a computer. The variant developed for mobile resolution displayed on the phone with the use of the device recognition function will look even different. 

The individual elements work together, thanks to which the final product is responsive and responds to the needs and expectations of users on different devices and operating systems. The aforementioned visual consistency significantly supports UX design. Users can use features that are visually consistent throughout the application or website. 

The design system makes it possible to create a coherent image of the brand and its products that function in the same way, and the product structure is visually recognizable across all screens for each user.11 

Can consistency in user experience impact customer satisfaction and retention? 

Definitely, consistency can have a big impact on whether current users will be satisfied with using a particular digital product or rather turn to the competition.  

Products and services with coherent components increase the intuitiveness of use, build trust, and make it easier to navigate the website or use the product. Familiarity is a way to increase the simplicity of use, which allows the end user to quickly and effectively achieve the intended goal. 

Consistency can therefore affect the loyalty of the user and encourage him to continue using the services or products of a given business. Therefore, it affects the overall experience and reduces cognitive load. 

Nowadays, users interact with the company through many sources. These are social media, websites, web applications, software, mailing, etc. The lack of brand cohesion can be disastrous for the entire business, reduce the customer’s trust in the business and cause they will no longer identify with it. 

Read also: What is project risk?

A study by Lucidpress – the impact of brand consistency on sales results 

A study by Lucidpress clearly shows that consistency has a big impact on users and can increase business revenue by up to 33%. However, according to a survey conducted by McKinsey, a strong brand can increase sales and increase the likelihood of a customer buying from a given company by up to 3.5 times.12 

Can a well-implemented design system influence a company’s brand reputation? 

Using the solutions offered by the design system and their proper implementation can have a positive impact on the brand’s reputation. Carefully implemented components of the design system make the brand visually consistent across all sales and promotion channels. This inspires trust, enables customers to identify with the brand, and proves its reliability in the message addressed to the final customer.

A well-implemented design system is a system where attention is paid to details. The visual version represents full professionalism, responsible and serious approach to creating the presented solutions and to the user himself. It is also a business commitment to provide a high-quality experience which users appreciate and demonstrate in their loyalty to the business. 

Well-used design system capabilities make the brand more recognizable, and competitive, evoke positive emotions, have positive associations and make users identify with it. Over time, they can also recommend specific products or services themselves, thanks to which they become, in a way, ambassadors of a given brand.

Case studies demonstrating the impact of design systems on business outcomes 

The results of the survey directed by Sparkbox show how much the design system affects the business outcome. 

Information was collected from two groups of respondents. One of them were in-house respondents representing their own experience with design systems. The second group of respondents were people representing the customer’s point of view. 

As you can see in the picture above, the biggest priorities and challenges include encouraging adoption, engaging contributors, and overcoming debt. 

The photo above clearly shows that many teams believe that their design systems create debt. 

What did the respondents consider to be the reason for debt? 

• lack of complete documentation and reliable technical implementation, 
• implementation of design system components when the product is already along the lifecycle, 

• making changes only after the product has been released. 

To sum up, in order to gain maximum benefits, it is important to convince yourself to the adoption stage and increase the involvement of employees in working on the design system.   

It is also essential to track design system metrics because these data allow for a clear recognition of the correlation between the design system and business success. Then it is easier to determine that successful design systems allow businesses to benefit greatly from them. It is also significant to realize that this is only a path to success and not the only exclusive means to achieve it. But it can still be seen that design systems contribute to revenue generation and should be treated as an investment in the future of business.

How does a design system help in the long-term reduction of project and technical debt? 

Using the design system is an investment that contributes to reducing project and technical debt in the long run. It is a source of established components that can be reused without having to re-develop them from scratch. 

It is also a way to avoid duplicating tasks that employees have already done and reduce the likelihood of inconsistencies. The use of standard solutions provides the basis for maintaining high-quality code.  

The design system enables the use of established solutions, which significantly reduce the risk of errors, and the code is manageable and easy to maintain. 

The design system provides clarity and a solid foundation for understandable communication between all employees and project groups. With a design system, communication between people involved in designing an application or website will be easier and more convenient.  

Thanks to a well-developed design system, you can avoid many mistakes and quickly reduce project and technical debt in a relatively short time. 

How can design systems support scalability as a company grows? 

The design system supports scalability for large and complex products. It is also the best solution for a business that implements long-term projects. Design system effectively supports the work of large and extensive teams.

This means that thanks to the design system, you can effectively develop a small, single product and efficaciously work on creating a multi-product offer. The centralized design system makes it easy to maintain consistency and libraries available in multiple technologies. 

What are the consequences of using a design system in terms of cost savings? 

When do the costs associated with creating a design system pay off and allow you to save money? This moment is the next project to work on in a particular business. A growing company collects a database of information, knowledge, and code samples that can be used in future projects. Predefined components are reusable, which saves time and money.18 

Cost savings are also based on the use of established design patterns, increased design efficiency, and shorter time spent on product or service development. The design time can be significantly reduced because the low-fidelity issue can be completely omitted, thanks to the design system. In this way, you can go straight to creating projects that do not require as much work to achieve a ready-made solution. Also, the business itself receives the finished project much faster because it can familiarize itself with High-Fidelity projects much more efficiently than low-fidelity projects. 

Saving time means saving money and is also determined by the minimized number of bugs that would have to be debugged. All individual elements contribute to large savings in the business and the opportunity to allocate this time and money for even more dynamic development. 

How does a design system facilitate better collaboration between designers and developers? 

It is not without a reason that the design system is referred to as a single source of truth.19 It makes collaboration between designers and developers more efficient. They communicate using one unified language and can rely on the components that underpin their work. They receive a unified source of information and documentation that they can implement without the need for repeated consultation about the basic aspects of the brand and the assumptions of its visual presentation.  

How can a design system assist in onboarding new designers or developers into a team? 

The design system is a great help for new team members. It is a source of well-documented knowledge about unified design language, guidelines, and resources. This is the basis of the work of all employees, which is used by both groups of designers and developers. 

Providing new employees with access to this knowledge base will give them a chance to quickly implement and understand the basics on which a specific project or even the entire brand is based. New employees gain self-confidence and quickly adapt to the expectations of the brand.  

After they master the unified language, they can immediately propose the development of existing solutions and participate in effective collaboration between teammates. What is important, new developers and designers can always return to the design system and use it as a fundamental source in their work.

What is the role of design systems in reducing errors and inconsistencies in the final product? 

Considering that the components included in the design system are well-tested and proven, using them greatly reduces the number of errors made. Placing these components in the design system means that they are based on established design principles. Applied as recommended, they will not cause errors. 

When do errors occur? The problem arises when decisions about a given component are made ad-hoc or components from the design system are not used at all in the developed projects. 

No need to develop basic solutions from scratch also results in better code quality, its readability, and finally greater consistency of products developed for a given brand. 

How can a design system help in maintaining overall product quality? 

The great advantage of the design system is that it is treated as a centralized repository for all employees, in particular, designers and developers. 

However, the quality of the product itself is based on consistency and offering the final customer a flawless solution. Reusable components and best practices make it easier to maintain dynamic product development at the highest level while taking into account a better user experience. 

How can design systems help align business goals with user needs? 

Design systems is not a way to align business goals with user needs. It’s just a middle ground, a collection of proven design fundamentals and code snippets that have worked for previous projects and helped them succeed. 

Their targeted development can have a very positive impact on business goals. It can also facilitate the direction of change and development that focuses on the needs of the user. Therefore, it will be a means to create user-friendly products that will enable the fulfilment of business goals. 

How does the iterative improvement of a design system contribute to continuous improvement in business outcomes? 

The design system is a product itself. It should not be treated as a finished tool, but a living project that requires improvement and work on it. That is why it is so important that the components and the knowledge gathered about them are updated, tested, and adjusted. 

The graphic below shows what the iteration process should look like. 

Changes in the design system should take place along with the evolution of the product. It is necessary to take into account the changing user needs and user feedback, technological advancement while not forgetting about creating user-friendly products, consistency essential for the brand and achieving business goals. Continuing iterative improvement and maintenance is inevitable and essential for business development. 

What are the challenges companies may face during the implementation of a design system, and how can they be overcome? 

Many companies believe that they should decide to introduce a design system. However, there are many obstacles that block businesses from initiating change. We are talking here about difficulties with adoption, technical debt, and maintaining consistency while the company still uses different technologies. However, changes may proceed step by step: 

How to deal with the changes and the challenge, which is undoubtedly the introduction of the design system?  

Adoption can be approached progressively. Work on the implementation of the design system should be based on providing employees with appropriate documentation that will enable the development of the system. Throughout the entire process, there must be constant support, training, and clear communication between all business representatives who work for its development. These are stakeholders, designers, and developers. 

It is important that each stage of change clearly defines what it concerns and what its deadline is. To avoid the feeling of being overwhelmed, it is worth discussing the individual stages with the participants of the changes. 

It is also significant to remember that every existing product may have its limitations. Some of them will only partially adapt to the changes and implement the design system.

What does the future of design systems look like, and how can they impact business outcomes? 

The constant development of the design system is the key to keeping it up-to-date and beneficial to achieving business goals. Considering that modern and advanced technologies are already used in these systems, it is only a matter of time before automation, and AI will take part in their management and development. 

Thanks to automation and AI algorithms, adaptation to changes will be more efficient and faster, with less emphasis on employees’ personal involvement. 

Contrary to appearances, an evolutionary, not a revolutionary, approach to change can bring many positive effects for business, including increased productivity, improved business scaling, and faster iterations.  

Are you looking for a professional business partner who can help you with creating a design system for your company? You’re in the right place! Just drop us a line, and we’ll take care of the rest. 

he application design process is primarily about ensuring its functionality, usability, and user-friendly interface. What counts in this whole process is to increase its involvement, as well as the attractiveness of the application itself, which attracts attention, improves the user experience, and adds a unique character to the application itself. So far, however, the issue of animation and micro-interactions, which are part of the so-called motion design, has often been overlooked in application design. So, what is a motion design, and how can it influence the development of mobile applications in terms of their UX? 

Motion design in the context of mobile applications 

Motion design in the context of mobile apps refers to the intentional use of motion, animations, and transitions to enhance the visual appeal, usability, and overall user experience of the app. It involves carefully crafting and implementing animations and motion effects to create a sense of fluidity, interactivity, and delight for the users.  

There are two categories of these interesting solutions.  

The first one concerns visual engagement. Motion design allows you to add elements to the application interface that are dynamic and visually attractive to the user. These elements are memorable and more engaging. They are the basis for creating a coherent, uniform application language. Thanks to them, the application gains its identity and recognition. 

The second category consists of elements that can be classified more as user guidance and have an impact on the intuitive operation of the mobile application and the processes taking place in it. In this respect, motion design guides users to important elements or actions in the application. Movement attracts attention, so designers can use it to emphasize important functions that the user can use. It’s also a way to guide the user to visual cues so that he can better understand how the app works and use the interface more effectively.  

All of these elements enhance the user experience (UX).1 Thanks to them, the interest of users increases, which is influenced by motion design that adds dynamics to applications and arouses interest more than static content. It is also a way to increase the interactivity between the user and the mobile application, as well as his involvement in using it.  

Growing user needs for mobile applications 

Motion design solutions within mobile apps are constantly evolving. With its development, it must keep up with dynamic changes and the growing needs of users, who ultimately decide whether a given application will meet their expectations or rather use the competition’s solutions. 

The symbiosis between UX and motion design 

UX and motion design exist side by side, but they interact with each other and create a kind of symbiotic system. Thanks to motion design, the design of the mobile application looks lively, active, and visually eye-catching. It is great support for static elements and provides intuitiveness of application operation. Thanks to motion design, the application becomes easier to navigate, predictable, and logical in an imperceptible way.  

Thanks to pinpointing, the selected element redirects attention to important components or makes it clear that, for example, the page loading process is in progress. Therefore, there is no need to display numerous text messages to inform the client about the course of a given action in the application. And all this in an understandable, but discreet and unobtrusive way.2  

Motion design as a factor increasing the chances of success of a mobile app 

The current digital landscape can easily be described as very dynamic in development. Mobile applications are slowly becoming the basic source of knowledge, which is why more and more people use them. However, this also increases competition on the market, which can be discouraging for many businesses. To stand out, it is worth taking advantage of the possibilities offered by motion design. Certainly, this is one of the decisive factors that increases the attractiveness of the application and helps to increase its competitiveness. This factor affects increased user satisfaction and better user retention rates.  

Animated elements give the app life and make such solutions more attractive and interesting. Good, memorable user experience means good feedback about the app’s functionality.3  

Just like the entire complex process of designing mobile applications, motion design should take into account the self-directed relationship. Motion design should also be included in sprints, e.g., in the Scrum methodology. 

Understanding motion design and UX 

Motion design is a way to create dynamic visual elements that increase the interest, responsiveness, and intuitiveness of using a mobile application. This is the basis for creating a modern, advanced interface that significantly reduces the distance between a person and the application and gives the user a sense of better understanding and getting used to it.4 

Motion design is, therefore, a combination of many multidisciplinary technological aspects, the direction of which depends on the human factor. 

The user’s journey through the mobile app developed with the application of motion design principles makes the interface more lively and user-friendly. Each movement initiated in the application can be a clue to the user what he should do next. It can also be part of interesting and original storytelling that makes the brand more unique, memorable, one-of-a-kind, and distinguishable from the competition.  

Motion design, therefore, affects the fact that the smooth animations used in the mobile application are attention-drawing and catchy. They also add style and elegance to the interface. Motion design also gives great opportunities to introduce gamification and increase user involvement, as well as easy interaction and increased usability.5 

Exploring how motion design supports mobile app UX 

How is motion design used in mobile applications to improve user experience? Below are a few examples that increase the app’s attractiveness and intuitiveness. 

Micro-interactions 

One of the elements used in design motion supporting mobile app UX are micro-interactions. After clicking on such a small animation, the user receives quick feedback and better controls his activity in the app. Some examples of such a solution are: 

• Switch – shows that something is turned on or off. 

• Toast – animation that leads an eye to a short message on the screen that informs about the performance of some action, e.g., confirmation of sending a message, receiving a new message, errors, and warnings. 
• Button tap – it is activated when touched on the screen of the device. It is a short, dynamic reaction to the user’s action in a visual form, e.g., the effect of button splashing, backlighting, and size change. 
• Pull to refresh – a very common interaction that lets you know that the app has been refreshed and the user has access to the updated content. 
• Typing – this micro-interaction is a visual message to the user that the other party to the conversation is preparing a real-time response for them, and they can expect it soon. 
• Press and click – small interactions that refer to an item displayed on a screen. This is a visual confirmation that the action is being performed by the app.

Loading time and user patience 

If an application needs time to complete a specific task, an animation can reduce the frustration of waiting. At the same time, it shows what is happening in the background, which reduces the risk of abandoning the application by the user. 

In this context, it is worth writing a few words about leaders and skeletons. Leaders in motion design are elements that attract attention and direct the user to relevant information. They catch the eye and appear, for example, in the form of arrows, etc. This is very important, for example, when the page is to lead through a specific path, step by step, to achieve the goal of the application.  

Skeletons in motion design, on the other hand, is the basic, elementary structure of animation. It is displayed in the first place and is also the background for the leaders and usually has a simplified form so as not to distract attention from important information. Skeletons make it easier to predict further animations on the screen and their placement. 

Scroll-triggered animations 

Scroll-triggered animations are an interesting solution. Thanks to them, individual content elements are revealed gradually. This speeds up the app loading process but without feeling like it takes too long. At the same time, it affects the browsing experience and adds dynamics, which is very important from the user’s point of view. 

Transition animations 

These animations are used to create smooth transitions between screens or views within an app. Examples include sliding, fading, or zooming effects when navigating between different screens or opening/closing modal windows. 

Loading animations: Loading animations are displayed to indicate that a process or task is in progress. They help manage user expectations and provide feedback during actions such as content loading, file uploads, or data retrieval. Loading spinners, progress bars, or skeleton screens are commonly used for this purpose. 

Micro-interactions: As mentioned earlier, micro-interactions are small, focused animations that occur in response to a user’s action or system events. They provide visual feedback or confirmation for actions like button taps, switches, checkboxes, or toggles. These animations can include color changes, icon transformations, or subtle motion effects. 

Gestural animations: With the advent of touchscreens, gestures play a significant role in mobile interactions. Gestural animations respond to user touch gestures such as swiping, pinching, or rotating. These animations provide visual feedback as the user interacts with elements like image galleries, maps, or content carousels. 

Parallax scrolling: Parallax scrolling creates an illusion of depth by moving multiple layers of content at different speeds as the user scrolls through a screen. This effect adds a sense of immersion and interactivity, commonly used in storytelling apps, landing pages, or image galleries. 

Feedback animations: Feedback animations help users understand the outcome of their actions or system events. For example, when a message is sent, an animation may briefly show a checkmark or a tick mark to indicate successful delivery. Similarly, error messages or validation errors can be accompanied by animations to draw attention to the issue. 

Animated icons: Instead of static icons, apps may utilize animated icons to provide more engaging and informative visual cues. Animated icons can depict actions or states dynamically, offering a richer and more interactive user experience. For instance, a refresh icon could rotate to indicate a refresh operation in progress. 

Parallax effects 

Parallax effects are interesting to the visual experience provided to the user. Background elements on the application interface move slower than other components in the foreground. This gives a three-dimensional feeling when navigating the application.

Contextual feedback animations 

Contextual feedback animations are a way to provide users with immediate feedback. Interaction with a specific element in a mobile application is intended to evoke an immediate reaction. Thanks to this, the mobile app is perceived as highly responsive and easy to use. 

Animated onboarding and tutorials 

Animated onboarding animations are often the first screens that are displayed to the user after starting the application. That is why it is so important that they attract attention.7 They must facilitate further navigation from the very beginning, especially for new users. They should teach about the application but in an unobtrusive way. Then much less users decide to disable them and follow the instructions that make it easier for them to understand the application. This is extremely important, especially when the application is complex and very extensive. Tutorials also work great for this feature. 

State transitions animations 

State transitions animations are the basic elements enabling the user to understand what changes are taking place in the application. Every transition should be understandable. During changes, the context should be preserved so that the client does not get the impression that he has been redirected to content that has nothing to do with the knowledge he is looking for. 

Storytelling and branding animations 

Storytelling and branding animations are a way to create an emotional bond between the brand and the users. It is worth enriching them with a visual and animation layer because it attracts attention and has a positive impact on UX. Thanks to motion design, well-designed graphic material increases brand recognition, which is more memorable and stands out from the competition. It is also a way to build brand loyalty. 

The benefits of incorporating motion design into mobile apps UX 

What are the biggest benefits for mobile apps’ UX resulting from the use of motion design in designing? 

Visual delight 

Motion design is a way to increase the attractiveness and dynamism of a mobile application. Moving visual elements are more eye-catching, and well-polished transitions give the impression of a reliable approach to building the application itself. The client identifies with the brand’s professionalism.8  

Improved usability 

Visual effects enabled by motion design can provide users with clues on how to use the application and understand its operation. Customers don’t have to spend a lot of time learning about the mobile app, which is daunting. Intuitiveness and simplicity of use with the maximum use of mobile app capabilities is the best way to improve the user experience.9 

Enhanced user engagement 

Animations attract attention, thanks to which the user uses the mobile app longer and is more involved. Motion design is a way to achieve interactivity and movement that positively affects the aspect of interactivity and interest in the offered content. 

Read also: The lifecycle of software product development

Clear communication 

Motion design is a way of simple visual communication in the form of tips and animations that intuitively explain even the most complex functionalities and the operation of the mobile app itself. It’s a way to create an effective narrative that is understandable to the user and has a positive impact on UX.10 

Contextual feedback 

Interactivity is also greatly influenced by contextual feedback. The immediate information that the user receives after clicking on the selected option gives him the opportunity to understand how the application works and use it in a more intuitive way.  

Seamless transitions 

The entire user journey must be seamless. Therefore, interactions and transitions must run smoothly and without reservations. Thanks to this, the flow of the application builds a positive, professional impression on the recipient.  

Deliberate focus and hierarchy 

Motion design makes it possible to increase users’ attention on the most important aspects and direct their eyes to information that may be the most important for them at a given moment. The communicated content is, therefore, immediately noticed, and the client does not waste time searching the entire mobile app in order to find it. Therefore, the hierarchy of importance in the information provided to the user is maintained. 

Brand identity and personality 

Motion design allows the use of animations that are unique to a given brand. It builds its identity and personality. It is, therefore, recognizable and characteristic. It can also arouse emotions and visually associate with a specific company and products. As a result, the customer becomes more attached to the brand and loyal. 

Emotional connection 

This identification with the brand is caused by an emotional bond. Creating emotions through the content of the application and the way the content is presented arouses empathy and positively affects the user experience. 

Differentiation and competitiveness 

Motion design is a way to differentiate your app and make it stand out from the competition. The more unique it is, the better it is remembered. If it is remembered and enables efficient interaction, the user will decide to continue using the application and encourage others to install it on their device.  

Final thoughts 

Solutions that provide users with the best positive user experience and help them intuitively and quickly meet their needs are most appreciated by them. Motion design can therefore contribute to the success of the brand and make the brand recognizable and unique. However, it is important that it remains narratively coherent and skillfully implemented. Attractive, dynamic interface design developed in accordance with UX principles and motion design can largely determine whether the mobile app will be successful and will gain the recognition of users. 

Every digital product needs to be intuitive and easy to use. It also has to provide all the relevant functions and look nice. That’s, in short, what UI and UX are all about. However, there are some differences between UX and UI. And that’s what we want to talk about in this article – we want to show you the difference between UI and UX.

Generally speaking, the recipe for a successful digital product is relatively easy. Your product has to check the following boxes:
• It needs to be relevant to potential users, e.g., solve a common problem or provide the desired service
• It needs to be useful and intuitive
• It must come with a well-thought-out offer and pricing plans

We can say that customers/users should simply want to use your product, whether it’s a website, an online store, or a web/mobile app. A huge part of that can be achieved through good UX and UI. Let’s talk specifics.

UI vs UX – what do you need to know?

If that’s the first time you read about UX and UI, a short introduction is necessary. Both these disciplines are all about the impression your digital product makes and what kind of experiences it offers to people using it. To understand the difference between UX and UI, let’s have a closer look at them.

UX

This acronym stands for user experience. It’s a broad term describing your product’s overall experience – whether it’s easy to use, functional, or tailored to your target audience’s expectations and needs. UX concentrates on all interactions between your product and your customers/users, and it can also refer to other elements of your company or offer, e.g., customer service or the product’s reliability.

Read also: User research methods in times of crisis

UI

UI stands for the user interface. This discipline focuses exclusively on your product’s visual side – how it looks and feels. Intuitive menu, nice colors, legible buttons, clear fonts, and attractive graphics – these are all elements UI designers are interested in.

And speaking of designers, let’s have a look at what UX designers and UI designers actually do.

UX DESIGNER VS UI DESIGNER

UX designers are usually responsible for conducting user and product research to understand what kind of products and solutions would meet the target audience’s needs and expectations. They also create user personas and customer journey maps.

UX designers collaborate with UI designers and developers to create the initial and final versions of the product. They are also responsible for testing the prototype and analyzing its performance.

On the other hand, UI designers focus on the product itself. They create the entire layout and interface, select appropriate color palettes and typography, and design all the website’s/app’s elements, such as:
• Buttons
• Boxes
• Menus
• Text fields
• And overall navigation

For obvious reasons, they are also involved in cooperation with developers and help create the final product.

To sum up, take a look at this infographic. It perfectly shows the difference between UI and UX:

UX/UI examples

A good example of a really good UX is Spotify. If you like listening to music, you will surely enjoy using this app. Spotify comes with many functional features, including creating your own playlists for different occasions, discovering similar songs and artists, and browsing through hundreds of artists and music genres. Users can also share their playlists with a friend for collaboration.

Spotify’s UX is, at least partly, a result of their thorough approach to satisfying their customers. Spotify has created a detailed customer journey map depicting every important stage and touchpoint for users using their app:

source: http://www.meghanabowen.design/spotify.html

And what about UI? There are many apps and websites with nice and well-designed layouts and interfaces, but today, we want to turn your attention to N26. It’s a German neobank offering money services in Euro. N26 has gained popularity and good reviews thanks to its simple and intuitive interface. There are no excessive elements, everything is well-organized, and the user always knows where they are and what they should do next. What’s also important is that the N26 app also has default options available at every stage and in every feature, so users don’t have to make too many decisions if they don’t want to.

 

Source: https://n26.com/en-eu

Read also: What is gamification and how to design it

UI and UX – the way to satisfy the user

As you can see, both UI and UX have a lot in common. Both of them are focused on creating a fully-functional product that checks all the right boxes and answers to the needs of its future users. If you want to create a digital product such as an online store or a web/mobile application, you need both UX and UI designers to help you with this challenge.

Thankfully, you don’t have to look for these specialists on your own. If you work with a web/mobile development company, they will help you with the entire process so that every stage of the product development process goes seamlessly.

Don’t forget that the industry evolves, and so do the specialists. More and more often, you can meet people who have the necessary competencies in both areas – both UX and UI. And of course, one of them is always dominant, but by choosing a specialist for the specific type of project (e.g., a UX person for banking processes and a UI person for a landing page project), you can combine all the necessary competencies to create a useful and nice-looking product.

In theory, each company should try to provide users with the best and most transparent experience possible. Sometimes, though, the dark side of the Force is really tempting, and designers decide to go with UX that’s misleading, deceptive, or even detrimental from the user’s perspective. What is dark UX? And what should you know about dark patterns in UX? Read on to discover answers to these questions.

It is more than likely you’ve encountered an example of the dark UX at least once in the past. Have you ever seen a pop-up ad that was extremely difficult to close? Or maybe the costs of the product went up shortly before finishing the order, or a “download” button turned out to be a hidden ad (or, even worse, malware)? These are all examples of dark UX.

Persuasive and deceptive design

In most cases, dark UX is the practice used by companies and websites that don’t care about transparency, good relations with customers, or ethical business in general. They just want to force or trick users into doing things they really don’t want to. As a result, sometimes, you can bump into a pop-up ad that doesn’t have the X button, and the only way to close it is by clicking the ad or the CTA button in it. But that wasn’t your intention, was it? It doesn’t matter, forcibly or not; you clicked the banner, so the goal was achieved.

That’s how persuasive and deceptive design works, and that’s what dark UX is all about. And it doesn’t refer just to ads; the list of so-called dark UX patterns is much longer (in a moment, we will show you the most common dark UX techniques).

Dark UX: meaning

In the broadest definition, dark UX refers to all UX practices that do not have the user’s interests in mind. If you design an app, a website, or an ad and purposefully make it misleading or obtrusive, you follow the disgraceful path of the dark UX. All such designs, interactions, and processes are sometimes referred to as dark patterns UX. Now, let’s have a look at the most harmful dark UX patterns.

Dark patterns UX

Bait and switch

The name is self-explanatory; at first, the user sees the bait, which can be:

• A link to download something (e.g., an eBook or software)
• Information about expiring license
• An attractive product offer

But when an inattentive user clicks such a link, they end up in a completely different place, sometimes dangerous concerning their personal or financial data. A good example of this technique are malicious push notifications displayed by fake antivirus websites:

Clicking such an “ad” can result in getting your device attacked by malicious software. Such dark UX patterns frequently trigger fear or use the FOMO effect to trick the user into clicking the link without thinking too much about it.

Read also: Principles of Risk Management and Insurtech

Hidden costs

Have you ever gone shopping online, put some products in your cart, and finally discovered you had to pay more? That’s another dark UX practice known as hidden costs. Usually, these additional costs are taxes or shipping fees, and they can be legit. However, a transparent store (or any other website) informs about them beforehand so that users are aware of how much they will have to pay for the order.

Another version of this technique is based on showing the cost with the annotation “from” or hiding some of the important details. Take a look at this example from Google Flights. At first, you see that the flight from Calgary to London should cost you $1,340 and that it’s a nonstop trip:

However, if you get into details, you will see that the flight available at this price actually does have a stop and takes much more time (almost 22hrs instead of 9hrs).

Confirmshaming

This technique is based on making the user feel guilty for not clicking the offered option. Here’s a good example:

As you can see, users have just two options – they can give their email address and get a free guide or “admit” they are know-it-alls. Of course, the copy doesn’t say that explicitly, but that’s the result the author wanted to achieve. And more often than not, it works.

Read also: What is a digital customer journey?

FOMO

This acronym stands for fear of missing out, and it’s a genuine psychological phenomenon – people don’t like or want to miss out on anything beneficial or attractive to them. However, there is a dark UX pattern that exploits this natural human need and evokes FOMO when it’s not necessary.

For example, you may have seen ads or annotations in product tabs saying there are only a few spots/units available at this price, and you have to buy now. And if that’s true, everything’s fine.

Here’s an example of such communication from Booking.com:

However, things change when you use this form of communication to trick more people into buying your products even when, in reality, there is no shortage of the product. In such a situation, that’s a dark UX pattern, and you’re deceiving your customers.

Privacy Zuckering

The last technique we want to mention is all about a sneaky way of forcing users to give up their rights or additional information without their knowledge. This usually happens when the user too quickly agrees to that by clicking a checkbox or stating they’ve read the privacy policy. The name, obviously, comes from Mark Zuckerberg, the founder of Facebook/Meta.

Do you want to be ethical? Steer clear of the dark UX

Companies that exploit dark UX do not care about their customers; they are all about achieving quick, short-term results. Believe us; it’s not a group you want to be a part of. If you want to build long-lasting relations with customers and ethically grow your business, avoid everything that resembles dark UX and always be transparent about your actions, offers, and the data you process.

Read also: Software design process: don’t think software, think tools!

If you want to create products that work for different groups of customers, you need to stick to the six crucial commandments of inclusive design. This way, your products will be fully functional and intuitive to use for different users. But what are these commandments? And how does inclusive design differ from universal or accessible design? Let’s have a look.

As we probably all know, inclusive design is an approach to designing products/apps/services that asserts there are no “typical” or “standard” users and that whatever you design should be adjusted to people with different preferences, needs and capacities. First, I wanted to show you, how this is different from accessibility and universal design.

Inclusive design vs. accessibility and universal design

At the start, these three terms might seem similar, but they have some differences. Accessibility aims at creating products that can be used by users with various disabilities – physical or cognitive. To help these users consume web content without any problems, web developers and designers stick to Web Content Accessibility Guidelines (WCAG). And what about universal design? Here, the goal is to create a single design that can be accessed and used by as many people as possible without the need for any modifications or adaptations.

The inclusive design follows a different path. Here, the design is adaptable and adjustable so that there are many ways of achieving the same desired outcome. There is no standard in the inclusive design, and every user can access the version of the product or service that meets their needs and expectations best. In other words, inclusive design addresses things like accessibility, age, culture, economic situation, education, gender, race, location, language and other elements that differentiate users.

Of course, it doesn’t mean that accessibility, universal design and inclusive design are three completely different things. At some point, they can overlap since many accessibility principles are vital to inclusive design. After all, products that work well for people with accessibility problems work well for everyone else.

For obvious reasons, inclusive design works best with digital products because they are relatively easy to modify. There is even an online initiative called Inclusive Design Principles that aims at promoting this way of thinking about product design.

The benefits of inclusive design

Undoubtedly, inclusive design requires more effort (compared to universal design), but the juice is definitely worth the squeeze. Products that are inclusively designed have, in general, a much better UX, which means that they attract many different users and retain them for a long time because they are simply satisfied with the service provided. No one feels excluded or rejected.

And then, there is the question of social impact. It may not be measurable per se, but nowadays, people simply appreciate this way of designing products and services. If you want your company to be socially conscious, inclusive design is the way to go.

Read also: The 10 most useful lessons from more than a 10 years of experience in building digital banking platforms.

How to design inclusively

Inclusive design is all about understanding the needs of different people and responding to them. When you follow this approach, you design one product or service that’s next being adapted to many different user groups. There are six basic inclusive design principles. Let’s have a look at them.

PRINCIPLE 1: PROVIDE COMPARABLE EXPERIENCES FOR ALL

Your product should provide similar, high-quality experiences for all users so that they can use it in the way that suits their needs without compromising usability or the quality of what they get.

Here, a good example is a mindfulness app called Headspace. It’s almost fully customisable, and users can adjust navigation (they can use screen and text reader, keyboard navigation and even voice commands), colours (dark/bright mode, background colour, monochromatic version), and the content itself (fonts, descriptions and text size).

Source: Headspace.com

PRINCIPLE 2: GIVE CONTROL

All users should be in control. In other words, they need to have the possibility of interacting with your product in the way they prefer; nothing should be imposed. Maybe a few examples:

1. If you have videos or animations as a part of your product, disable auto-play

2. Avoid so-called infinite scrolling on your website or in your app

3. Enable adjusting visual elements, such as the orientation, font size, colours, zoom and contrast

This way, each user can “design” the perfect experience for themselves, and that’s what you want to achieve. Here, CBC is a good example. Their mobile app comes with dark mode and text resizing features. Additionally, they offer the “skip to content” feature that enables quick access to the main content on all their platforms.

Image source: Play.google.com

PRINCIPLE 3: GIVE CHOICE

In short, provide alternatives for layout and task completion options. Here, generating the same information in different file formats is a perfect example. Some of your users will prefer Excel files, whereas others – a standard PDF file. Some will want to perform a given action in one way; others will choose something different. Here iPhone is a good example. This operating system enables users to open apps in three different ways:

1. By clicking the app icon
2. By saying the app’s name
3. By typing the app’s name in the search box

And here’s another example: WhatsApp. This mobile messenger enables users to select the preferred skin tone when using human emojis:

Image source: Techentice.com

Read also: Banking in Pandemic Times

PRINCIPLE 4: TAKE CIRCUMSTANCES INTO ACCOUNT

Products are being used in different conditions. Some of your customers use them at work, others at home or outdoors, or in public spaces. Take that into consideration. For instance, loud auto-play is a perfect example of a poor design. Your app should also offer high contrast options (so that it can be used outside), a reasonably large font and a clear typeface.

And here’s the other example – map applications. If you use them at home, you can focus on all the little details and many options, but when you drive a car, you don’t want to be distracted – the app has to be clear and easy to navigate (bigger buttons, visible instructions). Waze is a good example – this app blocks some of the functions when it detects that you’re driving a car.

PRINCIPLE 5: BE CONSISTENT

If you offer different versions of your product (or using different channels) make sure each version is consistent, offers the same functionality and is of the same quality. For example, your desktop and mobile website or app should have the same (or similar) layout and functionality. Here, Google Maps is a good example. You can use this service on your smartphone, tablet or PC, and it works the same every time. Compare desktop and mobile screen for the same feature – looking for a nearby store:

Desktop version	Mobile version

The goal is to help your users scan and navigate to key elements and content they’re after. If users have to “learn” each new channel, that’s not a good inclusive design practice.

PRINCIPLE 6: FOCUS ON CORE TASKS

Make sure your interface is intuitive for different users. Prioritise crucial elements so that people can concentrate on core tasks (and one task at a time). When designing a specific feature/product, consider its core functionality and focus on it. This way, people won’t feel lost using your product. Smartwatches are good examples – usually, they offer one function per screen so that users don’t have to think about where they are and what they should do next.

Image source: Samsung.com

Summary: opt for inclusive design

In today’s world, inclusive design is a smart and beneficial thing to do. That’s what consumers expect; that’s what makes them feel like they belong. And if you develop digital products, inclusive design isn’t as challenging as you think. It all starts with the right mindset – put your users at the very centre, think about their needs and preferences and make sure that your product reflects that comprehension.

We live in a time when we operate in parallel in two realities, physical and digital. Being a UX designer means understanding both worlds very well. We create products dedicated to this online sphere, but they are finally used by real people with specific offline habits. Is it a good idea to draw inspiration from the physical world while digital product designing? Let’s dig into it.

I will not write about the real one here, because we all know perfectly well (or at least we think we know) how it works; after all, this is our main place of functioning. As for the digital world – to me, its development accelerated significantly in 2003 with the appearance of Second Life.

As many of us know, the game involves creating your own avatars, which can then take part in the digital economy of this world and buy, develop or rent land. Of course, some might may say it’s just a game. However, the human psyche is built in such a way that someone who gets drawn into this world will strive for their digital self to develop as far as possible, to be admired; the satisfaction of successes achieved here will be comparable to what we experience in the real world. Mark Zuckerberg is certainly aware of this phenomenon and is now creating something very similar – Metaverse. Game designers are equally aware, creating worlds where the user can create and develop their characters and build clubs, on the basis of an entire community of players. Usually, this is where, on a white horse, micropayments come in, allowing for much greater progress in digital development. Electronic Arts earned about 1.5 billion dollars in 2020 on the sale of virtual currency, allowing for much faster development of virtual clubs for its players.

This shows just how much people can be drawn into the development of their virtual self. We are social creatures who by our very nature have the need to be part of a group, to be admired and praised. The digital world is for many people a place where they can continue to meet these needs or compensate for failures in the real world. That is why everything is developing in this direction.

So, we know that we have two worlds – the physical one, where everything happens “analog”, and the digital one, where everything is a set of ones and zeros. We, as UX designers, must not forget that at the moment, apart from these two extremes, many things are happening on the border of these two worlds – virtual and real. Often our task is to make the progressive digitization of processes in the physical world – to use a common buzzword – “seamless”. Those who care about appropriate user experience can (or at least should be able to) draw on knowledge of the needs of users, their possibilities and limitations, and are aware of the possibilities offered by modern technologies. They should strive to make the transition between these worlds almost invisible to the user. Which begs the million-dollar question: how do we do it?

There is no simple answer to this. There are many things to take into account – the activity that we want to support, the users, how deeply ingrained their habits are, whether such a process has a chance to be developed further, or if it will be replaced by other processes. I would also not be myself if I did not say that, during the design process, we will need a lot of data, user interviews and prototype research. Only the processing of all this information will give us a fair chance to make the right decision. However, we certainly won’t make even the smallest design decision without our use cases.

Read also: Digital transformation 2.0: what you need to consider when creating a bank’s digital transformation strategy

So where can we find examples of these interpenetrating worlds? 

• Paying for purchases (POS)  

Applications such as SoftPOS, which turn the phone into a payment terminal for processing contactless payments, are becoming more and more popular. Even Apple recently announced the introduction of such functionality to iOS. Due to the previously mentioned interpenetrating of worlds, in this type of application you need to consider such things as: The way of entering data – application-style, or perhaps just like in payment terminals? The shape of the keyboard – application or payment terminal type? The role of hardware in the entire payment process – device administration, dealing with data entry by two users in one process. 

 

• Transferring money

The topic of transfer forms may not seem so revolutionary today, but let’s remind ourselves that at the beginning of introducing such functionality, designers also wondered whether to create transfer forms from scratch, or simply redraw the transfer form that users already knew from bank branches The creation and development of new forms won the day, perhaps because the whole process had a chance to become something completely new and separate from printed forms. 

• Buying a car

Recently we notice more and more advertising from car dealers who realize that a key part of the traditional car-buying model is looking around and getting in the car, so what better than to enable users to do so digitally. Business decision-makers in this industry see a completely different future for buying cars, which is why the digital process does not seek to replicate the physical one but to impact it at critical moments of the decision.  

• Searching for a route (maps, AR)  

Here I will also refer to times that can be considered old history. Perhaps some still remember when drivers would stop at the side of the road, walk in front of the car turning a large map to orient themselves, then spread the map on the hood to check where to go next. We now already have completely digital maps, but I can see that this part of the route-finding process is still with us. Let’s look at the functionalities of Google Maps and Apple Maps, where, using augmented reality, I can find the street I should turn into. You have to turn around a few times with the camera on in order to scan the surroundings and get clues. The same is also available in cars such as Mercedes or BMW. Here, too, with the use of cameras in our devices, we superimpose this digital world on the real one, and users find themselves treading the boundaries of both. 

• Using credit cards (Apple Pay)  

Another area where we have a digital representation of the layout of the physical world. We used to carry our credit cards in our wallets. If we wanted to pay with one, we took it out of the wallet and used it in the terminal. Now we open the “wallet” application, “take out” the appropriate card from the slot and bring the phone closer to the terminal. Here we have a complete mapping of the traditional pattern of using a credit card, which we still use to pay in an absolutely real world. 

• Wearables  

I guess that you already know what this part is all about, and why it’s here.  However, for the sake of clarity, I will explain that from the physical world we very well acquainted with what watches look like and how they show the time (I am referring here mainly to watches with hands).  Many electronic watches mimic a wheel-shaped display showing a dial with moving hands – the perfect example of mapping the physical world in the digital world. 

• Music applications  

I humbly admit that this is an unfamiliar area for me. However, as far as I can see, this type of application also draws very strongly from the physical world. Mixers of all kinds, sometimes even pianos – everything we see on the screen is a very close representation of physical devices. These applications are interesting because so far no one (or I have not found it) has created them from scratch in the world of digital applications. The level of complexity and the rules of using such devices in the real world is so complicated that any attempt to transform it into a new world could end in tears. 

More and more such examples can be found.

Because at Efigence we often work for the needs of the financial industry, I was able to deal with one of the above-mentioned groups of applications. Based on this experience, I would like to share my observations and conclusions. To give a little more detail, I faced the task of refreshing a mobile application and turning Android devices into mobile payment terminals. Here are the biggest challenges I faced. 

• Finding a way to redesign the screen to show the user how to bring the card to the device. 

A very big problem was that users, and often also sellers, were not sure how to bring the card to the device so that it would be read correctly. After preparing several alternatives, we found a perfect combination of animation and description to guide the user. Our internal research has shown that users instinctively put the card to the screen of the phone (as with classic terminals). Unfortunately, it has to be said that almost no one reads what is written on the screen. Therefore, it was important that the message was short enough, with the maximum content conveyed, and the main tool for what to do should be an animation guiding the card to the back of the device. After the change was introduced, a study on a similar group of users showed that the number of wrongly applied cards decreased by 65%. Of course, this was internal research on a limited number of people, perhaps not fully representative, but I think that similar conclusions can be drawn after launching the application. 

Read also: How to design inclusively and effectively: A short guide to inclusive design

• How to streamline the process of the seller entering the amount and the buyer entering their PIN. 

The big problem for salespeople was that they had to hand the device to customers, which made them fear it would either be stolen or dropped and damaged during handover. The solution was to automatically rotate the screen without having to move the phone. In my opinion, this is a very neat example of how, with the appropriate improvement of the interface, it is possible to fix the issue inherent in the device itself. Thanks to the change introduced, the seller, instead of turning the phone and handing it to the customer, need only tilt it towards them, allowing easy entry of the PIN. 

• Deciding whether the method of data entry and the interface with the keyboard should imitate the classic terminal or can use patterns from mobile applications. 

Finally, we decided on the application keyboard design and ultimately two alternative forms of data entry, to be selected in the settings (classic and alternative). In the former, the user enters numbers just like with a terminal, and in the latter it is done as in most mobile applications, where the user enters digits and, if necessary, a point and decimal values. 

Facing these and many other similar design challenges, it is impossible not to start to wonder where all this leads to and whether you should choose the path of the real world or join Team Full Digital. I think I will answer in a way befitting a UXer (or a lawyer): it depends. Both approaches have their pros and cons – it all really depends on the situation. 

Imitation of reality, if done well, allows the user to learn our application much faster because they already have a strong reference in the real world. In addition, or especially, the affordance issue cannot be ignored, i.e. the fact that individual elements are self-evident, and the user has no doubts as to whether something should be clicked, rotated, or content added.  

On the other hand, such imitation of reality may be problematic in some cases, especially on an interface that uses very spread digital patterns. Users already know very well how to use a given application so artificial mapping of its physical counterpart only unnecessarily complicates the interface and may also make the application look very old-fashioned. In addition, adding large numbers of gradients or graphics can cause problems in the development and scaling of the application to different screen sizes. Not to mention the loading times of web applications, for example.

And how is the situation in the context of the full digital approach? The first and unquestionable advantage is the consistency of our application with others that the user accesses and which they know their way around. Additionally, in less graphic interfaces, you can put much more emphasis on the content itself, making it much more distinguished. Of course, there are also disadvantages – for example, if the application does not have a thoughtful design, users may have trouble distinguishing what is just text and what is clickable. 

To sum it all up 

There is a really big challenge ahead of us, as UX / UI designers, to reconcile people who have spent most of their lives in the real world with those who – colloquially speaking – were children of the internet. We cannot allow either of these worlds to be forgotten or abandoned. Let us use all the good aspects that each of them brings, and let us not reinvent the wheel every time. On the other hand, let’s not mindlessly exaggerate what we have in the real world, but only pick the useful principles of operation and proven solutions. Thanks to this, perhaps we will be able to make this border of transitions between the two worlds virtually imperceptible to an ordinary user. 

Individual face-to-face in-depth interviews, in the UX laboratory with a one-way mirror, used to be a dream for all UX researchers. But in the first quarter of 2020, we woke up in the new reality that each of us must get used to. We must forget about face-to-face UX tests for some time, for the sake of the respondents’ and our close colleagues’ health. And you know what? Based on our case study, we can tell that it’s possible to transform the laboratory test into a 100% remote test. We now think that remote testing is even better than laboratory testing. We want to share with you our conclusions from remote UX research case studies, as well as our know-how. We will also give you some tips for an online interview, tell you how to conduct user research remotely and suggest some online interview software.

Does the new approach in user experience testing mean the death of laboratory tests?

The uncertainties caused by Coronavirus turned the user experience testing approach on its head. UX Researchers focused on qualitative UX research methods, who had arranged user research interviews in laboratories in the first quarter of 2020, especially experienced the impact of this disruption. Within a few days, it was necessary to completely change the approach to work and overturn the whole setup due to the Covid-19 pandemic announcement. It required a lot of flexibility, but it’s possible. And, to be honest, it wasn’t so bad, because we could quickly learn how to do user research in times of crisis, and it was very informative. At the very beginning we were hoping that it would end soon. But now we know that this situation will take longer, so we want to share some useful information with you.

Read also: What is gamification and how to design it

What did the UX research process look like before?

In our company we’ve been conducting UX tests for more than 10 years, including at least 7 years of remote testing. We always preferred on-site testing, because it seemed to be more convenient and secure. In the typical approach you prepare recruitment criteria and a screener with questions which reflect these criteria. Then you recruit respondents and when the process is finished, invite them to the laboratory, then sign an NDA and consent for recording before the UX research session. After that you can conduct the interviews, based on a scenario. You have stationary equipment and in case of an emergency, the helpdesk is ready to help you. If there are observers,  they can watch the testing through the one-way mirror. But Covid-19 forced us to change this approach once and for all.

What does the UX research process & online interview preparation look like now?

Suddenly it turns out that remote research has many advantages. It’s as secure and convenient as on-site research. You can record the user’s screen during the interview, plus you have a preview of the respondent’s face and cursor movements. Websites, applications and clickable prototypes can be researched both on desktop and on mobile, so nothing changes compared to the previous approach so far. There is also a possibility for a moderator to share the screen during a session, for example, to show instructions, attachments, props, or user research questions. You can use all the UX research methods and techniques as you used to.

Apart from everything that we have mentioned, the entire recruitment process looks the same, except for signing the consent & NDA remotely which could prove a little challenging for participants, but can be done with your instructions. You can do this through a special account authorized by the government; in Poland it’s a Profil Zaufany and we strongly recommend it.

What’s the main difference for the UX researcher?

Remember that you have to be prepared for many more unpredictable situations. You must provide all the users with a manual (especially if the tool they have to use isn’t available in your language and you aren’t sure if they manage to install some plugins etc.), instructions on what the UX process will look like and a list of what they need to prepare or install. Make a test call via the selected tool at least 24 hours before the arranged meeting. Remember to make sure that they have the right equipment – especially when you test prototypes that can only be used on a desktop computer or only on a mobile phone. Be careful with the research on clickable mobile prototypes, which are not responsive and are prepared for a specific smartphone model. You need to make sure at the stage of determining recruitment criteria that the user has the right equipment.

It’s important to provide constant technical & recruitment support during the whole user interview process – but you know that already, right? 😉

Read also: What is a digital customer journey?

How to conduct user research remotely

Interaction is key to a successful remote session. If you want to lead user research just to ask some questions or to check a website that already exists, it’s not so challenging. But if you test a prototype and you want to invite some observers too, we’d like to give you some useful tips for an interview with a user.

You have to take care of confidentiality in particular. Remember to use the right software, to make sure that all the data and recordings are secured properly. Remember also to provide a secure environment – the respondent does not have access to the project without a special link and a password. There are some programs with a possibility to watch the session only through an authorized account, so you can invite observers to participate in it.

There are a lot of UX research tools that you can use, depending on what you need. Of course, there is no perfect tool that combines all the functionalities, but you can choose one that suits you best. Some of them provide recruitment too, but not all.

If it’s only IDI testing, you can use standard programs and applications such as Skype, GoogleMeet, MicrosoftTeams, GoToMeeting, Whereby etc. But if you need more advanced options, as described above, and you recruit users by yourself, we can recommend you Lookback.io. Take a closer look at UserTesting, Userzoom, PingPong and UserBrain too. Or, if you prefer non-moderated tests, Userfeel, TrymyUI, Maze.Design and Loop11, as well as the abovementioned Lookback and UserZoom. If you are looking for something else, there is some software with nice and rare functionalities, such as Optimal Workshop, where you can do some card sorting, or UsabilityHub and Cux.io, where you can capture your users’ first clicks or see heat maps. Many of the UX research tools described above have free trial versions that are worth testing before deciding which one to use.

Advantages of online interviews

What distinguishes remote from lab research is the real-life context. During remote sessions participants use their equipment and perform in an everyday environment. It’s also about flexibility and time saving for all participants – observers, translators, and respondents.

What is cool in some software for remote user testing is real-time observation, which allows constant contact between the moderator and the observers during the session via chat which is invisible to the respondent. It gives a possibility to make & share observations by the entire team, or to submit additional questions to the moderator, so the client can add a question in real-time and receive instant feedback.

The opportunity to watch it online from anywhere in the world and join or leave the session at any time is convenient. You can conduct research in many languages, with respondents from all over the country and even abroad because people don’t have to come to your office anymore. Usually, the main problem in on-site research is that you depend on your location. And if you have clients from abroad in remote UX sessions there are no geographical restrictions and you can stream simultaneous translation to other countries, a very convenient function for multinational teams.

What’s the conclusion?

So, 2020, what a year… right? A lot has changed, but the digital world is still moving forward, and the needs and opinions of users need to be studied. In times of isolation, contact with other people takes place remotely, more and more people use online shopping and many activities that we have conducted so far are switched to remote mode. As we stated, this is convenient and brings a lot of opportunities.

We don’t really think that the new approach to user experience testing means the death of laboratory tests because face-to-face contact with other people is priceless. But, for sure, the times have come for UX researchers to leave their comfort zone. And maybe that isn’t so bad. What do you think?

The main force that drives progress in the interface space is reducing the burden of manipulating reality (AKA interaction cost). We see three long-term UX trends that contribute to reducing that burden:

1. improving on brain-body-world interface (by means of multimodality)
2. improving brain-world interface
3. reducing the number of interactions

Read also: What is gamification and how to design it

I. Brain-Body-World interface

Our first interface is our body. It is a connection between the brain and reality. This interface has to be learned. A newborn’s arms are almost like foreign instruments which he gradually learns to use. Newborns sometimes wake themselves up because their hands are hitting or scratching their face. Newborns don’t understand the  causality between what’s happening to their face and what’s happening to their hands (“Oh, these are my own hands, I could just stop doing that to my face” – said no newborn ever…).

Every time a new interface is added on top of the brain-body interface, there is a cost involved.

This cost is low for simple tools like stones (smash, grind), or a hammer. If you ever wielded a stone, or a stick, you can start using a hammer.

The cost gets higher as tools become more complex. Take a spinning machine. It’s magic! It is fed with spools of thread, it binds them together – and a sheet of textile is thus produced. To accomplish this, the machine has to make a series of tiny movements in the proper sequence. Compare it with a hammer that accomplishes its task (sinking a nail) in one or two swings.

As tools execute more complex manipulations of reality, there are more and more abilities you have to add on top of the brain-body interface to understand and operate them. The spinning machine is harder to use than a hammer (the spinning machine requires more abilities on top of the brain-body interface than a hammer). The operator needs to do things in sequence for the machine to work properly.

And then we have even more complex interfaces with tools that project our thoughts outside of our heads into reality. Computers in a designer’s work are just that – a tool to project thoughts outside our heads into the reality. They require all basic brain-body interface capabilities as well as knowledge on how to operate them. Computers allow us freedom in creating simulated realities – variants of our designs – which we can gaze upon, modify and judge by looking at them and running simulations in our heads (“does this work here?”).

Affecting reality is always a cost, a burden. This cost is shared between the operator (you) and the tool you are using.  Complex manipulation requires more effort than simple manipulation. Whether manipulating reality is complex or simple, it is always between the tool and the operator to bear this burden. This burden is expressed to the operator in terms of user interface complexity (more burden = more complexity in the UI).

1. A hammer – simple manipulation required, thus a simple interface required with a hammer.
2. A spinning machine – complex manipulation of reality (more operations required) – thus the interface becomes more complex (putting more burden between the machine and the user – here the user needs some understanding of how the machine works, has to tend to it, operate it in the proper sequence and be wary of whether the machine is working well).
3. A mainframe computer – even more complex manipulation of reality (infinitely more operations happening) so the interface becomes more complex (putting some of the burden onto the user – his understanding of how machine works and in what sequence it performs operations, so he knows what buttons to push at which times).

An undying trend in interface design is to diminish the burden for the operator. This burden is diminished when these things happen:

1. The operator can use his pre-existing skills and abilities to successfully use the machine (e.g. when natural language or gestures that in real life mean something to the operator, also mean similar things to the machine, or when visual hierarchy helps take in feedback from the machine).
2. There’s a lot of bandwidth to control the machine (the operator doesn’t have to rely only on mouse and keyboard but can use other modalities to feed data to the machine).
3. The machine does more things by itself without the need for the operator to pay attention to it. One example would be a Thermomix – you put all the ingredients in, put on a program, and the machine does everything for you. Contrast this with a regular mixer & a pot combination, where first you mix, and then you put things into the pot, and then you keep track of the cooking process. An advanced example: AI perfectly isolating pictures (cutting out from the background) so you don’t have to do it. Or even more – AI automatically isolating different elements in a photo so you can drag and drop them without even having to request the isolation.

A strong UX trend is moving toward multi-modal interfaces: looking at computers, you can see that the input mechanisms are mainly mouse, keyboard and tablet. So, to create a reality inside of a computer, you are using a small part of your brain-body interface (a small set of hand movements).  And that small set of operations (hand movements) has to be then translated into many operations within the interface. That’s why software for 3d design is so loaded with different options, menus and submenus: because there’s a small number of input commands that the software interface has to translate into many commands (enough to build 3d objects). It is like writing an essay, using a combination of five keys to codify 24 letters of the alphabet.

Now imagine that you are designing a 3d object in a 3d environment, and you can manipulate objects with your hands (like in the real world). That’s a whole lot more input commands that you can articulate. Thus there are somewhat fewer menus and submenus needed. Imagine that you add voice command abilities and you have even a broader bandwidth of input (even fewer submenus needed).

 

Multimodality is the future of UX –  if you could interact with this 3d object using your innate abilities (moving, turning it around with your hands, using voice commands) the interface could “come” to you instead of your having to understand all the options, toolbars and where everything is hidden. You could state your intentions for the object and the visual interface would change to accommodate such a use-case (e.g. by highlighting functions you will need to do that).

You could say that we are now living in an era, when we will be able to manipulate these man-made environments more and more with touch, gestures, voice, gaze and thought. Caveat: you need to judge which type of input is better suited to a particular operation. Example: if you watch TV and are flicking through the channels, then pushing a tiny button with a tip of your finger is more convenient than shouting voice commands, or waving your arm so that the TV can “see” you. So it is not about being multi-modal for the sake of it. It is about tapping into the brain-body-world interface when it makes things easier and more efficient for the user.

Read also: Mobile apps in the service of mental health

II. The Brain-World Interface: Bypassing the body

The brain-machine interface is a parallel interface to the brain-body interface. In theory, it can connect your brain to the world (rendering the body unnecessary for this purpose). It can also fix a loss of brain-body functions, in cases where the original hardware of the brain-body interface has been damaged. Is this what a future user interface will look like?

Even looking far into the future, we may conclude that the body becoming unnecessary for the brain to function is still the domain of science fiction. Much closer to reality is the prospect of utilising the brain-world interface for some tasks and for simple tasks first of all. Example: you are designing a scene in Photoshop and you change the type of brush you are using by thinking of it (yeah, I know it sounds like a gross under-utilisation of such an interface, but I believe that in the first days of such interfaces we will be looking at simple applications).

Here’s what scientists are saying about it:

While an ideal BCI would allow communication using arbitrary conscious activity, so far only a few direct brain communication paradigms have been invented. [For example] The control strategy of MI-BCIs [motor imagery Brain-Computer Interfaces] requires the users to consciously imagine performing a bodily movement. (…) Training is usually needed to achieve reasonable accuracy in control of the MI-BCI (…) human participant trains with the help of neurofeedback. Meanwhile, the machine learning algorithms at the computer’s end learn the participant’s ERD patterns (event-related desynchronisation of neural rhythms over the motor cortex) to interpret what is going on.  This process is called co-adaptation (source here).

III. The future of UI: Reducing the interface – Minimizing the number of interactions, so less interface is needed

In some way it is the holy grail of UX design trends – make things happen for the users without an ounce of effort from their side. Example: cutting out pictures in Photoshop. Some time ago, you had to do it by hand. Now AI does it almost perfectly, saving you time and effort. But what if Photoshop pre-selected all the elements in the picture and had them ready for you to use? Imagine uploading a picture to Photoshop and just moving things around – without even needing to isolate them first. That would be neat.

Think of a reduced interface in Uber: it is already very convenient. You don’t have to worry about explaining your location, paying the driver etc. But we could imagine further improvements: for example. getting an Uber without needing to call for it. You get out the door and Uber is writing for you, because your home AI observed your state of preparedness and ordered the car at the right moment in time. This is still science-fiction, but it might be possible some day. It may be the future of UX design: finding more and more interactions we can cut out from the user experience altogether.

One disadvantage of such a situation: exposing yourself to being constantly observed and analysed by machines (to the point that they know more about you than you do yourself).

One of the key factors that interface reduction relies on is determining intent. If the machine “knows” what the operator tries to accomplish, it can just do that for them. One of the ways to determine intent is observing the user’s face, looking where the user is looking. Or, imagine you are working with Photoshop, and you want to select an object and you can do just that by looking at the object.

IV. Current UX trends

We are Artegence, and we help clients design and develop software tools that consumers love using. We keep an eye on emerging technologies, but what we really focus on are things that do not change with the seasons: how people think about the world, how they interact with it and how they reach the decision to purchase your products.

Thanks to this approach, the process of building the websites, creating graphic designs, communication and functional backlog feels like a treat, not a chore. If you are thinking of building software, give us a call.

Gamification definition

Gamification is the application of elements specific to games in non-game contexts. You can also define gamification as a way of solving problems by using elements known from games. I’ll give you two examples.

Gamification examples

Firstly, you have probably heard of Duolingo. This is an extremely popular language learning platform used by people all around the world. One of the reasons why it is so popular is that it mimics the structure of video games which helps to engage its users. Players are rewarded for their language achievements with lingots, an in-game currency which they can exchange for character customizations or bonus levels. Players can compete with one another as well as earn special badges that reflect their accomplishments.

Secondly, imagine you have a five-year-old kid. It’s morning, you are going to kindergarten and it’s late. How do you encourage them to change from their pajamas into their clothes and to do it quickly? Explaining to your kid that it’s important to follow the kindergarten rules and be on time probably won’t work. Instead of this, you can do something else: Announce a race.  The person who changes their clothes first, wins. You have just increased the chances that your kid will do the task much quicker.

These two examples are extremely different. Duolingo is a huge, long lasting project the creation of which required lots of time, money and other resources. Learners who use Duolingo do it on regular basis over a longer time. Playing a race with your kid who will get changed first is a single, short experience that lots of parents do. But both of them are examples of gamification, because they have something in common. Both learning and changing clothes are (or could be) perceived as mundane activities. They are ordinary, done regularly and not exciting. And they are not games. Gamification add a flavor to these ordinary activities changing them into something rewarding and highly engaging. In both cases mechanisms known from games are implemented: competition, collecting stuff, mastering etc.

And this is the power of gamification. By designing it thoughtfully you can change boring or even unpleasant activities into engaging ones. That’s why gamification can be successfully implemented in areas like education, workflow, crowdsourcing, healthcare, human resources and others.

How not to spoil gamification

I’ve got some bad news: Most gamification fails. Many people believe that there is nothing easier than making gamification: Create a plot, set some points to collect and stages to accomplish. Give badges to the active players, make people to compete with one another and they will engage. But this conviction is completely wrong. Gamification design is a difficult process that requires knowledge, experience and lots of time to prepare, lead and evaluate. We live in a world where everything competes to grab our attention and engagement. And our attention and engagement has limited capacity. To be honest, making successful gamification which engages people is a very challenging task and doing it right demands mastery.

Gamification principles

If you want your gamification to be successful and end up in the list of best gamification examples you should be aware that good gamification needs to be thoughtfully designed. And good design requires good design process. In essence – gamification design is very similar to user experience design. This post is too brief to be a comprehensive guide for gamification designers, but I’ll try to give you some tips which are useful before you start any gamification project.

Define the problem and try to understand it

Gamification is means to change reality, a tool to solve problems. So, before you start, you should ask yourself what problem you would like to find a solution to. The problem may be related to business, social issues, education or any other area. Analysis of the problem should include defining the group which it applies to and the sources of the problem. Try to think what the external roots are (law, social circumstances, material situation etc.) as well as the internal ones (views, habits, desires etc.) Figuring the problem out is necessary for choosing appropriate gamification strategy and for assessing if your gamification brings the results you want.

Specify desirable behaviors

How could gamification help you in achieving the goal you have set? The answer is: By motivating people to do what you want them to do. Actually, this is what gamification is about. You identify the problem and you try to smartly encourage people to adopt certain behaviors which will lead to the required change.

Determine who are your players and what motivates them

As with good UX, you need to know to whom you are addressing your service. Create personas which describe participants of your gamification. Who they are? How old are they? What do they like? What life goals do they have? In which contexts they will use the game? And also find out what motivates your players. The last point is key. If you want to succeed in encouraging someone to do something, you should know what can trigger this action. Think not only about external motivation but also about internal. In fact, internal motivation is much stronger and can last longer.

Add fun and gamification elements

In every game there are elements that bring joy to the players. This is the essence of every game. People like to win, role-play, discover, collect things and solve brain teasers. They also like to share, cooperate and be appreciated. Try to inspire yourself from the games you like the most. Think about why they are so catchy for you. Different games implement various gamification techniques. Some of them are based on sensory impressions, some of them take place in unrealistic made-up worlds. Others are built on social interactions or on discovering. Think what suits your goals and your users best! Gamification should also consist of gamification elements like a plot, emotions, challenges, transactions, cooperation or competition, gifts, badges, quest teams and so on.

Maintain the game

When you get to the moment the game is launched it doesn’t mean the job is done. It means everything has just started. Good maintenance and administration of the game is a crucial success factor, especially for larger projects. You need a person or a team to organize the process and maintain the users’ engagement. Many gamifications failed because not enough attention and resources were put into this issue.

Prototype, research and iterate

As in good UX design you need to evaluate your job. From the very beginning of the project think how you would want to get feedback from your players and how to measure the effects of your gamification. Don’t wait with your ideas till the moment when lots of resources were already invested in projects. Make prototypes and validate them with your users as soon as possible. This will help you not waste time, money and engagement. Research should be an integral part of the design process. You should follow the design cycle: Research – ideate – plan – prototype – test and improve – launch – research – repeat.

We believe it is beneficial to think of your software as a tool. It gives you a different perspective on the process of designing software. Users employ your tool to aid themselves in specific usage situations. These situations in turn determine how your tool works and what it looks like.

Treating your software as a tool (or a set of tools) is an interesting mental exercise we believe will benefit your design process.

I. Software is a tool

Most software built for people forms thinking tools.

Tools in general enhance our capability to influence the environment and ourselves.

1. a stone in a monkey’s paw: it allows the monkey to extract a cashew nut from a hard shell and eat it.
2. a hammer: it allowed Noah to drive nails into wooden boards, to form them into an ark.
3. an e-commerce website: it helps you make a decision whether to buy stuff you think you need to be happy.
4. a banking app: it helps you exchange IOUs (aka: money, debt, favours) instantly, without the need to physically exchange tokens of value (like coins or banknotes).

Software is a thinking tool. Not unlike paper, an abacus or a sextant. It enhances your cognitive capability. It feeds you with information, it helps you sort through it, filter it, understand it, generate it, save it and share it with other people.

1. an ecommerce store – a tool for making decisions, whether to buy or not.
2. a banking app – a tool for spending, saving, sending. For controlling the reservoir of cash, the inflows and outflows.
3. a corporate website – a tool for deciding whether I want to be your client; a tool for deciding what kind of article I will write about your corporation; a tool for deciding what I think of you (good guys or bad guys?).

II. Designing a tool requires us to imagine a situation where the tool is being used

How to design software? Let us allow ourselves a mental exercise first: how would you design a car? How do you decide the number of seats, luggage space, power, speed and wheels it should have? Well… you imagine what it will be used for.

1. If the situation of use is going out to town, and being attractive, you want a sports car.
2. If the situation of use is going to IKEA to buy lots of stuff, you want a station wagon.

Different situations call for different tools. There are situations where both of these will do exactly the same thing for you. But there are also situations where one of them will serve you better than the other.

III. The situation determines what qualities of the tool should be favoured in the design process

There’s no ideal tool for every situation you might find yourself in. Take a hammer for example… a rather simple tool, wouldn’t you say? This page alone describes 40 (!) types of hammer intended for use in different situations. 

Imagine you are designing a hammer.  The time comes where you’re faced with a design decision: milled or smooth face? Now, how do you choose which type of finish to apply to this hammer?

The milled face makes it easier to sink nails into the wood. It is because, at impact, the milled face of the hammer has a better “grip” on the head of the nail. BUT such a hammer can leave marks on the wood’s surface.

1. IF the situation is: “I’m building a wooden house frame, and it will be covered up when the building is finished” THEN the milled face is a better choice for our hammer.
2. IF the situation is: “I’m building a decorative frame for a painting for people to gaze upon” THEN a smooth face is a better design choice for our hammer.

When we read comments from actual users, house framers point to greater consistency, less nails bending or shooting out sideways under the blow of a milled-face hammer.

The situation of use determines what qualities of a tool are important. Therefore it is the situation of use that will drive your design decisions. If you are designing a hammer, and you have to choose between milled and smooth face, your decision is now easy, because you have learned and catalogued different situations of use.

IV. Build detailed models of the situations you are designing for

You have to take a good look at the situations you are designing for. That’s the start of the software design process. That means learning anything that can affect your software’s utility in a situation. To do that, we build maps of those situations. Situation after situation. We look at:

1. What happened in the user’s life
2. What the user is trying to accomplish (what is the desired outcome)
3. What are the steps they have to take (steps being decisions and actions)
4. What are the difficulties and questions they need to overcome to make decisions and take action
5. What are the existing solutions and how well do they help the user accomplish their goals

We fuel this map with:

1. Expert knowledge (what is their model of the situation)
2. Observing users’ behaviour via qualitative and quantitative studies
3. Observing existing tools on the market (Sometimes you can even infer the situation from the tools intended to address the situation (why does this banking app have this feature?) It is a kind of UX archaeology, where scientists infer how people may have lived by studying items they left behind).

We make several maps for the main situations we are designing our software for. I’m saying “main situations” because it frequently turns out that after mapping the first three situations, we start getting redundant information (the rest of the situations seem to consist of similar decisions, and problems our software has to address). The techniques of putting these situations down are a too big of a subject to write it here, and we will cover it in different posts.

V. Make sure your team has a shared understanding of the situations you design for and their hierarchy

The most common cause for arguments in the system design process is a different understanding of the problems you are designing for. Example: I say “milled face hammer”, you say “smooth face hammer”. We are both right – it’s just that we have a different understanding of the situations we are designing for AND (most probably) a different hierarchy of those situations.

Any tool you build is set to serve a multitude of situations. Not one. Many. You need to model each of these situations. And afterwards you need to rank them in order of importance. Example for a hammer:

1. I need to sink a 1000 two-inch nails a day into thick wooden boards that make up a roof
2. Sometimes I need to repair furniture in the kitchen, where I use small, half- inch nails
3. Sometimes I need to…

Such a hierarchy helps you make design decisions (e.g. whether the hammer should be milled – best for situation #1, or should it be smooth – better fitted for situation #2). You can make conscious trade-offs (e.g. sacrifice a little bit of convenience for some people to better accommodate others).

VI. Writing and sketching: For each of the situations, envision how your software can make them better

So… you know the situations you are designing for. Now it’s time to build software that will make these situations better for the user. Here are some design techniques we like to use:

1. Write a conversation between you and the user

Start with the most important situation (the highest in the hierarchy). What should happen to make this situation much better for the user than it is now?

Imagine that it is you personally that helps them through that situation: what would your conversation look like?

• What would you tell them?
• What would they ask you for?

Write it down, like it was a dialog for a movie script.

2. Turn the conversation into a software interface

Now imagine that your software has to do the same job of helping the person out.

• Your part of the dialog becomes what the software “says” to the user
• Their part of the dialog becomes what the software allows the user to “say” back (inputs: buttons, textfields, interactive elements).

Sketch it screen by screen – like it is a storyboard of the user’s interaction with the software.

3. Rinse and repeat

Repeat this process (of dialog writing and screen sketching) for the main situations of use that you have described and ranked before.

Cleanup: while you sketch your screens, you will find commonalities between them (“Hey! Here I could use almost the same screen I’ve used for situation #2”). In software design you don’t want to have superfluous types of screens. You want to have a minimal number of screens to do all the jobs that software needs to do. You have to look for commonalities and always ask yourself this question: “Do we really need this type of screen in the system? Can the work of this screen be done by some other screen?”. Here’s where the hierarchy of situations you prepared before allows you to make these decisions (meaning: “Do we sacrifice a little bit of convenience in situation #3 in order to have a leaner, more coherent system as a whole?”).

VII. Information architecture and navigation: So users can easily find information and features that they are looking for.

Once you have laid down most important interactions between the user and your software, it’s time to put it all together into an orderly organism – a system.

1. Information Architecture – first think how you could group your screens (with information and functions) so that people can figure out where to search for things they need. The basic rule is birds of a feather flock together (similar things close together). What’s similar is often decided through exercises like card sorting, where different people try to group your content and functions the way that seems natural to them – giving you the gist of what your structure should look like to accommodate their expectations. Think of it as different aisles in a supermarket: similar things are grouped together, you expect butter to be somewhere near milk, and flour somewhere near oats, rice and pasta.
2. Navigation – we like to do it after we have information architecture in place. We like to think of it as entry points to different functions and information stored in your software. In a supermarket your “navigation” elements are isle names and numbers: you look up and you can orient yourself as to where you are and where the things you are looking for might be.

VIII. Testing your solutions: Test early, test often

As soon as you have anything resembling a software interface, it’s a good thing to test:

1. whether users even understand what your interface is trying to say
2. whether they are able to complete the task that the interface is intended to serve
3. whether they even care for the solution (sometimes it turns out that even though people declare something to be a problem for them, and they would love it to be solved, they don’t really care that much for solving it. So that’s a little bonus you get from testing early on).

Testing as soon as possible sometimes means a paper sketch, other times a wireframe or a hi-fi prototype. What’s important here is that users are immersed in the situation (like they are in the moment, simulating themselves solving their real-life problem with a prototype of yours). That’s a whole different subject as well.

IX. Get a partner to guide you through a system design process

We are Efigence, and we help clients design and develop software tools that consumers love using.

Our workshops are one of those rare occasions where your team can look at your whole business with fresh eyes, from a new perspective. That often means new ideas, that go beyond the website, into branding, communication or customer service.

We work with fundamentals first: your value proposition, your customers’ situation and your business goals. Thanks to this approach, the process of building the website, creating graphic designs, communication and functional backlog feels like a treat, not a chore. If you are thinking of building software, give us a call.