Clients
Liminal
Description
This project was built for a client who needed a better way to visualize the relationship between products, requirements, and capabilities. Initially, their importance levels (low, medium, high) were represented with plain text (L/M/H). While technically sufficient, this made the visualisation harder to read. I redesigned the approach by creating a matrix visualisation with products on one axis and hierarchical requirements and capabilities on the other. At first, I considered using circle size to indicate importance, but quickly saw that size is difficult to compare accurately when many symbols are close together. Together with the creative director, I developed a set of iconic encodings: High importance as a filled circle, Medium importance as a ring with a smaller dot inside, Low importance as an empty ring. This design made the ordinal scale immediately intuitive, with filled forms drawing more attention than outlines. The technical implementation integrated D3.js with React. React managed the state, search, and interface logic, while D3 handled scales, layout, and rendering. I also added rich interactivity—tooltips, highlighting, search, and click actions—ensuring that users could navigate both large and small use cases effectively.
Impact
The final visualisation became a core tool for the client, allowing them to easily compare how products fulfilled different requirements and capabilities. By transforming importance scores into intuitive icons and providing rich interactivity, the tool greatly improved usability and helped internal teams make better comparisons.
Year
2025
Tools
d3.js, react
Challenge
One of the hardest challenges was scaling the visualisation across very different dataset sizes. For small cases, the matrix could feel empty; for large cases, it risked becoming overwhelming. Another recurring issue was text handling. Requirement labels varied in length, so I had to implement dynamic layouts that adapted gracefully. Finally, creating many layers of interactivity—tooltips, highlights, clicks—while keeping the code clean and avoiding conflicts required careful planning.
Learning
This project taught me how to design visual encodings that align with perception. By replacing letters with symbolic encodings, I saw how quickly users grasp ordinal meaning. I also learned how to integrate D3 with React in a robust way, ensuring that the visualisation was both dynamic and maintainable. Working with a creative director gave me new perspectives on UX design and the subtleties of crafting interfaces that are both functional and visually engaging. Finally, building a scalable visualisation that worked equally well for datasets with just a few products or dozens was a valuable exercise in layout and design flexibility.
Topics
Matrix visualisation, icon design, React, d3.js, tooltips, Search bar, Highlighting, Sorting, Animation
Use Case Explorer
An interactive matrix visualisation mapping products to requirements and capabilities, redesigned with intuitive visual symbols and implemented with D3.js integrated into React.