Senior Product Designer

Addepar is a company that provides portfolio management firms, larger banks, and single family offices with reporting and analysis tools to help make sense of the capital they manage. While I have worked across several teams at Addepar most of my time has been spent working on building new features and improving on a complex mature product built for generating dynamic financial reports at scale. Other than the reporting platform, I also designed the earliest stages of a business intelligence dashboard, and contributed to our new holistic dashboard and data visualization framework. Overall, I would say the largest investment in my skill set at Addepar has come in the form of better understanding team processes and opportunities for improving them through leadership.

 

Addepar Project 2: Reporting UI refresh

Strategic Design initiative

Background

The reporting platform for Addepar inherits a lot of its problems from how mature it is. There is a need for visual updates, along with several features that were pasted together that could have had more thought out approaches. Because of all of this, I started a project to find opportunities to overhaul the UI of the reporting platform (while maintaining all current functionalities).

Goals

  1. Update the components to be more visually pleasing.

  2. Audit the placement of every feature to find opportunities to reduce friction.

  3. Maintaining all current functionalities to reduce any learning curve and chances of breaking any inter-dependencies.

 

Gathering Resources

To increase buy-in from internal stakeholders I opted to conduct Semi-Structured Interviews with clients. The clients were asked questions about their own experience.

On top of these interviews I dug into the usage data of the buttons and CTAs on the report editor to see if there were opportunities for new findings or triangulations. One of the larger findings I found from this was that we had been designing for a size that didn’t match the overwhelming majority of our users’ screen size.

 

Design Process

In order to stay aligned with my goals I broke down my design process into two phases. Macro and micro:

  1. Macro (Gallery on the right) was meant to tackle the overall placement of all features around the page, while removing any visual distractions on this stage of the process. This stage was tackled using Object Oriented Design (Breaking down UI into text based wireframes to workshop placement and size).

  2. Micro was my effort to bring those visual improvements after deciding on most of the larger placement issues. This stage was tackled using a lot of pairing, collaborative, and critique sessions to make sure my designs were aligned with the visual style of the newer products on our team. This also helped increase buy in from the design team as well.

 

Polished Design Proposal

The final state of my design proposal was what you see below:

  1. Updated component library for both accessibility and visual polish

  2. Changed the sizing of the page to reflect what an overwhelming majority of our users are using.

  3. Restructuring of the top bar on the page to take less space from the content and consolidate related buttons and states.

    1. Group all settings to the left, and actions to the right

    2. Consolidate all the “add content” buttons under “add widget”

    3. Consolidate all non frequently used options for running a report under a kebab menu next to it.

  4. Moved the “add page” button from the bottom of the “filmstrip” to the top and make it less hidden.