Reinventing Reports

Upon joining the team, I revamped the UI by altering the look and feel of the brand (vibe, logo, color palette, and fonts). I then translated those changes to the UI and made the following UX improvements.

✔ Introduced a FAB for both the collection and detail pages

✔ Cleaned up the report collection and detail views

✔ Transformed the create/edit experience to a multi-step modal

✔ Changed the fields required to create/edit a report to a Typeform format

Roughly a year later, I teamed up with the same Product Manager to improve Reports once again. We made a plan to gather insights, test prototypes, and iterate designs in close collaboration with our users and internal team. Understanding the diverse workflows of each user type was crucial in shaping our revisions.

These conversations provided invaluable insights into user workflows, preferences, and pain points. We explored everything from frequency of use to the most common actions performed, gaining a deeper understanding of how users interact with Reports. Key takeaways included the need for more streamlined actions, flexible date ranges, and a more intuitive editing experience.

We weren't able to meet with each user, so sent out a survey in addition to the user interviews. The survey included screenshots of our design solutions and questions about usability and satisfaction. We structured the survey into 4 sections (creating, editing, viewing, and exporting), and asked the users to rate each one on a scale of 1 - 5. Results are shown below.

We iterated the designs and crafted prototypes to test with those same users. Not only did we receive feedback, but were able to witness each user's interactions with the designs. This process revealed additional nuances, leading us to optimize button placements and streamline the editing workflow for a faster, more intuitive user experience.

We then created a list of action items, ranked based on priority and size. From there, I would make the necessary revisions in Sketch, then retest with our users.

A big insight from the research was that Reports is rarely in a "final state", and is constantly being manipulated. To streamline user interactions and enhance efficiency, we knew we had to change the experience to allow for easy, quick editing of certain fields.

The next iteration looked a little like this. We pulled out popular action buttons, allowing the user to quickly export or create Google Sheets

We felt like we were in a good place, but wanted feedback from the founders before proceeding.

The CEO was not in the tool daily, but when he was, he monitored the health of each client using our dashboard. The nested actions under the edit button were not intuitive to him, and created some cognitive load

The CTO was in the tool daily, often building reports to QA integration data. He challenged us to push the "live editing" mode even further by pulling out even more actions to reduce click count.

We iterated through design enhancements, reviewing another time with the founders as well as our users. Both groups signed off and we were now ready to ship the updates!

For the collection view, we made common actions simpler to accomplish. Users can easily search or create a report via the buttons in the header, as well as pin, duplicate, or delete a report when hovering on a report card. We also incorporated access to developer tools in the UI (Pokémon ball).

When creating or editing a report, we transitioned the UI from a dark background to a lighter mode to reduce the contrast in page transitions.

We improved the source selection step by organizing the data by platform and quickly toggle between all and selected items.

We added the ability to select rolling date ranges (a popular user request), saving the user time from updating the date range each week.

Previously, "Pivots + Metrics" were separates steps, so we merged these into a single step called "Fields" since our users thought about the 2 metrics together.

A lot of updates went into the detail view, but from a high-level we introduced in-line editing for date range, the ability to refresh data for the entire report as well as individual tables, quick actions to export via email or Google Sheets, the ability to rearrange and resize columns, as well as surface any alerts or issues with the report.

We not only surfaced the alerts that are occurring within a table, but provided guidance on ways to remedy the issue.

We allowed the user to quickly manipulate the date range to change the data shown in the table.

We reduced clicks by offering shortcuts to the pages that require more advanced editing.

We saved the user time by incorporating bulk actions to multiple tables in a report.