D&AD: BBC Tips
The Ramblings of a Mad Man The Reflective Writings of a final year Graphic Design student
by James Iredale
Covering Modules: DN6031
James Iredale
18
Module: DN6031
BBC Tips Statement of Intent
What excites you about the brief? I’ve really been looking forward to completing a D&AD brief for two reasons. One is that the company whose brief I’ve taken on (the BBC) is one of the companies I’m hoping to apply for post university. The other is the brief itself focussed around product and UX design, the area of interest that I want to pursue at the BBC.
What Prior learning can draw upon to work on this project? I haven’t got a lot of UX experience so researching that and learning more about the process is something that I’m really looking forward to. However, my knowledge in animation is going to be the driving factor in this project. I want to try and enhance this as much as I can and learn more about the process of designing animation for promotional products. I’ll also draw on my learnings from my FMP project around visual identity.
What themes, materials, processes and research sources will you explore in the project? As the brief revolves predominantly around product design, the theme I’ll try to focus on mainly is designing a working product - UI design for both mobile applications and browsers will be key here. However I also want to create a visual identity for my product idea. This means going through the same process that I have done for my FMP but on a smaller scale (predominantly going off my FMP research).
What skills and techniques would you like to develop and use for the project? Certainly I’d like to develop my skills using Adobe After Effects for 2D (and potentially 3D animation). I’d also like to obviously develop knowledge around visual hierarchy (particularly in UI design) and how the two (UI and Animation) co-exist to create a visually complete looking product and product video. I’d also like to develop the principles that go alongside this such as scriptwriting, storyboarding and defining a sub brand.
19
Module: DN6031
D&AD 2020
BBC TIPS
There’s no doubt that I want to get a good grade for this project so completing it to the best of my ability is essential. However I’m also motivated by the idea of winning a pencil (gotta aim high!). I want to try and make this as complete a product as I can - showcasing mockups of the product as well as potentially a working prototype be that in high fidelity or low.
Examples of specific practitioners you will have to research the project. For the product design aspect I’ll mostly be following the examples set out by Will Grant in his book ‘101 Principles of UX Design’. However I also want to research the work by the BBC already so that I can keep a consistent grid and product identity through the design. For animation, I’ll be drawing on the teachings on YouTube such as ECAbrams as well as the School of Motion. Both channels offer a range of different approaches to tackle animation workflow challenges.
Define your audience. How will you reach them/interact with them? For the BBC brief, the audience that they are targeting is Gen Z (so 16 - 24 year olds). This means that as an identity, it needs to appeal to them. I want the identity to be playful but not over the top (the principles of animation such as stretch and squeeze, over exaggeration and gravity will apply). However for the presentation for the judges, I need it to read easy and be well presented and thought out.
20
Module: DN6031
What is the scope of your ambition for the project?
BBC TIPS Briefs and Idea Generation
Although there were some really cool briefs on the D&AD site that I considered, the BBC stood out most to me largely due to two reasons. The first being the actual brief and outcomes being focused around product design and UX - a field of interest that I’m looking at developing throughout this year and pursuing it as a speciality / career option post university. The other is because the BBC is a company that I have been interesting in applying for since the middle of last year. They have a UX Design Traineeship, taking up to 5 candidates every summer and this would put me in a great position should I be successful in this competition. After downloading the brief, I began by highlighting the key deliverables: The outcome would have to focus on bridging the gap between physical and digital, targeted towards 16-24 year olds, connected devices (perhaps using augmented reality?). I then started brainstorming ideas trying to explain each concept as simply as possible. Here were my initial product ideas:
BBC Speak App / BBC Trending • A platform where people can discuss what they think is the most relevant (e.g. Climate change / activism / well being / equality / sexism / etc) and give their thoughts on the issue. • This could then be discussed by a panel of experts at a set time who are talking about some of the issues at hand. • Similar to a live stream, users that have the app downloaded will be able to submit questions in real time (moderator permitted)
BBC Show Rater • People can give live feedback on their favourite TV Shows • Presenters can then respond to them if they want to - giving the BBC further contact with their audience. • How would this be moderated?
BBC Meme • Users can get screengrabs for the TV shows they watch from iPlayer and use the BBC Meme platform to create their own memes. • These can be shared via social media and featured on the BBC homepage
21
Module: DN6031
1. D&AD 2020 :
BBC TIPS
• This mobile app creates a new interactive VR experience unlike any other. • Using their current location, users are able to create multi-sensory events that can be interacted with other members of the public on their devices. • In memory of WWII and VE Day 2020, the BBC could put on a VR event for everyone to show the remarkable day. • Examples could include the simulation of parades in London, the landing of D-Day in the beaches of Normandy, the wartime broadcast played when the camera is pointed at a radio.
BBC Showspace • Create the workshops and online classes. • Have polls based on the workshops that people want 9members can vote) • Categories or ideas with most votes are held and depending on membership status is ticket priority • Special workshop where an athlete comes in and teaches the workshop / livestream that people vote for • Community: Instagram // Local Clubs // Events // Class Feedback // Voting System // Special Guest Workshop I had narrowed it down to two preferred options to pursue: BBC Tips and BBC Showspace. After thinking about it for a week, I decided that the best option would be BBC Tips. This is because the creation of the app and platform is more realistic and achievable than Showspace. Given my interest around branding, I thought that the next best step would be researching and forming a visual identity for my new product. I think being able to create the Showspace product would have been a lot of fun, and perhaps more of an idea that D&AD looked for when selecting their winners. However, as I’ve stated my thinking is around the idea that Tips is far more realistic in terms of developing as a product in the real world.
22
Module: DN6031
BBC Showspace
BBC TIPS Visual Identity Research
When designing a visual identity as a sub brand, it’s important that it can still be recognised as part of the parent brand. With this in mind, I have started my research by looking at the different off brands that the BBC has, in particular the platforms that are most relatable to the BBC Tips product that I am proposing: BBC Bitesize and BBC Taster. From first glance, the majority of the sub logos are very simple type / wordmark logos. Perhaps the only exception is BBC iPlayer which is minimal in its design but clearly depicts the letter ‘i’ with the play icon factored in. The Bitesize logo is very simply the word Bitesize in the BBC typeface ‘Reith’ that is based on Gill Sans (the BBC’s previous typeface until January 2017 where it was premiered as the new font for BBC Sport) (BBC, 2017).
Beginning with some of the ideas and works from a Branding Identity master Aaron Draplin, I start by looking at some of his more minimalist logo designs. From previous research that I have conducted around the idea of visual identity, I am going into this project with the following teachings: A logo should be able to work in colour, black and white; A logo is there to identify and not explain; A logo should be timeless; It should be designed to be remembered (simplicity); and a logo should communicate its intended message (BBC Tips being the evolution of online education).
23
Module: DN6031
2. D&AD 2020 :
BBC TIPS
When it comes to creating a UI, I began by creating wireframes of the existing BBC products such as its Homepage, BBC iPlayer, BBC Bitesize and BBC Taste. This will help in creating a user journey that is familiar with current BBC customers and provide a similarity in the Tips platform. I have then created wireframes of some of the competitors existing online education videos such as Skillshare, Udemy, YouTube and Lynda. These are websites that have been created with proven results in their UX and will therefore provide a good starting point in creating a successful journey for the Tips prototype.
Examples of the logo work by Aaron Draplin.
24
Module: DN6031
I feel that for an entirely new platform, the use of colour and patterns will help differentiate it from the existing BBC products. I want to use patterns as it can relate to Johan Huizaga’s theory around play, more specifically the coin he termed as ‘The Magic Circle’ in which a person is in when they are playing. This is a more theoretical rationale for being in a state of immersion, something that should be prominent when an individual is studying and pursuing a new skill. In an article posted on Wired Magazine, Frank Rose writes “Just as the brain detects patterns in the visual forms of nature: a face, a figure, a flower and in sound, so too it detects patterns in information. Stories are recognizable patterns, and those patterns we find meaning” (Rose, 2011) Taking this into account, I feel that it justifies my concept of incorporating patterns to promote a healthy and effective workflow to a user utilizing online video tutorials. These patterns will be created as background features and could be used alongside the presentation of the Tips logo (where necessary).
BBC TIPS Previous New Blood Winners
After conducting the initial identity research and seeing the framework BBC used to create their platforms, I thought delving more into the actual D&AD video submission would be a good idea. I started by going through some of the previous years D&AD winners to look for any running similarities. The videos I watched included the RuGirls campaign, Bacardi Event and all of the previous BBC submissions. One of the first aspects I noticed about all of them was that they all had some sort of visual identity consistent throughout their promotions. Particularly for the BBC this will be very important. Throughout all of the BBC’s sub brands, although they all have distinguishing wordmarks their creative identity can easily be seen. This prompted me to look at the BBC identity guidelines to find out the consistent elements that I can use. From this I found the BBC font family ‘Reith’. This will be really useful given that all of BBC logos are indeed wordmarks based on this typeface.
Poster image for: RU-girls D&AD New Blood Submission 2019
When viewing the RuGirls video, I really enjoyed their use of simplistic cartoon illustrations. It’s clear that utilizing animation is vital to create an award winning submission, however it’s certainly not one of the prioritising design features that I’ve seen from the majority of winners (with exception to the ‘Become Something With Us’ Monotype submission!). This is something I’d like to try and spend a bit more time on though, applying some of the fundamentals that I’ve learnt during my projects. Adding in some of these principals like stretch and squash will help to give my idea a more playful theme, which is the route I think I’d like to go down.
25
Module: DN6031
3. D&AD 2020 :
BBC TIPS
Show off the proposed product: give them high definition mockups with a clear user journey to follow. Perhaps you could create a mockup using Adobe XD?
Give them real world statistics to say why this project is important. All of the previous winners relate back to some sort of data.
Don’t oversaturate the slides with text. A clean and structured layout that’s easy to read will work best. Keep the images that you use relevant to the text.
26
Module: DN6031
Points to highlight from viewing the previous D&AD winners:
BBC TIPS Defining the Product
After compiling research on both visual identity and d&ad previous winners, it was time that I looked into defining what the BBC Tips product is - formulating its layout and its unique selling point. I thought that a good way of starting this was to split the product into different sections: Online Learning Platform and the BBC Tips Community.
BBC Tips: Online Learning Platform The Tips online video guides that could utilize the BBC’s access to celebrities and talent. These personalities could be the teachers, offering a unique style of online education. Video Guides would predominantly be seen on desktops and laptops, so I decided early on to create a user interface built for browsers. This trail of thought prompted me to start researching the layouts of BBC Home Pages, in order to see if there was a certain grid system and preferred layout they have for their different sub brands. Given the similarities of products, I decided to look at the BBC Bitesize page in particular.
As part of my research, I looked at the different home pages for a few of the BBC product sub brands like BBC Bitesize, BBC iPlayer and BBC Taster.
27
Module: DN6031
4. D&AD 2020 :
BBC TIPS
Tips:
Bitesize:
• Offers huge variety of discipline in its • More traditional education online training content. • Familiar with a younger demographic • Real time geolocation platform (GCSE’s and below) serving as an interface between physical and digital. • 16+ content is more focussed on academic skills • BBC Talent (Celebrity) led online course content • Social media feedback • Encourages social community Next, I needed to define the type of content that could be used for the online video guides. I narrowed an initial brainstorm to 4 key categories: Sports, Arts, Business and Lifestyle. These 4 areas are in my mind, key to sustaining a healthy and happy life and are thus vital for the target audience: Gen Z. Sports: Users can gain coaching tips from recognised athletes of all disciplines. Sports included range from Football and Tennis to the obscure like Rock Climbing and Skateboarding Arts: The ability to be more creative, particularly in the workplace is being valued more and more as time goes on. Recognised practitioners and artists will give breakdowns on the software they use and how they use them. Business: Young people today are looking more towards working for themselves and on a remote freelance basis. BBC Tips can offer small introductory lectures to the necessities of running a business. Classes include how to run your own accounts for independent businesses, to project managing individual ventures. Lifestyle: There seems to be a new health kick trend happening every week these days. The internet is flooded with information. BBC Tips filters the noise and gives its users the relevant content from various specialists in: Diet, Routine, Fitness and Mindfulness.
28
Module: DN6031
After mapping out the Bitesize page, I thought it was pertinent to include a slide about how BBC Tips would differentiate from Bitesize:
BBC TIPS
Given that online video educational platforms are not new, I needed BBC Tips to have a statement that would grab the attention in its opening paragraph. I decided that the best way to do this was to have an elevator pitch: Tips is BBC’s answer to the global trend of online education. The platform goes beyond any other existing service, offering an abundance of introductory courses in every field of interest. With guest lectures from celebrities, athletes and recognised professionals, the BBC Tips platform offers one of the most powerful services to encourage personal growth
BBC Tips Community: It’s within the BBC Tips community that I feel is the product’s secret weapon. The community aspect tackles a specific part of the D&AD brief: utilize BIG DATA to engage with Gen Z. My idea for the community app works through the users location and the content they have watched on the video guides. Users would be able to set up events relevant to their new practices (be they a sport, discussing business ideas, or even hosting an impromptu dinner party) that will notify similar users in the nearby area. The community platform would be integrated with social media, allowing further communication between the BBC and its viewers.
29
Module: DN6031
The Elevator Pitch
BBC TIPS Identity, Script, Storyboarding and Mock Video
The Logo
Module: DN6031
5. D&AD 2020 :
I had started putting together a solid visual identity through Google Slides, as well as starting to create a logo mark for the BBC Tips product. The logo is based on the BBC Reith typeface, similar to all of the other BBC Wordmarks. However I wanted to go a little bit different with this identity mark. Using the typerface I have been able to create more of a symbol mark - an abstract take on the shape of a pencil. It’s definitely not entirely right at the moment. I’ve struggled quite a bit with trying to make the mark symmetrical and balance the harshness of the letterforms. The ‘S’ makes it quite tricky, if the product was called BBC Tip then perfect! Alas, this is not the case.
Color Palette I decided on a playful colour palette to accompany the type utilizing purple, maroon, blue and yellow as its 4 primary colours. I also want to further explore how I can use patterns and moving shapes to further display an essence of play throughout the project. The idea of play is important as it’s not something you would generally associate with adults - but it is a concept that is vital to human life and an important process we must all go through. It shouldn’t be forgotten so swiftly when moving into working life, so I want the BBC Tips platform to really emulate this.
Script Writing What comes first, the chicken or the egg? The same kind of thing could be asked when creating a short 2 minute video. However for me I found it easier to get some form of dialogue in before I started sequencing images and video. There were a few visual elements that I know that I want to use though, such as the kinetic type animations that are used in Apple’s Big Release video. However, I recalled some of my previous practices of scriptwriting from my work placement over the summer holidays. At the end of the day, this video needs to tell some sort of story.
30
BBC TIPS
Storyboarding After I had the script together, I started the process of storyboarding. I didn’t want to have this version illustrated though (I know where my strengths and weaknesses are in design). I decided it would be a good idea to use relevant high quality images and add some kews where needed. I sourced all of the images from Unsplashed.com.
31
Module: DN6031
I thought in this case as its more of a product video, it perhaps wouldn’t be a bad idea to get a bit cheesy with it. A lot of my inspiration for this initial script came from the videos you see from tech giants like Google and Facebook.
BBC TIPS
Given that online video educational platforms are not new, I needed BBC Tips to have a statement that would grab the attention in its opening paragraph. I decided that the best way to do this was to have an elevator pitch: This initial mock video was only intended to give me an overall feel for the product and for the video. I got all of the footage from royalty free sites like pixelby or the Adobe Creative store (hence the watermarks). This opening part of the process was really fun and allowed me to get pretty creative and recall some previous teachings that I learned as far back as first year. I haven’t done video editing like this for a very long time, so relearning all the techniques again was really enjoyable. In reflection, my overall feeling for this initial video is pretty happy. Some of the feedback that I got from some of the other (not as interested) students was that they would be pleased to submit something like that for their final piece. However I really want to do well at this project, so I noted down some initial aspects to fix: • There are too many scenes (cut this down) • Bespoke animations need to be added • Doesn’t show any consistency in the identity • Needs to fit with the music • Cramming a lot of information into a 2 minute video: Need to rely more on visuals doing the talking rather than the voice over. Follow the link to view my first draft of the BBC Tips D&AD Submission Video: https://www.youtube.com/watch?v=AXBcOf VYym0&feature=emb_logo
32
Module: DN6031
Draft Video Version 1
BBC TIPS Feedback and Development
It was great getting feedback from 3 tutors: Ricardo, Angharad and Alistair - each offering their own take on my slides and research. The feedback included: • Make sure the facts are referenced and checked - use credible sources to back up your statements. • Cascade who’s giving the advice (someone who has 20 years experience to someone who has a had an internship) e.g. gaining information on what it’s like to be an intern (broaden out whos giving out the information) : EXPANDING ON THE SPECTRUM (think about how to format it). • Peloton Advert: Think about the type of images that are used. Include diversity and inclusivity. • Celebrity / Workshop Formats. Is there room for mentoring / shared experience (give and take link between prior students and new) Socio economic. • The logo is nearly there but the S is making it tricky. Tighten up the logomark: A Smile in the mind: Get this onto some papers. Sit and look at a pencil if you have to and draw it in as many ways as possible. • Start bringing in more of a visual identity into the whole presentation - colours, iconography, mockups, etc. • Send the script through to one of the creative writing tutors
Logomark and Visual Identity In terms of the logomark, I really had to scale things back and stop overthinking my process. By doing this, I was able to create an identity that was more fitting with the other sub brands of the bbc and their wordmarks. The new logo is still based on BBC Reith (Bold this time). However the key difference is that rather than using the whole word to create the pencil, I have included it in place of the letterform of the I. The new letterform logo has been created using the golden ratio system - made entirely asymmetrical, in proportion, and precise angles.
33
Module: DN6031
6. D&AD 2020 :
BBC TIPS
Overall I’m really happy with both the new logomark and the introduction video to go along with it. Perhaps my only gripe with it is that it still looks a bit chunky. However it has to be this way again because of the S!
User Interface: Browser Next I started the process of actually building the website. Using my research on the BBC websites, I created a pretty simple 3 column grid and designed my template using Photoshop. From here, I was able to implement the visual identity and mock content of the website. I was able to build 4 pages in total: Home page, Featured page, Video Library and Video Tuition page. Again I was really happy with the turnout for all of these pages. Thanks to using a grid system, I was able to create pages that are consistent with the other BBC sub brand pages.
34
Module: DN6031
I then created an animation to go along with it for the opening sequence of the video. I thought this adds a really nice touch and further gets my message of playfulness across to the viewer. The logo animation includes the stretch and squish principal as well as showing onomatopoeic style movements (bumps and bounces) whilst exploding shapes like circles, squares and triangles to the BBC Tips colour palette. My workflow for creating these animations is this: Create the logo mark in illustrator; import to after effects; utilize keyframes for scale/ size/rotation as well as masks to fulfil my desired effect.
BBC TIPS
One of the main differences for this version is that now there is considered footage and animations for each scene. There’s beginning to be a sense of identity running throughout the video. One of the ways that I was able to help portray this was by creating my own mockups of laptops and screens in illustrator. It’s a very cartoony vector sort of style, so this too helps with the running theme of play! However, I still feel that the overall message that this product solves still could be shown better. Another issue of mine is that I don’t feel that it best mentions Gen Z. Most of the celebrities I have used don’t fall into this category and I think this issue needs to be resolved. There also needs to be a certain level of consistency with my animations. You can view this second draft of the video here: https://www.youtube.com/ watch?v=AUrt420jD1U
35
Module: DN6031
Draft Video Version 2
BBC TIPS Feedback, Final Refinements and Project Reflection
Feedback • Tips Logo - too big on the screen. The BBC logo was the size it should be. Change the tips logo • Create an Icon set for the sports/lifestyle/etc. - sell the icon in the digital product too • Use a grid!! Build consistency - weave into your narrative. • Could the logo mark act as a symbol? Could the pencil be broken up for each of the icons (sports/lifestyle/etc) Due to the coronavirus pandemic, the D&AD kindly extended their submission deadline for the New Blood competition. This allowed me to add a whole other layer to my project as well as tighten up some of the higgledy bits that were bothering me.
The Logo Part of the feedback that I got from Ricardo was to have the logo be more inclusive with the colour palette and the 4 sectors of the product. He suggested breaking apart the logo into 4 distinct pieces that could be used throughout the submission and video.
36
Module: DN6031
7. D&AD 2020 :
BBC TIPS
This of course meant that I would have to redo the introduction logo animation as well now. However, it actually gave me a chance to redo all of the animations to keep the identity consistent throughout the video (website mockups, platform mockups and general tips animations). I created a dancing Tips animation to have constantly playing in the top left hand corner (further emphasising this idea of play) on any of the new Tips animations.
Animation The logo adjustments weren’t the only elements to be uplifted by new animations. I also created further platform ones such as mobile phone mockups for social media, big data visualisation. All of the type animations also got a bit of jazz up by either adding transitions or further playful movements.
37
Module: DN6031
I took what Ricardo said on board but didn’t want to go down that route entirely. I wanted to try and create a bit more motion with the logo and I don’t think that direction necessarily would have done that. I ran with the concept of splitting the logo up however, as well as thinning the entire line weight of the type down. I had to do the thinning myself as the BBC Reith font isn’t quite like Goldilocks - either it’s too thin or too chunky.
BBC TIPS
I hadn’t really thought much about the slides over the whole process, thinking that I could just amend my process presentation. However, I decided that this really wasn’t fitting if I really wanted to try and win an award with my submission. The slides gave me an opportunity to showcase some of the products that I didn’t get to touch on during the video such as the UI for the BBC Tips Community App. It also gave me an opportunity to highlight what the problem is, and how BBC Tips can solve it.
ATTENDENCE REQUEST
Alex Guerrero, 19 Brighton, UK View Full Profile
Hosted by Bence User Rating
Basketball Tourney Brighton Pier • Happening Now!
Skill Level
We need four more people to get a mini tournament going on. Any skill level welcome! Beginner Who else is going...
+
Other Interests
>
Reviews
>
Lets see whats going on near you Searching for events
Join +
The Result You can check out my final submission video here: The Slides for submission can be found here:
38
Decline
Accept
Module: DN6031
D&AD Submission Slides
BBC TIPS
Overall I really enjoyed doing this process. It was very similar to the job I was doing over the summer but allowed me to take a driving seat rather than that of an assistant. The D&AD really appealed to me as I’m starting to find which direction I want to pursue after university. It will be somewhere in between Branding and Advertisement - both of which I was able to do during this project. I’m very happy that I was able to use animation a lot more during this project with it becoming one of the main elements of my submission. It wasn’t my intention to have such heavy reliance on motion graphics at the start, but adding in the element of play just goes so nicely with it. I think perhaps I played it too safe with my overall concept idea though. Looking back, I would’ve liked to have pursued the idea of BBC Showspace and explore a bit more of virtual / augmented reality. I do sadly think that my safe idea may be the deciding factor into whether or not I could win a prize - in summary: I’m very happy with the work that I’ve produced, but should’ve been more risky with my overall idea and concept.
39
Module: DN6031
Reflection: Statement
BBC TIPS Critical Evaluation
During this D&AD project I was responding to the task of developing a digital product or service that serves as an interface between the physical and digital. They key point in my mind was creating a link for the user that can be applied both online and offline. It was this thinking process that led me to the idea of online video guides interlinking with geo-location real time interaction platform. I thought of this brief as if it were for an actual client, and began thinking around some of the workflow principles during my time at Extreme Sports. In order to keep track of everything I created two docuemnts: A Trello project management spreadsheet to keep track and organise tasks, and a presentation document that I could fill in as the project progresses - making timeline of progression clear to btoh myself and the tutors. Next I decided what practices I could put into place, particularly those that are vital to product design. I narrowed them down to 3 key elements: Visual Identity / Product Mockups / Motion. Through these 3 area’s of design, I set out to create a product that would be realistically achieveable should the BBC of actually wanted to do this brief. The process was one of consistent feedback and refinement in order to create a consistant playful theme that was recognisable not only with the sub-brand of BBC Tips, but with the BBC brand as a whole. I think perhaps if I were to do of done the brief again I would have been a bit more daring in which direction I chose - rather of gone for an entirely different product that would have carried with it an entirely different visual presence.
40
Module: DN6031
8. D&AD 2020 :