Responsibilities: UX Designer | Illustrator | Design lead

Simple, natural, no fuss: The Food that fuels Olympic marathon champions

background

Run forest! Run!

Running 42.2 kilometres at speed is one of the ultimate endurance events, requiring athletes to burn up huge amounts of energy.

But how much exactly? And in an era of advanced sports science and nutrition, what are the foods that fuel the champions?

Discover some of the energy-rich food and drinks that will get Brigid and Eliud over the finish line!

Project overview

TL;DR

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
- Project management
- Idea conception/brainstorming
- Wireframe
- Prototyping
- UX design
- Illustration
- UX QA
- Accessibility testing
- Social promotion

What was my process
- Understand our target users, their behaviors, needs, and pain points.
- Create low-fidelity wireframes and prototypes.
- 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.

What did I learn
Assets took longer to produce than expected, I should have planned these earlier on so Developers were not blocked.

27 language services amazingly translated and published this - designing for languages can be difficult and time consuming when testing, but I found that if text was centred it is a lot quicker.

80%+ of our audience will view out content on smaller decides, but we cannot forget those on desktop and everything in between, so we design with that in mind with specific device breakpoints.

the problem

Marathon - we know everything right?

Can we use open source data to tell our global audience something 'new' that they may not already know about an olympic sport. It'll need to be able to work in different language including righ-to-left, mobile first and accessible.

HMWs

How might we's that helped define the design process

HMW... leverage open source data to share new insights about an Olympic sport with a diverse global audience?

HMW... design a unique experience, whilst considering language variations (including right-to-left languages), and ensuring accessibility for all users?

Wireframes

I created a mix of low and high fidelity wireframes

Prototype

I use Adobe XD to create some low fidelity prototypes

I made 2 prototypes of the best ideas - I then presented these in key stakeholder meetings and guerrilla testing to decide which we would develop further.

Design assets

Food, athletes and more

I needed to create a lot of assets, from food items to characters, I used Jira to project manage them by having them in categorised lists. Once these were signed off we then passed them to our Developer to implement - these were saved as .svg so could be animated and resized without losing quality.

solution

Interactive scrolly page with text expanders

Mobile and Desktop

80%+ of our audience will view out content on smaller decides, but we cannot forget those on desktop and everything in between.

Responsive

Design with that in mind with specific device breakpoints.

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