{"id":4926,"date":"2016-12-08T12:03:02","date_gmt":"2016-12-08T12:03:02","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4926"},"modified":"2020-08-12T18:11:13","modified_gmt":"2020-08-12T17:11:13","slug":"telegraph-transcending-rich-heritage-contemporary-products","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/","title":{"rendered":"The Telegraph: Transcending a Rich Heritage into Contemporary Products"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.telegraph.co.uk\/\">The Telegraph Newspaper<\/a>. A household name across the country. It\u2019s the number one broadsheet in the UK and is 161 years old and counting. The world wide web fell into receiving arms at The Telegraph, which was the first of its kind to move online in 1994. Now, with circa 90 million uniques a month globally, the paper has turned its sights to mobile.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">So how does a newspaper with such legacy design for Generation Now? Joel Wade, Lead Designer, Luke Griffiths, Digital Designer and Chief Customer Officer, Robert Bridge from The Telegraph talk us through the ideation and launch of their new mobile app, carefully designed to bring snappy, visually rich content to its users.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cThe core brand values of the business are around perspective, opinion, and analysis. Giving people the content they need to form their own opinion and their perspective on life, ideally helping them progress in life. Those are the sorts of values that are evident in our journalism - it was, is and will be.\u201d<\/span><\/p>\n<div id='gallery-1' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"1069\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1.jpg 1600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1-600x401.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1-768x513.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article1-1500x1002.jpg 1500w\" sizes=\"auto, (max-width: 1600px) 100vw, 1600px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Telegraph has four products that service their audience: the print product - where it all started; the website, which is both desktop and mobile web; the \u2018Edition App\u2019, which replicates the newspaper experience in a digital format, and is predominantly consumed on tablets; and their new mobile app which took six months to build and a cross functional team of 17 people.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Telegraph\u2019s new app allows users to consume news on an infinite scroll. Users can select categories they\u2019re most interested in, such as sport, business, entertainment and culture. The experience is refined for each individual user. Every top story features a visual treatment specially designed for the article, called a \u2018Bespoke Card\u2019.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What were your initial thoughts before designing the app?<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"We were drawn to creating quick, sharp and visual content which enables the user to consume effortlessly.\"<\/p><\/span><\/blockquote>\n<div id='gallery-2' class='gallery galleryid-4926 gallery-columns-2 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article-1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"666\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article-1.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" aria-describedby=\"gallery-2-4929\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article-1.jpg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article-1-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article-1-768x511.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-4929'>\n\t\t\t\tLuke Griffiths, Product Designer\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article3.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"666\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article3.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" aria-describedby=\"gallery-2-4931\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article3.jpg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article3-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article3-768x511.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-4931'>\n\t\t\t\tJoel Wade, Product Designer\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Robert explains that the team were drawn to the idea of creating quick, sharp and visual content which enables the user to consume the news in an effortless way, and took forward the idea that a user shouldn\u2019t need to navigate by adding long scrolls. Before building, they asked themselves the following questions to guide their work: What is the value proposition of the app? What are the key user outcomes? What are the key business outcomes? Is it visually engaging?<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cOur value proposition was to design an app which was the fastest, easiest and most delightful way to understand what is going on and enjoy the stories that matter to you, through The Telegraph\u2019s fresh, fearless and trustworthy perspective.\u201d <\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cBefore we started on the design we scoped the landscape, looking at other relevant apps to become as informed as possible about the current space,\u201d Joel explains. \u201cAs any designer who works within news, it\u2019s common knowledge that everyone is keeping an eye on what everyone else is doing. It's a continuously evolving industry.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cThe news team are actually thinking mobile first now in terms of how they're producing content and how they're working with the design team to produce something that is for mobile.\u201d<\/p>\n<div id='gallery-3' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article5.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1002\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article5.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article5.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article5-600x401.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article5-768x513.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When it came to ensuring the newspaper\u2019s authoritative identity was translated into the app. The team thought of it this way:<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">Jon Hill, Creative Director, always uses the British Museum analogy. \u201cSay you go into the British Museum, you see this really beautiful, historical building which evokes a sense of tradition, respectability and trust. Then you continue walking and arrive at the atrium or courtyard, which has a modern roof extension that could only have been built in the last 15 years or so. He uses that as his approach. <\/span><span class=\"long-quote\">The Telegraph masthead, which has been around for 161 years, stands as a beacon of trust, but with modern technology it\u2019s also state of the art and contemporary. We have authority but in everything we do and everywhere you see that mark of authority, it's state of the art, it's contemporary and could only have been done using the most recent technology.\u201d<\/span><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Telegraph prides itself on a wealth of legacy in journalism and now they\u2019re ensuring they bring that to a contemporary audience in a digital platform. From a design point of view, this guide helped sharpen what they were doing, what they were thinking about why things like the typeface is important.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The design process<\/h2>\n<div id='gallery-4' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/article7\/'><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"999\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article7.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article7.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article7-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article7-768x511.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cOur USP is journalism but our USP is also the quality of the products that we produce and design has always been central to the newspaper.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">After several months of research and user testing, the team kicked off designing the app around March this year. Joel and Luke explain that one of the challenges with building this new product was uncovering so many potential routes to follow. \u201cThere\u2019s not a one size fits all style or product. It was trying to figure out what our angle was.\u201d<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cThere\u2019s not a one size fits all style or product.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Initially, the team explored broad concepts regarding what they could do, sketching basic wireframes and building prototypes to support their thinking. The UX, product and tech team were all involved in arranging regular focus groups to review the prototypes and ideas, where they\u2019d also get a chance to speak to the users and refine their ideation. \u201cRight from the start we tried to get ideas onto devices and bring people in to look at them, who could offer a vital external perspective.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cOnce all our initial testing was done, we spent a long time thinking about what would not only be the best thing for The Telegraph but also for our readers. Ultimately, our aim was to build an app that would appeal to our millions of readers and users - but of course with a newspaper you have many different aspects such as advertising and sponsored content that you need to accommodate.\u201d<\/span><\/p>\n<div id='gallery-5' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/1-Article.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1002\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/1-Article.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/1-Article.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/1-Article-600x401.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/1-Article-768x513.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Nicola Ryan, their Deputy Creative Director, analysed the visual direction they would take, particularly for the bespoke cards. They looked at old magazine and vinyl covers for inspiration on how they could use images, cut-outs and colour. An interesting approach as they identified each of the bespoke cards as being \u2018mini-magazine\u2019 covers. \u201cThis really helped us sharpen the direction we wanted to take, essential as this is so different to any product we\u2019ve made.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cLooking at the other platforms out there, differentiating content visually has been a challenge. You only have a fairly small amount of real estate to play with. It\u2019s been a challenge to think of how we bring in the true Telegraph identity into what we produce, always from a journalistic perspective, but also from a design point of view.\u201d<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">User testing<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cTime was best spent creating custom prototypes that were exploratory transitions and ideas.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The team have a room dedicated to user testing, where they bring in both individuals and groups, readers and nonreaders. Luke describes an interesting technique, which involves the team using their contact center as a final focus group to test builds. \u201cOur contact center services our subscription business amongst other things, which is a significant number of people, many of whom are in our target demographic.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Whilst the team do have an in-house prototyping team, Marvel prototypes were used throughout. The team found that the in-house team\u2019s time was best spent creating custom prototypes that were more exploratory transitions and ideas, whereas conventional prototypes where you plot the flow made more sense in Marvel. <\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cWe\u2019re transitioning towards getting the whole team on Sketch so that we can work with Marvel even faster and test things as quickly as possible. It\u2019s also great for visualising projects to others around the business that aren\u2019t designers.\u201d<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Bespoke cards<\/h2>\n<div id='gallery-6' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article8.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"1000\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article8.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article8.jpg 1500w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article8-600x400.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article8-768x512.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cThe top story cards are one of our biggest features. Three designers will be working on it, day in day out, very closely with the Editors.\u201d During each designer\u2019s shift of working on the bespoke cards, they will be based in the newsroom alongside the journalists. Joel and Luke feel that along with developing closer relationships with the news team, these cards also bring more of a human touch to the app. \u201cUsually, in most new apps, they will have a very automated design.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Along with developing closer relationships with the news team, these cards bring a human touch to the app.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cWe took some cues of where visual design was going for this demographic, in terms of the Instagrams and Snapchats of this world.\u201d Joel explains that, \u201cWhat\u2019s great about the cards is that you get a brief from an editor about a story and you have got to design it as quickly as possible. Under 10 minutes ideally, which is a huge design challenge, but that\u2019s also what\u2019s nice about it! You get one chance at an idea and you have to run with it. Then, within 20 minutes you see it in an app which thousands of people are using. That\u2019s why I really like this process, because usually in digital design it\u2019s quite a long time before you see a design actually built.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The language is continuously evolving on the bespoke cards. \u201cWe get inspiration from each other. I\u2019ll often look at what Luke did on the shift before or the library of cards we have. Already, we have hundreds - we\u2019re designing at least 30 a day.\u201d<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\u201cIf a designer joined the team, they\u2019d have a portfolio within two weeks.\u201d<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">There are guidelines that the team try to follow, for example how they use images and how they use scale. Originally, they were using big images or big cut-outs but realised this was making the stream look repetitive and less inspiring than hoped for. Using scales has really helped the team to make smaller cut-outs which tell a story more than anything else and have identified a set of swatches to use.<\/p>\n<div id='gallery-7' class='gallery galleryid-4926 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/article2\/'><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"668\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article2.jpg\" class=\"attachment-full size-full\" alt=\"The Telegraph Prototyping Product Design\" aria-describedby=\"gallery-7-4930\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article2.jpg 1000w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article2-600x401.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/Article2-768x513.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-7-4930'>\n\t\t\t\tJohnny Bedini, Designer\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"They learned that as they go on, the human side of this design process is the reactive element.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Initially, they started with a very tight grid with the type and line spacing proportionate to the size of the card, which follows a strict set of colours. From this, they learned that as they go on, the human side of this design process is the reactive element. They established that they need to be more flexible than they originally thought. With things like this constantly being reviewed, the team are accepting that there are certain elements that they will learn as they go.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We have people working in New York and Sydney where there is a smaller team and they don't have a designer. For this, the team\u2019s lead prototyper, Olivier Ramirez, built a tool which allows users to create the cards from a web browser. If a user selects news and then category, it will assign it a theme, a color and they can upload an image. \u201cThe process of making the cards is very similar to applying filters on Instagram. It's very easy and they can just download it.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">\u201cWhen you're designing anything digital for news you haven't got a lot to work with at the eye level. You've got the headline, the meta-data and an image. This has given us an opportunity to build an identity that is quite different from anything else.\u201d<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">What\u2019s next?<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cIn terms of new features, we\u2019ve looked at the field and where it\u2019s going and have decided to experiment with bots. Starting with bots for our sports section. So far, we've produced them for Arsenal and Chelsea and a few others. We're never shy about trying new things. We were one of the first publishers on Apple News, and the first to use Facebook articles to try with messenger bots; we were also launch partners on Amazon Echo.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\u201cWe've had a year of redesigning, rebuilding and introducing new products. Now it's a matter of testing, learning, optimising and driving the key metrics around engagement. That's what 2017 is going to be all about. We also have advanced segmentation of our audiences from the data load that we have and we're using that to inform how we optimize and how we iterate our products to really target some of these key segments.\u201d<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Download The Telegraph\u2019s new smartphone app for the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/itunes.apple.com\/gb\/app\/the-telegraph\/id303301873?mt=8\">App<\/a> or <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/play.google.com\/store\/apps\/details?id=uk.co.telegraph.android&amp;hl=en_GB\">Play<\/a> store here now. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Telegraph Newspaper. A household name across the country. It\u2019s the number one broadsheet in the UK and is 161 years old and counting. The world wide web fell into receiving arms at The Telegraph, which was the first of its kind to move online in 1994. Now, with circa 90 million uniques a month globally, the paper has turned&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":4939,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-4926","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-in-the-spotlight"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"description\" content=\"The Telegraph\u2019s new app allows users to consume news on an infinite scroll. The experience is refined for each individual user.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Telegraph: Transcending a Rich Heritage into Contemporary Products | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"The Telegraph\u2019s new app allows users to consume news on an infinite scroll. The experience is refined for each individual user.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-08T12:03:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-12T17:11:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1336\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"8 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/12\/rsz_article.jpg\",\"width\":2000,\"height\":1336},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/\",\"name\":\"The Telegraph: Transcending a Rich Heritage into Contemporary Products | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#primaryimage\"},\"datePublished\":\"2016-12-08T12:03:02+00:00\",\"dateModified\":\"2020-08-12T17:11:13+00:00\",\"description\":\"The Telegraph\\u2019s new app allows users to consume news on an infinite scroll. The experience is refined for each individual user.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"The Telegraph: Transcending a Rich Heritage into Contemporary Products\",\"datePublished\":\"2016-12-08T12:03:02+00:00\",\"dateModified\":\"2020-08-12T17:11:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#primaryimage\"},\"articleSection\":\"In the Spotlight\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/telegraph-transcending-rich-heritage-contemporary-products\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\",\"name\":\"Naomi\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c520343b1feb2f69cca53916bf57f5c457b3a2640d405e0f9f20a8f8e8bb7ca7?s=96&d=mm&r=g\",\"caption\":\"Naomi\"},\"description\":\"Writing for Marvel. Writing for fun. Eating everywhere, all the time.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=4926"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/4926\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/4939"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=4926"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=4926"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=4926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}