Quick Starts in OpenShift
Quick Starts in OpenShift: A catalog, navigation hints, and microinteractions
What I did
Collaborate with a large UX team (30+ designers) to create cross product design solutions for quick starts
Push quick starts in OpenShift past the minimum viable product stage by focusing more attention on interaction details
Design navigation hints within the quick starts
Experiment with UI animation
Background
OpenShift is Red Hat® OpenShift® is a hybrid cloud, enterprise Kubernetes application platform. Users utilize OpenShift to manage workloads, build cloud native applications, and deploy code. Source
OpenShift is broken into two different portals, the developer and the administrator. I mainly design for the developer portal. I joined the OpenShift UX team in April 2020.
One major goal of the OpenShift UX team right now is to improve the getting started experience so I have been contributing to this goal by improving and enhancing the quick start tutorials that are available in OpenShift.
My role
UX/UI Design
Tools
Sketch, Marvel, Adobe XD
Platform
Web based application
Timeline
August 2020 - Present
Design goal
The quick starts were in a minimum viable product stage when I first started this project so my goal was to take the quick starts to the next level by improving the microinteractions, designing a more scalable and searchable quick starts catalog page, and adding navigation hints to the quick starts to make it easier for users to locate navigation items in the UI.
Design process
The design process for working on the quick starts catalog page, quick start navigation hints, and improving the quick start microinteractions has been an extremely collaborative process that has involved many folks on the OpenShift UX team. Since the getting started experience is a cross product experience, both portals of OpenShift are impacted by any design changes we make so it’s been a good learning experience to navigate complex problem spaces.
Quick start catalog
Before
This was what the minimum viable product quick starts page looked like.
After
The improved quick starts catalog page.
Filtering and sorting capabilities were added to the quick starts page to make it more dynamic and catalog like. They are smaller additions but they do help to improve the page’s UX. More advanced filtering and navigation concepts were explored but they did not make the final cut because of technical constraints and stakeholder needs.
Quick start navigation hints
A user clicks on a navigation point in the quick start to reveal a hint.
Another enhancement to the quick start that I designed were navigation hints. The navigation hint aims to call out a point in the navigation or masthead to the user so they can get more comfortable with navigating through the UI if they are newer to OpenShift.
While working on the navigation hints, I experimented with UI animation, which was a fun learning experience.
Flow for the navigation hint animation
Navigation hint interactive prototype
Interaction design by me and visual design done by Michael Celedonia.
I collaborated with one of the visual designers on my team to create an interactive prototype that features the different navigation hints. Collaborating with other designers on the team really helped to take the design to the next level.
Quick start microinteractions
Improving the microinteractions in the quick starts side panel to make it easier for the user to get back and forth between the steps.
The quick starts panel was still in the minimum viable product stage when I first started working on improving the quick starts experience so I wanted to enhance the microinteractions in the quick starts panel.
Some improvements that I made to the quick starts panel included:
Made it easier for the user to go back and forth between the steps in the quick start
Made it more clear to the user which step they are currently on and which steps they have completed
Cut down on the amount of unnecessary content that’s featured in the quick start since there’s limited vertical space to work with
What I learned
The devil is in the details. To take a design to the next level, you need to pay just as much attention to the details as you do the main parts of it.
Learn as much as you can about the background and history of the original design. To more fully understand the design’s history and its current state, I talked to the designer who did the original design to get more context.