Quick Data Edits

New Feature

Goal

Allow the user to edit information directly from a table report.

Methods

Competitor analysis, design thinking session, journey maps, informal interviews, usability tests, accessibility testing, survey, high fidelity designs & handoff

Contributions

Conducted UX Research an analysis to provide key insights.
Produced high fidelity mockups, including wireframes, accessibility guidelines, and technical specifications.

Overview

We modernized the UI by allowing direct edits to data stored in tables.

Here's the Benefit:

Faster ability to update records.
Integration with the new forms release.
Improved accessibility when editing records in a grid report.
Optimal workflow enhancements when updating records.

The Process

Overview

Table reports are a central piece to the Quickbase software so we knew that we had to get it right. This is why we incorporated an extensive research process.

Competitor analysis
Design thinking session
Design concepts & prototypes
Informational interviews & usability study
Accessibility study
Survey

1.0 Initial Research

Competitor Analysis

I conducted a competitor review of Smartsheets and Airtable.

I found that if edits are automatically saved, it is important to easily allow users to undo changes.

Smartsheets had some great visual affordances to indicate if something had been saved.

Design Thinking Session

We recruited 9 participants from a range of internal Quickbase teams including consulting and enablement services, technical support, product marketing, product management, solutions consulting, and product training.

I led the group in the following exercises:
Start, stop, continue
Hopes & Fears/Press release
Feature Ideation
Top picks from the feature ideation

From this I learned:
• Prioritize keyboard shortcuts
• Users expect a fast, intuitive UI, and want decreased editing time
• Error control will be very important

2.0 Design Concepts

User Journey Map

We created rough user journey maps for key interactions. This helped us to quickly identify important decisions that we would need to make about this feature such as, how would a user save their work? How would they start editing a document? Would a user expect different sections of the page to be active independently from one another, or would most users see the page as one interactive unit?

Prototypes

The initial phase of prototypes focused on:
• Navigation
• Activation
• Keystrokes
• Color coding
• Disabled data
• Widget states such as required, error states, builder help text and character count
• Widgets such as text fields, multiple-choice fields, numeric fields, numeric formulas, and formula updates

Prototypes are in Axure and Figma.

3.0 Additional Research

Accessibility Study

This research was conducted with two blind users. They were asked to navigate the through an excel document using accessibility software. From this we gathered information about the expected behavior of the software for a person who uses Jaws or other assistive technology.

Usability Study

We conducted 8 usability sessions with customers and internal Quickbase employees.

We focused on navigation, keystrokes, activation, warnings, widget states, and how a user would expect to start editing a document.

Key insights included that users wanted to click directly into the data to start editing. Additional findings included changes to the "required" field, stronger visual affordances for edit mode and concerns aboutautosave.

Survey

To get a feel for how a large percentage of our customers would react to our designs, we sent out an A/B test survey. Within a few days we were thrilled to have over 100 responses. This enabled us to validate our design direction.

"Wow. That is fantastic! - so excited to see this. Share with team in 16th minute too? Great work" -Principle UX Designer

4.0 Refinement

Design Revisions

We delivered high-fidelity designs to the development team outlining in detail specifications for design elements, accessibility, and edge cases.

Limits & Challenges

Limitations

Starting small- This feature had a large scope, so we broke it down into several phases.
Considering current customers- We performed extensive research with current customers to understand their workflows.
Delivering an MVP- We focused on delivering an MVP product. Some features such as autosave were too large to include in the first iteration of this project.

Challenges

Dependencies- There was a lot of product knowledge to consider when planning this feature update. I relied on my teammates who had in-depth product knowledge to identify any problems that may arise.
Working with the Dev. Team- The development team led spikes to identify potential technical issues early on so that we had time to create designs that considered these limitations.

Results &
Reflections

Results

We successfully created an intuitive and updated user interface allowing quick edits for data.
I sharpened my skills in accessibility and managed a year-long impactful project adding significant value to the company.