SaaS Product Flow + Component Redesign

Sahil Chaturvedi

6 min readJul 19, 2020

Product Feature Redesigns for WorkSpan 2.0

Context

Project duration: 6 Months
WorkSpan is an enterprise SaaS app that alliance leaders use to connect, co-create, co-market, co-sell, measure, and scale with their ecosystem partners to grow business together.
App is over five years old and had been through a couple loosely planned visual design iterations.
The design team proposed the project, got leadership approval, and began the task of redesigning core pillars of the visual hierarchy and information architecture of the application as an update for the modern age.
Role: Helped to organize, plan, research, design and systematically execute (ship!) on the next version — the future — of WorkSpan.

2.0 Roadmap Planning Process

“Flows, Actions, Consistency” was the phrase I used throughout the process to help keep the team focused on the goals of our redesign effort.

How would we begin with this massive undertaking to redesign the entire application? The first step was to define the main user flows throughout the application.

Key User Flows

The first step was the define the key user journeys that customers took while using the app. Once you have the happy paths for your application, it becomes a matter of removing roadblocks, finding issues, and optimizing for the best user experience along those paths. At a more granular level — you can look at components used within those flows, identify issues (through user research) and redesign them.

Finding Pain Points (User Interviews)

The goal of this step is to interview as many users as possible to identify specific issues that arise on different points of the key user flows. These issues are then used to prioritize which features to redesign next. Another advantage to this process is you are clearly able to document specific feedback from users. Then, customer success managers can go back to the user when the issue is fixed — resulting in very happy customers! 🤗

Component Redesigns

Once you have the Key User Flows and the issues faced in each flow, you can begin to identify specific components used in those flows. This is useful to stay organized and track designs during the process. Features should be organized based on priority (decided based on user feedback + Product roadmap + engineering feasibility). This ensures designers are not falling into the trap of “let’s redesign everything!” — which is very easy to fall into (that was me, too!).

Here are a couple examples of specific components I worked on redesigning — after they were prioritized based on being part of a key user flow:

Object Bar

The Object Bar is the toolbar that houses key information and actions related to the current object that the user is looking at.

Pain Points

Based on user research (and looking at future facing product roadmap), the main issues I identified for the Object Bar were:

Unscalable. The old object bar was used as a catch-all container for all object relation actions, and therefore was getting cluttered.
It was never really obvious or clear what to do when first entering an object.
Share button took some time for user to find.
Shared users and companies were hidden below in the object.
Users were going into “cadence calls” with partners, and wanted to hide sensitive information. Surfacing it at an object level would be nice.
Took up too much horizontal space that dense tables could have used. Also split space between horizontal bar and vertical sidebar.

Design Iterations

The main points of iteration around the object bar were 1) copy on “Hide Private Fields” button and 2) Highlighted Actions

Copy: I wasn’t completely sure if it was better to show State (Hiding private fields) or Action (Hide private fields). After some online research and internal surveys, I concluded that showing Action (Hide Private Fields) would be more intuitive as it is an action button rather than a badge (showing state).
Highlight Action: There is always a balance between surfacing many actions vs simplifying the user experience. There was some debate as to whether there should be one, or two persistent highlight actions on the object bar. Finally, my recommendation was to stick to one primary highlight action to keep it simple. I confirmed this with the Key User Flows.

Outcome / Design Decisions

The new Object Bar brought more horizontal space for table views, and consolidated common Object level actions.
Share could easily be pointed out to customers as it was always in the top right, and the only green button. Sharing is something we want to promote as a network product!
Users and Companies are now pulled up to the top and easily noticeable.
There’s a persistent “highlighted” action along with easy ways to add sub-objects.
Easily able to hide/show private fields during cadence calls.

Membership Card

Pain Points

Before the membership card, users had difficulty knowing when there were outstanding invitations or “requests to join”. They were hidden in the Workcenter (Four icons in the top right).
Membership Card pulled out pending Invitations and Requests to the homepage. This was especially useful for new users onboarding to WorkSpan for the first time, where their partners would invite them to their first Partner Program, or Sales Plan.

Miscellaneous Components

Here are some miscellaneous before and after screenshots of various components that I redesigned based on a similar process as above.

Toast Message

Details Card

Table Views

Tables are a core part of the app that customers use daily. The new Table View experience I designed gave a massive experience boost with features like Private Table Views, Redesigned Action buttons, increased density, and lots of visual changes.

#1 Key Learning

When going through a product redesign, always prioritize components based on importance from Key User Flows, direct user feedback, and Product roadmap. Don’t fall into the “Let’s redesign everything at once!” trap.

Warning: Extra nerdy process stuff

Roughly, this is the high level process I like to follow. Just like any other process, this helps me by adding structure around the project to enable deeper creativity during the project (not having to worry about all the process details, I just need to follow the doc).