BBC GEL - Component Library

Project summary

The GEL component library is a platform for the BBC's design system GEL, which encourages product teams throughtout the BBC such as, iPlayer and News to create, share and reuse components.

Methods

Guerrilla testing, Competitor analysis

Tools

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

Problem statement

With so many components across many products designers and developers are creating duplicated components which would instead be share and resued by everyone.

HMW create a space with one source of truth and encourange designers and developers to co-create components together?

Discovery

Discovery workshop

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.


Form Pattern Audit

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.

Define

Information Architecture

An information architecture was created to understand the different touch points that a user will have with the platform. How they will submit, search and use a component.


Wireframe Sketches

Wireframe sketches were created to allow use to visualise how elements and features could be placed to allow ease of access for users. The sketches were also done across various breakpoints to stress test components and layouts.

Develop

High-fi user interface designs

By using the wireframe sketches we were able to create digital templates, which the developers could use to make a beta version of the platform.

Deliver

Beta Product Release

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.


Group 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.

Analysis

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 reflection

Personal Relection

During this project I was able to engage with various product teams, designers and developers to discover the pain points of our current setup and how was could create a solution together that would ease the workload and also allow everyone to create dynamically.