Dynamic Grid
Designing a no-code configuration experience for powerful data grids
Role: Research, Product Design
Type: SaaS Product
_Services
-
Requirements gathering
-
SME & User interviews
-
Comparative Research
-
Information Architecture
-
UX/UI Design
-
Stakeholder collaboration
-
Engineer collaboration
-
Enablement and technical writing support
_Deliverables
-
Design research database
-
IA map
-
User flows & decision trees
-
Wireframes
-
Hi-fi mockups and prototypes
-
Socialization & marketing assets
_Outcomes
Unlocked top business use cases for major clients.
​
Delivered highly performant, flexible data grid viewing for end-users.
​
Empowered digital Creators with an intuitive, configuration based programming experience
NDA Protecting Company's Intellectual Property
The content below may seem a little vague. It is by design :)
Reach out to me if you'd like to hear more
_Understanding the Problem
Spreadsheets are great - they’re flexible, powerful, intuitive. Unfortunately, as processing systems grow and evolve, users are required to manually connect, track and manage data between spreadsheets and digital applications. We set out to understand this opportunity and provide value for our business, customers, users, and Unqork Creators with a native v1 data grid.
Grids are entire products in themselves; so our challenge was to abstract the implementation of a grid enough to provide a simple, fast, intuitive experience.. without sacrificing the quality our users expect.
​
Read more about the problem space here 🔗
Who is this for?
Our Business: Data grids have grown to be a vital part of enterprise processing. The products available had limited solutions for data-centered apps, relied on manually connecting spreadsheets and kept our customers away from a unified digital transformation.
​
The Customer: While spreadsheets were designed to be visual calculators, our enterprise customers needed a database to store, track, and transfer data and support business-critical processes. They needed to perform complex data analysis at scale, rapidly iterate as regulations evolve, and protect their business information.
The Creator: The no-code Creator is tasked with building stable, performant, secure, and maintainable solutions for the end-user. Often faced with high expectations for productivity, we set out to design a modern and intuitive way to deliver best-in-class data grid experiences.
The System User: Spreadsheets have been a part of our data journeys since their inception in the 1970s. Between Microsoft’s Excel, Google’s Sheets, or Apple’s Numbers our end-users rely on strong patterns and have high expectations when it comes to grid capabilities and performance.
What do our current customers need?
We had a client commitment to deliver a solution for their use cases. Not only did this give us a target date for delivery our first version, but it gave us a jumping off point for requirements gathering, validation and prioritization.
We gathered feedback from customer teams on their experiences using our existing data viewing components, connecting them to databases, and using integrations to solve for their use cases. It was important to understand what problems they were trying to solve, the features they might need, and assess reusability across clients and industries.
What do our future customers need?
While this was a substantial input for our research, we also interviewed subject matter experts and customer managers to understand common use cases for data grids across industries; finance, insurance, healthcare, government etc.
How have others solved for this?
Investigating best practices for data grids, and auditing comparative products helped validate our insights as well as inform requirements, design direction, and best practices.
_Trust the Process
When designing for a Creator Platform, we are often looking at two sides of the same coin; the experience of the end-user interacting with the application, and the Creator who is building that experience.
Apply an iterative and lean approach
User stories based off our research helped us not only empathize with our Creators and end-users, but evaluate the needed technical grid features based on feasibility, effort, and what would unlock the most value.
We knew we wanted an alpha, beta and v1 launch that was featured enough to address key use cases, but lean enough to provide value incrementally as we got feedback and learned more. For design, this meant having a well-architected component that easily lends itself to new and evolving features.
Getting the team together
The cross-functional team worked closely together to decide on a technical direction that struck the right balance between product capabilities, UX flexibility, and architecturally scalable. It was clear that what we had would be the first step towards a suite of data grid products - each with its own strengths.
In the case of Dynamic Grid, this meant indexing on data analysis and use cases requiring performant large data sets.
The end-user experience
Fortunately, our technical direction led us to a robust and flexible front-end solution. By focusing on the best end-user data grid experience first, we developed a deep understanding of the decisions a Creator is faced with when configuring for their use case. This resulted in a strong sense of a data grid IA and the requirements when viewing various data types.
​
-
Is the user there to view, edit or add data?
-
How do they expect numeric values to be formatted?
-
What actions might they take based on the data?
With that, we formed a comprehensive outline of jobs to be done when designing for the Creator's experience.
The Creator experience
On the configuration side, we knew we had to consider the context under which a Creator is configuring the data grid. The first decision a Creator would make around the end-user experience is whether the data grid was to some degree editable or view-only. Next, from a data perspective, they would determine where the data was coming from - whether it was a database, the user, or a combination of both. This informed the rest of the configuration flow because we knew that Creators would quickly start thinking about mapping data to individual columns.
​
-
What is their mental model for a data grid operates?
-
How might they decide where their data is coming from?
-
What is the base configuration needed to validate their design?
​
We recognized there was an urge to preview the configuration with live data, so they could test and validate their configuration as soon as possible. To enable this iterative behavior, we required little input upfront by providing default behaviors that could be modified as needed later.
An agile attitude
Following the architectural work, we were able to further develop and refine specific feature areas in incremental releases. By having the cross-functional team focus on specific problem areas, design and engineering worked synchronously to define acceptance criteria, identify technical constraints, and rapidly deliver incremental value to our users.
_The Solution
1. Spreadsheet-like editing experience
Dynamic Grid supports a spreadsheet-like end-user experience focusing on inline editing, quick data entry, cell-like structure, and support for keyboard-based navigation.
​
2. Column-driven configuration
Instead of a spreadsheet-like open canvas, Dynamic Grid supports a column-driven configuration approach giving Creators the ability to configure the columns and validation rules upfront, reducing user errors and improving data integrity compliance.
​
3. Rich UX patterns
While staying true to the spreadsheet-like look-and-feel, Dynamic Grid allows you to build a richer experience with support for a variety of different column types (including multi-select dropdown, date-picker, & button) and customizable options for each.
4. Comprehensive support for calculations
With support for Unqork’s logic components, Dynamic Grid allows you to efficiently perform complex calculations and business rules and service complex business requirements.
​
5. Data exploration & analysis
With built-in support for row grouping, data aggregation, filtering & sorting, end-users can organize, explore, & analyze their data to meet their needs. For more complex analysis, Dynamic Grid also supports Pivot-mode allows users to pivot their data in real-time.
6. High performance
Dynamic Grid is built for high-performance workflow unlocking the ability to work with large data sets in real-time on the client side.
​
7. Part of the Unqork component ecosystem
As part of the Unqork Component ecosystem, it has an easy drag-and-drop configuration experience and supports the rest of Unqork components to enable deep integration with your application and even more complex use-cases.
​
​
​
Watch a demo here 🔗
No code, no problem
On the open of the Dynamic Grid configuration screen, the standard Display, Data, Actions, & Validation accordions with related settings appear. Settings on this screen refer to component-level configuration, in that they affect the entire component/grid’s behavior. In some cases, (e.g. the 'Allow user to sort by column' setting), this may mean shared behavior (i.e. the ability to sort) across all columns in the grid.
​
After defining a column within Column Setup, the settings icon provides the ability to open settings specific to that column type. This is analogous (conceptually) to smaller atomic components, matching the Creator mental model of configuration. Choosing a column not only affects the data type of said column’s data but also the way that information is rendered, filtered, sorted, & more.
Configuring Display
Allows Creators to configure the way in which the data grid is viewed - whether it’s information density or navigation.
Configuring Data
Allows Creators to determine the source of the data and it’s representation in the grid.
Configuring Actions
Allows Creators to provide the end-user affordances for actions, configure triggered operations based off grid events, and conditional logic.
_Reflection
Obstacles:
Given the state of the platform, we were unable to feasibly explore solutions that modularized UI, data, and logic configuration experiences, or solutions that lent themselves to a more WYSIWYG experience.​ Though hard to let go, that told me I was passionate about the problem space - and had plenty to think about for future iterations.
Challenges:
Since the technical team chose to move forward with a specific implementation to index on performance (informed by product strategy), design was often tasked with synthesizing specific behaviors from technical documentation to then abstract for our Creators.
Lessons:
It was an enlightening experience to witness the technical mountains the engineering team faced sprint by sprint. I’ve always felt that design transparency was important for clarity and trust. This project taught me how game-changing it is for ideation and productivity as well.