OVERVIEW
CodaMeet the evolution of docs. Simple. Familiar. But built to adapt to your team’s needs. Coda brings all your words, data, and teamwork into one powerful doc.
MY ROLE
Product design intern
This summer, I worked under the Growth and Ecosystem teams at Coda where I led designs for various product features involving technical UX, visual redesigns, and design system components.
Working closely with senior designers, engineers, and PMs, I also focused on product strategy, feature scoping, and high-quality implementation. Multiple projects are shipping soon such as the CSV importer, Pack Cards redesign, and Gallery design system revamp.
CONTEXTWhat is Coda?Coda is a new type of document that brings words, data, and teams all together in one place. It comes with a set of building blocks that anyone can combine to create a doc as powerful as an app.
Teams have used Coda for organizing remote meetings, collaboratively managing and tracking tasks, building team wikis, and more.
PROJECT OVERVIEWS
A balance between product and visual thinkingThroughout the internship, I led three impactful projects, with them landing in the perfect balance between product and visual. I was challenged by complex technical UX problems (CSV importer) while being able to still exercise what I’m best yet: executing visual polish and tasteful craft on the smallest of details (Pack cards redesign and Gallery design system).
For this case study, I'm only going to walk through the CSV importer.
THE OUTCOMEThe CSV importerCSV importers allow you to bring in table data from other platforms such as Excel, Sheets, Notion, Asana, and Airtable. Over the summer, I was the lead designer on this project, where I designed a more robust, integrated CSV Importer that would allow both the simplest and most complex use-cases.
PROBLEM CONTEXTThe problem and vision
Coda currently has a CSV importer, but it is very limited in functionality in that it only allows one type of use-case: importing CSV files into a new table on the canvas.
With the new importer, we want to extend it's functionality to also support bringing in CSV data to existing tables on the canvas, overwriting specified data through merging, and having a live preview to help users visually understand the changes within the import settings.
PROBLEM CONTEXTHacky WorkaroundsHacky ways to perform a more robust import were another key indicator that our current one was falling short. An engineer at Coda created a Pack (Coda's version of a plug-ins) to allow more powerful and personalized ways of bringing in your data, that the live importer couldn't perform.
It exists as a series of wordy steps on a Coda template page, which is long, unintuitive, and fails to follow existing patterns within our current importers and comparables.
PROBLEM CONTEXTAsks within the communityWith both internal and community requests from the teams and individuals that use our product, we saw this an opportunity to build something that felt more properly integrated within the whole Coda ecosystem.
We wanted the importer to support existing Coda users to continue bringing their data in as well as give new users a really delightful, easy, and intuitive process when they want to bring something in for the first time.
what changed?Allowing for both the simple and the powerfulAlthough we want to allow the complex and powerful with this new importer, we were also conscious of retaining the simplicity of just importing CSVs into a new table.
To create distinction between these two flows, I made sure that only the more complex use-case would require a larger modal. I created a smaller modal state before that where users can upload the CSV file of interest as well as choose the import location. Only when choosing the existing table location are they prompted to the screen with more inputs to select from.
core featuresMore Robust Functionalities
With the new importer, we introduced three new features:
1. Mapping CSV columns to Coda table columns
2. Specifying the data merge to overwrite existing table rows
3. Seeing real-time updates with the preview
COMPARABLESLooking at other products in the CSV importer spaceWhile building this feature, we were aware that there were already some existing CSV imports in other product comparables such as Airtable, Notion, and Asana. We drew upon their implementations for inspiration and identified gaps that helped us figure out how we might rise above their importers.
EXPLORING TOO WIDEScoping down to the core functionalitiesIn my initial explorations, I made the mistake of adding on way too many things. It made the importer both visually and conceptually dense as it was doing way too much while still trying to look and feel uncomplicated.
In the end, we determined trade-offs by removing helpful, but not necessary features such as manually changing field types, the ability to save import configurations, and allowing multiple merges to happen.
We realized a priority that the summer should just be focused on making the core features feel really good (column mapping, row merging, and live preview).
ITERATIONBringing clarity to a complicated and misunderstood featureThe feature of merging was especially confusing to explain, even for those with expertise in CSVs. Since it was a necessary functionality to have, I took the opportunity to push the UI and copy even more to bring clarity.
Explorations include creating more separation and distinction between mapping and merging, adding in small supportive copy, and trying different input methods (toggles, check boxes, multiple select-lists, and singular drop downs).
ITERATIONBuilding around an existing patternIn Coda, panels are generally located on the right of most UI. In many of the iterations and explorations of the importer, I had placed it on the left as I thought it would be most intuitive to see it first.
Shifting the panel to the right allowed many great things to happen. It continued to build upon our product's design systems and patterns and resolved a lot of the small layout issues I had previously encountered such as finding a home for the name of the preview table and giving the preview room to expand to full height.
ITERATIONReducing unnecessary whitespace and visual clutterMost CSVs are usually large and dense, which can make the preview busy quickly. With this in mind, we wanted to find as many opportunities to reduce the visual clutter and have minimal lines, so that the modal can feel as clean and simple as possible.
Thoughts & Reflections
💻 Product in tech
I came into this summer hoping to deepen my understanding in product visioning, balancing trade-offs and limitations, and in building healthy practices around making, and of course, those came as expected.
In just a few weeks, not only did I grow immensely as a young designer in tech, it also confirmed a very important realization: product in tech is an interesting, challenging, and sustainable future for me.
🗣 Sharing as much as possibleI also learned how critical it is to share consistently to both iterate quickly as well as keep others informed on what I’m working on. In previous projects, I only was comfortable sharing when I felt my work was at a good place. My time at Coda was really healing as it removed my fear of sharing.
Along with the act of sharing, I learned how to mentally organize and prioritize the feedback given. Not all feedback is necessary or even helpful, and learning to better identify those is something I can more confidently do now.
🖍 The beauty of creative toolmaking
As I continue to develop my design philosophy around tooling, I will continue to remember Coda’s main three philosophies: right over familiar, we build building blocks, and everyone is a maker. Building a foundation around these three values, I’m even more excited about a future where makers can make whatever they want, and however they want to make it, which is why products like Coda are so exciting for me.