LXD GUI,
Canonical
LXD is a next generation system container and virtual machine manager.
The LXD UI efforts were catching up on a product that was already there for years. Our main stakeholders were the LXD founders and engineers, as well as the whole LXD community that we tried to engage as frequently as possible. Within 8 months, we have managed to implement the main functionalities, as well as to build on top of the CLI experience and make it user-friendly and easy to operate with. Our users were happy to no longer check the technical documentation while trying to figure out the concepts or searching for the LXC/LXD-specific commands.
Learning playground
Every design adventure starts with a messy Miro playground full of sticky notes, graphs, quick sketches, screenshots and ideas to be developed. Zoom to see details.
mapping & flows
When designing a product from scratch, I find it important to always keep an up-to-date mapping of the product flows as each initiative ends up building on top of the previous one. I always make sure to illustrate the flow between the different pages. A flowchart also helps me visualize the steps a user takes to complete a task or achieve a goal on the LXD app. I would usually map the imagined user experience prior to attacking the low-fidelity mockups. Having a detailed flowchart helps me validate the experience and my understanding with the stakeholders. What is more, a detailed flowchart is usually handy and lets the engineering team kick off their research phase too.
LOW-FIDELITY WIREFRAMEs
User research
As a next step, we have conducted 6 moderated research sessions with both internal and external LXD users. Some of these users were advanced, others were familiar only with the high-level LXD functionalities. This allowed us to gather a diverse range of perspectives and insights, and to identify common themes and patterns in user behavior and feedback.
The research findings are then summarized by topic and product page, as well as categorized by their order of importance. When working on the research readout, I focus not only on the things to be improved but I also take the time to celebrate the team’s success and point out all the good stuff. I believe the user research is also a moment for us to note the good things and celebrate when we are moving in the right direction.
high -fidelity
LXD UI is part of the Canonical product suite. To make sure all these share a common look and feel, we all use Vanilla (www.vanillaframework.io) - an open-source CSS framework, established by the Web and Design team within Canonical. Constant collaboration and regular discussions help us stay aligned and make sure our products meet the Canonical standards.
conclusion
The LXD GUI project quickly became a success, fulfilling a long-standing request from users for a visual console interface. Watch the YouTube video to see the UI in action, and explore the comments to see how the community responded.