Lyra - Visualization Design Environment

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.

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.