Analyze-hero

Meltwater provides media monitoring, analysis, and reporting solutions for Public Relations and Marketing professionals.

We set out to...

Make it easier to navigate across the product suite with improved personalization to increase efficiency.

Reduce tech debt and increase the speed of product delivery.

Elevate the Meltwater brand with new visual and interaction design.

What we released

After

Before

Results

We saw rapid self-adoption of the new UI Chrome through customers leveraging the opt-in feature.

14 unique code instances of the navigation and app header were replaced with one service to power them all, allowing for significantly faster development for future iterations.

The sales team shared a ton of positive feedback about the new navigation structure's updated look and usability improvements. 

Customer feedback through the in-app feedback mechanism powered by Intercom was really quiet, which was great news.

My contributions

  • Information Architecture
  • Interactive prototyping
  • Stakeholder presentations
  • UX Research script development and results synthesis
  • Engineering team kick-off and support through the launch
  • User acceptance testing

Partners

  • Product Owner
  • UX Researcher
  • Visual Design Manager
  • Agile Coach
  • Engineering team
  • QA engineer

Where we started

A fellow designer and I booked a conference room and cleared our calendars, starting this project as a design-led initiative to show value to senior leadership. We first identified the core problems to solve with a light jobs to be done exercise. Helping us to think through the many complex journeys that customers took to get the most out of their Meltwater subscription.

jobs-to-be-done
nav-post-its-small

Defining new information architecture approaches

Our new recommended information architecture was grounded in two key areas. We would move away from internally focused navigation labels in favor of more action-focused choices. We would also more meaningfully group core platform functionality and areas of the app required for more admin-focused tasks. 

Planning with the roadmap top of mind

Cross-functional collaboration was critical to ensuring success. As part of this effort, we accounted for new product offerings in planning for the future and designed entirely new landing page approaches.

sitemap

Gaining support with rapid prototyping

Facilitating kick-off with the new engineering team

Meltwater has a really fun culture where engineering teams get to pick their own name to adorn their team's hoodies. Our tech lead chose the name, and I spun up a quick logo for our new swag. We were officially off to the races!

In partnership with our new Product Owner, I led a full-day team kick-off workshop, walking through the prior strategy and design work.

Cosmos-hoodie-small
nav-sequencing-board-with-magnifier-1
timeline

Phased release planning

One of the biggest challenges for this project was coordinating the development work with numerous feature engineering teams with competing priorities. We phased the efforts across multiple releases in collaboration with each team to accomplish this.

Starting with the MVP

With so many moving parts to this project and many different teams, each owning their own product area, we intentionally kept the MVP approach for our new landing pages simple to start.

Share-landing-page
landing-page-concept-sketch

Evangelizing future state improvements

To pave the way to a much-preferred minimum loveable product, we created concept wires with scalable approaches that could be leveraged to share more personalized content far beyond the simple cards of the MVP.

Looking back, I wish we could have designed a purpose-built generative AI copilot! Our customer needs certainly provided a great use case.

Reducing friction with opt-in

Our rollout strategy was to allow users to opt into using the new navigation to reduce risk and gather feedback before the switch became mandatory. We identified three main phases that would leverage targeted email messaging, interstitial modal announcements, persistent banner messaging, and new WalkMe onboarding tutorials. 

IA-roll-out-small
Screenshot-2024-05-02-at-10.51.39-AM
Flux-navigation-card-page

Elevating our design system

Numerous new components and patterns were created throughout the project in our Figma library, documented in our evolving design system, and developed in partnership with engineering. We took great care with all the fine details, including animation, accessibility with custom keyboard control, and new custom iconography.

divider-line

If you'd like to learn more about me or my work let's chat!

divider-line

More projects

Zwift Home ScreenProduct design

Zwift Club EventsProduct design

© Ange Romanska 2024