9 Pro Tips to Design Useful Digital Advisors

The concept of digital advisors is growing, both in popularity and strategic importance, as they represent an important piece in the digital customer experience puzzle. Today’s companies must transform into becoming trusted advisors for their customers. Trusted advisors who facilitate simple, straightforward and hassle-free digital experiences wherever the customer is.

And with this realisation, comes another revelation — not all digital advisor are equally good and successful; UX is critical to the success or failure of digital advisors.

“User Experience (UX) is the art of figuring out what the user really needs.”
 
Randall Koutnik, Sr. UX Engineer at Netflix.

To figure out how to design successful digital advisors, we invited the SMARTASSISTANT Interface designers Fabian and Lukasz for an interview.

1. What should I consider before starting with the design of the advisors?

Any good UX and user-centered design founds on having a deep understanding of the future advisor users. Find out who they are, what they need, what they value, their abilities, and also their limitations.

There are also some of your own business’ aspects you should factor in. What’s the overall business goal? What are the project requirements? Which objectives do you want to reach with the advisors?

All of these different aspects will influence the way you’ll approach your advisor design project.

Being prepared and having a solid plan means you won’t have to backtrack as much later. A little extra work at the beginning saves you a lot of time and effort at the end.

2. How does the design process look like? Who should be involved?

Involving the project manager (when should it be done) and product managers (how should it be done) in the early stages and throughout the design process safeguards the advisor against not meeting requirements and objectives.

Clarify the visual style using your brand’s visual style guides and corporate brand standards. This allows for many of the UI decisions to be made with the confidence that everything is in-line with your company’s look and feel. So the user feels “at home” when using the digital advisor.

Design with real content. “Lorem Ipsum” often comes in handy in design projects when the actual content isn’t available. An advisor project is different. The advisor flow will dictate which interaction and design elements (e.g. checkboxes, radio buttons or sliders) are required and how they should be aligned for an optimal user experience. This is why we suggest having an early advisor draft ready before you start getting creative with the design.

It doesn’t have to be fully fleshed out yet, but having an approximation in terms of content is going to reduce the strain of the design dramatically.

Paper Prototyping. Source: Usability Geek

Use sketches and wireframes for prototyping. They give you and the project managers an early close-up view of the advisor design.

  • Paper prototypes. The most basic form of prototyping to explore the efficiency and usability of your design. Good for brainstorming and inviting feedback from others due to its simple format.
  • Interactive wireframes (lo-fi prototypes). Adding a little interactivity into your wireframe allows for early testing, which means quicker feedback! No need for complex interactions, just make important elements clickable so people can actually use the design.

3. What makes a good digital advisor UX?

This question can’t be answered without referring to the 7 factors that describe user experience according to Peter Morville, a pioneer in the field of UX design.

User Experience Honeycomb by P. Morville.

Any application for your customers needs to be designed in a human-friendly way. As the above image demonstrates, this means it needs to be:

  1. Useful — The purpose of any digital advisor is to help people make decisions. Keep that goal in mind when designing it.
  2. Usable — The advisor needs to be clear, simple and easy to use. Your advisor should be designed in a way that’s familiar and easy to understand. Don’t force your users to think too much or put in a lot of effort. Ease of use is vital. Speed is important too.
  3. Findable — Integrate your advisor where users in need of advice and support can find them easily. Here are some tips on how and where in the customer journey you should integrate your advisors. Within the avisor, information has to be easy to find. If a user is ever uncertain on how to proceed with the advisor, it shouldn’t take much for them to find prompts to get them back on track.
  4. Credible — This one is important. The advisor and the content need to be trustworthy and the design can help a lot with that. The Stanford Web Credibility Research Group has listed the 10 guidelines for building the credibility of an online application.
  5. Desirable — The advisor needs to look good, attract the users and then keep them engaged.

⋅ Visual Aesthetics. There is a great deal of desirable power in Emotional Design.

⋅ Less is more. Overloading the user with content and busy interfaces for aesthetic is counterproductive and harms the UX. Ensure every design element in the advisor is purposeful!

⋅ Speed matters. The advisor should be clear, to the point and not have unnecessary waiting.

⋅ Available everywhere. Your digital advisor should work on all devices and platforms in the same way.

6. Accessible — Design the advisor in a way that people with disabilities are able to use it as well (ADA Standards for Accessible Design).

7. Valuable — Your advisor should always be providing value to the user AND your company. Both by providing a better digital experience and contributing to the bottom line.

4. Which elements should be part of an advisor and how should I use them?

Naturally, the focus point of any advisor is the questions and answers. These are the absolute lifeblood and purpose of the advisor.

However, beyond defining these (very clearly!), there are a few other elements to keep in mind that are really useful and improve the end-user experience:

  • Info texts. These should be easily accessible and available to provide more (relevant) information on demand for any user that needs help to understand the benefits of available options.
  • Images and icons. Fitting images have a two-fold benefit: 1. They create an emotional connection. 2. They describe things very quickly and succinctly. So they’re well worth using!
  • Progression bar. The feeling of progress is mandatory to a successful advisor. It indicates where the user is in the process and gives them orientation.
  • Main navigation buttons. These are usually Back and Forward buttons. It’s still worth mentioning these should fit your company’s branding seamlessly!
  • Ideally dynamically update the result whenever the user selects and answer to involve them and show them that something is happening. It lets them see the impact of their answers and helps grow the engagement! Tip: Don’t just display the results. Present an explanation as to why it was recommended too.
An overview of all the elements combined. Source.

5. What about responsive interfaces?

We have a few key rules of thumb that we abide by when designing our responsive digital advisor interfaces:

  1. Design mobile-first. Since users will be using it on a variety of different devices and platforms, we like to start designing for the smallest device first and scale up from there. If someone can navigate it with just their finger, they can definitely navigate it on a desktop!
  2. K I S S. Keep it simple stupid. When it comes to your advisor, keeping it simple, uncluttered and giving only necessary information will always improve the success of your advisor. No matter what device it’ll be used on.
  3. Minimize load times. Compressing images, optimizing website assets and finding every opportunity to reduce load times makes for a far better experience.
  4. Maintain brand consistency. Your company likely has a defined style and branding scheme. Keep it consistent for all devices to allow for a seamless experience.
  5. Test with a variety of platforms and devices. Make sure you’re testing the advisor on different devices and operating systems to consider the specifics of different platforms.

6. Should I use interaction effects? Do they make sense in an advisor?

Smart animations and subtle effects can make a drastic difference to improve the user experience. They can be fun, inventive, helpful and even downright awesome looking.

Word of Advice: “smart” and “subtle” are the key words. Use these animations with care to keep users engaged. Avoid distracting them from what you want them to do, which is choosing the right product, service or solution.

With that in mind, here are some smart transitions that tend to work well in advisors.

Animated Scrolling

If the advisor is long and not all parts are visible, you can use animated scrolling via a button press/ This allows the user to scroll between different sections — e.g. questions and the result — with little effort, and adds engaging qualities to the advisor.

Animated Scrolling example. Source.

Automatic Forwarding

Automatic forwarding immediately forwards the user to the next question after answering a question. This can be used to accelerate the process, avoid unnecessary clicks and keep users engaged. However, this option should only be used in digital advisors that

  • Use mostly radiobutton questions (single selection) to avoid user confusion and keep the interaction behavior consistent.
  • Use simple questions and answer options. Automatic forwarding can increase engagement and session It also removes user control which might cause the loss of context. For example, if a user selects the wrong option they would have to backtrack to correct it. This can cause user dissatisfaction with the experience, which is why it should only be used for simple questions and answers!
Automatic Forwarding example. Source.

Infinite Scrolling

Instead of using pagination to display the results spread across different pages, you can use infinite scrolling to reduce the number of clicks the user has to make to browse through your suggestions. This keeps interest piqued, and invites them to browse and get inspired.

Infinite scrolling results example. Source.

Fade in

Tool tip infotext are powerful ways to educate users and provide them with supplemental descriptions or further information while keeping the UI simple.

If you use tooltip info texts in your digital advisor it’s best to fade them in when desktop users hover over and when mobile users click on the element (e.g. an icon or text label).

Fade in example. Source.

7. What are some advisor design do’s and don’ts?

That’s a good question and pretty straightforward to answer. In general, every design choice that makes the advisor easier to understand and easier to use is a clear do. Everything that doesn’t help the user is, obviously, a don’t.

However, what these things are is pretty unique to the target audience, and what they’re used to experiencing on your website.

Related: How to Create Digital Advisors That Work in the SMARTInsights Series (incl. Do’s and Don’ts Guide)

8. Which tools do you use or recommend?

There are a couple of tools available that you can use to make your digital advisor design project successful. We think these 3 are especially useful for the design or digital advisors:

  • UXPin is a collaborative design platform that enables users to create responsive, interactive wireframes and prototypes.
  • Invision is a web-based design prototyping tool that helps you build fully interactive prototypes complete with gestures, transitions and animations.
  • Sketch is made specifically for Mac OS X users and is perfect to design interfaces, websites and icons.

9. Do you have any final tips we need to know?

We actually have two ‘top tips’ for you:

Think Outside of the Box

The most important tip in terms of the design we can give is that you don’t let yourself be limited by existing concepts and rules and conventions. Best practices do exist, and should be respected, but they should never be a limitation to your creativity.

Some ideas will work, some won’t. But if you never try to go beyond what you ‘know’ in terms of your creation, you’ll never innovate. And in our experience, the most exciting advisors that we’ve designed for clients were the result of playing around with ideas and trying new things.

Always be Testing

As a web designer, it’s hard to get the user experience right the first time. You’re never going to be able to fully predict how a user will approach what you’ve made.

That’s why it’s crucial to always be testing what you create. Try out different ideas and imagery. Play to different tendencies of your target audience. UX design is never going to be successful without effective testing alongside it.

We have seen how split testing even small tweaks can dramatically improve conversion rates and user experience.

We hope this was helpful and interesting for you. If all of this has wetted your appetite for designing your own advisor you can start with a free SMARTASSISTANT Trial. The application doesn’t only allow you to create digital advisors, it also boasts a design and theme editor to bring your design ideas to functional reality quickly.

Create or modify your design, define colors and fonts, and specify the interaction behavior via the beautifully easy-to-use design and theme editor.

Do you have a question that hasn’t been covered? Just leave a comment.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.