Side Panels

Led the vision, craft, and execution of a core component that elevates Ridgeline’s user experience.

Context

Alongside my primary responsibilities and ownership over Ridgeline’s Trading product, my role also includes helping pilot our design system library in Figma and conceptualizing new interactions, components, and patterns. As the third product designer at Ridgeline, I learned the ins and outs of building a sustainable design system and designing reusable components that could be easily used within any product area of our application.

Side panels is a project I led from problem discovery to UX vision to execution. I worked closely with a UI engineer throughout the entire process to stay aligned on the final output, with the help of a UI project manager breaking out manageable tasks (story mapping) for the engineer.

Problem
Users have to navigate to a new page to drill down into relevant information. It takes longer to make calculated decisions and impacts user workflow efficiency.

Result
Side Panels allow for greater display of content while maintaining contextual connection to the primary workflow and adds density to our application.

This optimizes workflows, eliminates noise, and facilitates access to the right information at the right time.

Responsibilities
Concept Development
Component Specification
Interaction Design

Role
- Lead Designer
- 1 UI Engineer
- 1 UI Project Manager

Tools
Figma ✨

Using a side panel to view additional details about a trade order

Problem

One crucial limitation with many existing investment software systems is fragmentation.

Users must pull data from three or four different applications to accomplish a single objective because each application is a separate system. The result leaves the user constantly ‘alt-tabbing’ between apps; a usability nightmare that slows down business and fatigues the user.

User Testimonials

In our user testing sessions, we received preliminary feedback from product experts saying there’s too much “white space” and not enough data density. They noted that portfolio managers and traders within this industry are all about efficiency: data-dense pages so they are able to perform their tasks from a single dashboard or page with the least amount of clicks as possible.

We wanted to dive in more. A few product managers, designers, and I wanted to sit down with product specialists & experts within the space and distill down their problems with the current state of our application. To keep anonymity but credibility, these are some of their backgrounds:

  • 27 years at Advent, started as Employee #9

  • Portfolio Manager and Trader of 15+ years

  • Ex-Manager of Advent’s Moxy Trade Order Management system. Visited 600+ asset managers

This idea of side panels was born from a design sprint, a week of ideation for prominent issues raised by our interviewees. Here, we noted down our key takeaways from our conversations.

⤴ click image to expand

Early Ideation and Visioning

As we talked to users, I was able to form some actionable insights.

  • Our users need to consume, digest, and then act on constant streams of unstructured data.

  • They need the right data at the right times.

  • They value, above all else, efficiency.

From here, I focused on pinpointing the major principles that supported these insights and would guide the intention of side panels: Optimizing Workflows and Layering Information.

Optimizing Workflows
Side Panels facilitate efficient task completion within a set workflow.

Ridgeline believes users should be able to accomplish their daily goals in one dedicated workspace. One that is optimized for major objectives, and secondary or tertiary tasks can be accomplished without leaving the page of the primary objective.

Layering Information
Often, an asset manager will look at a large batch of information — it could include portfolios, orders, reports, or clients — and then select certain types of information to explore in depth.

We recognize that certain data is critical to scan the page and make the decision to dive deeper. Once that decision has been made, different data is required to make the next decision, whether that be diving still deeper, acting, or simply returning to the previous page.

 

Next, I gathered use cases that would benefit from side panels from PM’s. I wanted a comprehensive list that would help support my case for a new component within our design library. Here are some examples of areas that would benefit form side panels that I quickly mocked up:

I also explored different types of layouts that side panels can live in.

Overlay / Scrim Style
The benefit for this is to allow users to hone in a specific detail without leaving their primary page. This style is suited for tasks that impact the larger page, but the user shouldn't be able to interact with the page simultaneously. It can also help focus the user’s attention on a key flow.

The scrim layout style is similar to a modal, however we reserve modals for alert messages in our design system.

Push-to-Fit Layout
The entire page automatically resizes to fit the side panel. This style is suited for use cases where the user needs access to content on the primary page at the same time as they’re working in the side panel.

 

I was met with excitement from fellow designers, strategists, and PMs when I presented this short proposal with these mockups. The vision, rationale, and impact of side panels was ready to be created––pending a component specification for the developer.

Spec Breakdown

This component specification file is presented in two sections: the component breakdown and navigation breakdown. (“Navigation” in this setting means opening side panels from data grids and associated patterns). Specific interactions are categorized to allow for digestibility & a fluid viewer experience.

⤴ click image to expand

Component Specification

The spec aims to break down the component, outline the different types of side panels, layouts, and all possible interactions. The purpose is to ensure the component is built accurately by developers and any potential design/development gaps are addressed.

A limited preview of specification details are presented below, followed by a button link to the full component specification page in Figma.

⤴ click image to expand

Birds eye view of full Figma specification linked below.

Preview of Specification

Here’s a preview of what lives within the spec. The full component specification is linked below.

2 Types of Side Panels
(Display vs. Form)

3 Sizes of Side Panels
(based on our existing form field sizes)

Grid Cell Navigation
(Opening Side Panel from Table)

Padding px values

 
 

Value & Impact

UX was significantly improved throughout the entire Ridgeline application.

For example, a portfolio manager might be reviewing a portfolio and realize that they need to create an order to gain exposure to a certain equity. They shouldn’t need to abandon the current page and navigate a cluttered desktop to achieve this. With Ridgeline, the task, creating the order, can be accomplished via a form in a side panel without leaving the page of the primary objective, auditing the portfolio.

 

Before: Form Page
Prior to side panels, long forms were treated as separate entities in Ridgeline. Users had to navigate to a new page in order to access any type of form or entry.

After: Form Page -> Form Side Panel
Users can access forms via a side panel on the same page, and don’t have to leave the page and disrupt their workflow.

 

Future Iteration

Data-dense side panel showcasing data about an order

The vision for the side panel is to allow any component to live within a side panel. This includes any subtitle(s), buttons, icons, badges, etc. Above is an example of a data-dense display side panel with editing capabilities that we are hoping to support in the future.

User Feedback

Designing purposefully for our users includes getting continuous user feedback & validation. We presented side panels to each of our future customers (specifically the Portfolio Managers and Traders) and the demos were received with enthusiasm.

“This is exactly what we need in order to do our tasks efficiently… being able to view & take action on additional data from my main workspace. The added data density is vital for our jobs.”

- Trader at Navellier & Associates

The component has been a huge value add to our application in our customers’ eyes. Additional v2 features of the side panel component are still being developed at Ridgeline today.

Closing Thoughts

Piloting new components and building design systems for enterprise software is daunting, and I’m grateful for the amount of trust Ridgeline employees place in one another. Working at a startup right out of college, I have had opportunities to challenge myself and grow in more ways I could have asked for. I especially learned to love interaction design, and all the patience and attention to detail that it demands.

In terms of where the side panel component stands in Ridgeline currently—our product teams have adopted it and actively utilize it in their product flows.