Reshaping Smartsheet
Smartsheet is a management software which aids companies in better handling of projects. In this conceptual design project I performed research, and user-testing to enhance Smartsheet's interface.
My Role
Sole UX Designer
Project Focus
Corporate App Improvement
Project Type
Personal Project
Project Duration
14 Weeks
Overview
As GE Healthcare Employees, my co-workers and I regularly used Smartsheet for installation projects.
We discovered that we always found ourselves mindlessly clicking on icons, trying to find particular screens to perform our duties.
It would make us question...
Can Smartsheet become more User-Friendly?
Project Goals
Smartsheet does a great job at letting users control their project with a variety of management tools. If I could incorporate features that would simplify not only GE Healthcare workers, but every individual who uses Smartsheet, I would fulfill my goal.
My Design Process
I used the following Design Thinking Framework to lead me throughout this project...
Design Template
Empathize/ Research
Define
Ideate
Analysis
Prototype
With this template, I am able to cap off my project and begin to collect my Research!
Empathize/Research
This first phase is where I began to collect research to better understand my users and their problems with Smartsheet. My collection of data helps me recognize my users' feelings, experiences, and behaviors.
Our Users
Technical User
Who are they?
An Install Engineer or Mechanical Installer
Role?
To Record information within each Smartsheet to document progress of installations
Why is it Important?
Technical Users are expected to provide detailed updates for other users to follow
Managerial User
Who are they?
A Project Manager or an Administrative employee
Role?
To export and share information regarding installations within each Smartsheet
Why is it Important?
Managerial Users are expected to share their smartsheets with the higher ups
I decided to perform a short Q&A regarding their use of Smartsheet to have some insight. The following questions were asked...
-
How do you use Smartsheet?
-
How does Smartsheet help your work?
-
Have you experienced any problems with it?
-
Does it cause any problems for your work?
-
What more could this app do for you?
Figma Screenshot of the answers to my research questions regarding Smartsheet for both Technical and Managerial Users.
I began by asking simple questions regarding their work duties with Smartsheet in order to create a warm environment for my users. I then focused in on the questions regarding "issues" with Smartsheet. This method of questioning helps create an emotional environment to understand their true feelings with Smartsheet.
Key Q&A Takeaways
Technical & Managerial Users
-
Biggest Problem was familiarity with icons
-
Mindlessly clicking which causes a waste of time in their workflow
With my research at hand, I am now able to move onto the Define phase and cap it off by creating my problem statement.
Define
This second phase is where I analyzed my research to define my problem, created a hypothesis, and began to create solutions for my users.
I discovered that the problem was...
that the Smartsheet's interface displayed a variety of indistinguishable icons which, ultimately, slow down both the Technical and Managerial Users' workflow.
The Hypothesis
If Smartsheets made their content and design system more discernable, Technical and Managerial users would be able to have a less stressful and faster workflow.
The Key Insights of My Research
Figma Screenshot of my list of Key Pain Points that was identified through my Q&A
Even with separate roles both users' dislikes about Smartsheet's interface were the same. They stated that the symbols on the toolbar were not clear; there are no labels for the icons; and the placement on the screen was not ideal.
​
My Users' Needs
Technical and Managerial Users need ways to clearly understand what they can do when fulfilling their roles because they want to work faster.
Knowing their needs, helps me identify their goals as well...
My Users' Goals
Technical and Managerial Users want to clearly recognize the Smartsheet's interface when fulfilling their roles in a shorter amount of time.
I then began to focus on how to fulfill theirs needs and goals...
I utilized the "How Might We Method" to compile a variety of questions to guide me in formulating solutions to my users' problems...
Figma screen shot of the 6 questions that were constructed during the "How Might We Exercise"
Three questions were designed for each User. I made sure to have specific question that would target me into thinking about Smartsheet's User interface and my users' workflow speed.
With this exercise, I am then able to move on to the Ideation Phase!
Ideate
This third phase is where I focused in on my most though-provoking questions from the Define phase; I used those questions to brainstorm a variety of ideas.
Focusing In
With my hypothesis in mind, I used the Crazy 8s strategy to create as many ideas possible for my most valuable questions.
I first focused on 1 question which would result in isolated solutions for each type of user...
Technical User
Figma Screenshot of 4 ideas I brainstormed for a question regarding the Technical User's main duty in "inputting updates faster" within Smartsheets
Managerial User
Figma Screenshot of 4 ideas I brainstormed for a question regarding the Managerial User's main duty in "exporting information faster" within Smartsheets
These 2 questions were the first to be chosen for this exercise as they evoked me to think about solutions regarding my two types of Users and their methods in performing their main duties in less time.
I then focused on 2 questions which resulted in solutions for both users...
Figma Screenshot of ideas I brainstormed for a question regarding both Users' familiarity with the Smartsheet's interface.
These 2 questions were the catalyst for evoking solutions that would help both users. It was with these two questions that I started to realize that I wanted to create solutions for any type of user.
With my ideas listed, I then organized them by more specific categories in which each idea could fall into...
Figma Screenshot of ideas that were reorganized by even more specific categories; the two umbrella categories I created were "Remodeling" & "Add Additional Feature"; even within those two Categories, I was able to develop more miniscule categories. An Important method in organization to understand the depth in concepts within my ideas.
Organizing my ideas was an important task as I began to realize that some of them could be combined to create an even more versatile idea...
Figure a.
Figure b.
Figma Screenshot of my final selection for solutions that I would prototype.
Figure a.
Expanded View of the first concept (Remodeling: Improving Iconography) and its encompassing solutions; I planned to place the name of each icon, possibly changing the icon, or organize the icons by purpose.
Figure b.
Expanded View of the second concept (Additional Feature: Visual "How To") and its encompassing solutions; I wanted to incorporate a tutorial and, a Video/GIF Preview when hovering over an Icon.
I honed in on these two Concepts for prototyping due to them being cohesive enough to all work on the same User Interface screen.
Prototype
This fourth phase is where I produced an inexpensive, and scaled-down versions of my solution.
Remodeling: Improving Iconography
My first major focus was to improve the capability of our users familiarity with each icon in the toolbar. Let's show an example of the current Icons in each user's toolbar within the Smartsheet Interface...
The toolbar on the far right has a variety of Icons that triggered many frustrations for our users. They always found themselves mindlessly clicking the various icons [trying to figure out each icon's functionality] even after repeated visits of Smartsheet.
I decided to implement a labeling system on this toolbar - if users could see the name of each icon, they're more likely to go straight to the tool they need. Here's how it would look...
A simple addition of names under these Icons would improve our user's workflow as they would now have a label for each tool (saving them from having to mindlessly click away)
While a simple concept, it was important to incorporate as it transitions into my next prototype...
Additional Feature: Visual "How to"
My next focus was shifted onto teaching the users how to use each tool within their toolbar. I decided to do this by incorporating two parts within my tutorial concept. The first part being a hovering preview and the second part being an actual tutorial with steps.
Competitive Analysis
It's important to research various ways in which other companies have been able to incorporate similar concepts. An important form of research as it can jumpstart our own solutions to our own challenges.
Photoshop incorporates the "hovering preview" with their own tools for their user.
A video game can also show previews of a particular skill the player could use with a small "hovering preview" on the side.
I then began to brainstorm my "Hovering Previews" with a couple of Low Fidelity Designs...
Low Fidelity Concepts
I knew I wanted a preview to pop up next to the smartsheets tool bar. I decided to make a small preview box and incorporate it into our labeled toolbar...
makes...
After hovering over the tool, a short description of the tool and an animation [within the gray area] would appear. I have also incorporated a Green button where users would be able to click on if they needed more help with the particular tool - this would be the second part of this tutorial concept.
I created a small box that would fit to be the base of the user's tutorial screen...
​Incorporating this box with our Base Screen creates...
The shaded blue area would show pictures of the screen and under it would provide in-depth explanations.
User Flow
In order to understand the design, it is also important to describe how our users are supposed to go through these prototypes. Breaking down each step within the User-flow aids me in creating my final Prototype...
Final Prototype
Here is the first part of the tutorial concept in action...
Hovering Preview (Comments)
Hovering Preview (Attachments)
I incorporated an animation that shows the user how to navigate through the tool. If our user needs a more in depth explanation of the tool, they are able to click on the green "Click Here For Tutorial" button, where our second part of our tutorial concept would be displayed...
Comments Tutorial
Attachments Tutorial
Analysis
Project Outcomes
The best part about this project is that I managed to align it with my goal of improving the Smartsheet's interface in which any user, no matter the company, could benefit from. Through labeling the Toolbar and introducing tutorial concepts, users should be able to minimize their frustrations and increase productivity time in front of their screen.
Learnings & Personal Thoughts
While this whole project was a new experience in my career, I truly enjoyed every aspect of it; the most important aspect that stuck with me was the importance of truly breaking down a User's problems. I enjoy the term "Empathize with the User" as I believe this is the basis of every UX project. When I was able to put myself in the shoes of my user, a flow of solutions began to pop-up. This is where the excitement of the project begins because it also helped me realize, how in-depth UX Research and Design are.
​
The most challenging part about this project is stepping out of my biased mindset as I happen to be one of the users of Smartsheet. It was a bittersweet experience as I was able to tackle issues as a Technical User but also as a Managerial User. It was important to create solutions for both types of these users as it helped me in achieving my goal in creating a solution for any user for any company. A reminder that Technical Users only input information while Managerial Users export information; tackling issues from both types of users help me in targeting a bigger audience than users that are like myself.
As my first UX Project, I am more than proud of myself in what I have been able to achieve. A 14 week project which has been able to cap off my exciting career within UX.