PatternFly & Red Hat Virtualization
PatternFly & Red Hat Virtualization
What I did
Led the UX efforts to transition Red Hat Virtualization to PatternFly 4
Utilized the open source design system PatternFly to align Red Hat Virtualization more with other Red Hat products
Redesigned existing Red Hat Virtualization UI features using the newest version of PatternFly, PatternFly 4
Assisted developers with navigating PatternFly 4 and determine which components are the best suited for use cases
Created a more consistent product experience throughout Red Hat Virtualization
Background
PatternFly is the open-source design system that is used across all Red Hat products.
In the past, Red Hat Virtualization used a custom UI library different from PatternFly, making it a significant effort to transition Red Hat Virtualization to PatternFly 3. I joined the Red Hat Virtualization product team when they were mid-transition to PatternFly 3. I provided UX expertise and guidance in the last stages of the transition to follow through.
After the transition to PatternFly 3 was complete, I started to figure out a transition plan with the product team to PatternFly 4. It was released not too long after the initial transition to PatternFly 3 was completed.
Red Hat Virtualization is also known as oVirt in the open source community.
My role
UX/UI Design, Visual Design
Tools
Sketch, Sketch Cloud, Invision, PatternFly (Red Hat’s design system)
Platform
Web-based application
Timeline
July 2018-April 2020
Design goal
My main goal was for Red Hat Virtualization to adopt PatternFly as fully as it could. By adopting PatternFly, the overall experience would be more unified and consistent with other products in the Red Hat product portfolio. Improving consistency and usability were key design goals of mine.
Design process
Mid Transition to PatternFly 3
I joined the Red Hat Virtualization product team when Red Hat Virtualization was transitioning to PatternFly 3. As the only UX designer on the team, it was my responsibility to lead the rest of the transition.
For context, this is what the Red Hat Virtualization administrator portal home dashboard looked like before fully transitioning to PatternFly 3.
Fully Transitioned to PatternFly 3
This is what the Red Hat Virtualization administrator portal dashboard looked like after fully transitioning to PatternFly 3.
The virtual machine portal was a recent addition to Red Hat Virtualization before I joined the product team. However, major features still needed to be designed and implemented, so I continued that effort as the team’s lead UX designer.
The ‘Create Virtual Machine’ wizard is one of the key features of the virtual machine portal. A stepped wizard was designed to help the user more easily and efficiently create a virtual machine.
Another main feature of the virtual machine portal is the virtual machine dashboard. The cards on the virtual machine dashboard could be edited and modified. As a UX designer, I had to think about various states and scenarios that the user might go through when editing their virtual machine.
In this scenario, the user is creating a disk for the virtual machine.
Another key feature of the virtual machine dashboard is that the user can view virtual machine utilization information, make edits to the virtual machine, and modify different virtual machine facets like snapshots, network interfaces, and disks.
Virtual machine pools were another feature that was added to the virtual machine portal during the transition to PatternFly 3.
For context, a virtual machine pool is a group of virtual machines that are identically configured by an administrator so that individual users can check virtual machines out like a library book. The user can check out the virtual machine for a certain amount of time before the virtual machine is returned to the pool.
One design problem I had to figure out a solution for designing the virtual machine pools was how to visually represent them since pooled virtual machines are characteristically different from the individual virtual machines a user creates on their own.
Red Hat Virtualization and making the transition to PatternFly 4
PatternFly 4 is the next generation of the PatternFly design system. As the lead UX designer for Red Hat Virtualization, I started developing a path forward to begin the transition to PatternFly 4.
To more fully understand what a PatternFly 4 transition would look like in reality, I started to have conversations with developers, project managers, and other product team members to figure out the next steps.
After getting input from the larger product team, it was determined that the transition to PatternFly 4 would be gradual and incremental. Red Hat Virtualization is an extensive application, but there was not enough bandwidth on the development team’s side to fully take on such a great effort.
As the lead UX designer, I took this feedback and changed my design strategy to transition to PatternFly 4. Instead of one significant UI overhaul to PatternFly 4, it made more sense to transition high touch elements of the UI and new dialogs to PatternFly 4 and gradually go from there.
Red Hat Virtualization login screen. Red Hat Virtualization is also known as oVirt in the open source community.
One of the first pages to get transitioned over to PatternFly 4 was the login screen since it’s the first UI the user interacts with when they open Red Hat Virtualization.
The current Red Hat Virtualization administrator portal home dashboard is mid transition to PatternFly 4.
Key components like donut charts, sparkline charts, font, colors, typography, and icons have already been transitioned over to PatternFly 4.
Export virtual machine dialog and its different error states in PatternFly 4.
New dialogs like the ‘Export VM (Virtual Machine)’ have been transitioned over to PatternFly 4 as well.
Red Hat Virtualization fully transitioned to PatternFly 4
To envision what a full PatternFly 4 transition would look like, I created exploratory designs of what the two portals of Red Hat Virtualization would look like and how they would behave.
Here are some examples of fully transitioned UIs.
Mockup of the Red Hat Virtualization administrator dashboard fully transitioned to PatternFly 4.
Mockup of the ‘Create virtual machine’ dialog fully transitioned to PatternFly 4.
Mockup of a virtual machine dashboard in the virtual machine portal fully transitioned to PatternFly 4.
While creating these exploratory PatternFly 4 designs, I also took the time to explore what new features might look like in PatternFly 4.
What I learned
In larger product portfolios, using a consistent design system is a necessity. After adopting PatternFly, Red Hat Virtualization’s overall UX became much more consistent with the rest of the Red Hat product portfolio.
Larger UI transitions take a lot of time and effort. Transitioning a complex UI over to a new design system and UI framework takes a lot of time, effort, and team bandwidth to complete so you have to be patient and take it a step at a time.