About Smartsheet

Smartsheet is a collaborative work management platform of tools. What’s that mean? We build an extremely flexible and powerful tool that allows people to build business solutions based on their data. I liken it to a tool belt – There are lots of different tools at the users disposal to use in any combination to create something that works for their needs.
‍
At Smartsheet, there are generally three types of users:
‍
Solution builders - they have a process or need that they need to facilitate with software. That may include data capture, modification, reporting, automated actions, and sharing. The builder uses grid based sheets as the core of their solution.
‍
Collaborators - these users consume the solutions that the builder creates. They might complete data update requests, fill out forms, leave comments, or edit documents.
‍
‍System Admins - They set up the accounts, manage teams and roles, and establish enterprise policies.

Project background

The form builder project is unsurprisingly targeted towards the first group of users – the builders. In Smartsheet, forms allow builders to create custom web forms to collect tens of thousands of data entries from collaborators of all kinds. Unlike typical webforms, Smartsheet forms are inherently tied to the data schema of an underlying “sheet” which introduces complexity beyond the traditional builder, but provides deep integration with the rest of the Smartsheet ecosystem of tools. This allows builders to create solutions that other web form products cannot do.
‍
This project was not originally on the company roadmap. As the UX owner for the forms product area at Smartsheet, I had identified several issues and opportunities to improve the forms feature during the course of regular feature work.
‍
The existing builder had served its original purpose, but the product outgrew its own space as more and more features were added.
I enlisted an amazing designer on my team, Vivian Stitzel, to run a week-long design sprint with me to explore what we could potentially achieve in the forms space if we went back to the drawing board with our approach to building forms.
‍
The idea was to get away from band-aid fixes to provide a long term path for product growth, while solving customer pain points and expanding our potential target users.‍

Gathering insights

Because this project was kicked off during a quiet lull between holidays, we didn’t conduct new research during our initial sprint. Instead, we worked with our amazing UX researcher Cara Abel to leverage an array of quality research we had already done in order to answer some of our questions and direct us with insights.
‍
We looked at past user interviews, concept studies, usability tests, product usage data, and feature requests to build up a list of insights.
‍
These insights provided the basis for much of the framing of the problem exercise that we ran, which I mentioned above.
In an effort to maximize our efficiency and impact, we forged ahead using those insights, with the goal of having new concepts to validate with users, as well as a new interaction model to validate via usability tests.

Framing the problem

Every feature that the UX team works on at Smartsheet starts with a “framing the problem” document. We use the document to:

Consider user needs as well as business goals
State our intended impact and potential effects
List our assumptions
Ask what we don't yet know
Define our context and constraints

I worked with the help of our UX researcher, Cara Abel, as well as a senior UX designer, Vivian Stitzel to complete this exercise.

The key takeaways we defined were as follows :

There is a disconnect between the form building tools and where the form actually gets built, with UI needed for one task being split between a few locations
Builders lack confidence in the visual output of the form they are building
Our forms were lacking key abilities to preview and utilize design features to customize their forms, especially important in the marketing vertical
‍

We also had a few hypotheses based on our customer insights:

A clean contextual canvas editor would not only simplify our interaction model, it would provide space to add future enhancements to the product
Allowing for more visual customization will unlock new use cases, especially in the marketing vertical
A builder that looks like the final form would help instill confidence in the form creator, and reduce user errors

Defining our vision

After we framed the problem. We came up with a clear vision that would guide us as we were about to rapidly diverge and iterate.

Our overall vision for the new builder was to have a seamless, beautiful, and expected experience when creating forms, to alleviate customer pain, add new value, and position Smartsheet as a key player in the web form space.

Diverge and conquer

Vivian and I spent most of the rest of our initial sprint week running through the rest of the activities of a classic Google Ventures style design sprint. After pouring over the research, framing the problem, and discussing at length our overall goals, we began by rapidly sketching numerous ideas and directions.
‍
We used exercises such as crazy 8’s and 3 panel storyboards to concept around the form builder experience.
We evaluated each solution and idea, taking the best of each, and ultimately coming up with three variants that identified as viable paths forward. Again for the sake of time and making an impact quickly, we opted to find common ground to build two prototype variants.

Initial testing and validation

To get the results and data we needed from testing, we built a highly functional prototype that functioned as the real feature would. That quality allowed us to ask our users to complete multiple tasks organically as somebody using the built product would.

With the high quality of the prototype, we got the accurate data we needed to move our designs forward and iterate from our initial take.
‍
We tested with 9 different user types, with all levels of experience in Smartsheet and other forms tools. They were able to easily complete all 11 tasks in the test, and had increased satisfaction over the current experience in terms of features and ease of use. The concept resonated particularly well with users who were familiar with other form builders as well as the original Smartsheet form builder. They noted it was a game changer for Smartsheet forms, and they would be likely to adopt the new form builder for more of their webform needs.

The feedback speaks for itself:
‍
“Compared to other tools I’ve used, this user experience was easier, it made more sense. You can see what it’s going to look like. You don’t need to teach someone, they can figure it out all on their own.”

Design iterations and prototyping

We shared our initial results with the product team, and put together a UX review to bring the design work and findings to our executive stakeholders for review. We provided a breakdown of the step by step path to our north star vision, through incremental releases that would provide customer value and move our UI towards the end goal. The review was so successful, our executives asked for an immediately engineering estimate and investigation of what it would take to put this at the top of our roadmap.
‍
After working cross collaboratively with the PM and engineering manager, we were given the green light on the project, and given budget and resources to build a team around delivering the feature at top priority. From there, we began the iteration process, bringing our concept level thinking to full fidelity.
‍
During the full design cycle, we worked through several variants of the controls and smaller scale interactions, testing iteratively until we had a design that tested as well for usability as it had in concept.

Usability testing

While we iterated on and worked through design details, we ran usability studies to validate each component of our design work. We looked at everything from how people add new questions, and edit the settings of those questions, to how they build logic and see that represented, to how they configure the visual styling of their forms, and how they send them to recipients and track results.
‍
During this phase, our goal was two fold: to validate the usability of the feature and also to continually validate the entire concept with more and more users. After each test, we continued to confirm we were on the right track, building a feature that not only was easy to use, but gave users meaningful utility for their forms use cases.

Next steps

During the iterative process, my team contributed new design patterns and components to Smartsheet's design system. We defined a new interaction model for canvas style builders across the Smartsheet platform. Our initiative has helped to not only improve the forms experience, but consolidate how people use Smartsheet across pillar areas, in horizontal solution building that spans multiple features, so they are provided with a seamless and easy to learn experience.

The interaction model we designed for this project has been applied to my Advanced messaging customization→ project. The design patterns have already proven themselves out in further testing on that feature

Form Builder