Lyra - Visualization Design Environment

University of Washington Interactive Data Lab

Designing and building a better user experience and technical architecture using React and Redux.

See it Live

Bocoup worked with the Interactive Data Lab (IDL) at the University of Washington to tackle the redesign of the next version of Lyra, an interactive visualization development application. Together we designed and implemented a new more robust architecture using React & Redux, and tackled user experience challenges that limited the reach of the first version of Lyra. The resulting design and architecture have set Lyra on a clear path for further extensibility and growth.

Challenge

Lyra was originally built as an Angular application, and supports the creation of a rich range of graphics through intuitive drag-and-drop interactions. However, users of the original application encountered some persistent user experience issues, and the Angular architecture was becoming a barrier to the improvements IDL hoped to make to the interface. Arvind Satyanarayan had begun to re-implement Lyra as a React application, and we joined the project just in time to help him tackle some architectural and UX challenges around feature discovery and ease of use.

Solution

Bocoup worked with Arvind to design and implement the new version of Lyra. Starting with a React-based prototype for the new version, we identified challenges in the application data flow and redesigned the architecture to create a single source of truth for the Lyra application state. Using Redux and Immutable.js, we were able to make it easier to trace the flow of control in the application, simplifying the design required to add new features.

Simultaneously we began tackling some of the user experience challenges identified by the users of the first version of Lyra. Through user interviews we identified the goals and needs of potential Lyra users and created personas that inspired our feature design choices. We also iterated on the overall UI clarity of Lyra and came up with layout adjustments that resulted in a better user flow through the tool. Lastly, we focused on making Lyra a more welcoming tool by designing and implementing guided learning tools, such as hints and tutorial walkthroughs.

Impact

The new version of Lyra is poised for success. While Lyra is still being built-out to provide the full breadth of functionality, it is now armed with a stronger architecture that is much easier to extend, and a clearer set of UI and UX patterns to support that extensibility. During our work we produced extensive documentation, both of our tool and our choices, which will empower students and other contributors to grow Lyra in a sustainable way.

I really enjoyed working with KAdam and Sue. It was fun to flesh out parts of Lyra with them. I think the code base is in good shape. I feel confident that the things we have in there work the way they are supposed to.

Arvind Satyanarayan

More work like this at Bocoup