Category : UX/UI Design

UX/UI Design

Key factors to consider while designing an OTT platform in 2021

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.

OTT platforms

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.UX of content
  • Clear categorization by language, type of content (Movies, TV Shows, genres, audience segments).

UX of content

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.

AI-powered recommendation engine

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.

Personalized upsell and retention packages

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.

Preview app content

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.

Building a multi-experience for users

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.

Offline Mode

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.

Subscription models

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.

Push notifications

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.

Read More
UX/UI Design

PR FAQs – product team’s guide for creating digital products that customers love

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.

The Working Backwards process

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.

Read More
UX/UI Design

Prototyping for Designers

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.

What is Prototyping

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.

When to use Prototypes?

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.

Process from Wireframes to Clickable Prototypes

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.

Clickable Prototypes - Low & High Fidelity

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.

Read More
UX/UI Design

The role of Information Architecture in creating richer user experiences

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.

Elements of IA

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
  1. 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

key elements of cognitive psychology

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.

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 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

Hierarchical Navigation

Flat Navigation – Switching between multiple content categories

Flat Navigation

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

Content Driven 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

Group the content

Data source

2. Create a site map

High Fidelity App Map for an Investment App

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

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

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)

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.

Read More
UX/UI Design

The coming glut of online delivery apps: 5 take-aways to deliver the competitive edge in UX

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.

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

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

Online Delivery

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.

Read More
UX/UI Design

The role of User Experience, Data Science and a Recommender System in improving Customer Lifetime Value

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.

The process of ‘Design Thinking to Design Doing

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.

Convergence of UX, platform and data science in a connected enterprise

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.

Read More
1 2