1. Introduction

In this document, I will be evaluating the usability of the ONTRAPORT business automation product. You may download this document here: http://bit.ly/ontraportuxtask

 

fig 1.a ONTRAPORT Dashboard

2. Usability Assessment

This usability report is based on the knowledge of usability best practices, my conversations with the business owners, and my assumptions about why certain design decisions might have been made over the years.

The usability assessment is done is two parts – Heuristic analysis and Usability study.

2.1 Heuristic analysis

The first is an assessment of the platform based on the following heuristics. Heuristics are not specific usability guidelines, and are things I always keep in mind when evaluating a product.

  • Visibility of System Status
  • User control and freedom
  • Consistency and Standards
  • Error prevention
  • Recognition rather than recall
  • Flexibility
  • Ease of use
  • Aesthetics
  • Error event communication, diagnosis and recovery
  • Help and Documentation

2.2 Usability Study

Usability studies are carried out to get real user feedback about the product. For my usability study, I opted to coduct informal user interviews with a mix of using a questionairre and some observation of users using the system. I was able to recruit two small buisiness owners for the study.

Both business owners have been running their businesses for more than two but less than five years. They have never used business automation tools. They are both female, live in India, and fall in the age bracket of 26 to 35 years of age. One sells jewellery in a physical shop and their website, and another sells merchandise related to her modelling.

The study was carried out over a goto meeting with screenshare where the participants briefly got to take control of my mouse and use the product, while thinking out loud.

These user feedback sessions were structured in a way to get answers to the following questions:

  • What are the expectations from a product like this?
  • What features are used the most?
  • What kind of data do business owners have to deal with?
  • What kind of automation do they want?
  • What’s the order and priority of things that they do?
  • Does ONTRAPORT meet their needs?

3. Information Architecture

The Information Architecture for the product is the first step to understanding it. I constructed a mindmap using www.mindmeister.com to build my IA chart.

Comments: The Information Architecture of the product is likely a remenant of an older design philosophy, with new features being added where they seem to fit. While it may still serve the needs of existing customers who have become used to it, there are glaring complexities in the way different components of the product are arranged with relation to each other. Complexities that can be eliminated by simple or-organization

A reorganization of the product’s Information Architecture (and an accompanied UI refresh will go miles in improving the usability of the product. This however, is not in the scope of this design task, and I shall refrain from making recommendations that involved a complete overhaul of the entire product.

4. Usability Review

This usability review is the result of my Heuristic analysis and usability study. I also looked at the offerings of a competitor, InfusionSoft to get an idea about what else is being done in the space. The findings are presented in the following sections to facilitate the product developement prioritization decisions that need to be made.

4.1 Dashboard
4.2 Features and Functionality
4.3 Navigation
4.4 Search
4.5 Feedback
4.6 Forms
4.7 Errors
4.8 Content and Text
4.9 Help and Support

4.1 Dashboard

The first page I am presented when I log in is an empty contacts page. There is zero onboarding help. First impressions made me think that the page needs to be redesigned with modern design aesthetics. The ONTRAPORT Projects took me a while to find. I wonder about the thinking that went behind the decision to not make it a part of the main navigation. I went to the Dashboard from the navigation to arrive at what I think is the intended first screen the user will be presented when they log in.

The dashboard of ONTRAPORT presents data in a card UI. While this is not exactly the most intuitive way of presenting this data, it still conveys enough information to the user once they are familiar with the layout.

For example, using graphs instead of cards would be a good first step in improving the communication of the numbers to the user.

fig 4.1.b Concept for ONTRAPORT Dashboard with Graphs

4.2 Features and Functionality

The features provided by ONTRAPORT closely match the offerings of a competitor, and have been validated by the two small-business owners I talked to. So I am certain that ONTRAPORT is offering the right set of features. Any more comments about the features can only be obtained with usability studies conducted with current users of the product.

4.3 Navigation

The navigation in the product is difficult. The architecture of the product is convoluted, and has many levels of complexity that seem unnecessary. Both test participants I showed the product to (who have never used any business automation software) were confused about how the things I told them about product could be achieved using the interface I showed them. They both found the UI generally confusing.

I did not let the test participants spend more than 5 minutes using the product because it was clear that they were completely lost and I would learn very little more without teaching them about the platform.

The IA of the product (see page 5) made it easy to point out the inefficient design patterns used. (for example, the micro-interaction of creating groups specific to every object in the product such as Contacts, Sequences, Forms, etc.)

4.4 Search

ONTRAPORT is a product that easily achieves high volumes of data in it’s database. A good search function and search results delivery interaction is essential for good usability.

From what little data I populated the system with, it looks like only select columns in the tables are searchable.

Fig 4.4.a Search Results page

Moreover, there seems to be no centralized place from where users can search for objects across the entire product, if they want to.
A new omni-search instead of a page specific search could prove more helpful for users who have trouble locating files / objects in the complex IA of the product. More insight into how customers actually use the product will help validate this proposal.

4.5 Feedback

For the user, feedback in the UI answers questions across four categories:

– Where am I?
– What’s happening? Is it still happening?
– What’s going to happen next?
– What just happened?

While the product meets the basic minimum requirements for useful feedback, there are a few situations that need to be fixed. For example, when creating a new contact, or new product, there is no indication in the UI about where in the product the user is. The selection in the navigation goes away, and the breadcrumb is reduced to a “back” link. (fig 4.5.a)

Fig 4.5.a Create Products page has no indication of it’s place in the product.

On adding contacts to the database via CSV import, it was not immediately clear that it would take time for these contacts to appear in the contact table. The confirmation message on the top of the screen was not easily noticable. (fig 4.5.b) Once the proccess was complete, I got no pop up, or alert or anything informing that the contact import process was done. Moreover, the messaging communicated that the import data would be reviewed by the team – which is only half the story.

Fig 4.5.b importing contacts message

4.6 Forms

The design aesthetic of the product is entirely outdated by current design standards, and the form layout reflects that as well.

By increasing the size of the input elements, properly grouping related input elements together, and by splitting up longer forms into step by step wizards, the usability of the forms will be greatly improved.
When used on larger screens, the user’s focus is shifted from one side of the screen to the other, which will cause fatigue over time.

Fig 4.6.a The current New Contact Form

Consider the design for the same new contact page below (fig 4.6.b)

Key features of the new design
  • Larger text boxes
  • More white space between elements
  • Less required fields are hidden by default

This greatly reduces the cognitive load on the user when using this page, and allows them to focus on one thing at a time. Other features that can be implemented to help with the form experience are:

  • Automatic ZIP lookups for prefilled addresses
  • Intuitive tabbing through input fields.
  • Autosave data when input field loses focus
  • Separate “New contact” and “Existing contact” experiences. [Same can be applied for other objects in the product.

4.7 Errors

I did not chance upon too many errors, while using the product, beyond basic form input validations. An indept exploration of the product will be required for this section

4.8 Content and text

The confusing IA coupled with the occasional semantic inconsistencies get in the way of good usability in the product. The most glaring one is the group creation, view, and management interaction. It confused me, and confused both my test participants. It also made me wonder about the need for having groups in every area of the product. The funtionality of the groups seems closer to that of filters, so perhaps they should be marked as such.

4.9 Help and Support

The onboarding / help tips are buried inside the help/support menu. It should have been displayed during the first login event.

The “Start Here” knowledgebase in the documentation is very helpful, but unless new users are directed to it, they are likely to miss it. The projects in the ONTRAPORT Projects section are similarly hidden and should be highlighted.

A big selling point of the ONTRAPORT videos is that it gives people more time to focus on actual work, instead of having to manage their business. Me, as well as the test participants had trouble idenitifying which parts of the UI would help us achieve that.

 

User Onboarding

User Onboarding is key for any product. For a product as complex as ONTRAPORT, it is an absolute necessity.

In the next few pages, I shall present a proposal for the Onboarding Experience for ONTRAPORT, for a user that logs into the system for the first time, and needs direction about what to do next.

Brainstorming

Based on my conversation with two small business owners, and my exploration of ONTRAPORT’s support documentation, I started brainstorming on pen and paper and my whiteboard.

Fig 5.a Whiteboarding user flow ideas

I first identified three types of users who would use the system

  • Has an existing website and some business automation processes in place
  • Starting from scratch with no website, no data
  • Experienced user who can skip the onboarding and set up the system without help

Next, I identified common tasks that a new user will have to perform when they start with ONTRAPORT.

  • Integrate existing wordpress website
  • Set up landing page
  • Import contact list / mailing list
  • Set up payment gateway
  • Add other integrations

These steps are the ones that have minimum friction associated with them. They will likely involve just input of account credentials for services the user already uses.

By first making the user go through the low effort step, we get enough information from the users for them to start using the features of the product that make it valuable.
ONTRAPORT’s biggest selling points – the newsletters and emails, the split testing, the automated communication, and all the other features – cannot be set up without having basic information about the buisiness in the system.

Once the user has completed some or all of these tasks, they can start with secondary tasks like setting up various emails for communication, abandon cart messages, birthday communication, and sales funnels, and the other things in the ONTRAPORT demo projects page.

Usability testing with this design will reveal if there are any pre-requisites that I missed here, or should be taken out of this list.

User Flow

The User flow for the app gives perspective of the actions to be performed by the user, and the response of the system. Every block in the user flow diagram can be expanded to include more details, to help aid analysis as required.

01, 02 The User logs into the web app for the first time. The System presents the user with the Onboarding Guide.

03 User performs a selection from available options

04,09 Integrate with Existing WordPress Site: The User inputs their wordpress website address. Using this, the System generates the direct link [10] that user can click to install the OfficeAutoPilot plugin on their website [11].

05 Import Contacts / Mailing list: The user has the option [12] to import an existing list of contacts via a CSV file [13].

06 Set up Landing Page: The user can select an ONTRApage [14] from a list of three very easy to set up landing pages from the entire ONTRApages library, customize it [15] and then pulish and apply it on their website [16]. If they have specified an existing website in [9], it can be used to assist the user in setting the landing page up.

07 Set Up Payment Gateway: The user can enter the credentials for their payment gateways at this step [17].

08 Other Integrations: The user can select from a list of available integrations [18], and set them up one by one [19]. The system adds the data from each integration [20] before taking the user back to the the integrations selection step [21].

21 Save Progress: At every step of the way, the user’s progress is saved. The steps that they have already completed are marked as such, and the ones that the user has not ye completed will be indicated as pending, so that the user can choose to come back to the set up wizard whenever they want to.

22 Secondary Setup Tasks: Once the user is done with the onbaording wizard, they are taken to a list of secondary setup tasks they can perform to continue setting up the system for their specific needs. These secondary tasks have largely been identified in the ONTRAPORT projects board that new users see.

Wireframes

 

Wireframes for the onboarding flow started as sketches on paper and whiteboard. Once the skeleton of the UI is formed, the design is taken to the computer. The wireframes have been assembled in a clickable prototype using InvisionApp.

You can try the prototype here: http://bit.ly/ONTRAPORTonboarding

The wireframes for the design that follow have been designed with basic boostrap UI elements, and have been designed based on my understanding of the product’s architecture and user’s most imporant requirements. Implementation of some features may be outside the capablities of the product right now, but they are a good direction to work towards.

fig 7.a Setup Wizard

The Setup Wizard begins by displaying a welcome text, ONTRAPORT branding, and five setup tasks that the user can select to perform.

These tasks have a good investment of effort / pay off ratio for the user, and will help them set up ONTRAPORT faster. These wireframes are unable to convey all the microinteractions involved in the user experience of this design. I convey these design details during kick off meetings and in highly detailed documentation, depending on the team’s requirements.

The setup wizard is designed with the idea that by implementing it, we can allow users to explore the product on their own, without having to vet them through the sales funnel first.

fig 7.b Integrate WordPress website

fig 7.c Install Pilotpress Wodpress Plugin

The first, arguably easiest task for the user is to submit their wordpress website url, and then install the Pilotpress plugin in a new window.

fig 7.d Import Contacts – Upload CSV

 

Next, the user can upload a CSV file to populate the database with their contact / mailing list. The next few screens go through the data sanitisaton steps currently carried out in the product. Once this module is build for the onboarding wizard it can potentially replace the current import contacts experience in the product.

fig 7.e Import Contacts – verify sample data

fig 7.f Import Contacts – Import Settings

fig 7.g Import Contacts – Match data fields

fig 7.h Import Contacts – Add rules

The Landing Page setup with ONTRApages is a key offering of ONTRAPORT. it is fitting that it should be given a prominent place in the onboarding wizard.

fig 7.i Landing Page – ONTRApages

fig 7.j Customize ONTRAPAGE

The user is presented with a very limited selection of in ONTRApagee templates to choose from, and ones that are easily configurable with minimal input from users. The next few wireframes explore how a “Coming Soon” page could be customized and published by a user.

fig 7.k Publish ONTRApage

The Published website url can be quickly copied to the clipboard.

fig 7.l Succesfully published Landing Page

Payment Gateways are next.

fig 7.m Successfully published Landing Page

The user can select from available payment gateways. Each gateway may have different considerations and dependencies. The selection dropdown has a built in search box, to make searching for a payment gateway easier for the user. The next few wireframes show the addition of PayPal as a payment processor.

fig 7.n Setting up PayPal as a payment gateway

fig 7.o Adding a second payment gateway

fig 7.p Adding other integrations

This part of the Wizard is more of a catch-all than an essential setup in the setup of ONTRAPORT. The users are invited to search for the services they wish to integrate with ONTRAPORT. Whether the integration involves any user input, or a set of tasks that been to be performed outside of the product, It is a reassurance to the user that the technology they use is properly supported, as advertised.

fig 7.q Done!

Once the user has completed all the selected tasks, they are presented with this completion screen. It links to the ONTRAprojects page where they can look for more tasks to complete their setup process. It also provides links to contact ONTRAPORT support, and a reminder about where to launch this setup wizard from.

 

In Conclusion

ONTRAPORT already has a good set of features that caters to customer needs. A better understanding the usecases of the users of the product is key for making any changes to the product. The Usability Analysis I have carried out is by no means comprehensive. There are nuances about the size of elements, the typography, color selection, and even grouping of data that all contribute to the user experience on the site. I personally feel that this is something that needs to be paid a lot of attention to when desinging for enterprise applications.
The complexity in the product leaves room for many many more improvements, which I do not want to design for without a better understanding of the product and it’s users.

The suggestions I have made for the UI changes have been specifically designed so as to not disrupt the existing user flow. Rather, the enhancements will prove beneficial for new users, who will be able to get started with using ONTRAPORT much faster. If an interaction is done well, the joy of discovery a user feels on using a new interaction makes them love the product more.

About this Document

This document was created by me for the UX Design task for ONTRAPORT in April 2016.
This is the problem statement:

You may download this document here: http://bit.ly/ontraportuxtask