In early 2005, Wayne Westerman, founder of Fingerworks, wanted to find a convenient solution to use a computer without stressing the hands. The objective was to help people like him who suffered from carpal tunnel syndrome or other such issues to comfortably work on a computer. He and his team invented a way to replace the keyboard with a touchpad. The invention was initially marketed to people with hand disabilities, but over time popularity of the solution grew among a larger group of customers. Fingerworks later sold its invention to Apple inc., which built its first gesture-controlled multitouch interface – the iPhone. The use of button-free gesture control in the iPhone kickstarted the ‘focus on user’ revolution and fundamentally changed the principles of UX design. This is what Designing for Inclusivity is all about. It requires starting from identifying and finding solutions for specific pain points which can lead to exclusion of a certain group of users, then designing experiences that can benefit a diverse group.

In the book Mismatch, Kat Holmes, (former Principal Director of Inclusive Design at Microsoft and an author) illustrates how exclusion is innate to any design if we do not identify it, and how solving for exclusion can lead to benefit of a larger group:

Imagine a playground full of only one kind of swing. A swing that requires you to be of a certain height, with two arms and two legs. The only people who will come to play here are people who match this design, because this design welcomes them and no one else. And yet there are many unexplored, different ways you can design an experience of swinging. You can adjust the shape and size of the seat. You can keep a person stationary and swing the environment around them. You can support the body without holding onto the ropes. Participation doesn’t require a particular design. But a particular design can prohibit participation.

While designing a product or a digital experience it is easy to fall into the trap of generalizing when and how it will be used. But, when those stereotypes are broken it paves the way for inclusive designs and innovations that can benefit a large and diverse group of users.

In this article, let’s deep dive into why every experience must be approached through a lens of inclusivity and the best practices that we can embrace for creating inclusive designs.

Understanding The Difference Between Universal Design, Accessibility and Inclusivity

Universal Design and Inclusivity and Accessibility – these terms are often used interchangeably. While all of them converge together to solve the common objective of creating designs that have minimal exclusion, they differ from each other. Before we talk about inclusivity, it is important to understand the difference between Universal Design, Accessibility, and Inclusive Design.

Universal Design – stems from the objective of making a product, environment, or interface usable by as many people as possible without the need for any adaptation. Motion-operated automatic doors are an example of Universal Design. Universal Design has a one-size-fits-all approach. 

Accessible Design – Accessibility in design focuses on users with disabilities and is a subset of Inclusive designs. Web Content Accessibility Guidelines 2.1, was initiated to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Accessibility is an outcome of inclusive design practices.

In our earlier article, we talked about Accessibility in design and the best practices around it.

Why Design for Inclusivity

Inclusive design involves designing for a specific individual or use cases that are not generic and then extending it to a diverse group. For example – the invention of the email was driven by the need of Vinton Gray Cerf, who is hard of hearing to communicate with his wife who is deaf. The email was a way for them to stay connected when they weren’t in one room. 

Another such example is the invention of captions. On August 5, 1972, “French chef” Julia Child, in a program televised from Boston’s WGBH studios, became a historic broadcast because it was the first time that deaf and hard-of-hearing Americans could enjoy the audio portion of a national television program through the use of captions. Since then, including captions and subtitles in videos has become a best practice for creating videos, which also benefits people beyond the ones who have difficulty in hearing or are in an environment that does not allow a clear hearing.

Designing for Inclusivity can lead to such remarkable inventions. 

However, in most cases, inclusivity is an afterthought in the design process. But, having it ingrained into the product design and development process can drive innovation and business. Here are a few examples:

PillPack founder T. J. Parker wanted to ease out the challenge of opening child-proof caps by people with limited dexterity in their hands. They also wanted to minimize the risk of patients mistaking their prescriptions, especially the ones on multiple medications. They partnered with IDEO to design a more accessible pill bottle and reimagined the prescription delivery service. When patients order their prescriptions through PillPack the medication arrives in presorted packages, where patients could simply remove one small pouch that contains the right medication for the right time of day. This innovative solution, born out of the need of a specific group of users proved to be a boon for 30 million people who needed to take more than five prescription medications in one day.

Source

The Americal Live a weekly public show broadcast created full transcripts for their online archive of hundreds of episodes. The objective was to make content accessible to people with hearing disabilities. This move helped them in reaching out to more audiences than ever. Not only did their website traffic rise drastically, but a substantial percentage of the unique visitors came due to the transcripts. 

Role of Empathy in Creating Inclusive Designs

At Robosoft, we believe in the principles of Design Thinking to create human-centric digital experiences. Empathy is the first step of the Design Thinking process that helps to understand the pain points of the end-user. At the core, the primary goal of creating inclusive designs is lowering the barriers that can exclude users from using digital products and interfaces effectively. A lot of times these barriers occur when product teams think about a design only from their experiences and world view, which results in retro-fitting inclusion and accessibility to the design. 

A lot of product teams and designers work with a Bell-Curve approach. A bell curve approach means designing experiences for the majority of the people, or the ones who lie in the middle of the bell curve, automatically leading to the exclusion of people who fall on the edges of the curve (the edge cases).

This exclusion of the ‘edge cases’ could mean the exclusion of a user need that can lead to an important feature benefiting a diverse group ( including the ‘average people’ who lie in the middle spectrum of the bell curve). 

Designing for inclusivity requires including and learning from people with a range of perspectives. This is where Empathy plays a key role.

Learn how people adapt to the world around them. Bring that into your design practice— Tim Allen, VP, Design at Airbnb

Empathy plays a critical role while creating a user persona. It is a tool that helps product teams look beyond their experiences and understand where the user is coming from. It is critical to understand the pain point of the users who are at the left of the persona spectrum – which means they face the maximum mismatch with a product or interface. And then extending the design for a diverse set of users – who may face the same challenges depending on their situations.

User Persona Spectrum – from the Book Mismatch

Best Practices of Designing for Inclusivity

It is critical to think about products or experiences from the mindset of inclusivity, right through the entire product development process –  from strategy and design to development and testing. Let’s take a look at the best practices for designing for inclusivity from these aspects.

1. Identify the Points of Exclusion

Before starting the process of inclusive design, the product teams must seek out the points of exclusion. This means what are the aspects that lead to exclusion of a user and then solving for them. 

Designing for inclusion starts with recognizing exclusion. – Kat Holmes

This can include the following:

• Recognizing personal biases.
• Involving a wide and diverse set of users throughout the designing process. Especially the ones who are most likely to be excluded.
• Identifying exclusion that can occur on a situational basis – this can lead to experiences that can be extended to users who can face challenges in experiencing a product due to their situational environment. This means solutions designed for users who are deaf or HOH (Hard of Hearing) can also benefit those who are navigating through a loud airport.

The Americans with Disabilities Act has legal provisions that address the difficulty of hearing in airports, they cite videotext displays as the most important auxiliary hearing aids that airports must provide. Airport televisions are also required to display captioning at all times.  A service that can help all passengers while navigating a noisy and crowded airport.

Source

2. Understanding User Diversity

The beauty of inclusive designs is that it puts people at the center of every experience. It requires learning from people with a range of perspectives. User research is an important step towards understanding diverse perspectives and creating experiences that are usable for a wider group of people. These activity cards from Microsoft can help in testing concepts through an inclusive lens. These include understanding a user from various aspects like:

• Learning from users who face exclusion permanently – for instance, people with vision impairments face difficulties in accessing all kinds of digital devices. A feature like high contrast screen settings designed for such users benefits a wider range of users depending on the context like – interacting with the device in bright sunlight.

• Mismatches in the human-to-technology interaction – most digital interfaces are designed to be used either via a mouse, keyboard, or touch screens. How do people who have constraints of using a hand due to a disability or contextual challenges (like luggage in one or both hands) use a device? This is where a design integrated with voice and speech recognition technology comes into the picture.

At Robosoft, we partnered with AAA to design Google Assistant and Alexa Skills that can help drivers get roadside assistance while driving.

• Mapping human abilities on a spectrum to design solutions that benefit everyone

Persona Spectrum – Microsoft Inclusive Design Toolkit

• Draw parallels between the role of human behavior and technology’s behavior – this means finding the human equivalent of the tech solution that is being designed. For instance, a voice assistant’s role in giving information to users can be in some ways equated to a teacher’s role of imparting knowledge to students. Designers should interview people who perform such roles that can be compared to technology’s role in the user’s life. Take note of what makes them good at their work and brainstorm ways to incorporate those insights into the design of your solution’s behavior.

At Robosoft, we partnered with Penske Media Corporation to create an ADA compliant app for WWD (Women’s Wear Daily) one of their leading industry trade journals for fashion. We did a detailed analysis of the audience segments and created detailed user stories. The solution included features like – text alternative for all rich media content, page titles that describe topic or purpose, an optimized order of content rather than a predetermined sequential order, etc.

3. Design Essentials for Inclusivity

When it comes to design principles to follow while designing for inclusivity, a lot of factors are similar to guidelines one would follow for accessibility. We have discussed the key points including – Fonts, Text and Typography, Color, Forms, Content, and more in detail in our article covering best practices of designing for accessibility. In the subsequent section, we will talk about design best practices beyond the above-mentioned factors.

Start with micro-interactions

With Agile development product development teams can pick small interactions, identify barriers around them and then design and develop features in an incremental pattern. This can help in creating inclusive designs step-by-step, testing them, iterating them without getting overwhelmed by the entire process. Micro-interactions though small can have a huge impact on the usability of an interface. Micro-interactions can provide instant and relevant feedback about a completed action to a user and in most cases, micro-interactions only need a little more effort to be inclusive to all users.

Source

Microinteractions also play an important role in UX writing known as microcopy. It is a small, informative, or instructional text on forms, pop-ups, buttons, search prompts tips, etc.

Microcopy helps in assisting users in small ways as they are navigating through an app or website. It is also an opportunity to engage with users with a quirky and interesting copy.

Source

Navigation and interaction – following Gestalt Principles

When designing for inclusivity it is important to plan a clear and easy-to-use navigation structure. Gestalt principles (principles of grouping) help to organize related items and support a clear visual hierarchy and navigation structure. Here are few points to consider while creating a navigation structure:

• Designing not just for every type of user and screen size, but also for the various ways people hold their device

• Easy access to the bottom navigation, which holds key menu items and features that are frequently used to be placed in the mid to two-thirds area of the screen

Design for the context the user is actually in

Digital interfaces are used in multiple situations. How the interface appears and functions should reflect and fit into that context. An example of this principle is touch screen interfaces in cars. It can be difficult and time-consuming if the touch target is small and hard to read. So in any in-motion scenario, it is important to maximize the size of the text and touch elements and simplify the presentation of crucial information, like the next route instruction. 

Source

Scalability

In today’s world users can interact with a digital solution on multiple devices – whichever is most convenient for them at that point in time. Therefore It is important to create multiexperiences – by mapping every touchpoint across the user journey.

Some considerations while building multiexperiences that are inclusive are:

• Create fully responsive designs – Rather than “adapting” a desktop design for a mobile device, or vice-versa, designers should consider all device form factors and ensure that extreme cases are taken into account as well.
•  Ensure the interface responds well when Zoomed. This means – the layout should remain usable and not have any broken or overlapping elements when zoomed whether the user is seeing it on a desktop browser or on a mobile device.
• While designing an app, make sure it responds to the user’s device settings for text size and includes native zoom and sizing options if appropriate.
• Two concepts that can help rich web applications support more browsers and have a wider reach are:
  • Graceful degradation is the practice of building an application for modern browsers while ensuring it remains functional in older browsers.
  • Progressive enhancement is the practice of building an application for a base level of user experience but adding functional enhancements when a browser supports it.

Images and videos

Images and videos can make an interface visually interactive and engaging. However, if not done right they can be the biggest barriers to creating an inclusive interaction. Here are some points to consider while using images and videos: 

• Minimize image file sizes -All photographic images should be below 1MB, for faster loading.
• Use JPGs first – it allows for the highest level of compression.
• Include transcripts and captions in audio and video content
• Consider cultural context while adding images and videos – which means using diverse stock images taking into account the existence of different identities, skin tones, body shapes, and abilities.

Ethnicity filters return that can help to select diverse and inclusive images and videos on Shutterstock.com.

• While including video, make sure to use modern HTML5 video standards
• Don’t Autoplay media – Autoplaying video and audio are generally annoying, and where users are working across multiple apps or tabs, it can be hard to identify the source of the media to hit pause. 

Development and markup

A design is only as good as the engineering behind it. Here are some key points to consider while implementing a design.

• Don’t use tables for layout – there are two kinds of tables – Data Tables (to represent data) and Layout Tables (commonly used for page layout). Screen Readers treat even the layout tables as data tables and read out their content row-by-row, which can be quite confusing to understand.
• Minimize bandwidth requirements wherever possible, and optimize load time
• Accommodate focus states and tab and arrow key functionality
• Validate the markup for accessibility – Markup provides instructions to the software used for viewing a webpage (web browser) on how the page should look and work. W3 has a free markup validation tool that will help to identify any technical barriers to inclusion, like missing “alt” text. 

Applying Inclusive Design Principles to Emerging Technologies

Emerging technologies like Augmented Reality, Virtual Reality, and AI can play an important role in creating inclusive digital experiences. Here’s how:

AR/VR can lead the way towards inclusive designs. As rightly mentioned in this Fast Company article:

VR at its best can do more than immerse: it lets people appreciate new perspectives.

Researchers at Stanford are running “virtual shoes” experiments in which people “viscerally embody avatars” that encounter various forms of prejudice, based on age, race, economic status, and disabilities. The Stanford team is now partnering with neuroscientists to demonstrate how these experiences — can physically change the brain to reduce bias. UNICEF more than doubled the funding it received after screening its documentary ‘Clouds over Sidra’ on a 12-year-old refugee, in a 360-degree video.

Immersive technologies will also play a critical role in creating inclusive workspaces. The US Department of Labor (DOL) is currently funding Partnership on Employment & Accessible Technology, which is focused on laying the groundwork for an accessible future of work led by emerging technologies.

Artificial Intelligence can help create intelligent apps that see, hear, speak, understand, and better interpret people’s needs. Seeing AI is a Microsoft research project that brings together the power of the cloud and AI to deliver an intelligent app. It is an app that narrates the world around you. Designed for the blind and low vision community.

Source

Wrapping Up

We are all temporarily abled – Cindy Li.

Digital interfaces have permeated most aspects of a users’ life. Depending on the user environment, context or situation a digital experience can be inaccessible or accessible. Designing for inclusion cannot be an afterthought, the design process will have to start with inclusivity. Kat Holmes summarises three critical steps to build inclusive design practices:

• Use the cycle of exclusion to assess where you are today and where to start. Answering the 5 key questions about the experience can be a starting point of identifying exclusion.

The cycle of exclusion – from the book Mismatch

• Apply the principles of inclusive design to any element of the cycle of exclusion.

Principles of inclusive design – from the book Mismatch

• Integrate inclusive design methods within your team to build a purposeful culture where people can do their best work.

It has become critical for digital experiences to be extended to as many people as possible. More so when digital solutions have become critical to complete day-to-day tasks. Enterprises will have to ingrain a mindset shift that leads to inclusion as a starting point for any design experience. The first step towards this is aligning the organizational goals towards inclusivity. Further, building a team of designers and developers who understand and appreciate the value of learning from a diverse group of users. Once these building blocks are in place, defining the tools and methodologies that can help in creating Inclusive Designs is critical to standardize the practice across organizations and projects.  One small change toward inclusion can inspire innovation, benefit a wide range of users in a positive way and drive business impact.

The concept of Accessibility in design was introduced to enable people with special abilities to perceive, understand, navigate and interact with digital products and platforms with ease. Over time, this concept has expanded to help enterprises create digital experiences for a large group of users, regardless of their current circumstances. After all, a design is only useful if it is inclusive – i.e., accessible to a wide group of users.

COVID-19 has accelerated the adoption of digital mediums even for day-to-day tasks and communication. With people avoiding physical contact, some designs that were earlier created for lowering the usage barriers are now proving to be extremely useful. The automatic sliding door in shopping complexes and supermarkets, which was created to make entry and exit easier for people, has now become critical when people do not want to touch physical surfaces.

Enterprises are also improving their digital experiences to meet the demands of consumers in the new normal.  A few airports have offered self-check-in kiosks and automated boarding by facial recognition for some time now. Technology is increasingly playing a greater role.  United Airlines has recently upgraded its app with a slew of features such as check-in, printing of bag tags, and downloading boarding passes. Additionally, they have also ensured that the latest updates make the app more accessible to people with visual disabilities. To do so, they have increased color contrast, added more space between graphics, and reordered how information is displayed and announced. This way, screen readers will be able to convert text to audio in a more seamless, logical sequence.

Designing for Accessibility – the need and how it can lead to better designed digital experiences

Accessibility and simplicity in design go hand-in-hand and solve usability issues. Taking Accessibility into consideration introduces a set of constraints for designers and inspires innovations that can result in better designed and easy-to-use products for all users.

“It’s really common to end up just designing for yourself. So if you can push yourself to think, How would a different group use this?’ or even How would your kid or grandmother use this? it can lead to a better, more accessible design.” –  McKinsey Design Senior Design Researcher Madison Berger.

In this article, we will explore the concept of Accessibility and the best practices to design digital experiences that are accessible to a diverse set of users. We will also briefly introduce the concept of Inclusion and how it differs from Accessibility. Additionally, we will see some interesting use cases and examples keeping in mind the design thinking approach.

Accessible and Inclusive designs – two pillars for creating human-centered digital experiences

Creating Inclusive designs involves an understanding of user-diversity. It is a methodology that is human-centered and means including a varied set of users, with a wide range of perspectives. As per Web Accessibility Initiative, “Inclusion is about diversity, and ensuring involvement of everyone to the greatest extent possible.’’

Accessibility is an outcome of Inclusive Design

Accessibility is an attribute of Inclusive design. Accessibility advocates often describe the concept as providing access to products and services for people with recognized disabilities. However, Inclusive design is much more than creating digital products that can be used by people with different abilities.

• Accessibility: the qualities that make an experience open to all.

• Inclusive design: a design methodology that derives design inspiration from a full range of human diversity.

While Accessibility focuses on sections of the population with a defined disability, it is possible that some sections of users may be left out in the process, like users with language barriers. Inclusive designs take into account such constraints that users might have. For example, the Zangi messaging app allows for left-hand orientation to ensure their app is easy to use for people who read and write from right to left.

Another such example is the Apple Watch which gives left-handed users an option to choose the wrist they will wear the watch to check if the crown should be facing to the left or right. The screen then orients accordingly and all users have to do is swap the two halves to the band so they can buckle it correctly.

While creating Inclusive designs, designers actively seek out diverse situations and aim to address them. Therefore, we can say that Accessibility and Inclusion work hand in hand to create products and solutions that are usable and accessible by everyone. 

“Accessibility is an outcome. Inclusive design is a process to create a masterpiece.” – Derek Featherstone, CXO of Level Access.

How to design digital products for Accessibility

The  Web Accessibility Initiative’s definition of Accessibility talks about addressing the issues of user experience for people with special abilities. When creating a new product, companies often identify and design for their target markets. However, human-centered design can help businesses consider a much diverse and larger group of users, and thus a larger target market.

“The longer an organization waits to incorporate accessibility, the greater the chance that the product will be inaccessible (or expensive and time-consuming to retrofit). When the product team considers accessibility from the start, they can iterate, test, learn, and end up with a stronger product.”, stated a recent 2020 Digital Accessibility Report by Level Access.

Role of Design Thinking and User Empathy while designing for accessibility

Empathy is one of the core attributes for creating human-centric digital experiences. In her book, Accessibility For Everyone, Laura Kalbag, writes that in order to improve the user experience, designers must focus on the concept of usability from four broad parameters:

1. Visual: make it easy to see
2. Auditory: make it easy to hear
3. Motor: make it easy to interact with
4. Cognitive: make it easy to understand

While designing for Accessibility, it is important to know user behavior from all the above perspectives. Creating Empathy Maps, which is a critical step of the Design Thinking process, can be a useful tool to achieve this. For teams involved in the design and engineering of products, services or experiences, an empathy mapping session is a great exercise for groups to “get inside the heads” of users.

Learning about the target group at an empathetic level opens up the opportunity to understand their intent while using a digital product and how they are feeling while trying to accomplish it. This allows product and design teams to get empathetic insights which can help them build a product, service, or experience that enables accessibility as well as inclusiveness.

“The aim of empathic design studies is not to seek solutions for recognized problems, but rather to look for design opportunities as well as develop a holistic understanding of the users. Design empathy is not only information and facts, but also inspiration and food for ideas.” — Tuuli Mattelmäki, Finnish industrial designer, researcher & lecturer.

Designing for Accessibility: best practices

Below are some of the key factors that can be considered while designing for Accessibility. These factors bucketed as per the following attributes:

• Usability and heuristics 
• Design and interaction
• Content and Communication

Usability and heuristics

Navigation bar on your website: A simple and straight-forward navigation bar can make it easier for a visitor to navigate through a website. For visually impaired users, it is important to include a voice feature to simplify the navigation process. 

The latest Apple devices have VoiceOver – an assistive screen reader that allows impaired or disabled users to easily navigate their devices.

A look at Facebook’s Accessibility menu that slides in from the top of the page

Usability and readability of links: Most browsers render links in blue text with an underline by default. The contrast between link text and regular text is the key factor for spotting the hyperlinked words or sentences. Most people with color blindness cannot distinguish between colors but can see the underlined text. For improving Accessibility, adding an underline for the hyperlinked text is critical, like done on the GDS website within the body of the articles.

Image source

Similarly, adding a dark mode feature can also help in improving readability.

Design and interaction

The WCAG documents explain how to make web content more accessible to people with disabilities. Some of these guidelines include considerations like:

• Provide sufficient contrast between foreground and background
• Avoid using colors alone to convey information
• Ensure that interactive elements are easy to identify, and more

Color contrast between foreground and background: This dashboard of the Invision app, which shows the status of invoices, indicates which ones have been successfully issued, and also displays any cancellations or errors, using color contrasts. The dashboard also features readable typography with large font sizes and high-contrast colors. The icons help to distinguish content for users with cognitive issues.

Image source

Control over contrast ratio on Skype

Ensure that all images are marked with alternative text: Adding ALT text to your HTML code allows visually impaired people using screen readers to understand what the images represent.

Here is the ALT text displayed in the code editor:

Image source

Carousels and animation elements: When using carousels and animation across your web platform, it is imperative to let users take control over the next slide advances. For instance, the below slider template highlights highly visual content, features dot navigation, and is touch-friendly on mobile devices.

Image source

Choice of colors in design: Colors play an important role in impacting the design accessibility of a digital product. The popular game Among Us relies on color encoding as a primary identifier for players. The game revolves around identifying an ‘imposter’ in the group. Colors remain the primary identifier for players for this purpose, as players commonly use names such as ‘I’, ‘No one’, ‘Someone’ or simply colors to name themselves, like a player with a green avatar sets their name as ‘Red’. However, the process as shown in this video becomes extremely chaotic when players just use their pronouns as their avatar names. In such a scenario, any form of color blindness can impact players’ performance during the game. This case study showcases how the game could be recreated using various color schemes to include people with color blindness. The solution could be as simple as using additional identifiers for players, like ColorADD color identification system which uses symbols to represent different colors or displaying the name of the color right next to the avatar name.

Displaying the name of the avatar’s color in brackets similar to how the name of the player is displayed

Image source

For designers, there are multiple resources that one can make use of for creating a color scheme that is more accessible. Some such tools include Adobe Illustrator’s Color-Blind Proof Setup and sites like ColorBrewer that can help them select a colorblind-friendly color scheme.

Content & Communication

Font size: With mobile devices, readers often use the pinch gesture to zoom into text, making it bigger and easier to read on smaller screens. However, developers often disable zoom to gain greater control over the page layout resulting in an irritatingly common accessibility problem. As a best practice, the recommended font size should be equivalent to 16 pixels or larger, depending on the font type. Certain apps also allow users to change the font size basis their preference. One such example is the Kindle app across devices that allows to customize font size basis reader’s preference.

Font customization on the Kindle App

Telegram allows to change text size for better readability

Font customization on Axis EasyConnect App

Using forms and other data capturing methods: Forms are enabled on a website for a user to communicate with a site. But even filling out the shortest form can be taxing for people at times. A common error that people tend to make while filling forms can be in the date formats.

Formatting the content of an input field should not be a burden for the user. To make such tasks easy for the user, designers and developers should ensure that the user’s input is converted into the necessary format by default.

In conclusion:

Designing user experiences often involves making assumptions about users’ preferences. While we should question those assumptions and use research to better inform ourselves about user preferences, sometimes just providing, an alternative way, can make a huge difference. 

In this ongoing process, the importance of usability, accessibility, and inclusion cannot be understated – especially now, when there is so much reliance on the digital medium to complete daily activities. The process of designing for accessibility should be included in the initial stages itself and shouldn’t be an afterthought. Shifting accessibility testing in the development stage to gather real-time feedback from people and carrying out design research will help to achieve this goal.

Accessibility and Inclusivity are two pillars of creating human-centered design for a wide range of users. Microsoft’s Inclusive Design Principles define Inclusive Design as – a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.

Diversity is Being invited to the party; Inclusion is being asked to dance — Vernã Myers

In an upcoming post, we will cover Inclusive design in-depth and with some interesting examples.

While creating digital experiences from an Inclusive design perspective the saying ‘the more the merrier’ fits just right. The larger and diverse the group of users considered while designing, the better it is for both – users and enterprises.

The script of the media and entertainment sector is getting re-written, as the content consumption patterns of consumers see a tectonic shift in a post COVID world. While the gradual move of consumers towards OTT mediums was already underway, the lockdowns, need for social distancing, dearth of other entertainment avenues accelerated this momentum.

The average time spent on subscription OTT and Video-on-Demand content in the US alone has risen by 23% from last year.

As viewership skews towards OTT, more and more media and entertainment players are launching their OTT platforms. According to a recent Research Dive report, many digital media and broadcast providers have stepped up their efforts to build new channels for consumers to access different types of content. We recently partnered with the leading infotainment brand Discovery, to launch their OTT platform Discovery+ for the Indian market. The app received close to 3 million downloads within just 4 months of its launch.

With existing OTT players stepping-up their game with richer content, personalized experience, and more, the new entrants have stiff competition ahead. In this article, we will outline the factors that will help enterprises build a successful OTT platform.

Key factors to consider while creating a successful OTT platform

The journey of any digital product development starts from understanding the users’ needs and pain points, ideating on a solution that will address these needs, and finally developing a user and business-centric product.

In this article, we will outline the journey of creating an OTT platform in two phases: (a) Research & prototyping and (b) Execution & implementation.

Getting started – Competitor Research, User Research & Prototyping

At Robosoft, we use the principles of Design Thinking to create user-centric experiences – which start from empathizing with and understanding the users. In that context, user research and competition research become critical aspects to understand the business and customer requirements.

1. Competitor research

With the deluge of OTT platforms, it becomes important to understand the competitive landscape. This will not only help in outlining features that already exist and work but will also help in avoiding the shortfalls of other platforms. Knowing the competition is also critical to offer something better and unique and gain a competitive advantage.

For instance: in OTT platforms – ‘Add to Watchlist’ or ‘Like’ is a common feature. However, just trying to replicate the same model is insufficient. In order to create the differentiator, we need to delve deeper into the world of ‘favoriting’ and what makes the user want to add a particular content to a list

In this instance, some of the key aspects we need to understand about what is already being offered can be:

• The value of a watchlist and how it works
• UX flows – how to keep the viewer moving forward while making it quick and easy
• How to help viewers feel smart and put their mind at ease
• How to improve the disadvantages & limitations.

An understanding of such factors will help in creating a differentiation in UX, even while offering the same features.

We kept such in mind when we built the Discovery+ app, ‘Continue Watching, Favorites & Watch Later’ features were added. Once the user likes or favorites something, they get a notification for similar content or new episodes and populates the home screen basis the user’s likes/favorites.

2. User research & prototyping

To design user-centric experiences, understanding users is critical. One of the most important stages of user research is creating Empathy Maps that enables design and development teams to chart out users’ motivation and pain points. In the context of OTT platforms, user research can help to derive the below expectations of users:

Expectations from an OTT platform: as a user

• see value in what is offered before making a decision.
• keep moving forward while watching content; it can be shifting from one episode to another or an alternate movie or series after a season.
• seamlessly navigate through the platform or complete their journeys (e.g. from logging in to paying).
• feel self-reliant or empowered and have their minds at ease while using the platform.

Prototyping

Once both competitive and user research is done, the findings can help in creating a high, medium, or low fidelity prototype of the proposed solution. Prototyping is the stage where a representative model is built to validate its viability and experience. It can help in testing various features and get quick feedback from users and iterating the solution accordingly. Keeping the final outcome in mind is the most important aspect of this stage.

For example: while testing a new live racing experience for GCN’s (Global Cycling Network) VoD app, our team had the below goals in mind and created flows to evaluate them accordingly:

Goals for user research

• Identify any aspects that might cause the user to abandon the viewing experience.
• Understand which aspects provide value and which do not.
• Gauge how the sports enthusiasts feel about such a feature.
• Explore how easy it is to navigate across the journey.
• Understand the sports enthusiasts mindset and expectations to subscribe for such a feature.

The feedback ranged from excitement for the feature to quick suggestions on how we can improve the prototype. This helped us to build faster and build something that the cyclists and cycling enthusiasts will expect from the platform.

Execution and implementation

1. UX of content

With the proliferation of content on the OTT platforms, the challenge for OTT players is to ensure an easy experience. The faster and easily users can get to the content they like, the more likely they are to stay on. Some of the factors that help in this are:

• A clear segregation of the content types: since content is key on OTT platforms, the experience to discover and view the content has to be delightful and seamless. Clear segregation of content types helps in this aspect.
• Different treatment of content categories: live content and VoD content (VOD – Shows, Movies, or clips).

• Easing the content discovery journey by defining clear navigation to browse content and finding what to watch and creating clear sections for premium, short-form content.
• Clear categorization by language, type of content (Movies, TV Shows, genres, audience segments).

2. Design System

As designs evolve, OTT players will need to think about building thoughtful design systems. A well-defined design system can help create well-designed user-centric digital products. While colors and typography play an important role, how the interfaces are built help to tell the whole story. This is where the Atomic Design system comes into play.

In an Atomic Design, interfaces are made up of smaller components. This means the entire interface can be broken down into fundamental building blocks and built up from there.

For example: for Discovery+, we created the design from scratch using the Atomic Design system to build a unified and consistent design that is scalable.

3. Personalized User Experience

In the digital era, users expect a personalized experience from all their digital interactions. Here are a few ways in which OTT players get their personalization game right:

AI-powered recommendation engine

Building a robust recommendation engine is the key aspect of creating a personalized user experience. More than 80 percent of the TV shows people watch on Netflix are discovered through the platform’s recommendation system. Netflix uses machine learning and algorithms to help go beyond viewers’ preconceived notions and find shows that might not have been their first choice, but they will like. The data that Netflix feeds into its algorithms can be broken down into two types – implicit and explicit.

Examples of ‘explicit data’ will be giving a thumbs up for a show. ‘Implicit data’ is behavioral data; for instance, if a viewer binged on a show and completed watching it in two nights, the engine understands that behaviourally. The majority of useful data is implicit.

Image source

Personalized upsell and retention packages

Today’s subscribers want services that are personalized at every stage of the experience from sign-up to discovery, viewing, and renewals. Thus, personalization should permeate beyond content and include the entire user journey on the app. Today a user is constantly toggling between multiple devices while accessing the platform. Developers will need to take into account data from these sources to notify the user about the upsell and the renewal offers. That also includes giving the user the power to make choices.

Device management is another aspect of creating a personalized experience. Allowing users to choose multiple devices, streaming quality options, renewal options tailored to their choices, etc. can help in elevating user experience and ensure retention.

Image source

4. Elevating user experience through easy navigation

Even if an OTT platform has an awesome content library, if users find it difficult to navigate through it they will abandon the app. According to a research, 80% percent of users uninstall an app due to a bad user experience. Here are a few factors that lead to a great user experience:

Easy onboarding and simplifying the journey

It is critical to make the onboarding process quick and easy. In that context, app owners should only ask for essential personal details and permissions and stick to the key features and UI elements that are absolutely necessary.

Tech-savvy users might not want to be hand-held through the onboarding process. In that context, giving users the option to skip becomes a critical aspect. In fact, music video streaming app Vevo found that adding a skip option to their onboarding flow increased logins by nearly 10%.

Preview app content

Another way to speed up the process and make the onboarding process quick and interesting is to allow users to experience the app before asking them to sign up or taking them on a product tour. Hotstar previews popular content and lists membership benefits on the very first screen — and they feature a prominent free trial button. Going one step ahead – Netflix now lets users turn off autoplay previews. That means videos and movies won’t begin to play trailers or video clips as they are looking for something to watch. Users can turn it off on every device at once.

Image source

5. Intuitive UI and simplified viewing experience

Intuitive UI simplifies every aspect of the process. In the case of OTT platforms, it is important to not just simplify the process of discovering content but also watching. Some key features to get that right are:

• Giving the flexibility to switch on-and-off the subtitles option.
• Information about the quality of video and data consumption.
• Option to resume from where the user left off.
• Quick and easy buttons for start, stop, rewind, fast forward.

Image source

6. Building a multi-experience for users

Today viewers are consuming content on multiple devices. Seamless delivery of content on multiple devices is no longer an option for OTT players, it is mandatory.

While building the Discovery+ platform, the goal was to design and deliver a consistent experience across devices, regardless of where the user starts, continues, and ends the journey.

Casting to a larger screen is another opportunity that can enhance user experience and help in driving the value for viewers. The Discovery+ app has the casting feature which is an easy way of connecting web, tablet, and mobile to a TV. The feature allows users to enjoy a big-screen experience with family and friends.

Another important aspect of adding value to users’ on-the-go viewing experience is by giving control of watching content at their convenience without the limitation of internet speed. In that case, the option for downloading the video for watching later enables the user to engage with the app and the content they like whenever they want.

Image source

7. Subscription models

A subscription model provides predictable and recurring revenue for a long-term engaged user base. Subscription strategies allow OTT platforms for price diversification, accommodating a broader, diversified income group of users over a fixed ‘one-price-for-all’ model. However, it is critical to choose a subscription model that fits the requirements of the viewers. For instance, most broadcast players getting into OTT have a yearly and monthly plan with free trials or free access to regular content. On the other hand, established players like Netflix will have subscription models that are only yearly or monthly.

On Discovery+ the subscription model that was built-in was ‘free unlimited access to regular content’. However, to view premium content, an additional fee is charged. On Global Cycling Network, users can buy a monthly or yearly race pass to get unlimited access to the best cycling content.

8. Easy Payment gateway integration

With a plethora of payment options available, making this step easy is important. Major OTT apps accept payments through credit or debit cards, digital wallets, and real-time payment systems where available. Further, these platforms bill users every month on the same day making the payment cycle easy.

9. Push notifications

Push notifications are an essential part of the user experience and can ensure continuous engagement with viewers. However, badly done push notifications can also lead to users abandoning the app. According to a survey, 71% of all app uninstalls are triggered by a push notification. Here are a few factors to get push notifications right:

• Make personalized and relevant to the user.
• Sending notifications in the engagement windows and at the local time zone of the user.
• Send actionable notifications to drive engagement.
• Don’t send too many notifications in a short duration.

Image source

In conclusion:

As OTT becomes increasingly popular, more and more entertainment and media firms will develop their own OTT platforms to engage with the viewers. While the variety and quality of the content will be important to acquire new viewers, UI/UX will play a decisive role in retaining them. In the future with newer technologies, we will see interesting innovations in the OTT sector, but a simple and delightful user experience will remain the most important factor that will define the success of any OTT platform.

Creating a product vision is not just the first step towards embarking on the journey of successful product development, it is the most critical one.

“Be stubborn on vision, but flexible on details” – Jeff Bezos

Enterprises across the globe have various tools and methodologies for arriving at the product vision. PR FAQs (Press Release FAQs) is one such tool. A PR FAQs document is a press release including critical FAQs, that is written for a product that will be released in the future. It is usually written by the product teams for a hypothetical launch of a product, considering that it is already released.

The concept of PR FAQs first introduced by Amazon is now used by product teams across organizations.

What is a PR FAQs and how it helps in creating customer-centric products

At Robosoft, we use Design Thinking principles to understand users’ pain points and needs and then create a product vision that not just solves the real challenges of customers but is in line with our clients’ business goals as well. PR FAQs is a tool that can help product teams present these learnings in a simple format for all the stakeholders across the organization.

Creating PR FAQs is an approach where the product teams work backwards – i.e. they visualize how their end product will look, what consumer challenges it will solve, and how it will solve it? All these are then addressed in the PR FAQs document while keeping customer needs at the center.

The concept of Amazon Go, the chain of automated convenience stores, was a direct result of the “working backwards” approach, which begins with the creation of a PR FAQs document (a press release, frequently-asked questions document, and visual mock-ups). In this case, it all began with identifying the problem: customers hate standing in lines, using the PR FAQs tool.

Image source

Typically, product managers use a product brief to describe their product. This serves as a starting point for the company’s product development and a brief introduction. A PR FAQs document serves as a more futuristic and customer-oriented product brief.

Product teams create a PR FAQs document imagining that the product is already developed and released. They have already envisioned the final product in their minds while writing a PR FAQs document.

Usually, a PR FAQs document will answer the following questions for all stakeholders – design, development, sales & marketing teams, etc.

• What does the product do?
• What are the most exciting features?
• What customer problems are you solving?
• What benefits will the users get?

The format for a typical product brief is as follows:

1. A press release: Written from the point of when the product will be released and how it would be introduced to the public.
2. FAQ: Potential questions that a given customer would likely ask in order to gain knowledge of the product. The questions are usually framed to seem open-ended.
3. Internal questions: Questions that are asked by the stakeholders during the product development phase.

Now let us take a look at a PR FAQs template:

1. Heading: Short, catchy name for the product that a given target audience can relate to.  
2. Subheading: One-liner explaining who the target market is, what the product does, and what it hopes to achieve.
3. Summary: A brief paragraph, explaining what the product is and its benefits.
4. Problem Statement: A brief paragraph explaining what precise problem the company is trying to solve with this product and why they are trying to solve this problem. This paragraph may also include pain points on existing products or processes that can be alleviated using the product.
5. Solution: A brief explanation of how the company hopes to resolve the problem mentioned in the prior paragraph. Usually, it would be helpful to provide research or numbers to back the assumptions made for the resolution.
6. User Experience: A paragraph explaining how a user would interact with the product itself. In this section one could add an internal quote; something regarding the product for example, why the company feels it’s essential for the given customer base to purchase this product. One could also add hypothetical customer quotes. This kind of information gives more insight into the product or the features.
7. FAQs: This section would include all plausible questions target customers may want to ask. This includes the typical what, why, when, how, and who questions from the customer’s perspective. This could also serve as a justification for the company to launch the given product.
8. Internal Section: This part of the document involves questions that the internal teams would ask. These questions could be regarding technical, sales, marketing, or design inquiries. The section would also delve into the solutions for any said questions and would make it transparent for teams to see where this product/feature is heading and what the ask is especially from the stakeholders. It could act as an aid to stakeholders for decision-making purposes. Typically, visuals could be added to avoid having to write out large chunks of words and would help keep it brief.

Some samples of how a hypothetical press release looks like can be found here and here.

Why it is important for product teams to create a PR FAQs document before starting the product design and development journey

A PR FAQs is a commitment to deliver

The PR FAQs is much more than a product brief tool.  The press release opens with a location and date of publication; this helps the product team to focus on an idea and commit to meeting their tentative delivery date. Along the way, details and dates might change, but it keeps teams accountable to ultimately deliver on their vision. A PR FAQs is more than a document –  it’s a commitment to deliver

Gives perspective to all the product stakeholders

A PR FAQs is written keeping customers at the center and is aimed to give all the stakeholders a brief about the product idea. But, if the PR FAQs document is not clear or exciting enough, the product idea might need to be refined further. A PR FAQs document can help identify shortfalls in the product idea at a very initial stage and can help identify issues like – cramming too many features, or not being able to address the real user pain-points and more. If stakeholders are asking questions that can’t be answered in the FAQs, then the product idea needs to be refined further before starting to build it.

As McAllister, former General Manager at Amazon explains, “Iterating on a press release is a lot less expensive than iterating on the product itself (and quicker!).”

Furthermore, the FAQ component of the document can be extremely effective in capturing the assumptions and perspectives of different stakeholders in a consistent format that everyone involved can understand.

Helps in defining product vision and roadmap

A PR FAQs document can give focus and clarity on the challenges the product will solve for customers. It helps articulate what the client experience needs to be, defines specific requirements that are needed for the final product, highlights the most important features, and hence helps create a product vision and a roadmap.

Motivates the design and development teams to create an exciting product

A PR FAQs document can help product teams test their product idea and gain buy-ins from clients and internal teams on particular features or the product overall. A press release should be engaging and exciting and explaining what your product does. If the press release is not exciting, chances are the product isn’t going to be engaging either.

Getting the stakeholders excited about a “press release” sets the stage for motivated teams when the actual product is built.

How a PR FAQs document can help various stakeholders in the product development journey

A PR FAQ document is useful not just for the product teams but multiple stakeholders in the product design and development journey. Here’s how:

Engineering teams:  PR FAQs document can be used to start scoping out the technical aspects of the product. The development team can start by looking at what the product is, how it will help solve any issues, and how much time it will take.

While a product document might be independent of the technical solution, it can help to include some details that will give reviewers an idea of the scale of potential solutions.

The PR FAQs document can be beneficial for the engineering team to immediately start thinking about solutions to the product: what are the code libraries, databases, caching solutions, etc.?

Design teams: the PR FAQs document can help design teams to start thinking about design concepts.  It is not necessary to create a text-focused PR FAQs document. Adding a basic wireframe or an MVP concept can help the design teams to further visualize the design elements.

Sales teams: the PR FAQs document can help sales teams to start looking into the marketing of the product, what the market would be, who would buy it, and how profitable it would be for the company.

Marketing teams: the PR FAQs document can help marketing teams craft a key message or benefit that would be attractive to the end customer.

Other Stakeholders: the PR FAQs document can be used to see what resources need to be assigned to this product and how much time it would take to accomplish its implementation.

In Conclusion:

In situations where the product brief or PR FAQs document is cumbersome and difficult, it can be an indication that the product itself might not be worth the effort for implementation. Although, this might not hold true for all products and vary according to the product idea. Each company must find its own way of approaching the implementation of the product and see what works for them.

The most appropriate way to approach the process would be to begin with the basic given format described above and customize the product along the way. This allows for flexibility in the flow of the writing as well as allows room for things such as visuals and graphs that can be beneficial to decision-makers and stakeholders.

Download the above template for creating a PR FAQs document for the next product idea of your enterprise.

Good design’s not about what medium you’re working in. It’s about thinking hard about what you want to do and what you have to work with before you start.  – Susan Kare

Prototype is the stage where you build a representative model of your solution to validate its viability and experience. It can also help identify what is working and what the weak links are. In this article, we will outline some basics of prototyping, how to create and use them.

What is Prototyping?

Prototyping manages the process of creating solutions for the end-user without even having to look at the final product. With Low, Medium & High fidelity prototypes, one can easily picture an entire flow of how the user journey will look like. All this helps in conveying the look and feel of the final product.

How does it help?

Prototyping is one of the most important steps in the design process. It saves time, effort and cost on a project to validate a hypothesis and ascertain that the product design is in the right direction.

Before a final output is ready and the project is conceptualized. Prototyping helps designers bridge the gap between a conceptual and an actual product.

For designers

For designers, the mode of prototyping they choose varies from project to project. For instance, if there is a quick approval needed even a hand sketch (Low fidelity prototype) will do the job. But if the journeys and flows are extensive a high-level prototype is a must. It helps clear doubts with respect to user journeys, flows and IA (Information Architecture). A designer must have total control over the tools they use, for an excellent output.

For developers

A detailed prototype can help developers visualize a flow from start to end and quickly understand the roadblocks or the enablers that can help smoothen the app or web development. Developers can also recognize the challenges well in advance with a detailed prototype. Additionally, there are many other aspects, such as API availability, asset requirements, and basic structure of the page that a detailed prototype can help developers to be prepared with.

When to use Prototypes?

The prototyping phase is the testing ground – this is where the transition happens from being dogmatic to being experimental.

In its basic form, a prototype is an expression of design intent. Prototyping allows designers to present their designs and see them in action. In the context of digital products, a prototype is a simulation of the final interaction between the user and the interface. Depending on what a product team needs a prototype to do, it can simulate an entire app or just a single interaction.

The fidelity of a prototype refers to how it conveys the look-and-feel of the final product (i.e. visuals, content and interactivity)

An important aspect that should be mentioned here is that anybody can prototype. It is not something that needs to be restricted to a designer only.

Paper mockup

For creating a prototype, we can start with something as basic as a paper mockup. It is inexpensive, fast, and collaborative. A paper prototype can be first ideated on a whiteboard with all stakeholders and then sketched out on paper – it’s that simple.

This method does have its drawbacks though, like limited interactivity and uncertainty during testing, but it suffices for a preliminary test.

Monotone mockup

You then have the monotone mockup which can be static or interactive. An interactive mockup can also include the key transitions.

A designer can be the best judge for deciding the type of prototype that can be created basis what will appeal to the users and project stakeholders. Of course, time is of essence here.

High-fidelity prototypes

The high-fidelity prototypes on the other hand embody the brand, have a corresponding look and feel, clear call to actions, and continuity. These obviously have their own perks, of easy buy-in from and the decision makers, testability of specific functionalities, and richer feedback from users. However, they come with a high-cost implication and time factor.

Process from Wireframes to Clickable Prototypes

Wireframes are created in the early stage of the process and made before the visual design phase. Here the designers pay more attention to usability and functionality rather than aesthetics.

Clickable Prototypes – Low & High Fidelity

A clickable low fidelity prototype is simple to create and has no interactions to showcase the user journey. High fidelity prototypes are easier to understand, with animations, micro-interactions, gestures, fully loaded content, almost equivalent to a final product.

Image source

There are several tools that will help build these high fidelity prototypes with features that help you animate your project the way you want. A few software products used by designers are detailed further.

Top 5 Prototyping Tools

Sketch

Sketch is one of the most popular and efficient prototyping tool for designing Web Interfaces and Mobile Apps. Create minimal and clutter-free designs.

Platform: Mac OS X

Adobe XD

Adobe XD is a perfect tool for UD designers. Easy switching between design and prototype. Also has Voice-enabled feature to create prototypes with voice.

Platforms: Android, iOS, Mac OS X and Windows

Invision

Invision can be used via sketch or other design tools using plugin CRAFT. Designers can quickly create mood boards, Design Systems, and Style Guides. Adapts design from WEB Responsive to Mobile.

Platforms: Mac OS X, Windows and Web Browser

Marvel

Marvel is both Web-based and Mobile app prototyping tool. Through the app, you can convert hand sketches into prototypes. It supports PSD, Sketch files to further work on within Marvel.

Platforms: Mac OS X, Windows and Web Browser

Figma

Figma is the first interface tool to have a collaboration feature. It is an entirely Web browser based tool. Create and present the design in the same tool.

Platforms: Mac OS X and web Browser

Conclusion

Gone are those days when wireframes were created on paper, today prototyping is a must before embarking on the journey of design and development of digital products. Lovely animations and interactions add to the wow factor and help bring a faster buy-in from stakeholders on the concept.

Designers can pick the tool that suits them, as there is no perfect prototyping tool that can be called the “best” from the list. Every tool has its own pros and cons and every day there are new updates to existing and new tools that are launched and marketed differently.

The choice of a prototyping tool depends entirely upon the nature of the project. It is finally about picking the right tool for the right requirement based on the project.

In a world where everything that a user needs is just ‘an app away,’ offering delightful User Experiences can be the differentiator for businesses amongst the myriad of options, that consumers might have. The fact that 88% of people are less inclined to return to a site after a bad UX makes it a key factor for businesses to retain customers. A good UX is not just critical for customer engagement and retention but it also drives business value, according to a study by Forrester, every $1 that’s being invested in UX returns $100.

The saying ‘well begun is half done’ is aptly well-suited in this context of creating unique, intuitive, and engaging user experiences that simplify the user’s journey across the platform, and building Information Architecture (IA) is the first step towards achieving this goal.

An IA is a blueprint that guides your team while designing the UX for any digital platform. It is in fact one of the most valuable and necessary aspects while embarking on the journey of creating digital solutions. It is a collaborative task often shared between the design, development and engineering teams.

In this article, we will learn about information architecture and how it functions as a backbone while crafting user experiences for your products.

What is an information architecture (IA)?

Information architecture can be defined as a method of organizing, structuring, and labeling the content of a website, web or mobile applications.

The ultimate goal of an IA is to establish an easy and logical decision-making process for the end users of designed product.

Date source – 3 Elements of IA

The art and science of creating Information Architecture

Information architecture has roots in both library science and cognitive psychology.  Let us take a moment to understand these terms individually.

Library science

Libraries have always been associated with the practice of information science. Library science is the study of how to categorize and catalog information resources. The two defining traits of library science are:

1. Categorizing – defining things by similarity

2. Cataloging – creating metadata and assigning it to content in order to find it again in the future

Cognitive psychology

Cognitive psychology is the study of how our minds work —  what mental activities take place in our brain and what different factors influence our attention. Majority of the UI/UX design rules we have today have roots in cognitive psychology. Information Architecture uses some elements of cognitive psychology to define the way information should be structured.

Here are a few key elements of cognitive psychology that are most valuable for IA

Data source – Elements of cognitve psychology

Gestalt principles: Gestalt principles explore users’ visual perception of elements in relation to each other. They show how people tend to unify visual elements into groups according to their similarity, continuity, or closure. It focuses on good figure, proximity, similarity, continuation, closure & symmetry.

Mental models: It is the users’ perception about certain things based on their past experiences. For e.g. it could be expecting the user to close a particular website/app window on clicking the button represented by a cross in the box.

Cognitive load: Cognitive load is the amount of information that a person can process at any given moment.

Recognition patterns: People visiting a website or using a mobile app expect to see certain features associated with a specific product. Designers apply various recognition patterns to make the interaction familiar.

Visual Hierarchy: Visual hierarchy is directly related to content readability. One of the essential points to consider for architects is scanning patterns — before reading a page, people scan it to get a sense of interest. The most common scanning patterns are F and Z patterns.

We derive most important components of the information architecture from the understanding of the library science and the cognitive psychology. Let us understand what these components are and how do they help in shaping up the entire information architecture.

Components of information architecture

Components of IA

Information architecture is comprised of 4 components –organization system, labeling system, navigation system and search system

Organization systems – Categorization of information, e.g., by subject or chronology.

Labeling systems – Representation of information, e.g., scientific terminology (“Acer”) or lay terminology (“maple”).

Navigation systems – How users browse or move through information, e.g., clicking through a hierarchy.

Search systems – How userssearch for information, e.g., executing a search query against an index.

Types of Navigations in Information architecture

Hierarchical Navigation – Making one choice per screen until the user reaches the destination

Flat Navigation – Switching between multiple content categories

Content Driven Navigation – Moving freely through the content or the content itself defines the navigation

Now that we have the fair understanding of the Information Architecture, let us look at how to build one.

How to build an Information Architecture

The structure of an IA is based on the requirements of the project and the iterative nature of the design. It may vary from project to project. IA forms a firm base and supports the various design changes that may be done throughout the progress of the project.

Before defining the information architecture, the first step is to develop a supportive document. Based on the acquired business knowledge and the understanding of the users’ pain points. With these points in mind, adocument consisting of information like company goals, user goals, user personas and competitor analysis, etc. is created.

The process of designing an Information Architecture:

To define the information architecture we will follow a 5 step process.

1. Group the content

In this phase, we sort the content and group it under different umbrellas and define the content set.

In case of a redesign project, revisiting the entire structure and determining which information sets to keep and which ones to get rid of in addition to deciding where new content is required is the first step.

Card sorting is one of the most effective & widely used UX tool for content grouping

Data source

2. Create a site map

High Fidelity App Map for an Investment App

In this phase, the user goals and the purpose of the digital platform is defined. Post which the user journeys with different sets of tasks are created.

The user journeys helps in understanding the movement of the users on the digital platform and the interlinks between the pages.

3. Outline the navigation structure

The navigation structure is created based on the business understanding. Any of the navigation types mentioned earlier in the article can be used as a foundation and the entire structure can be built on it.

Detailed Navigation structure of an e-commerce website

4. Refine content labels

In this stage, the content is labeled according to its purpose. These labels are linked to create the structured categorisation, consisting of sections, sub-sections, links, toggles etc.

Precise and easy to understand content Labels for the catalog level -2 Section of e-commerce app

5. Create wireframes and conduct usability test (Writing Scenarios)

Wireframes created for an app to test the journey for the proposed IA

It is good practice to test out the information architecture early-on in the project and make changes as it progresses. Hence in this stage, user scenarios are written. Post which the wireframes are tested with these scenarios.

This process is critical to help understand user pain points and design failures. We can then iterate the design as required.

6. Defining areas for analytics integration. (Plugging in the analytics)

Example of an app map created for insurance company showing the analytics plugins

Analytics plays an important role in creating user journeys. This phase will help in identifying the focus areas of the users, the functionalities they will use most, and their pain points. This becomes a precursor for plugging in analytics to the digital platform.

Also this data comes in handy for future iterations as it can be used as a guide and changes can be made to the design in order to solve the problems and improve the user  experience. Hence, once the architecture is created, the decision can be made based on the goals of analysis and select tools as per requirements

In conclusion, Information Architecture is an integral part of an experience design process. A well structured IA is a powerful tool that ascertains methodical and easy navigation through a digital platform and ensures a seamless flow for content discovery. The nature, levels, and detailing of the architecture can vary according to the project. However, creating an  IA is a must for every experience designer and it is a critical step before embarking on the design journey.

The global COVID-10 pandemic disrupted our lives in a manner we never imagined or prepared for. As is obvious, visits to restaurants, shopping malls, multiplex theatres all come down drastically. According to The National Restaurant Association, more than 110,000 restaurants in the U.S. closed for business in 2020. On the other hand, the need for social distancing, safety concerns, and lockdowns resulted in a steep growth for delivery services like DoorDash and Uber Eats which grew by more than double in 2020. 

Even outside of food delivery, ‘online delivery ‘of almost everything has become a part of the new normal. In April this year, Amazon reported an increase of 220 percent in its profit compared to the same period last year.

Source

Prior to the COVID-19 outbreak, e-commerce and food ordering through mobile apps were common in many countries. However, the in-store purchase was preferred in some categories. According to Nielsen, only 4% of grocery sales in the United States came through online channels last year. In March 2020, Instacart, Walmart Grocery, and Shipt have seen surges of 218%, 160%, and 124% respectively in the number of downloads compared to the previous month. The urge to change habits is also reflected in new demographics (e.g. those above 60) opting for online shopping.

Many believe that it is not a temporary phenomenon but a permanent change in behavior impacting grocery, pharmacy, food, and other industries. Beyond just a web or app design, business models are likely to be affected. Setting up of ‘dark stores’ – outlets that look like supermarkets but closed for customers and geared to be hubs for online delivery are a reality. Mini automated fulfillment centers at the back of large stores, with some even using robots, are getting traction. Stand-alone restaurants and supermarkets will face a tough situation compared to the consolidation possibilities of a brand of chains – e.g. Pizza Hut, KFC, Burger King, etc.

At Robosoft, we are seeing a surge in inquiries for digital solutions for online delivery in the US and other geographies. Several enterprises are likely to create native apps and websites to cater to this demand leading to a surfeit of such experiences. Enterprises are already battling issues such as app fatigue, poor user retention, and lack of brand loyalty. How can they maintain a competitive edge? Here are a few pointers:

Address the concerns on safety and hygiene upfront

The first step towards creating a compelling digital experience is to understand the consumer pain points through empathy and craft a solution that intuitively solves that problem. In these times of anxiety, understanding customer needs, their mindset, motivations, and barriers are even more critical. Design Thinking workshops, even held remotely, can help enterprises gain valuable insights into the consumer mindset. Consumers need the reassurance of safety precautions undertaken by the brand – in any form of delivery service. A norm of the remote-working era – over-communicate is worth following as contactless delivery, safety precautions taken by the staff need to be visually highlighted.

Clear, bold, reassuring message from Pizza Hut on their website.

Details of safety precautions followed by Pizza Hut mentioned on their mobile app for customer reassurance.

Image source

Like most delivery apps, Postmates offers contact-free delivery choices. But they also encourage customers to report if their delivery person appears unwell. The company has also set up a Fleet Relief Fund to help employees with COVID-19 medical expenses.

The Kroger app added a designated FAQ section for COVID-19, which is explicit for users to look for COVID-19-relevant answers.  Walmart puts COVID-19 updates at the top of their shopping page. Users can tap and learn what Walmart is doing to provide a safe shopping environment. 

Swiggy a leading delivery app from India, recently added a ‘Care Corner’ feature in their app. It is a dedicated section within the app around COVID-19 offering users options for sending home-cooked food, sending care packages, getting medicines and groceries picked up.

The Care Corner section on Swiggy’s app

Be honest about the constraints of the new normal

During the early days of lockdown, supermarkets were overrun and shelves emptied by people stocking up supplies. E-commerce apps could not sell several non-essential products and even the essentials were delayed in terms of delivery. While consumers may be irked by such developments and even express their disappointment, deep down they’d understand that these are extraordinary circumstances and cut some slack for their favorite brands. However, consumers would rather prefer an attitude of ‘under-promise and over-deliver’ in these times and also likely to be more forgiving of snafus. So information about delayed turnaround times, unavailability of stocks, price surges if any, and replacement options must be conveyed upfront and not as unpleasant surprises at the end of a purchase process.

Details of pickup locations, product availability, and order status on the Instacart mobile app.

Put customers in control with a choice of delivery and technology

Now more than ever, customers would appreciate the simplification of processes. They already have enough to deal with at home. So any simplified process – from ordering through voice-enabled speakers, messenger platforms or a smartwatch, virtual trial of a dress (for a fashion e-commerce brand), re-order of previously ordered medicines, offering a subscription service can go a long way in feeling that’s one less weight off their shoulders. Delivering products at the chosen time by the consumer, option of curbside pickup are also examples of putting the consumer in control.

Domino’s makes it easy for its customers to order from any device

Shoppers can order essentials and non-essentials items in the same purchase on the Walmart app for curbside pickup or delivery.

Image source

Aid product discovery: use a recommendation engine to anticipate needs

The nature of the anxiety and concern for taking precautions can make consumers unsure of all that they need to stay safe. For example, grocery shopping apps can aid consumers by highlighting immunity-boosting products. Food delivery apps can add product badges which could highlight nutritional information or the number of orders in the past hour – giving some sort of assurance of making a safe choice. The role of a Recommender System is at the core in recommending items and driving customer conversion by auto-suggesting the right product to customers based on needs and behavioral data. Amazon is known for putting it to great use – 35% of Amazon.com’s revenue is generated by its recommendation engine.

Such systems get better over time which subliminally cues to the user that this brand understands me and my tastes. It helps in building loyalty and improving the average ticket size of orders.

Beyond transactions, offer relevant content for engagement or information

Aside from assurances of safety, there is plenty of scope to create engagement through relevant content. Food delivery apps such as Zomato have already integrated recipe videos which consumers could find valuable when the propensity to try new recipes at home is high. The insurance brand Discovery from South Africa is a great example of providing value-added content beyond merely selling a product.

Image source

Instacart provides three options to the users if an item is unavailable:

1. Shoppers (assigned delivery partners) can choose the best replacement for the unavailable item
2. Users can designate a substitute item.
3. Leave out the item when unavailable.

Instacart’s app provides three options to the users if an item is unavailable.

In the coming months and years as more and more brands adopt digital solutions and online delivery models, meaningful product-level differentiation will be difficult to achieve. The competitive edge would really lie in the positive sentiments the digital experience evokes in a consumer, thus subliminally generating brand affinity. It is an appeal to the emotional brain which drives brand purchase decisions than the rational brain. The choice of the right digital partner in the experience economy is also a key factor in providing a competitive edge to enterprises.

In one of our webinars, Mart to cart: role of digital experiences in online delivery, we discussed the evolving consumer behavior and key factors that can help delivery services in crafting great digital experiences. You can watch a recording of the session here.

Metrics are an integral part of business success. As the management guru Peter Drucker said, ‘you can’t manage what you can’t measure’. Across B2C and B2B, enterprises and functions within them, chase their own metrics. They may see varying value in Net Promoter Score, Customer Acquisition Cost, CSAT (Customer Satisfaction), and various user engagement metrics such as MAU (Monthly Active Users) and Retention Curve. However, they are all likely to agree that Customer Lifetime Value is a meaningful and relevant KPI to indicate the long-term health of a business.

Customer lifetime value, or CLV, is a predictive performance indicator that allows you to quantify the total value of a customer if they were to form a long-term relationship with your company or brand. In simple terms, it is ‘revenue earned from a customer (annual revenue multiplied by the average customer lifespan) minus the initial cost of acquiring them’. So the incentive for enterprises is to invest in long term relationships with customers. In establishing such relationships, the quality of digital experiences is critical more than ever before in today’s world.

The 5 levers of digital innovation

Increasingly, customers tend to base their perceptions of credibility, trust, and overall value of a brand through its digital experiences. In financial services, self-service dashboards, humanized banking, investment advisory, frictionless lending are common features which are digitally enabled. Personalized infotainment with natural language support and curated recommendations are seen in entertainment services. Similarly, across domains, enterprises can acquire segmented customers and offer a wide range of services by leveraging 5 levers of digital innovation:

Lifestyle Enrichment: With a combination of data and digital experiences, enterprises are in a position to know more about consumer needs and fulfill them at every stage in life. For example, in financial services brands can offer seamless client onboarding, personalized recommendations based on goals, advisory via a panel of experts, aggregate spend analysis, and provide tips on savings.

Recommendations to improve lifestyle such as goal planning, tracking performance of investments, providing a consolidated view of assets and liabilities, need-based promotional marketing, just-in-time recommendation, and so on are already in vogue.

Similarly, enterprises in other domains such as media & entertainment and e-commerce can use analytics and digital design to enrich their customers’ lives. The customer and relevant data should move across channels (app, web, wearables, bots, social, kiosk, branch, call center, advisor, distributor) seamlessly and securely. Such services will have to be made available on the most-preferred channel or location. While it can be challenging enterprises must remember that modern applications demonstrate many advanced characteristics that are driven by the user journey and help in addressing user needs.

Customer Experience: Many would know Design Thinking in abstract terms but very few have applied it in practice tied to customer’s “digital body language”. Many of the apps in the market may be superficially attractive – colorful in design, but weak on purpose, interaction style, or blending cutting-edge innovations. Firstly, there must be an emotional connect with users. Next curiosity must be evoked to learn more about the services and the ease of discovery or use. Once the app crosses the chasm, customer delight and adoption happen. Design Thinking principles can help businesses understand consumers better, empathize with them, and uncover valuable insights about their stated and latent needs & pain points. But beyond just principles, Design Thinking is action – helping enterprises understand their user’s pain points, conducting faster experiments, and finally building a product that drives business results.

Designers and data scientists must converge to deliver a multi-modal, intelligent, and self-learning application to millennial customers. Technologies such as facial recognition, voice, video calling can be used to address customer pain points and enhance the overall experience.

Enterprise Grade Platform: Companies shall decouple Digital from Core via Open API and monetize services usage via open-source technologies. Each business application must be architected as a collection of cloud-ready enterprise-level micro-services inter-connected to digital use-cases that can be discovered, reused, and deployed across the company. Examples include customer onboarding, multi-factor authentication, personalized UI templates, work-flow engine, product catalogue, information overlay via AR, campaign manager, video & chat conversation, virtual assistant, recommender engine, predictive analyzer and blockchain storage.

Automation: Many companies have scratched the surface on operational processes and customer interaction automation. It has been automation of mundane back-end jobs and less of a hybrid approach of humans and robot’s judgment working in tandem. Successful digital transformation must focus on enterprise productivity, contextual interactions, and real-time recommendations.

Robotic Process Automation unifies enterprise-level data to bring context to customers, integrates regulatory compliance into standard operating procedures with exception reporting, delivers always-on services, and enrich human interactions. Convergence of RPA and AI will drive revenue and profitability and cross-sell to customer’s needs. Companies must bring automation to software deployment and rollout to markets via agile practices. Automation of marketing aided by AI, geo-location intelligence, and big-data user-item profiling is a necessity.

Insights: Insights about what motivates customers and their actions can be drawn from every conversation, transaction, relationship, grievance, and social sharing.

Analytics reside at the edge-node, and can provide insights on cross-sell, product holding, customer profitability and lifetime value, attrition and loyalty, customer sentiment, channel search & usage, transactions, service requests, leads, campaigns, churn, product profitability, risk, advisory quality and more.

The real value of dashboards lies in anticipating early and accurately what your customers want and acting on it.

Recommender system: driving retention and engagement

The role of a Recommender System is at the core in recommending items and driving customer conversion by auto-suggesting the right product to customers based on needs and behavioral data. A robust Recommender System will discover information for customers and “what to recommend” depends on the context i.e. movies, news, shopping, loans, insurance, funds, stocks, grocery, food, etc.

A Recommender System helps the company to increase revenues by providing the most likely items that a customer can purchase or increasing the engagement by showcasing the relevant product or content. It will encompass a context-based virtual assistant capable of mining data, text, audio, video, facial, and generate automatic responses from past experience and context by applying Deep Learning principles.

There are various models and methods to build an intelligent Recommender System:

Collaborative filtering systems are based on large sets of customers who bought similar products and uses ratings or performance to make a suitable recommendation. It works usually on customer-item interactions e.g. item bought, time spent. In case of the sparseness of ratings, auxiliary information such as item-content can be used via collaborative topic regression machine learning algorithms.

Content filtering systems look at customer profile and metadata on items and creates a watch list, and also recommend similar items to customers that this customer has liked in the past. A similarity scores calculated between any two items and recommends to the customer based on profile and interest. It starts with creating item profiles for each of the items. The customer profile is created using item profiles that the customer has liked and recommends items that this customer might like based on earlier preferences.

Unsupervised Learning has no label data and no prediction of any output. It finds interesting patterns and forms groups within the data. Clustering is typically used for customer segmentation and anomaly detection.

Natural Language Processing is an area where machines learn and understand the textual data to perform tasks. NLP collects text documents, divides the sentence into words, removes stopwords, converts the text into a numerical vector, and tracks unique words as vocabulary, counts the word, and normalizes the frequency of word occurrence.

Text Mining using machine learning involves building a text classification model and uses it for predictions on text data and to predict the sentiment of any given product review. Embedding technique can compare two distinct viewer journies on similarity and predict the probability of conversion by analyzing the average time spent on each of the unique pages. This is also used in supervised ML across use cases such as next possible action prediction, converted vs non-converted, product classification.

Deep Learning provides better feature extraction from item characteristics (text, image, video, audio). Deep Learning techniques such as convolutions and recurrent neural networks allow to model the structure and order in the data for performance improvements. Collaborative deep learning allows two-way interactions between rating matrix and content. With Deep Learning, the properties of the content (images, video, text) are incorporated into recommendations. Using Deep Learning, item-to-item relations are based on a much more comprehensive picture of the product and less reliant on manual tagging and interactional histories.

In summary, companies must think of customer and user scenarios first. Be a customer-focused data-driven company and measure critical moments of interaction to cross-sell and upsell with a Wow experience! You also need a reliable long-term partner who can provide advisory on digital, design a human experience, and engineer a scalable and intelligent solution to market.

‘Walk a mile in their shoes’ is often used an expression to convey that the design thinking process is built on empathy. As Design Thinking professionals we work on diverse projects and user needs. Sometimes, we may not be able to fully understand the motives, pressures of others’ lives.

Is it really possible for an urban male executive to truly feel how it is to be a single working mom or experience the challenges of say, working in an oil rig? I can never truly feel how it is to be a doctor using a critical patient information app, that too in the pressure of a hospital scenario. I can at best, get a peek into their lives in such a situation.

Hence, in my view, we have to understand ‘empathy’ within a context and realize its limitations as we are all shaped by our own influences, limitations, experiences and biases. That’s where Usability Testing comes into play as it can provide first hand information and insights for actual users.

Design Thinking is a holistic problem-solving framework and involves these key stages:

• Empathize: Understand the user’s needs and problems
• Define: Analyze the observations to define the problems
• Ideate: Think of solution to each aspect of the problem
• Prototype: Develop solution prototype for each aspect of the problem
• Test: Test the product using the best solutions identified

The last phase is as critical as any other as it provides directions to product owners, strategists and designers for iterations and tweaks. Also as Design Thinking can play a role in transformation of any process – business development, operations, finance, marketing or product development it can truly impact business growth. In that context direct feedback from actual users eliminates guess work. It can also save expensive re-work in correcting flaws well before they are discovered in the marketplace.

Usability Testing: the fundamentals

The key intent of a Usability Test is to test the functionality of designs with real users in order to get a flavor of ease of use, navigation and other parameters. However, instead of leaving it all to observation and gut feel, the process involves thorough documentation and follows a process. A website, mobile app or any other digital product could be tested through this method.

There are two types of methods:

(a) In-person testing in a laboratory environment and (b) remote testing using a set of software tools. The former has an observer who is silent throughout the process and only monitors the behaviour of users and then reports the outcome. In the latter case, the screen activity, facial expressions are recorded by automated software applications.

The process involves 6 broad stages:

User groups: the participant characteristics are naturally determined by the product intent. As a thumb rule, the sample size should have 9 participants per country (2 pilot, 5 regular and 2 backup).

Tasks: we need to identify key user journeys based on the objective of the app or the digital product. It could be completing a transaction for a banking product or completing a survey in a website.

An example task scenario for a restaurant table reservation app could be:

• Finding a restaurant
  You live in Charlotte and would like to reserve a table at an upscale restaurant to mark a special occasion

• Choosing the location
  You would like to find a restaurant which is not very far from your place of living

• Finding types of cuisines
  Since it is a special occasion, you’d like to experiment with gourmet food, maybe an exotic cuisine which you have not tried before

• Making a reservation
  You have identified a suitable restaurant and would like reserve a table for two

• Receiving confirmation and viewing a reservation
  Once booked you would like to receive a confirmation alert and also view the upcoming reservation

• Editing your reservation
  You would like to change the timing of your reservation and increase the number of guests to 4.

Metrics: we then need to create standards of measurement by which design, ease of use, efficiency and performance can be assessed. The metrics could be objective (metrics that you can measure without relying on subjective interpretation) or subjective (metrics that rely on subjective interpretation of the test participant)

Environment: this includes creating a setup to make the users feel comfortable and have all the necessary equipment at hand. These could include relevant devices, documentation for ratings and a suitable lab test location.

Usability tests: among the various methods used are Task Sheets, heat maps, observations and rating charts. A task sheet typically records the success rate (2 = Success; 1 = Needed Support; 0 = Failed) and time taken to complete a task. While Heat Maps provide a high level overview of the drop and success rate, observations add the human angle by noting facial expressions and other emotional reactions. Finally, asking the users to rate their experience while using the product gives testers and stake holders a feel of the ease of use.

Test Reports: a typical test report will include an executive summary, goal of the test, methods used, data overviews, walk-through of the results of each task and actual quotes (positive & negative) from the users.

Usability Testing is increasingly being adopted by enterprises to minimize risks and validate product features before launch. Across the globe, there are several venues, including academic institutions which host Usability Testing Labs. Moving forward, co-working spaces which offer cost savings and convenience through shared infrastructure equipment, utilities etc., could offer such services to enterprises – all it takes is a room and some basic equipment.

The benefits of Usability Testing

More than ever before, customer experience defines business success today. A poor experience on a website, mobile app or any other digital product can mean loss of a customer forever. Very rarely do customers give brands a second chance to serve them.

At Robosoft, we believe in simplifying lives through delightful digital experiences. A robust Usability Testing exercise gives enterprises a better chance of providing a great customer experience, the new battleground. It can help get validation from actual users and get a first hand feedback if it meets their expectations. It can point to barriers which need to be overcome, help point out errors and assumptions. Those working on any creation can get far too attached to it and lose a sense of objectivity – they may not see the features and navigation methods the same way as the actual user.

Usability testing is a great way to manifest empathy, which is the starting point to any Design Thinking effort. In other words, it is a small but effective investment in the larger scheme of things – well worth the effort in crafting delightful digital experiences.