605 IMP4CT

Making TV viewership data sing.

Overview

I worked with 605 as the lead UX Designer to rebuild their flagship SaaS product.

Through iterative prototyping and demoing, we built a product that changed the TV Analytics industry.

The Challenge

Power users need to compare 3 metrics simultaneously, executive users want a quick takeaway summary, and less sophisticated users have trouble reading even basic graphs.

We had our work cut out for us.

Deliverables

  • User Experience Research
  • User Interface Design
  • Figma Prototypes
  • Full Design Documentation for Engineering Hand-off

My Role

  • Lead Product Designer
  • Product Vision & Thinking
  • Solo Designer of the Entire Application
  • UX Research
  • Live Demoing & Presentation

Timeline

  • 1.25 Years

Who I Worked With

  • 1 Technical Product Manager
  • 1 UX Researcher
  • 4 Internal Users (Data Science)
  • 17 Fortune 500 Clients/Users
  • 6 Engineers
  • Senior Leadership

Visit Site

Step 1: Discover User Needs

Before engaging with internal and external clients, I reviewed the assets and presentations they currently offered to their clients to look for patterns of value delivery.

Next, my TPM and I initiated the Interview portion to test assumptions and discover opinions.

Then we observed our users manually creating their presentations via contextual inquiry/field studies over zoom.

We had noticed strong analysis patterns, so the architecture and requirements were gaining shape.

We had direction.


Step 2: Low Res Designs & Tests

After mapping out sections and functionality to UI components, I ran my designs by my TPM and Engineering lead to confirm that my design was technically feasible and fulfilled the user's needs.

I then communicated the design to senior leadership to confirm that the design was in line with company goals.
Tears of joy were shed by our CPO (no, really).

After getting confirmation, I presented variations of the app-to-be, via Figma Prototypes, to our users and gathered feedback regarding the efficacy of each section and feature.

Through iterative updates, presentations, and feedback gathering, the order and inclusion of sections of the application became clear.

It was at this point that I knew that high resolution designs were needed.


Step 3: High Res Design

Using Figma, I created the design system, that would serve as the building blocks of our application.

Once this was built, I could assemble pixel-perfect screens with reusable components that gave users precisely what they needed within a delightful UI.

I knew that I would be passing this off to Engineering soon enough, so I built documentation into the process by creating developer notes that explained interactions, states, and user flows.


Step 4: Usability Testing & Benchmarking

My TPM and I showed the Figma Prototype to internal and external users to observe;

  • how users interacted with the interface
  • what questions they asked
  • what they were confused about, using contextual inquiry
  • where they looked and clicked the most, using heat-mapping and eye tracking

After making small tweaks to design and functionality, it was time to get this into development with Engineering.


Step 5: Implementation & Tweaks

Since I have engineering experience, writing notes that engineers can understand was easy. The handoff was as smooth as ever, but that doesn't mean that I had considered all of the edge-cases.

Luckily, I got to work with some talented and thoughtful Engineers, who communicated limitations and issues that lead to adjustments in design.

Since I know the lingo and how they thing, coming to solutions together was a breeze.


Developer Notes 1 for 605 IMP4CTDeveloper Notes 2 for 605 IMP4CT