Red Hat Marketplace Select by IBM
UX/UI Design
Designing a method and process to create dynamically generated themed UI elements for customized versions of
Red Hat Marketplace.
Roles
Danielle Justilien
UX Designer
Neil Everette
Design Principle
Willow Lafone
Visual Designer
Deliverables
Prototype, sales presentations, live experience
Tools
Figma, Sketch
Time
About 6 weeks
Project Overview
Red Hat Marketplace (RHM) Select is a marketplace as a service offered by IBM/Red Hat, enabling customers to create a private catalog of managed software and assets for internal use across their companies. Out of the box, the product is branded Red Hat, with the iconic red theme and distinct fedora hat. However, customers required us to have the ability to replace the Red Hat branding with their distinct brand elements. Thus, theme customization was a major functional requirement of the product.
How might we create a method and process to allow Red Hat Marketplace customers to dynamically generate themed UI elements for customized versions of their Red Hat Marketplace Select accounts.
Setting the stage
Identifying touch points
Neil and I started this design process by auditing the current Red Hat Marketplace site. In Figma, we created a UI map identifying every page, component, and element, that would potentially be affected by a custom rebrand. Working with our development team, we brought these touch points forward and discussed what was and was not necessary to include for a custom branded experience.
Although it would have been ideal to be able to customize every bit of the site, we had to consider the ability to enable customers to implement these changes themselves through a theme editor, and consider the impact on our technology's capabilities.
The main UI touch points we determined across the site were:
header & footer
leadspace
icons
illustrations
buttons
Design exploration
Our mock brand, Avian, was then suggested to provide designs to gain stakeholder buy-in, give our development team the opportunity to test and approve our solution, and to provide a real, working example to potential customers. I took the lead in re-skinning Red Hat Marketplace in Avian's brand using our identified touch points.
We had the name "Avian" and a simple logo to start with, but my first job was in selecting the mock brand's colors. The brand palette was important because it need to be distinct from Red Hat's branding enough to make a visual impact, while also remaining within accessibility guidelines. We agreed upon the primary, secondary, and tertiary colors to be used and Avian's brand was complete.
Leadspace, header, & footer
In Sketch, I started design exploration with the home page leadspace - the trickiest part of the project. Being that RHM Select customers are mostly large enterprises with their own brand guidelines, we had to be careful not to alter their brand, but represent it simply and clearly.
After dozens of iterations and team feedback sessions, we landed on the final design template below. With this design, the leadspace background pattern would accommodate most company logos, the gradient overlay would allow the text to be legible while adding some visual contrast, and the copy itself was now more fitting for the user's context.
Final design
Exploration
Buttons, icons, & illustrations
For the buttons and icons, the largest concern was maintaining accessibility standards as the Avian brand colors were rolled out across the site. Icons were simply assigned the primary color, but determining the primary, secondary, and tertiary buttons and their associated states took some trial and error before eventual success.
Our award-winning Red Hat Marketplace illustrations also needed to be neutralized to accommodate the variety of brand colors that the website may take on. Willow did an amazing job in grey-scaling all relevant illustrations in a way that made them fit right in, no matter what company the site was branded to.
Gorgeous illustration by Willow Lafone
Final designs
After getting design approval from product management and development on the leadspace, overall design direction, and technical feasibility, I applied the Avian brand to every major Red Hat Marketplace Select page in standard and mobile screen sizes.
The custom theme editor
Patent submitted - details cannot be disclosed
The custom theme editor was a key piece in completing the user experience. We needed to create a tool that allowed the editor of the product to log into their Select account and easily generate and modify a custom branded experience for their company. That included a uniquely created leadspace and background image (used throughout the product interface) and basic UI elements (the determined UI touch points) that would allow the RHM site to take on the look and feel of the customer’s brand.
Our final design solution resulted in a tool requiring very minimal editing effort from the customer and no effort from the system integration team at IBM to create a uniquely branded product based on one single reference build, exemplified below.
The primary problems this tool solved:
1. Reducing the manual effort and time required for creating a UI themed product
2. Lowering of cost and time to market delivering the final product
3. Increasing pass rate of accessibility standards due to automated detection of errors of non-compliant WCAG standards
Implementation
Research Snapshot
With the full experience completed and approved by PM and development, my first stop was in presenting our work to the larger Red Hat Marketplace team to gain visibility and secure leadership approval.
Development then worked in two-week sprints to deliver incremental updates to the Select experience. Along the way, we found, tested, and de-bugged bugs to ensure the experience was consistent across the entire website and within a variety of use cases. This also led to some incremental improvements to the designs by development's recommendations.
Impact on the business
Client application
With our sales team ready and waiting to use this new RHM Select experience to increase customer interest, the Avian brand quickly translated to real-world customer examples. We were tasked by leadership to deliver custom theme examples for 18 current sales leads. For each customer identified by our sales team, I sourced the company logo and brand palette and applied their branding to the home page lead space and a few significant RHM Select pages.
Sales presentations
Each UI theme example was used in individual presentations for sales leadership to present to potential customers. This work directly correlated to a higher conversion rate of customers moving from trial/demo to purchase in Q2 and Q3 of 2021.
Takeaways
Personal growth as a designer
As one of the first master features I helped deliver on Red Hat Marketplace and within my first year as a UX Designer, I was extremely proud of what I was able to accomplish with the support and guidance of my amazing design squad. I was challenged in a variety of ways and as a result I came out of this project as a better designer, leader, communicator, and teammate.
Outstanding Technical Achievement Award
"This award recognizes technical accomplishments for innovation, invention, and/or reuse with a tangible benefit to IBM or its clients. Your contributions reflect our focus on operational excellence and quality in projects. Thank you for all your hard work and dedication."
Patent under review
The unique design challenge our team faced created an opportunity for creativity and innovation to thrive. By the end of the project, not only did we create a well-designed and thoughtful user experience, but we also invented a new tool to address this challenge within future IBM or external products.
Our patent has been submitted and is under review for:
The method and process to create dynamically generated themed UI elements for customized versions of IBM web product sites.
