Report builder

Faster report creation and enriched communication tools for business advisors.

UX / UI & Interaction - FATHOM

Tools

Sketch, Invision, Principle

Timeframe

6 weeks, 2019

MY DELIVERABLES

UX / UI for Content Library, navigation, Report Outline, edit / preview modes

Fathom is an analysis and reporting tool that helps accountants and business owners visualise and interpret financial data.

The report builder, a core pillar of the app, allows users to craft beautiful management reports that help them communicate data in a meaningful way. Earlier this year, we had the opportunity to improve key interactions and systemise our components and patterns.

Alongside the head of Product Design and Senior Designer, and in close collaboration with our 4 frontend devs, we dug into creating a more streamlined, delightful experience.

BRIEF

Identifying pain points and quick wins

As a Product Team, we sat down to review customer feedback and prioritise the workflows and interactions we wanted to improve. I looked after the following:

Navigation that allows faster, contextual editing and clear differentiation between edit / preview mode.
Making it easier for users to quickly add charts, text etc. to a report.
Saving pre-configured components.
Multi-selecting data points to include in a chart or table.

Early concepts

Designing for a more streamlined but familiar experience

Firstly, I tackled navigation and a new Content Library side panel to house charts, tables and text for users to add to reports. The new panel was replacing a full-screen takeover, which forced a one-by-one, friction-full workflow.

With consideration of existing, familiar interface patterns it would be important to maintain visual recognition of each component with the reduced screen size and look for other UI in the app that we could utilise here.

Before: The existing full-screen Content Library.

Before: Minimal navigation, poor recognition between edit / preview modes.

Early designs: Merging the configuration and content library panel on the right, floating 'Add button' to keep the interface clean and familiar.

Early designs: Increasing context with a sticky, smart header.

Early designs: Wider Content Library panel for Tables–where column headings are important for the user to see. Left nav icon style to mirror the 'Analysis tools' section of Fathom.

Early designs: Standard width with background disabled on tablet.

INTERACTION TESTING

Prototyping for sense-checking and handover

Hi-fi interaction prototypes (made in Principle) were an important step for rationalising and discussing the behaviour for the new side panel, sticky header and existing config panel.

Prototype: Content Library interaction and search.

OUTCOME

Adapting for platform and performance during implementation

We made some minor tweaks to interactions as our developers built the new interactions and the end result was a performant, silky smooth experience that our customers loved. The redesign was also a great opportunity to consolidate a lot of existing and new UI into the app's design system, leaving us with a tonne of reusable, scalable interactions for our next project.

Live product: Final top nav and Content Library side panel. The library ended up as a drawer over the top of the report rather than pushing content, varying in width to suit the components.

Live product: New empty state, Content Library with filters, click to add and double-click to configure. Multi-select variables and new config panel UI.

Live product: New report Outline with easy drag and drop sections and inline actions.

Reflection

Close collaboration creates trust, respect and new knowledge

This is a pretty obvious one, but the redesign project was a great reminder of how working closely as a cross-functional team is great for people and product. Our intensive focus on this area of the product, frequent over-the-shoulder sharing and incremental improvement throughout was a true pleasure!