GEL Collider Desktop


Collider is framework that can be used by developer and designers. The Collider desktop application that brings code to designers in an accessible way by letting designers use the reusable components from the Component Library to rapidly build prototypes with real data.


This is a BBC project that lasted for 2 months. I had to work with a UX Designer/Developer to create a desktop application that could be used by other UX Designer to create rapid prototypes with real code. This would help to blend the gap between designers and developers, which will improve collaboration and transparency.


Sketch, invision, inDesign

Discovery (Research)

1. Consultation

Collider is an internal framework that was created by a BBC UX designer. Due to this it was important to consult with the creator to visualise how Collider is structured and what he wanted Collider to become for Designers. The consultation with the creator allowed me to learn what the core functions for the program would be and also helped him to question certain decisions that he made in the past which may need to be updated.

2. Competitor analysis

Since the BBC's design framework has been built for responsive web there are no design patterns for desktop applications. Therefore, a competitor analysis was done to find out the common patterns that are generally used for desktops.

Since this desktop application will be used as an utility tool it will share common elements that exist in competitor applications such as, GitHub and Docker. This made it easier to create a layout that is flexible enough to allow the application to adjust depending on the task.

Development (Process)

1. User journey mapping

The developer and I mapped out how the features within the program will link together to form a smooth and reliable user Experience. We mapped out how the user will create edit and run their project.

2. Sketches and wireframes

Sketches and wireframes were created based off the user journey mapping outcome to help us visualise how each feature would look like in the program.

Delivery (outcome)

Personal Refection

While working on this project I was able to work on a 3 week sprint that gave an opportunity to use agile practices to utilise feedback in a dynamic way.