Context
Customers use the Smartsheet mobile app for quick edits in a Sheet on-the-go. However, the previous editing experience was too limited and inflexible to be valuable, easy to use, and engaging.
Key Issues:
Users did not expect the Row Edit form to pop up when they tap on a cell.
Users cannot quickly navigate to and edit independent cells at different rows/columns.
Quick actions require a lot of effort (ex: checking/unchecking a checkbox previously required 3 taps + swiping).
Making edits using the Row Edit form is slow. It’s unexpected and takes users out of the context of the grid.
The ability to edit directly in a cell fills a competitive gap between other apps with spreadsheet interfaces (Excel, Sheets, Numbers)
Goals
Design an intuitive and modern spreadsheet editing experience on Smartsheet’s iOS and Android apps.
Create an editing experience that supports all of Smartsheet’s major column types (contacts, dropdowns, symbols, booleans, etc.).
Improve discoverability of key row and column actions.
Redesign the overall information architecture of sheets.
Role
As a UX Design Intern, I supported another mobile UX Designer to research, design, test, and execute on designs for this feature.
Partnered with our UX Researcher and mobile Product Manager to conduct customer interviews and usability testing.
Collaborated closely with the mobile Product Manager to help define requirements and align stakeholders across other teams.
Worked with both iOS and Android engineering teams to execute on this project - to ensure a high bar for quality was met.
Tools
Sketch / Figma
ProtoPie
Zeplin
Early Assumptions and Motivation
Old Sheet Editing Experience
The old sheet editing experience only supported editing a single row at a time. Tapping on a single cell would bring up the Edit Row form instead of selecting that cell and entering an editing mode.
Research & Problem Definition
I collaborated with a UX researcher and mobile PM to dive deeper into our customers’ pain points and better understand how people edited data in their Sheets.
I wanted to fully understand and observe how our users were completing work using Smartsheet, so I spent several weeks speaking with customers, sending out surveys, and conducting usability studies in-person at Smartsheet’s annual customer conference (Engage 2017).
Research Goals
Understand if Smartsheet customers and non-Smartsheet users would prefer to edit a cell directly vs. using the Row Edit form, and why.
Gain more clarity into the use cases for spreadsheet mobile apps.
Guiding Questions:
How do users expect to interact with a spreadsheet grid on a mobile device?
What types of features are critical to users on a spreadsheet mobile app?
Do users prefer to interact with the grid directly or through the Row Edit form?
Testing with customers at Smartsheet’s annual customer conference.
Summary of Findings
Framing the Problem & Open Questions
What is the user’s intent when tapping a cell?
How do we best indicate to the user what to do when they are done editing?
What are the touch/tap/press behaviors that users anticipate will trigger certain actions?
Can users still find the Row Edit form?
What is the expected save experience for a spreadsheet mobile app?
How do we design for what we need to ship now, while making room for future improvements?
Apple Numbers, Google Sheets, and Microsoft Excel
Concept Testing
Based on the initial research, it was clear that our customers saw value in both a row editing experience as well as directly editing a cell.
Since Smartsheet on iOS and Android already had a row editing experience, I shifted my focus onto designing a mobile-optimized cell editing experience.
I spent several weeks prototyping different concepts with existing Smartsheet mobile customers as well as non-Smartsheet customers in order to see which cell editing experience would be well received.
The goal of concept testing was to quickly validate a design direction, and to iterate on feedback along the way.
Design Requirements
There were a number of requirements that my designs had to account for. Most of these constraints were around supporting all of Smartsheet’s special column types:
Text/Number
Contacts
Dropdowns
Booleans (Checkboxes, Star, Flag, etc.)
Symbols
Dates
Improve the discoverability of the Row Edit form for users who prefer to use it.
Update the information hierarchy of sheets on mobile by making important Smartsheet actions easy to find.
Concept Validation
Smartsheet mobile customers were already accustomed to the existing row editing experience, but after showing them the new cell-based editing concept, customers were excited.
Customers were able to navigate through the prototype successfully with only a few minor issues.
I was able to iterate on my initial concept several times before landing on a final design.
After testing, I asked customers again if they preferred the new cell editing experience compared to the the old row editing experience.
“My biggest complaint about the app was the current data input method... I’ve always wanted the ability to edit cell by cell. So this is huge for me!”
“Cell editing would be a game changer in saving the amount of steps it takes our field workers to change a simple status column dropdown.”
Final Designs
Outcomes
Designed and shipped Smartsheet’s mobile spreadsheet editing experience, bridging the gap between Smartsheet’s desktop and mobile apps and allowing users to quickly make inline edits on-the-go.
Optimized the inline cell editing experience for mobile devices, and support modern interaction patterns.
Introduced a seamless sheet saving model that reduces friction and gives customers confidence that their work is being saved.
Reduced the amount of time it takes for customers to make simple edits.
Created a foundation for numerous sheet editing enhancements that would soon follow this MVP.