Red Hat on GitHub

 

My Role
UX Research, UX/UI Design

Platform
Webpage

Tools
Sketch, InVision

Timeline
March 2018

 
 

Working with a cross-functional team, I collaborated on the design of the official page for Red Hat on GitHub. I conducted competitive analysis, led the experience and interaction design of the page, and helped to get the page launched in time for Red Hat’s 25th anniversary.

 
 
rh-github-banner-3.png
 
 
 

Background

The ask

Being the largest open source company in the world, Red Hat has been part of open source communities for more than 25 years. While the company is well known for its involvement in open source communities, it has been long overdue for it to have a centralized and vendor neutral place to present what and how the company contributes to the open source communities. Having such a place would also provide a way for people to discover open source projects to contribute to. As part of the celebration of Red Hat’s 25th anniversary, there is a need to launch a page for Red Hat on GitHub to support the goals listed above.  

 

Goals

With the ultimate goal of launching the page in time for the celebration, we also strategically approached design to achieve the following goals -

  • Have an effective presentation of the 200+ open source projects that Red Hat has been a part of;

  • Keeping the page simple and static for easy update and maintenance by the community;

  • Make the page appealing to our target users, and reflect Red Hat’s core value at the same time.

 
rh-github-banner-3.png
 
 

Design

Competitive analysis

Before diving into designing any pages for this project, I conducted a competitive analysis to inform design directions of the project. Here are a few questions I set out to answer -

  • How are other sites organize and present their project information?

  • What kind of functionality (filter, sort, search, etc.) do they support on the site/page?

  • How do they tell their open source stories?

 
rh-github-competitive-analysis.png

Competitive Analysis

 

I reviewed 10 competitor sites and share my findings with the stakeholders. The competitive analysis guided how I approached the design of this page -

  • Use card layout for easy information scanning and mobile responsiveness

  • Provide search and filter to help information finding

  • Having statistical data on the page may attract users’ attention

  • Include a page section that provides information about Red Hat as a company and career opportunities

 

Initial Design

The other UX designer and I individually worked on a few design proposals, then we presented the design concepts to the stakeholders.

 
 
rh-github-cardexplore.png

Design exploration for card layout

 
 

For all my design concepts, I included these elements: navigation, hero content area, featured projects, all projects, learn more and call-to-action, and footer.

The primary users of the page would be developers who are interested in learning open source projects that Red Hat has been contributing to. Excessive marketing content on the page may not be appealing to this group of users. The page needed to be straightforward and get to the point in terms of information hierarchy, organization and presentation.  

I chose a grid layout for the overall page design since it had a better support for information scanning and it was easy to implement (we can leverage the existing PatternFly design system), and it would have better responsiveness.

 
 
rh-github-designconcept-1-2x.png
 
 

Concept A (left) - Black and red color scheme to reflect the brand and includes statistical data in the hero content area.

Concept B (right) - Lighter color for the hero content area with a different layout treatment for the featured project section.

 
 
 

Final design

In the end, we decided to use a generic card layout for the featured project area since not all project logos are in a square or round shape, also to combine the best out of all the design concepts from both designers to meet our goal of launching the page in time.

 
 
rh-github-finaldesign-2x.png
 
 

The final design

 
 

The final design meets the goals in these ways -

  • The page serve as an extension of the Red Hat brand. We want the content, the look and feel to reflect our core value.

  • We used different visual treatment for the featured project section and the all projects section to prioritize content and to help with navigation.

  • We keep a simple and easy to use plain list view for the all projects section, so that users can get to what they are looking for quicker and easier.

  • We used card and list layout so that it can be built in a shorter timeframe and to support easier community maintenance in the future.

 
 

Results

We launched the page in time for the celebration and everyone loves it for its simplicity and ease of use! You can view the page live here.

The page is also featured on Red Hat’s 25th anniversary micro-site and the “Red Hat & open source” section on redhat.com.