3 Lessons from 7 Years of Building a GUI for MongoDB
How do you build a tool for the whole team? Scratch, listen, then sweat the small stuff.
Search for “mongodb gui” and you’ll see a full search results page of ads, listicles, and tool options.
That wasn’t the case in 2013.
We were SQL users back then who liked what we saw in MongoDB, the new NoSQL database launched in 2007.
We liked the ease and flexibility of the database itself, but the mongo shell can be pretty time-consuming and the tools available at the time were not up to scratch.
And so we built 3T Data Manager, which, along with Schema Explorer and Data Compare & Sync we then combined into MongoChef.
Then in 2017, MongoChef turned into what we are today: Studio 3T.
We’ve seen the third-party tooling space grow alongside MongoDB. The growth of this independent software vendor (ISV) ecosystem is one of the reasons MongoDB has grown to be a multi-billion dollar company.
In a similarly organic way, the Studio 3T feature set has also grown wider and stronger.
How did we decide what to build and improve? We listened to our pain points and to our customers. Then sweated the small stuff.
Lesson 1: Scratch your own itch
“If you are not embarrassed by the first version of your product, you’ve launched too late.”
Reid Garrett Hoffman, co-founder of LinkedIn
We spent the first months releasing our software publicly but quietly, honing core features born out of our own pain points:
- We needed a multi-platform tool
- Viewing data was a nightmare, MongoDB lacked a proper GUI
- Comparing two collections wasn’t possible
- There was no way to debug a collection and spot mistakes in the schema
- The mongo shell could be much better
Finally in May 2014, we announced 3T Data Manager to the world.
As an “in-place data browser and editor GUI for MongoDB”, it already had the key core features which remain in Studio 3T to this day:
- In-Place Data Editing — Double-click on a cell to edit
- Visual Query Builder — Drag-and-drop MongoDB query generation
- Table, Tree, and JSON views — Flexible ways to view collections
- Schema Explorer — Easy schema analysis
- Data Compare & Sync — Compare two MongoDB collections side-by-side
By September 2014, we started gathering customer feedback through Uservoice, which we still use.
Lesson #2: Listen to customers
Features are born out of pain points — that’s why we built a GUI for MongoDB in the first place — and our customers have been instrumental in shaping Studio 3T by not holding back when they’re annoyed.
We respond to each support email and customer ticket, talk to users at conferences, and conduct regular UX sessions to better understand what works, what doesn’t, and what’s missing.
Users know what annoys them. But they don’t always know the solution. That’s our job.
Since we started using Uservoice in September 2014, we’ve seen around 520 customer tickets come in, of which:
- 214 have been completed
- 42 are under review
- 15 have been planned
- 11 have been declined
- 5 have been started
But those 520 requests pale in comparison to the Niagara of feedback we receive daily through our support inboxes, UX sessions, customer surveys, and the conferences — live and in person — that we attend, all of which gets logged for consideration in upcoming releases.
Lesson #3: Sweat the small stuff
If you use Studio 3T, here are a few features you might recognize — the first of their kind in the MongoDB tool space since replicated by many others — which came directly from customer tickets:
- An aggregation pipeline builder
- Task scheduling
- Migration between SQL and MongoDB databases (which now supports IBM DB2 and Sybase too)
- The beginnings of Query Code, code generation from MongoDB & SQL queries (which now supports PHP)
- Export MongoDB to CSV
- Session Restore
- Color-coded connections
And the small stuff — the time-saving hotkeys, the shortcuts, the menu options, the logically-placed buttons — that our users have flagged over the years:
- View collection tabs side-by-side
- Show embedded fields in Table View
- Easy import and export of connection details for quick team sharing
- Allow more flexible modes of entering queries, projection fields and sort fields
- Add way to load `.mongorc.js`
- Export full databases, not just collections
- Ability to “overwrite existing documents with same id” when exporting to another collection
- Display query execution time, show _id as a time stamp
- Ability to rename MongoDB fields, improved copy/paste behavior
- Made it possible to define a trusted self-signed SSL certificate for a connection
- Highlight matching (or unmatched) brackets, parentheses, etc. in editor
- Open IntelliShell with a blank find() query, ability to export results
- Auto-reconnect when disconnected, recover lost connections
- Ability to configure the mongo shell executable for each connection
- Toggle find, project, and sort selections in the Visual Query Builder on and off
- Instead of migrating SQL tables, migrate SQL query results instead
- Option to copy and paste aggregation stages, added support for additional aggregation stages, ability to export results, and disable pipeline stages temporarily
- Ability to see the server name in the database/collection/document drop confirmation dialogs
- Alphabetically-arranged dropdown menu options
- Allow Schema Explorer queries to be edited and re-run
- More intuitive double-clicking UX in Tree View
- UUID representation in JSON View, ability to copy UUIDs in chosen representation
- Group connections into folders, easily sort them by clicking on the header, and filter them by name
- Support for read-only mode in connections
- Toggle comment feature, code formatting, and Cmd+[ and Cmd+] indent and de-dent in query editor
- Hide toolbars = gain (more) space for data wrangling
- Support for Ed25519 keys for SSH tunnels authentication
- Improvements to copying collections (now copies indexes, too)
- Specify user-defined unique ID to use instead of object ID when comparing collections, added sync on multiple/all collections
- Support other GridFS types
- Human-readable data sizes, better window position behavior
- Many, many, many hotkeys
- Many, many, many requests for an auto-updater
Sometimes it might not even be about functionality. We care about how the app feels just as much as we care about how it performs.
This means that when users ask for a dark mode, we build one — and we will keep iterating until it’s as good as it can be.
When our icon gets called out, we work on it.
And when it comes to our key features, we strive to make them better, even if that means ripping them apart. Aggregation Editor, the very first MongoDB aggregation pipeline builder, is a great example.
The core feature that we recently re-engineered in February 2020 started out as a customer feature suggestion in April 2015 and quickly became a favorite. It saved users so much time.
“Studio 3T is the tops for me. In only 30 minutes, I can gain one whole day of work when building aggregation queries.”
Pierre Yves Folens, DevOps Engineer at Orange
But we could only rebuild it thanks to our users who pointed out the small stuff we could improve, which are now an integral part of the Aggregation Editor UX.
The present and future
Seven years later, the Studio 3T feature list continues to grow as we ship improvements to our key, core features.
Why are we writing about our approach to product development now?
Because release note after release note, we’ve found ourselves highlighting only the new features, reducing fixes and improvements to a few bullet points, and burying the rest in our change log.
So we’re taking a break from the usual in our latest release to put the spotlight back on the small stuff that’s made all the difference in the last seven years — and counting.
Finally, we want to give a shout-out to all those customers who have taken the time to tell us when something needed improving. These are the people who really made Studio 3T a pleasure to use:
João Sena Ribeiro
Jóhann Geir Jónsson
And countless others :-)