GEL Component Library


The GEL component library is a platform that encourages product teams such as, iPlayer and News to share and reuse code in the form of components. Developers within the product teams are able to upload their components to the platform by filling out a form with an included iframe sample. The submitted components are all viewable in shop window presented view and all components are linked to their code sources on GitHub for easy implementation.

The aim for the library is to help teams across products to improve their collaboration skills, which is improve usability in terms of accessibility and user experience.


My role for the project was focusing on the user interface and user experience. I had to work with other UX Designers, developers, stakeholders and an Information architect. It was important to work with different specialised experts to make sure that the platform was able to work well for developers and to allow them to integrate our product into their workflow. Therefore, it was key to perfect the submission form for components, to view uploaded components and to let users edit or delete components.


Illustrator, Sketch, HTML & CSS, Invision, accessibility tools (Apple 's accessibility assistant)

Discovery (Research)

1. User reseacher: developers

Since the platform was created for developers it was important to gather findings on the developer's work process to see how the platform could complement their workflow. We ran a few interviews with developers from a range of products, iPlayer, News, Music and more. For the interviews we were able to discover the developers were sharing links to their GitHub repository and some time creating components from scratch which is problematic.

Mandarin is a tonal language that has 4 tone (high, low-rising, falling-rising and falling). When a tone for a word is changed the meaning changes too, therefore it can lead to miscommunication.

2. Form patterns

GEL is the design foundation team in BBC UX&D, therefore, it is important to take consideration that the new patterns that we create will be used within other products. Since there were not existing form patterns I had to create a new pattern that used bits from myBBC's account patterns, but making changes that complied with accessibility standards

Development (process)

1. Interface development

Before creating wireframes I had to note down step by step process that the user will take in the form of a user journey map. Beginning from entering the webpage to downloading the assets on GitHub. The user journey map helped us to communicate with the Information architect to see what backend requirements will be needed.

2. User Journey Mapping

3. User testing

We performed a closed user testing with 5-6 random developers to see how they would respond to a coded beta version of the component library. The feedback that we gained from the testing helped us to change a some interactions and prompts within the submission form, which would help increase the success rate for completing the form.

Other findings were the ability to sort components based on preferences and notification for when a selected component has been updated.

Delivery (outcome)

Live product

The feedback from our user testing helped us to create beta version of the platform. This version was used for a closed beta and sent out to a small number of developers to see if it met their expectations. The testing is still taking place (May 2017) and will last for 3 months while we continuously tweak the product for full release at the end of the year.

Post-delivery: Accessibility Accessment

As an accessibility champion I had responsibility of testing new design patterns for visual and coded issues. For this product I reviewed screen readers and visual contrast for accessibility users. I was able to make the changes to make the product meet accessibility standards by working closely with the lead developer.

Personal Refection

This project has provided many opportunities to work with different professionals which resulted in