BrightWhistle’s

Friendlier Form-Builder

• HIPAA & PHI compliant lead generation and social media advertising platform.

• Unique in its integration of social advertising and lead generation via Facebook, Twitter and Google Adwords.

• A Facebook Preferred Marketing Partner

Clients:

• Advertising Agencies

• Health care providers

• ACOs

• CROs

Leads are generated through forms embedded on landing pages built in the Brightwhistle platform

Landing Pages

Leads are generated through forms embedded on landing pages built in the Brightwhistle platform

Landing PagesForm Styling

Forms are created without any styles so it can adopt the CSS of the landing page it is deployed on

Brightwhistle needs its form builder redesigned to be more user-friendly

… because its clients are about to become self-service users.

Administrative user testing & interviews

Small Workspace

All this space could be used!

Various small issuesConstrained text fields for

entering form informationNo form field sorting or

input type iconography

Unclear terminologyConfusing rarely used advanced features

New user testing & interviews

It would be nice if [the workspace] expanded wider…I can’t see everything I’ve typed…to be

able to proofread and double-check

What’s the star? If I click on that will something bad happen?

Why can’t I see the whole description I just wrote?

Is there a search feature here?

New User Comments

Personas

Ellie’s a Client Services Administrator at a healthcare marketing company. She started with the company shortly after its inception two years ago, leaving a position on the Marketing and Communications team at a hospital. She has a degree in Communications and New Media, and because of her background has particular familiarity with the healthcare industry.

Ellie’s been with the company long enough to know the software’s quirks. She is accustomed to the parts that are harder to use, and has figured out ways to work around them that are now so habitual she doesn’t even notice them.

Ellie the Expert“Huh, is that feature wonky? Seems ok to me.”

Technology Comfort Level:

Technological Capability:

New Skill Acquisition:

New Skill Retention:

Learning Style:User Type: Internal, Client ServicesPermissions Level: High

Ned is a millennial and grew up on the internet. He enjoys technology and learned most of what he knows by breaking things and then fixing them. This means he has a tendency to shoot first and ask questions later when it comes to using technology.

Ned is a junior member of a hospital marketing team. He works on an iMac and uses Photoshop and InDesign for design work. He also maintains the organization's social media and accesses email through the browser. The most complex online user interface he uses is a CMS similar to Wordpress. He received no training in how to manage this CMS, but figured it out on his own.

Ned the Nerd“Brace yourself: New fields are coming.”

Technology Comfort Level:

Technological Capability:

New Skill Acquisition:

New Skill Retention:

Learning Style:User Type: Client, AdministratorPermissions Level: Medium

Vicky is a baby boomer who worked her way up the corporate ladder. She respects what technology can do, but avoids using anything that she is uncomfortable with. This means that she limits her use of technology to the Microsoft Office suite, her Blackberry and Internet Explorer.

Vicky is the Vice President of Public Relations and Marketing for a hospital chain. The majority of her day is spent in meetings and on the phone. Despite her status, she is known to periodically take on lower-level projects. She believes it is important for her staff to know she can still handle daily PR and marketing tasks. Vicky works on a desktop PC and attends training when she must learn something new.

Technology Comfort Level:

Technological Capability:

New Skill Acquisition:

New Skill Retention:

Learning Style:User Type: ClientPermissions Level: Low

Vicky the VP“Technology isn’t really my cup of tea - so I hire people for whom it is.”

• Redesign information hierarchy

• Make it easier to find existing fields

A friendlier form builder

• Expand the workspace

• Improve iconography and feedback

• Solve the “New form fields” issue

• Clarify some confusing terminology

We looked at popular form-builder products to learn about existing conventions.

We wanted to get an idea of what a new user might expect to see.

Comparative Analysis

1

1

1 Field Options are divided into Field Types and Pre-Formatted Named Fields, allowing the user to quickly select the appropriate field.

2

2Users select and drag fields from the list on the left into the preview space on the right. They can reorder fields by dragging and dropping them within the preview window. The form preview refreshes with each change.

3

3 Selecting the “Name” field populates the form with First and Last Name fields automatically. Likewise, the Address selection creates two street fields, followed by city, state, zip code, and country fields.

1

1 Here users can quickly customize new fields. They can name the field, select an input type, and make the field mandatory, among other options.

2

2 Iconography clearly shows the user how to find help if they need it.

3

3 Field format indicators eliminate guesswork for the end user.

4

4 Add and Delete buttons make it easy to add and remove fields.

Constraints

• Remember the development team! Make it easy to deploy

• Retain existing user interface conventions and visual elements

• Consider the needs of both administrative and new users

Sketching & Iterations

Prototype 1: Danhttps://invis.io/ZT3RVVHQ5

Prototype 1: Kendrahttps://invis.io/QU3RVH9V8

Annotations: Design Iterations

Remove Flagged Fields1Client level users are not permitted to delete form fields. In the demo environment this resulted in numerous abandoned available fields.

To date this has not been an issue in the production environment. If abandoned field issues begin to arise this flagging feature would allow client level users to note bad fields to admin users to remove or edit.

1

2

Remove Advanced Tab2Tools used to send form data to other servers and retrieve form builder code are rarely used by admins.

Client level users were confused by their presence inline and tabbed. Future iterations eliminate the advanced tab from the client level screen.

Remove Slide Out3Existing UI does not support a hover slid out, so alternatives will be explored

Tabbed Create Form Field

1

Presently, all tool panels slide out from the right side of the screen. If sub-tool panels are engaged the current panel slides off screen and the sub-tool takes its place.

This interaction confused new users, leading to think they had lost their work.

This variation used a tabbed model to engage the new form field sub-tool. During testing admin level users found it to slow their progress. Some new users had trouble finding the tab.

Future iterations suggest development time be spent to allow sub-tool panels to slide out and flat over the existing panel.

1

1

1

2

2

2

3

3

New preview window allows users to see their changes in real time, providing them with the opportunity to proofread their entries.

Form sections are divided according to type of information being entered. Section 1 - Form Info - is information for administrative use. Section 2 is where the user enters information about the form. In section 3, the user enters fields to be filled in - the actual form fields. The final section is not numbered to indicate that users don’t necessarily need to address it; it’s just for Advanced settings.

As a supplement to the preview window the current field expands to allow ample space for working. The header is yellow, to help orient the user in the process. Completed sections appear in green.

Preview Window

Expand & Collapse Workspaces

Information Hierarchy

1

1

2

2

2

Selected fields appear in a list to the right of the menu of available fields. They also appear in the preview window to the left.

Field options are sorted by type. User selects fields from a drop-down list of options, and enters content that will be viewed on the form when applicable.

Selected Fields

Drop-Down Field Menus

Design RecommendationClick to view

Workspace Expansion

1

2

3

Larger FieldsMore space to enter data; even without a preview window you can easily proofread.

2

Workspace Expands

1

Form builder workspace takes up a greater percentage of available screen space.

3Expanded Field ListsAvailable and Selected form field lists are displayed side-by-side.

Feedback & Affordances

Preview AreaForm previews can now be viewed in the tool and refreshed to show current changes.

2

Selection StatesAdded selection states provide additional information on which fields have been used.

4

Revised IconographyForm Fields display their input type such as, text, checkbox, date picker. Required form field buttons use the recognized asterisk symbol. “Required” was added above the button.

5

Breadcrumbs1Breadcrumbs have been made more visible to add in user navigation

Available Form Field Sort OptionsUsers can sort or search to quickly find particular form fields.

3

1

2

3

4

5

Permissions: Clients

Custom Fields1Client users get a curated custom form field editor, rather than the more complex admin level editor.

Curated Field Types2Special field types for common custom form fields are flexible without complexity. This also reduces the ability of bad fields tainting existing fields.

Simplified Terms3Technical terms like radio button were avoided in favor of clearer sentence based function explanations.

Default Options4Default options, specific to the field type allow for faster and more accurate form field creation.

1

2

3

4

Permissions: Administrators

Admin Form Field Editor

1

Administrators retain the option to create entirely new form fields and link to default fields.

Link to Existing Fields2

Admins can link new fields to existing database inputs if a new field names is necessary.

Advanced Tab3Rarely used Admin tools have been nested in the advance tab to reduce clutter.

1

2

3

1

2

3

Create New Field Entry1The new field entry tool has been streamlined and made more intuitive without reducing functionality.

Improved Terminology2

Unclear terms have been replaced with clear labels.

Input Type Options3Input type selection has been consolidated into a convenient dropdown. Input type terminology has been changed to standard terms

Client User Flow

Client User FlowAdministrator User FlowAdditional tools for Admin users

Adding Top Level Form Information

Adding Descriptive Form Information

Client Custom Form Field

Administrator Link & New Form Field

Recommendations

• Integrate the form builder into the landing page builder

• Enable an automatically-refreshing preview

• Add expand / collapse sections to streamline workflow and provide feedback on sections that have been completed

Thank You!