<200b> ai Archives - millermedia7

How to build Design Systems to Scale

By | ai, design, user experience | No Comments

In our ever-growing tech world, we need the design to scale as fast as other aspects of that world do. But design doesn’t scale easily since it’s a mixture of art and science, form and content. So how to achieve this?

Design Systems can be the answer.

Let’s dive deeper into this and see what they are and how they can help scale design.

Anyone who has ever played with Lego can understand what a design system is. It’s basically a Lego-like method+process that product teams need to make design and development more consistent. In fact, a lot of folks have already come to the idea that they need design systems. 69% of enterprise companies either use a design system or are currently working on one.

The core benefit of design systems is that they help establish consistency between the design and development processes and eliminate repetitive work. In a design system, everything starting with design patterns and ending with code references for each little bit of design are being documented. As a result, design and development go hand in hand.

 

If this still sounds unfamiliar to you and you still cannot grasp the idea of design systems, just take a look at Google, Spotify, Atlassian or any other big brand. They have got their very own design systems.

 

When Spotify’s Design Director Stanley Wood joined the design team in 2012, he was shocked at the lack of consistency between Spotify’s products and features from the design perspective. And since a redesign didn’t solve the problem, he decided to find a better solution. He knew that a team of distributed designers that is spread across different time zones should have a chance to work together to create a coherent experience.

 

So, in 2014 GLUE (a Global Language for a Unified Experience) came into life as Spotify’s Design Language System. It is available throughout the company and it has helped align design across all design teams within the company.

Version 1 of Spotify’s Guidelines | Stanley Wood

Google’s Material Design is another successful design system. Note that it evolved over the last few years to become what it is today. And it’s still evolving. Do you remember how in 2011, Gmail was redesigned with flatter buttons? Then in 2012, Google Now introduced layered “cards.” These elements are now all formalized under Material design but those design upgrades back then were a part of a larger, very purposeful and deliberate process.

What has been most impressive is Google’s ambition to unify the design across a set of varied products. Hence, Material Design can serve as proof that design is POSSIBLE to scale.

Image source

But how?

Well, there are a few steps you would want to take to be able to build a design system to scale. Here you go:

  1. Check if you really need a design system

There is always the possibility that you might be carried away by the trends, the hype. A lot of us often start looking for solutions for non-existent problems. Yes, this does happen. But then, it turns out that we have not checked the problem yet. So, if a simple redesign will work for you, then there is most probably no need for coming up with a design system.

 

The idea is that you should really do your homework and see if your company needs it or not. Building a design system or outsourcing it to a design and development company will take time and money. Estimate your needs properly before allocating resources to building a design system.

 

  1. Make sure your people know what to expect

Not everyone understands the value that design systems provide. So, your responsibility will be to teach your team what a design system is and how it can help make work easier. Be the influencer, the trend-maker in your company. Call it whatever you want.

 

If you have decided to build a design system, the company is going to pay for it. So you might want to make sure all the stakeholders are positive about the idea. With this in mind, maybe it’s worth involving someone from your team who has done this before or has helped someone earlier to build a design system? Think about it!

 

  1. Develop a game plan

Remember the famous quote? “By failing to plan, you are planning to fail.” It seems obvious that you need a game plan but a lot of people don’t plan the work in advance and then they get into trouble due to unexpected circumstance or force majeure. Of course, you cannot foresee a force majeure but you can at least have plan B if it happens.

 

So, basically, the idea is that you need to define your mission or goal or a set of values and go for them. Each company has got its own industry-specific challenges, so take your time to evaluate the situation, explore the opportunities, the pain points for your team and customer in order to build the right system for your needs. And most importantly, focus on creating a design system that is consistent and scalable.

  1. Review and adopt best practices

Don’t start from scratch, it might take too much time and resources. Review existing design systems and see which one is closer to your vision. Many companies have made their design systems publicly available. So, why not take a look at them?

 

  1. Conduct a UX/UI audit

You are conducting a UX/UI audit to know what you are working with. This whole thing is pretty much about documenting what exists. This can be time-consuming, but the game is worth the candle since through a UX/UI audit you will discover:

  • Why conversions are low
  • How to improve onboarding
  • Why retention rates might be low

In other words, you will get a clearer understanding of who is using your product and what problems they are facing. After the audit, you will come up with improvement strategy based on the things you have learned.

 

  1. Do it little by little

A design system is not a project, it’s more of a product. Hence, it needs to evolve and become more refined. It’s a living document. Make sure your design system has got a roadmap and all product-related stuff. Take it through a few iterations, talk to your team to clarify what’s coming next, and then set a new list of problems that you will be solving. Iterate as much as possible until you come up with something that makes sense.

  1. Stay organized

Creative people love the chaos but it should not be the case here. Document everything! Sounds simple, right? But it’s sometimes really hard to do things the “neat and clean” way rather than the “quick and messy” way. Staying organized reduces clutter in email or Slack and helps keep the team sane and happy. Otherwise, you might end up where you started – chaotic styles everywhere!

 

Most importantly, know where you will be storing all your creations and how you are going to make them accessible to your team members.

Conclusion

As soon as you feel the need to have a design system for your company, you will want to jump into building one. If you are going to do that in-house, then make sure you communicate with your peer designers and take into account the above steps to build the best possible design product ever. And if you are thinking about delegating the work to another company, then make sure to choose a team that knows how to do it right.

 

Voice Interfaces: New Era Of Human-Computer-Interactions

By | ai, interaction design, user experience, voice | No Comments

Voice interaction is the ability to speak to your devices, have them proceed your request and act upon whatever you’re asking them. Today voice user interfaces are everywhere: we can them in smartphones, TVs, smart homes and a range of other products. The rapid development of voice interaction capabilities in our daily lives makes it clear that this technology will soon become an expected offering as either an alternative or even a full replacement to, traditional graphical user interfaces.

According to Gartner, by 2018, 30 percent of our interactions with technology will happen through conversations with voice-based systems.

Amazon Echo
Apple’s Siri, Amazon Echo and Google Now, which have been available for a few years, prove that this technology is no longer in its infancy.

Voice interaction is the next great leap forward in UX design.

In this post, we’re going to explain why voice interfaces will be the next big thing and what does this trend actually mean for designers of the user experience.

What Are Driving Forces Behind Voice Interaction

Before we dive into the specific implications of voice interaction systems or design aspects for them, it’s important to understand what’s lead to rapid adoption of this new interaction medium:

Technology is Ready

It’s clear that improvements in natural language processing have set the stage for a revolution. In 2016 we saw a significant breakthrough in natural language processing, and we’ve reached a point where advances in computer processing power can make speech recognition and interaction a viable alternative to visual interfaces. Another important thing is a number of devices that support voice interaction – today almost a 1/3 of the global population is carrying powerful computers that can be used for voice interaction in their pocket, and it’s easy to predict that a majority of them are ready to adopt voice interfaces as their input method of choice.

Mobile app and voice input
Image credit: Samsung

Natural Means Of Interaction

People associate voice with communication with other people rather than with technology. This means that voice interaction systems can be a more natural way of interaction for the majority of users.

Voice interaction chart
Image credit: Google Mobile Voice Survey 2014

People Want a Frictionless Experience

To interact with a voice interaction system all users need to do is to simply speak to the devices and be understood. In comparison with graphic user interfaces (GUI) where users have to learn how to interact with a system, voice interaction systems can significantly reduce the learning curve.

Windows 10
Even the most advanced graphical user interface still requires humans to learn a computer’s language.

Opportunities For Business

Adding Personality To Branded Content

Companies can leverage the medium of voice interaction as an extension of their personalities. Gender, tone, accent and pace of speech can be used by experience designers to craft a particular customer experience with their brand. For example, kids may finally get to talk directly to their favourite cartoon characters.
Branding

Make Experience More Personalization

Using voice-based system it’s possible to create a deeper personal connection to the system. Even today if you look at the online reviews for Amazon’s Echo speaker, it’s clear that some people establish a close bond with their device in a way that more resembles a pet than a product.

Samantha from Her
Samantha from Her

Voice Interfaces Aren’t a New Direction, They Just a New Step In UX Design

If you are new to designing voice user interfaces, you may quickly find yourself unsure of how to create great user experiences because voice interaction represents the biggest UX challenge since the birth of the iPhone. They are very different from graphical user interfaces and designers cannot apply the same design guidelines and paradigms. But while designing for voice differs from traditional UX, classic usability principles are still critical to the quality of the user experience.

Understand The Basics Of Human Communication

To design great voice user interfaces, you must handle the expectations users have from their experience with everyday conversations. And for that, we must understand the principles that govern human communication: how people naturally communicate with their voices.

Understand User’s Intent

Voice-based interactions between a user and a machine can lead (potentially) to infinite possibilities of commands from a user. While designers may not be able to predict every possible user command, they need to at least design an infrastructure that is contextually driven. For that, it’s important to start with a use case (a reason for interacting in the first place) and try to anticipate users intent at each point in the conversation (to shape the appropriate response).

User Intent
The processing flow of a comprehensive speech interface. Image credit: API

Provide Users With Information About What They Can Do

While on a graphical user interface, a designer can clearly show users what options they can choose from, it’s impossible to do this on a voice interface. In voice user interfaces, it’s almost impossible to create visual affordances. Consequently, looking at a device that supports voice interaction, users will have no clear indications of what the interface can do or what their options are. Therefore, it’s still possible to provide the user with the options for interaction. For example, if you design a weather app you can make it say: “You can ask for today’s weather or a forecast on this weekend.”

Limit the Amount Of Information

While with graphic user interfaces you can present a lot of different options, with verbal content, you need to keep the information brief so that the user does not become confused or overwhelmed. It’s recommended that you don’t list more than 3 different options for an interaction.

Craft Meaningful Error Messaging

Error handling is an essential component of designing thoughtful voice interactions. The wide variation in potential responses places much more emphasis on the importance of crafting meaningful error messaging that can steer the conversation with the user back on track if something goes wrong.

Use Visual Feedback

It’s recommended to use some form of visual feedback to let the user know that the system is ready and listening. Amazon’s Echo is a good example of this: on hearing a user say ‘Alexa’, the bluish light swirls around the top rim of the device, signalling that Alexa’s ‘all ears.’

User Input and Amazon Echo
Image credit: thewirecutter

Conclusion

Voice is the next big platform – it represents the new pinnacle of intuitive interfaces that make the use of technology more natural for people. Properly designed voice interfaces lead users to accomplish tasks with as little confusion and barriers as possible. And the good news is that UX designers already possess the skills they need to design effectively for voice.

Conversational Interfaces

By | ai, onboarding, user experience, user interface | No Comments

You may have heard that “conversational interfaces” (interfaces that mimics chatting with a real human) are the new hot trend in digital product design. Several factors are contributing to this phenomenon:

  • With the advent of WhatsApp, Slack or Facebook Messenger the way we exchange information changed irreversibly. According to Business Insider, we are now spending more time in messaging apps than on social networks.
  • Artificial intelligence and natural language processing technology are progressing rapidly. Major technology players including Apple, Google, Microsoft and Amazon placed huge bets on this type of interfaces, leveraging big data and machine learning to get as close to human intelligence as possible.

This represents an interesting shift in how we think about user experiences and interactions, more as a text/voice based ‘conversation’ that helps us to achieve our goals. In this article, we’ll examine all major aspects of conversational interfaces in the context of chatbots.

5 Basic Principles of Conversational Interfaces

1. Be specific about chatbot purpose

Unless you develop a bot like Facebook M, it’s always better to deploy a specialized, purpose-driven bot to engage your target audience. Don’t try to design your chatbot to do everything all at once. Instead, identify the core use cases for your chatbot based on user’s goals and focus on achieving domain mastery.
Faceboom M

2. Mimic natural conversation

Keep in mind that when the conversation is the interface, experience design is all about crafting the right words: bots must use and understand natural language. A vocabulary that’s limited to only a handful of generic answers will immediately destroy an illusion of real conversation and leave users feeling frustrated. Nobody want to participate in chats muffed by pre-determined answers.
Conversation flow with Hi Poncho chatboat
An early version of the weather chatbot Hi Poncho struggled to provide any meaningful information due to a limited understanding of natural language. Image credit: Gizmodo

3. Make it clear what options are available for user

In traditional GUIs, what you see is what you get. However, with conversational interfaces, the paths that the user can take are virtually infinite. For conversational interfaces, users should know what paths are available for them. If you app is complex and has a few main routes, you can use an onboarding process to show the users what’s available.
Onboarding experience in Kia Niro
Kia Niro using the carousel to explain how to use a chatbot. Image credit: Sabre Labs

4. Avoid lengthy messages

Lengthy messages look like text paragraphs. People don’t speak in paragraphs, we speak using single sentences. You should plan for no more than 90 characters per message (around three lines on mobile). Anything more than three lines of text seemed to activate the tl;dr (too long; didn’t read) response in users.
Too long sentences in KAYAK
Kayak chatbot hits the users with 4 opening messages, totaling nearly 750 characters. Most users glazed right over when they saw the wall of opening messages.

5. Animating the conversation

Animation can take the chatbot user experience to the next level, making the interactions more natural and pleasurable for user. Simple typing indicators can be used as an equivalent to phatic expression in speaking, making the conversation flow smooth.
Chatbot and animation
Typing animation via Buzzfeed

Best of the Best

Conversational interfaces open lots of new possibilities how you can interact with users. Below are two popular apps that successfully embraced the new paradigm of conversational UX:

Domino’s Pizza

Domino’s pizza allows “conversational ordering” via Facebook Messenger. Customers add Domino’s pizza as a friend via Facebook, set up the basics of their account, and can then “reorder their favorites” or ask for the latest deals.
Domino's pizza chatbot
Domino’s Pizza via Techcrunch

Duolingo

Duolingo is a language learning platform which uses gamification and personalization to make learning a new language effective. Last year Duolingo introduced Bots. This feature allows users to practice language skills by texting with a ‘Bot,’ which takes on different topics as a way to explore a range of conversations, such as going to a restaurant, going through border checks, or ordering a taxi.
Domino's pizza chatbot

Conclusion

Whether you love them or hate them, conversational interfaces have started making a significant impact in communication. Of course, most of them today have certain limitations and they don’t have human-like conversations perfectly that’s why it’s so important to follow basic principles of conversational interfaces  mentioned above. But in the near future, continuous advancement in machine learning and artificial intelligence technologies will fill this gap and we will see AI-powered chatbots which will have human-like conversation.