top of page
Word Fusion Plugin
Quickbase
Screen Shot 2022-11-10 at 5.26.14 PM.png
Laptop.png

Overview

Quickbase acquired a company that made Quickbase plugins, and the plugins needed to be modernized and re-designed to look and feel more like Quickbase. The Word Fusion plugin allows Quickbase users/builders to create templates for Microsoft Word documents, such as invoices, and provide a button in Quickbase tables for end-users to be able to download PDFs or Word documents with data from a specific table row filled in, similar to the function of a mail-merge. This project highlights the builder side, which is a panel directly in Microsoft Word, where users/builders are able to create, edit and delete templates.

​

​

Problem

The existing Word Fusion plugin had an outdated and confusing design and followed the acquired company's style guide and patterns.

​

Goal

Word Fusion should be re-design to look and feel like Quickbase, and allow users/builders to easily manage templates, including creating/deleting templates, mapping fields/reports/charts, and push template changes to the cloud. It should also integrate well with Microsoft Word, following Word's panel guidelines. 

​

Role

Lead designer, interaction designer, user researcher - 

Evaluated the existing plugin design, researched the restraints of Word's panel guidelines, wireframed, prototyped, conducted usability testing, iterated on designs.

​

Methods

UX review, wireframing, prototyping, usability testing

Tools

Sketches, Balsamiq, Figma, Microsoft Word's documentation

Things to Consider

Microsoft Word has requirements for 3rd-party panel designs such as including a more menu, an X to close, and a log out button for Quickbase. Their guidelines also included restraints such as the inability to drag and drop items between the panel and Word page, and pattern specifications for selecting menu items. Any dialogs would have Word's chrome, but allowed Quickbase styled content.

​

​

Process

Existing Design

​

Screen Shot 2022-11-10 at 1.59.40 PM.png

UX Review

I evaluated the function and architecture of the existing plugin, and collaborated with the project's product manager to understand the user/builder pain-points. Pain-points included outdated look and feel, confusing and unintuitive flow of screens, and too many unnecessary and time-consuming steps.

​

​

Sketches

In the re-design, I chose to break up the management of multiple templates and the editing of templates into separate screens, since users tend to work on one template at a time rather than switching between multiple templates. During the sketching phase, I considered empty states, errors, loading for progressive disclosure, and screen flow.

​

IMG_4473.JPG
IMG_4474.JPG

Third Iteration of Wireframes

I followed the notification pattern of panels in Quickbase including transient banners, rather than using Word dialogs that the user needs to close every time. During the iteration of 3 sets of wireframes, I set up regular design check-ins with stakeholders such as the team's product manager and development manager.

​

3.3 Show template panel.png
3.4 Create a template.png
3.9 Error.png

Prototype

I collaborated closely with the team's visual designer and content designer during the process of making the hi-fi prototype. The content designer was particularly helpful with suggesting names and locations of buttons, specifically considering the limited space of the panel. The visual designer was particularly helpful with choosing which elements appear on hover, with the intention of providing a less cluttered look but also considering accessibility.

​

Usability Testing

I conducted 6 usability testing sessions with customers. I asked participants to run through 3 tasks using the prototype. Most users found the design and flow to be intuitive and seamless. There were a few especially interesting and helpful findings, such as:

  • Some users did not know that they could scroll and there was more content below the fold

    • Next step: consider tabs or collapsible sections​

  • Some users were unsure about the difference between the panel's Save button and Word's save button

    • Next step: talked to the content designer and decided to change the panel's "Save" button to an "Apply changes" button with a tooltip to explain that it updates the template in the cloud that is connected to Quickbase​

​

Results, Reflection and Next Steps

Overall, based on the response of the usability testing sessions, the new Word Fusion plugin is much less complicated, and therefore less intimidating. Considering this, I hope that this feature will be more widely used, and save end-users a lot of time and effort when generating documents that include data from Quickbase.

​

One of the most challenging aspects of this project was working with Word's guidelines because I had to include work-arounds that are not ideal to the user experience, and there continue to be a lot of unknowns. For instance, I did not know until midway through my usability testing that I would need to include an "Add field" button under the list of fields because Word does not allow list item clicks to make changes on the Word document.

​

Next steps include iterating on the prototype based on usability testing findings, another round of prototype validation, and being on standby for design tweaks during implementations in case developers come across unpredicted obstacles regarding Word's restrictions.

Quickbase
Plugins Management
Interaction Design and User Research
2022
Laptop.png
1.5.1 Browse Quickbase plugins.png
bottom of page