Responsibilities: UX Designer | Illustrator

Predict the president 2020: Will Trump or Biden win the US election? You decide


US election 2020

This year's US presidential election could come down to results in just a few key states. Most states are tipped to vote one way or another - so we have already assigned 188 votes to Mr Trump and 233 to Mr Biden. Can Joe Biden wrestle enough away to seize the presidency? Or will Donald Trump romp home to a second term? It's all about the race to 270 electoral votes - and this time you decide.

Project overview


Who did I work with
I worked with a diverse team, including journalists, editors, social media designers, researchers, project managers and developers.

My Role/Responsibilities
- Idea conception/brainstorming
- Wireframe
- Prototyping
- UX design
- Illustration
- Visual Identity
- Accessibility testing
- Social promotion

What was my process
- Understand our target users, their behaviors, needs, and pain points.
- Create low-fidelity representations of the product's layout and structure.
- Build interactive prototypes for early user testing and stakeholder feedback.
- Develop the visual elements, such as colours, typography, and assets.
- Implement the visual design into a functional product.
- Release the product and gather user feedback and analytics.
- Design of social media graphics.

What did I learn
Design sign off took longer than expected, elections being key to the BBCs coverage of the US meant a lot of stakeholders involved.

Understanding the complexities of the US election process is difficult - making it as easy as possible for our audience was essential.

Creating the feature file was an important step, it helped explain all design features that could be tested against, important for the BBC to be accessible to all our users.

the problem

Biden or Trump, Trump or Biden

To design a 'fun' way in which the user can select and choose which 'swing' states will either go to Biden or Trump. The user should also learn why these states are key to the outcome of this year's election.


I created a mix of low and high fidelity wireframes


I use Adobe XD to create some low fidelity prototypes

This was presented to key stakeholders as a proof of concept and the convey my idea as clearly as possible.

Feature file

Containing the feature descriptions

I create a feature file for two main reasons, this is something that I worked alongside our Developers to write.

1. To capture all the behaviour scenarios so when our in-house testers test, they know what they should test against.

2. Accessibility, what experience will a keyboard or screen reader user have - super important, especially at the BBC where we design for all users.

Design handoff

Transferring design files

I supplied the following to the development team for implementation:
- Design files, in this case Adobe XD, these files contain all the visual assets, layouts, and design specifications necessary for the development.

- Style Guides and Design Systems, I create style guides that documented the design principles, typography, colour palettes, component styles, and other design-related guidelines

- Interaction prototypes to demonstrate how these interactions should work.

- Assets in the required formats and resolutions for easy integration into the development process.


Interactive gamified carousel


Mobile first design - 80%+ of our audience will view out content on smaller decides, the design needed to be lightweight work at the 320px breakpoint.


Design with responsive in mind with specific device breakpoints. I supplied the developers with SVG files.

World service languages

BBC World service has 40 different languages. This includes 4 right to left , a mixture of latin, arabic characters and some with glyphs. 11 language services amazingly translated and published this!

Social media and promo

I created various social templates to be used across multiple platforms. I worked with the Senior Social Media Editor to create an instagram story as well.