The open source way.
INTRODUCTION
For my sophomore summer internship, I (virtually) joined Red Hat’s UXD (User Experience Design) team.
MY POSITION
UX Interaction Design Intern
MY ROLE
Interaction design
Visual design
Product thinking
TOOLS
Sketch
Marvel
Github
THE TEAM
Colleen Hart (UXD Manager, OpenShift Lead)
Gina Doyle (Designer, PatternFly and OpenShift)
Matt Carrano (Designer, PatternFly)
Liz Blanchard (Design Lead, OpenShift KNI)
TIMELINE
3 months
May - August 2020
BACKGROUND
Here’s how the UXD team is divided at Red Hat:
Interaction designers (me!)
Visual designers
UX researchers
Developers
These 4 teams work together to support the company’s vision in becoming the world’s leading open hybrid cloud provider. I worked primarily on the OpenShift Container Platform and contributed to PatternFly, Red Hat’s design system. I communicated customer needs and use cases with cross-functional teams, working with developers to implement strategies and UX improvements that ensure technical success. As Red Hat is an open source company, most of these projects are tracked on GitHub (see: OpenShift, PatternFly). We worked in 3-week agile sprints.
MY PROJECTS
OpenShift Container Platform
The Red Hat OpenShift Container Platform is a consistent hybrid cloud foundation for building and scaling containerized applications. It also houses an OpenShift design website.
PatternFly Design System
PatternFly is Red Hat’s open source design system created to enable consistency and usability across a wide range of applications and use cases.
OpenShift Container Platform
📈 Dashboards
My largest project was enhancing cards and defining common dashboard card templates for the OpenShift Container Platform. These would later be added as conventions to the PatternFly design system.
Current Dashboard Design
Status cards serve as a high-level overview of the main statuses of components of the application. Admins should be able to understand the status of their applications with one glance.
✉️ Status Card
Current Status Card Design
PROBLEM
😩️ The user must scroll through all the notifications
With the current design, the user must scroll through all of the notifications to read them.
🔔️ The notification drawer can display up to hundreds of notifications
Depending on the use case, the status card can hold several components, each with their own subcomponents, adding up to tens or even hundreds of notifications.
How might we aggregate status notifications to make a digestible overview?
SOLUTION
I used icons to create a compact, digestible overview of notifications, while maintaining the ability to open the notification drawer and see details.
KEY FEATURES
🔨 Ability to dig deeper
The redesigned card includes a "View all" link after those labels that will open the notification drawer for more details.
👁️ Overview at a glance
The redesigned card replaces the notification list with labels that include the number and type of notifications that are in the notification drawer.
Notification Priority
PatternFly
The PatternFly Design Kit consists of a Sketch template file and symbol library. From our use case above, I added the aggregate status cards to the PatternFly Design Kit.
🔧 Design Kit
My Status Card Added in PatternFly Design Kit
After adding these to the PatternFly Design Kit, I wrote design guidelines on the PatternFly website on card types, usage, and views. I researched existing design systems, such as Material Design and Carbon Design, in my research.
📏 Design Guidelines
My Card Design Guidelines Added to PatternFly
IMPACT
✅ resolved 10 Jira product design stories and created 8 new Jira stories
✅ resolved 2 issues and filed 2 new issues related to the OpenShift Design website
✅ resolved 21 issues in the PatternFly design system
✅ identified 5 new issues
Over the summer, I
KEY TAKEAWAYS
Always ask questions! There is no such thing as a bad question.
Don’t be afraid to reach out to people, even when they seem unreachable.
HIGHLIGHTS
