From rows of data to patterns

Making comparisons easier

Voxxify grouped survey responses into personas, but comparing satisfaction across several groups and survey time points produced a lot of information without making the patterns obvious.

Testing different ways in

I explored several visual directions, including bar charts, barbell plots and heatmaps. I also looked at how response volume could be shown alongside satisfaction without adding more visual noise.

Seeing the bigger picture

The Persona Heatmap uses colour for satisfaction and circle size for response volume, making it easier to scan across personas and quickly spot areas that need attention.

Making emotion visible

Seeing beyond the data

Survey results could show what employees were talking about, but not always how they felt. Understanding the emotional context meant digging through individual comments.

Finding a familiar visual language

I explored different ways to make emotion easier to scan, eventually using emojis as a familiar way to represent sentiment. I also wanted the visualisation to stay connected to the comments behind the data.

Connecting patterns to people

MojiMap maps emotions to topics, with emoji size showing comment volume. Selecting a topic reveals the comments behind it, creating a simple path from pattern → context → evidence.

Showing what changed, not just what exists

When change gets lost in the detail

The previous feature contained valuable information about how topics and comments changed between survey rounds, but there was no clear hierarchy for understanding those changes.

Borrowing from familiar patterns

I explored different ranking and leaderboard patterns, inspired in part by how games turn lots of information into a simple hierarchy. I also tested highlight cards, rankings, comments and interactions for revealing more detail when needed.

Giving change a hierarchy

I developed a leaderboard-style layout for AI Insights Trending, allowing users to scan topics and understand how their response counts had changed across survey rounds. Highlight cards were used to draw attention to notable trends, while secondary information could be revealed through interaction.

The leaderboard format was ultimately chosen because it gave the data a stronger hierarchy and made changes easier to compare.

I also created interactive prototypes with different component states, including default, hover, active and disabled states, allowing the team to explore how the feature would behave before implementation.

Making time easier to follow

When the timeline becomes unclear

The X-Grid needed to show how service priority and satisfaction changed across survey rounds, but displaying every point made it difficult to tell which round was previous, current or somewhere in between. There was also too much competing information around each value.

Designing for comparison, not everything

I iterated through arrows, paths, sliders, sparklines and comparison controls, while exploring ways to hide rounds that weren't relevant to the current comparison.

Designing beyond the current round

The final direction focused attention on the current and comparison rounds, with the option to reveal the full history when needed. It also made me think more about how a design would scale as new rounds and comparisons were added, rather than only solving the immediate requirement.

Turning insight into action

From insight to next steps

The Action Planning feature needed to help users turn findings into concrete actions, but the initial flow didn't account for every state a user might encounter.

Starting with the flow

I mapped the journey and used lo-fi prototypes to work through the structure before developing the MVP. I also explored different ways of setting targets, including numbers, percentages and CSAT categories.

Designing for the real journey

The first version focused on the core experience of setting and managing actions, with different states prototyped before handoff. Testing the flow also exposed gaps I hadn't initially considered, reinforcing the value of working through a feature from the user's perspective before development.

Turning one-off decisions into a design system

When consistency becomes a challenge

As more features were added, maintaining consistency across colours, spacing, components and interaction states became increasingly difficult.

Building the foundations

I began formalising the design system in Figma. I distinguished between styles and variables and created a naming convention based around class, type, element, value and state.

Designing beyond one screen

I created reusable colour variables, tooltip components and shared UI patterns, while introducing Auto Layout throughout the designs to make components more adaptable to changing content.

Colours were tested for contrast and colour-blind accessibility, and component states such as hover, active and disabled were considered as part of the system rather than as one-off designs.

This became an important shift in how I approached design. Instead of thinking about each screen individually, I started thinking about how a design decision would behave across the entire product and how another designer or developer would work with it later.