.png)
Plugins Management
Quickbase
Overview
Quickbase acquired a company that made Quickbase plugins, and they already had an interface for browsing and installing these plugins. This plugins management area needed a major re-design to utilize Quickbase's styling and components. It also needed a simplified installation and configuration process, considering that it is no longer third-party, and the installation is now happening from within the product itself. The design had to be scalable and able to handle a vast amount and variety of plugins in the future. This area of the product is specifically for admins and builders to set up plugins for apps and tables for end-users to use.
​
​
Problem
The installation process of plugins from the acquired company has many steps that are no longer relevant now that the installation will happen within Quickbase itself. The design is also outdated and using the acquired company's styling/patterns.
​​
Goal
Create a design, using Quickbase's style and patterns, that allows Quickbase admins and builders to easily browse, choose, install and configure plugins for their Quickbase apps and tables.
​​
Role
Lead designer, interaction designer, user researcher -
Evaluated the existing design, created a sitemap, sketched screen layouts, wireframed, prototyped, conducted usability testing, iterated on designs.
​
Methods
UX review, sitemap, wireframing, prototyping, usability testing
Tools
Sketches, Lucidchart, Balsamiq, Figma
​
Things to Consider
While there will only be 5-10 plugins available in the next 2-3 years, it is important to consider scalability because there will be hundreds of plugins in the long-term future, including third-party plugins made by other companies or developers outside of Quickbase. For now, these designs are meant for 5-10 plugins, but leave room for components to be added later for further organization such a filters, a search bar, an accordion, and tags on plugin cards.
​
​
Process
Existing Design
​
UX Review
The existing flow was fairly organized and intuitive, but the content was inconsistent and lengthy. I worked with the team's product manager to understand which aspects of the existing design were unnecessary now that plugin installation would occur within Quickbase rather than through a third-party. Some aspects that were no longer needed were the rating system, the subscription plans, and many installation steps.
​
Sitemap
I worked with the team's product manager and development manager to understand the requirements, scope, technical restraints due to the short turn-around time, and limitations due to the existing architecture. Based on this, I used Lucidchart to map out the flow of screens of this new area of Quickbase where plugins will live, considering breadcrumbs, dialogs, cancel buttons, back buttons, next buttons, X to close, and more.
​
Sketches
During the sketching phase, I was careful to include mainly components and patterns that were already in our product or design library due to the short-turn around time. However, I pushed for the addition of the card component to our design library through this project because I believed they would be the best way to display each plugin in the browse and installed plugins areas. Cards are a great way to include visuals, text and action buttons in a uniform way to help users distinguish between choices. Additionally, they are customizable to include more information later, such as error states or tags for further organization.
​
%201.png)
%201.png)
Fourth Iteration Wireframes
Initially, this design process was quite confusing because it was not always clear which aspects of the existing design were being carried over or not. I chose to limit my medium to sketches and lo-fi wireframing during this stage for more rapid iterating. I added design check-ins twice a week with the team's product manager and development manager for more efficient and effective use of our time.
​
Prototype
During the prototyping phase, I worked closely with the team's visual designer and content designer. I was originally going to only have an install button as a place for users to check out the various plugin options that Quickbase had to offer, but I later chose to add the "Browse Quickbase plugins" tab. Since this is a new feature being added to the product, we want to spark curiosity and want admins/builders to feel comfortable simply taking a look at all the plugins we have to offer without the pressure of installing. I also made the decision to only show the plugins included in the subscription plan rather than show the ones they cannot install because I did not want to create a dead-end path and negative experience of showing something the admin/builder cannot easily have.
​
Usability Testing
I ran usability testing sessions with 6 customers, asking them to walk me through 3 tasks using the prototype. Some helpful feedback included:
-
Participants expected a settings button rather than a "view details" button on installed plugins cards, since one implies that changes can be made by the user, and the other implies view only information.
-
Participants did not understand why the "edit launch button" was not located in the "edit plugins settings" area. This was originally designed to be in the plugin view details dialog since the process of editing the launch button is more Quickbase configuration rather than plugin configuration.
-
The carousel of photos in the view details dialog are too small
-
The description, overview and key points in the browse plugin dialogs are too redundant
​
​
Results, Reflection and Next Steps
Based on the results of the usability testing session and reviews from peers, the design is overall simple and intuitive for the small number of plugins we will have in the next few years. As more plugins are added, we will need to start considering filters, sorting, tagging, search, an accordion for organization of plugin options, and a favorites system.
More recently, there have been conversations about using this plugins layout for other tools, such as reusable formulas, scripts, app templates, and more. We are also working on a parallel installation flow where users can choose use a template app to fill in all the installation steps for a plugin, rather than manually inputing data into a setting form.
