Design for the iPad home screen & mobile screens

mobile & tablet app

bt digital dash

2020

CLIENT

AGENCY

BT Digital Dash is an award winning app created to encourage kids to get fit for a digital future by creating their own digital athlete to train and race against others, whilst testing their computational thinking skills along the way.

By experimenting with combining different parameters such as food types and exercise types, players would see different statistical outcomes from training their avatar. They were then encouraged to use this data to improve and make their athlete run the fastest in a 100m virtual sprint. The original plan for the project was to allow schools to create and train their athlete at a live arena in small groups, then the top digital athletes would compete with a real life athlete who would sprint side by side with a digital athlete along the digital signage.

The scope of the project changed however due to COVID, so what was initially an iPad app to be used at a live event with hundreds of participants, organisers and spectators, had to then be shifted to make it into a mobile and tablet experience where kids can take part at home. Subsequently a live virtual final of the race was broadcast and presented live by Reggie Yates & Dame Kelly Holmes where the winner scored £10,000 in vouchers for IT equipment for their school.

Digital Dash was award the Epica Silver Award for Best Branded Game & an Epica Bronze Award for Best Mobile App

creative approach

As the theme of this project was around fitness, nutrition and racing, there needed to be an emphasis on movement and energy. Racetrack patterns were used as an inspiration for the backdrop that appears throughout the app with additional elements adding some digital flair.

After a lot of development, the client wanted something that was clean, energetic but not too child-like even though the audience were 7-10 years old, the goal was to create something that felt aspirational with a sense of “cool” to make them feel older and more grown up.

Furthermore, to cement the BT brand, using the indigo as a base we were able to create some sharp, contrasting accent colours of pink, turquoise & coral which add a sense of energy through various parts of the app. We also played with sheared, asymmetrical buttons to give a sense of movement.

A collection of the Digital Dash branding guidelines

wireframes

To test the flow of the design I created some rough wireframes to establish the layout of the different elements, where they would sit, how they would behave etc. This was especially important as players can only progress on some screens when certain parameters have been met.

Doing this also allowed me to define specific areas for continuity purposes and create a pattern and hierarchy of information so players knew which pieces were of interest to them. This was apparent in grouping features and information together, for instance, presenting the player with three options to customise their athlete, train them using their computational thinking & then testing them in a race. Separating these three meant it was easier for users - especially younger - to navigate with purpose.

styling

As mentioned earlier, there were defined colours to use when styling the various UI elements on the page; it was just a case of assigning these to the relevant actions such as primary vs secondary CTAs, buttons & toggles, highlights, fields and other related data.

From the initial reference of sheared buttons, I had to reign in the severity of these angles due to a lot of optical discrepancy, whilst having them asymmetrical also proved to be tricky when it came to scalability from a development perspective.

There were also three card designs representing each of the main categories: locker, train & race which had lock states; part of the onboarding was to take them through customising their athlete, then taking them through training and finally putting them in a race.

A stylesheet for the various styles used throughout the app

home screen

The opening screen of the app presents three options to the player; Locker, Train & Race. These sections represented the core features of the app and broke apart the information so it’s easier for the user to understand.

The Locker allows players to create & customise their athlete. Train allows them to train their mental and/or physical fitness, whilst Race allows them to compete in a race against other athletes and eventually the final. It was important here to use language & terms that would be recognisable to the younger audience.

character customisation

A key part of getting players invested in the experience was connecting them to their athlete, and what better way than to let them create it themselves. This proved even more of an important aspect as it gave a lot of space to provide a range of diverse options using the many different colours, patterns, hairstyles and accessories on offer to make it look truly unique.

The customisation screen on the iPad app

The choose your fitness screen of the iPad app

Choose a fitness

When players select Train as an option from the home screen, they’re taken to a secondary screen where they can decide the type of training they want to do. As a message, we wanted to communicate how important different type of fitness are and therefore defined two parts; Mind (mental) & Body (physical).

A collection of the mind training minigames

fitness: mind

This section contains a series of mini games which introduce the users to a number of computational thinking concepts with themed games around three key areas; Focus, Sleep & Skill. In each of these areas there are three types of games and the better they become at the games, the higher their mind score becomes which impacts their overall stats seen along the bottom.

The UI for training where users get feedback on their choices

fitness: body

In this section the player puts their avatar through their paces by experimenting with the right balance of food and exercise options to get the best physical performance results. Once they've set their food & training options, they head over to the training room where users can see if they had made the most optimal choices for their athlete.

This was also a good opportunity to learn about the different types of macro nutrients, what they do for the body & how they affect fitness. As an extra interactive option, there was also a quick-time-event implemented into the training screen so that it was more engaging for players; this had no bearing on the outcome of the results.

training

Once they were happy, players were able to take part in a virtual race against random avatars to see how fast they could compete in a 100m sprint to compete for the top places on the leaderboards. The best performing athletes would then join Reggie Yates & Kelly Holmes in the Digital Dash Virtual Final live on YouTube.