Product Designer
Smartsheet New Home Cover.png

Smartsheet Navigation Redesign

Hero Image.png
 

Context

  • Previously, navigating through the Smartsheet mobile app was centered around an alphabetized file list. Customers were lost immediately in this navigation structure, as they would land on a lengthy list of file names without additional context to help them find their Smartsheet objects (i.e a Sheet, Report, or Dashboard) upon loading the app.

  • Useful features like Recents, Search, and Favorites lived in separate areas of the app. Additionally, customers had difficulty finding Workspaces, and accessing anything required multiple taps and precious time.

  • The previous navigation experience required tapping through long lists of unrelated items or navigating between multiple tabs to locate work. The many levels of friction to locate work within the app made it cumbersome for users to leverage the app for quick updates in the field or between meetings, resulting in lost opportunities to move work forward.

  • Overall visual design looked and felt outdated.

 

Goals

  • Redesign the existing Smartsheet mobile navigation experience and deliver a solution that helps customers access critical information while they are away from their desk.

  • Give customers the confidence that they can identify and find the right items quickly - allowing them to seamlessly transition from their desk to anywhere.   

  • Reduce the amount of time users take to find their work items, and create a more cohesive experience between desktop and mobile.

  • Set up a foundation for the future: Design a solution that is scalable and flexible over time.

 

Role

  • As the primary UX Designer on this project, I was tasked with designing the end-to-end experiences for both iOS and Android Smartsheet apps.

  • Partnered with our UX Researcher to conduct customer interviews and usability testing.

  • Collaborated closely with the mobile Product Manager to help define requirements and align stakeholders across 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

 

 

Research & Problem Definition

  • I worked closely with UX Research and Product Management to learn more about our customer’s pain points and to help us understand and narrow down a problem to focus on.

  • We conducted a study of seven users of the Smartsheet mobile app in September 2019, and presented a deep dive of our findings to align the team and stakeholders.

 
Problem Definition.png
 

Customer Pain Points

“Ugh, I have too many project sheets -- is this the right one?” 

  • Arguably the largest pain point uncovered in our user research, on both mobile and desktop: we didn’t provide enough context for customers to know if they are accessing the right Sheet or Workspace. On our mobile app, we listed the title of the item along with an icon that represented the object type (Sheet, Report, Dashboard, etc.). Previously, customers didn’t have enough context to identify the right Sheet or Workspace.

“My Smartsheet app is littered with old stuff I don’t use anymore and that makes finding things hard.”

  • Our customers are also managing vast graveyards of unused Sheets, Reports, and Dashboards -- which cluttered their repository of items and made it harder to find their work. Customers generally accumulated large amounts of items in both Favorites and within their Folders.

 
Old Experience.png
 

Findings

The customers we spoke to fell into two navigation buckets, they either used Recents and/or Favorites to find their items (our “Quick Access” folks) or they scrolled through Workspaces to find their items (our “Organized” folks).

“Quick Access” folks:

  • First, Recents don’t sync with the Recents on our desktop platform, which cuts off a major part of the utility of having Recents on mobile. As one customer put it: “From a surfacing of information [perspective]... it wouldn’t matter if I was mobile or at my desk.”

  • Second, Favorites becomes less useful over time as it becomes crowded -- pointing to housekeeping as a recurring problem.

“Organized” folks:

  • They have difficulty finding the right Sheet or Workspace, many reported scrolling past the right Workspace or Sheet, or tapping into multiple levels to check if it was the right one.

  • They express similar issues with clutter in their navigation and naming conventions.

  • Workspaces aren’t prominent enough, as one customer put it: “The home screen has the option for me to click Workspaces but I’d rather the Workspaces be my home screen.”

 
Two Types of Wayfinders.png
 

Framing the Problem

After speaking with customers about their pain points, it was a lot more clear what our pain points were, and more importantly, who we should be designing for. It gave us better clarity into what kind of “Wayfinders” we should optimize our navigation experiences around and the outcomes we should be striving for as a team. Overall, this study allowed us to narrow down and frame our problem into specific areas to focus on:

  • How might we enable users to feel confident in finding their Smartsheet items quickly?

  • How might we optimize navigation for all kinds of “Wayfinders”?

 

 

Competitive Analysis

Competitive Analysis.png

Airtable and Monday both land users within a linear list of items, organized in a similar file-tree pattern as their desktop apps. Asana and Trello had landing experiences where relevant items were presented upon app launch. They accomplished this by landing users on a “Favorites” or “Starred” section. They both also surfaced “Recent” items directly on the same landing screen.

Airtable and Monday seemed to have the more outdated experiences. Navigating to an item didn’t feel as intuitive unless you only had a few items in your list or were familiar with the folder structure that was used to set up and organized your team’s work. A common pattern I noticed among all four major competitors is that their Search entry point isn’t as discoverable compared to their desktop experiences. Instead, they each had their Search experiences as its own dedicated tab or icon in the top navigation bar.

In my opinion, Asana and Trello both had the more modern approach of trying to surface more relevant and important items to users immediately upon app launch. I drew inspiration from this notion when starting to think about Smartsheet customers and how they have to navigate long lists of items - often times without any idea of how things are organized by their team’s admin.

I knew that the new experience would have to deliver and surface more relevant items while minimizing the time that customers have to navigate and tap through layers of folder hierarchy.

 

Design Iterations & Concept Testing

  • I spent several weeks wireframing and prototyping different concepts.

  • 5 rounds of concept testing and iterations.

  • 7 Participants (6 Mobile + Desktop users; 1 Desktop only user).

  • Recruited from Smartsheet Community.

  • Semi-structured user interviews via Zoom.

 
Design Iterations.png
 

 

User Testing & Validation

  • After multiple rounds of concept testing and incorporating feedback into each iteration, I landed on a final MVP design for our first initial launch.

  • The last round of prototyping with customers was focused on validating the final design and testing for overall usability.

  • I presented the results from user testing and validation to stakeholders outside of the mobile team, including the CPO and CTO of Smartsheet.

 
This already looks better than the current app - much cleaner and more modern. I love having Search easily accessible across the top.
 
I like having different ways to sort and dig through my long list of items.
 
This feels and looks familiar to other apps I use like Google Drive which is not a bad thing at all.
 

Final Designs

Final Designs.png
 

Outcomes

  • The new experience places Recents, Favorites and Search right on the home page - allowing for a more streamlined navigation experience where the most useful and relevant items are surfaced upon app launch.

  • New options for sorting and filtering allow users to easily navigate existing folder structures and hierarchy.

  • Added new metadata information to each item type and improved iconography to help users distinguish between Smartsheet object types.

  • Updated overall visual design of the app to be more modern, inviting, and consistent with Smartsheet’s desktop app.

  • New Recents experience became the #1 form of navigation, with 3,549,806 views (68% of all starting screen views).

  • Improved the average time for customers to find their work (8.84s vs. 9.72s from old experience).