Redesigning Flux

A case study into the redesign of a tax preparation web app for investment funds

Due to the sensitive and proprietary nature of this product, certain information has been withheld and modified. This product will be referred to as Flux and the client as Kappa.

Project Backstory

Flux is an industry-leading web application used by tax professionals to transform the financial records of many of the largest US investment funds into tax forms ready for filing with the IRS.

Since being launched in 2013, Flux's comprehensive features and user experience launched it ahead of competitors in the asset management space. Until 2016, Flux had been limited to only servicing partnerships (LLPs, GPs, LPs), but its success secured funding to expand the app to support more entity types, like REITs and RICs.

With this growth beyond partnerships, Flux had outgrown its original user experience. New modules and increasingly advanced features were added as the app grew to satisfy the complex needs of these new markets. This expansion further increased the complexity of the system, put stress on the UI, and fragmented the user experience.

To save Flux from its own success, it needed an end-to-end redesign.

Identifying the goals & challenges

I conducted interviews with over 15 existing users and performed a full UX audit to understand the key issues to address in a redesign.

Inaccurate Information Architecture

With the introduction of new entity types, features, and pages, the underlying information architecture became inconsistent, unorganized, and out-of-sync with users' expectations of the business process.

Unusable Navigation

The original navigation had many issues:

  • Flux followed an unconventional tag-based navigation pattern that was overly-complex and unfamiliar to users.
  • The UI component for navigation was not designed with scalability in mind, resulting in a very linear, inflexible, cumbersome, and broken navigation experience.
  • Many areas within the app lacked meaningful navigation to contextually connect relevant items and pages.

Difficult Findability

In an application with an ever-increasing amount of records, users were struggling to find what they needed. Search results were unorganized, uninsightful, and difficult to distinguish, even when users entered the right criteria.

Ineffective Homepage

The old homepage was a bottleneck that lacked a clear content strategy, resulting in a page with an overwhelming amount of content, yet not a lot of substance. Users were often lost without a clear focus of what to do or where to go. Every user I studied would bounce through it as quickly as they could.

Outdated Visual Design

In the years since its launch, web design trends had shifted away from Flux's original skeuomorphic theme. The Firm had also recently updated its global design guidelines with new colors, fonts, and principles to be included in a UI redesign.

Gaps in UX Quality

Many accessibility and usability concerns were not addressed during the development of the application, like proper HTML semantics, missing ARIA roles, keyboard access, load indication, deep linking, state retention, validation, and language consistency.

My role in the product

I was the Lead UX Researcher, UI Designer, and UX Engineer on this project, providing end-to-end UX services - from strategy and research, to design and development. I worked alongside 15 Users, 2 Full-stack Developers, 1 Junior UX Designer, 1 QA, and stakeholders from 8 teams throughout this process. I was personally responsible for the following:

Product Strategy

I initiated the discussion and persuaded financial stakeholders to commit to a redesign. I did this through a series of pitches where I shared the scope of the problems, recommended actions, proposed deadlines, and provided valuation through ROI estimation.

Throughout the process, I communicated the vision and coordinated deliverables across several dependent project teams.

Roadmap of Redesign work streams
A recommended timeline of UI/UX work streams that I used in early proposal discussions.

UX Audit

I performed an end-to-end UX analysis of the application to identify inconsistencies and gaps in the UI design, interactions, front-end code, usability, and accessibility. My findings were documented, shared with business analysts, and turned into backlog requirements.

Sample findings from UX audit
An isolated screenshot of the UX Audit, covering topics like HTML semantics, keyboard accessibility, missing load indications, poorly written copy, etc on every page and action in the app.
Before/after comparison of homepage IA
A diagram I used to communicate the linearity of the current Flux navigation vs a rearchitected structure allowing users to easily navigate anywhere.

User Research

I interviewed and observed existing users to understand and validate their business process, needs, and frictions. The insights were captured through user journey maps, task analysis documents, and personas.

Persona for Tax Staff
A persona summarizing the Tax Staff, the largest group of day-to-day users of Flux.
Persona for Tax Manager
A persona summarizing Tax Managers, the second-largest group of day-to-day users of Flux.

Information Architecture

I facilitated card sorting activities to validate a common mental model of how users organize the application’s content into meaningful taxonomies. The findings were used to restructure the navigation, rename ambiguous content, and provide more sustainable relationships between pages.

Notes from Task Analysis
A snapshot from a Task Analysis session, where users listed what they would want to accomplish within Flux. The tasks are then prioritized by importance and frequency of use.
Entity Navigation IA
A sitemap organizing the navigation by entity type and creating new taxonomies that had not existed previously.

Wireframes & Prototyping

I designed a variety of wireframes and mockups through several iterations of feedback with users and created interactive prototypes to demonstrate the user journey and implement controlled A/B testing.

Since the existing app was heavily reliant on data tables to present information, many of the users I spoke to had a hard time picturing the content any other way. To demonstrate the art of the possible, I presented a variety of design concepts featuring cards, lists, and data visualizations, which all received positive reactions. While presenting these ideas, I encouraged users to think outside-the-box and share their ideas on how to represent meaningful information. I tested these insights through continuous design iteration and user testing, leading Flux toward a new UI finely curated to the content and navigation most beneficial to users.

Tools used for design:

  • Whiteboards, Pen & Paper
  • Balsamiq
  • Axure
  • Sketch
  • Invision
  • HTML, CSS, JavaScript
Early sketch of Flux
An early sketch to help orient the scope and relationship of task data.
Early sketch of Flux
An early sketch for a card-based homepage.
Early sketch of Flux
A sketch used to plan the differences in layout and behavior between the homepage and pages within the application.
Early wireframe of Flux
A wireframe exposing navigation into all current year projects and workpapers.
Early wireframe of Flux
A wireframe consolidating navigation and presenting overview of the engagement.
Early wireframe of Flux
A wireframe presenting workpapers as color-coded cards with an overview shelf.
Early wireframe of Flux
A wireframe presenting a larger overview area with alternatively positioned navigation.
Results of AB testing wireframes
Screenshot of results from A/B testing 30 users' preferences of 4 different UI approaches. This is not related to the mockups on this portfolio page.
Mockup of Flux - Client Overview
A mockup of Client Overview, providing visualization and navigation into the projects and workpapers within the engagement.
Mockup of Flux - Workpaper Tasks
A mockup of Workpaper Tasks, providing actionable insights into the workpaper's sign offs, assignments, and distribution of work activity.

UX Engineering

I utilized the best practices of HTML, CSS, and accessibility to develop new responsive layouts and components to support the newly designed areas of the application.

I engineered the interaction design by implementing custom behaviors and animations to enhance the fluidity and quality of the user experience.

After a thorough analysis of legacy rule-sets, I removed thousands of lines of CSS, and refactored the existing stylesheet using SCSS.

Skills used for development:

  • HTML
  • CSS (SCSS)
  • jQuery
Mockup of Flux - Workpaper Megamenu
Flux's mega menus were newly designed to overcome the previous unusable, disorganized, and cumbersome navigation menus. They are also fully accessible to keyboards and screenreaders.
Mockup of Flux - Workpaper Overview
Flux's Workpaper Overview page provides actionable insights into the most recent book-to-tax calculations, current tax activity of underlying investments, and state filing activity.

Identity Design

I aligned the UI with the firm's new global branding guidelines through the use of branded colors and typography. The new UI theme was a complete overhaul of the existing application, resulting in a clean interface that prioritizes content, state, and behavior over decoration. I also designed a new logo that symbolizes the narrative of the application and the business it serves.