Barclays Data Visualisation
Designing a stock performance dashboard that turns raw financial data into clear, filterable visualisations with interactive charts, heatmaps, and responsive layouts for desktop and tablet.
about.
Project Overview
The brief. The project centred on raw stock price data for six companies across two sectors (Technology and Finance), covering end-of-day prices, daily price changes, and daily percentage changes over a five-day window. The challenge was to design a dashboard that lets financial professionals perform end-of-week stock performance analysis quickly and confidently.
The core problem. Dense, multi-dimensional financial data needs to be instantly scannable. Users should be able to spot the biggest movers, compare sectors at a glance, and drill into individual company trends without losing context.
My Role
I owned the full end-to-end design, from data analysis and information architecture through to high-fidelity UI and interactive prototyping. That included structuring the raw data, defining the visual hierarchy, selecting appropriate chart types, building a colour and typography system aligned to brand guidelines, and delivering responsive layouts for desktop and iPad.
Design Process
Understanding the data. I started by cleaning and restructuring the provided datasets, consolidating percentage changes, EoD prices, and daily differences into a format that would support multiple visualisation types. This step was critical for identifying which chart patterns would surface the right insights.
Information architecture. I structured the dashboard around three views: an overview (week summary with top risers/fallers and sector trends), a sector view (Technology vs Finance comparison), and a company view (individual daily trends). Global filters for company, sector, and date range sit at the top so users can slice data without losing their place.
Visual exploration. I tested line charts (small multiples), horizontal bar charts, heatmap matrices, sector comparison area charts, and interactive data tables, referencing D3.js patterns to ensure the visualisations would translate cleanly to an Angular + D3 build. The final dashboard uses a modular card system with summary tiles, multi-series line charts, stacked bar charts, a colour-coded heatmap, and per-company sparklines.
Responsive design. The tablet layout preserves the same mental model as desktop with the same modules and reading order, reflowed into a narrower grid. Typography, spacing, and colour semantics stay consistent across breakpoints.
