Xenon Arc

Executive Summary

Xenon Arc is a distribution company that connects clients to their products and customers through a database called ConnTact.

Challenge

Zero client adoption of the ConnTact database due to confusing interface and poor information architecture.

Approach

User-centered redesign with 11 stakeholder interviews, iterative prototyping, and extensive usability testing.

Outcome

Redesigned dashboard with improved data visualization, intuitive navigation, and clear information hierarchy that users praised for clarity.

Problem Statement

None of Xenon Arc's clients used ConnTact because the information was confusing and the innovative visuals distracted from the data. Instead, clients relied on annual Excel reports prepared manually by Xenon Arc representatives.

Goals

Redesign visual analytics and tables to make information easier to understand
Simplify navigation so users can find information without multiple clicks
Interview experts and client representatives to determine what data belongs on ConnTact

Design Evolution

Complete design progression from initial concepts to final implementation through iterative interviews and testing.

Analysis View

Comprehensive analysis dashboard showing data trends and insights.

Research

11

Participants (met each twice or more)

30-60 min

Interview duration

We interviewed finance members, client representatives, managers, and chiefs across multiple sessions. For each interview, I created a mockup or high-fidelity wireframe so participants could give feedback on both usability and visual identity.

Key Findings

Obstacle: Conflicting opinions on what data ConnTact should display, plus the challenge of making the database self-sustained while participants wanted manually-updated real-time data.

Solution: We used participative design sessions with managers and client-facing team members, finding common ground on data that could be automated without human intervention.

Visual Design

I chose lighter green tones over a white background based on developer feedback that dark themes highlight color over text. I also collaborated with a colorblind colleague to ensure accessible color choices across all chart types.

Data Visualization Iterations

Pie Chart Iteration 2

Pie Chart Iteration 3

Pie Chart Iteration 4

Line Graph Design

Bar Graph Component

Key Design Changes

Added locations (QDMX, QDNA, QDEU) of the business at the top as a checkbox
Changed the content of the summary at the top to combine both sales and purchases instead of two pages
Added a slider for the date by month, quarter, year, or current fiscal year (adding the filter next to it as users couldn't find the filter originally)
Added the average year for both purchases and sales
Made a pie chart to represent data more clearly
For Growth section, instead of a radical bar chart (as it didn't show revenue growth visually), I designed it to include numbers instead
Added a graph similar to OTIF History because users thought that was the best representation from the original website design
Added a light version (accessible in settings)

Usability Testing & Outcome

I ran bi-weekly usability sessions with task-based testing (e.g., "find the filter button" or "locate OTIF History yearly"), where most users completed tasks within 10 seconds. By the end, participants praised the redesign for its clarity and liked the ability to filter and rearrange information.

All Figma Design Versions

Design files showing progression from May to July:

First Version (May 13-14) Second Version (May 23-31, June 11-21) Third Version (May 23-31, June 11-21) Fourth Version (June 6-12) Fifth Version (Updated June 24th)

ROLE

TIMELINE

TOOLS

Interactive Prototype