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.
Guerrilla testing, Competitor analysis
Illustrator, HTML & CSS, Invision, accessibility tools (Apple 's accessibility assistant)
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?
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.
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.
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 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.
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.
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.
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.
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.
