{"id":3811,"date":"2016-10-13T15:28:17","date_gmt":"2016-10-13T14:28:17","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=3811"},"modified":"2020-12-14T11:18:24","modified_gmt":"2020-12-14T11:18:24","slug":"notonthehighstreet-designing-for-apple-tv","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/","title":{"rendered":"Not on the High Street: Designing for Apple TV"},"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\"><em>In discussions we\u2019ve had with designers in retail, a lot of their focus has been around optimising the mobile app, simply because mobile activity increases by the thousands every year. More recently, we spoke to notonthehighstreet.com who have spent time this year focusing on an alternative and more traditional channel - Apple TV.<\/em><\/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\">\u201cPeople have been using the TV as a format for buying since its inception.\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\"><a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.notonthehighstreet.com\/\">Notonthehighstreet.com<\/a> was founded 10 years ago by Holly Tucker and Sophie Cornish who recognised the huge potential that technology could play in connecting creative small businesses with the world. Today, the company stocks over 200,000 unique products made by 5000 independent businesses across the length and breadth of the UK; products that you can't find on the High Street.<\/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\">Now employing 250 people in its headquarters in Silicon-upon-Thames, Keith Port, Senior UX Designer, Rob Stearn, iOS Delivery Manager and Tom Bown, Senior UX Designer, tell us that although it has grown in numbers the company remains as committed to its purpose as ever.<\/p>\n<div id='gallery-1' class='gallery galleryid-3811 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\/10\/featuring_4320x1080.png'><img loading=\"lazy\" decoding=\"async\" width=\"1440\" height=\"360\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/featuring_4320x1080.png\" class=\"attachment-full size-full\" alt=\"Apple TV Prototyping Marvel Design\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/featuring_4320x1080.png 1440w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/featuring_4320x1080-600x150.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/featuring_4320x1080-768x192.png 768w\" sizes=\"auto, (max-width: 1440px) 100vw, 1440px\" \/><\/a>\n\t\t\t<\/dt><\/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\">\u201cWe get the absolute sense that we\u2019re a part of something, this isn\u2019t just a day job.\u201d<\/p><\/span><\/blockquote>\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;\">Why tvOS?<\/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\">Despite their function having been heavily focused on mobile like many others in the sector, the design team began working on an alternative channel off the back of a company hack day. \u201cHack days allow us to connect with different parts of the business that we don\u2019t normally converse with, they inspire new ideas and we get to put stuff together in a matter of two days.\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\">Keith tells us that they were inspired by talks of TV being a universal platform which has long been utilised for buying. From its first channel Ceefax in the 1970s through to the arrival of teletext and now Apple TV.<\/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\">\u201cWouldn\u2019t it be great to optimise our presence on Apple TV so our partners and sellers get more exposure?\u201d<\/p><\/span><\/blockquote>\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 was your design process around building for Apple TV?<\/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\">Keith: There were literally three of us working on it at the time and it was kind of a post-it notes and tear-it-apart strategy. With these meetings you essentially have to leave your ego at the door and just be accepting and encouraging of every idea, no matter how silly or stupid. I use this philosophy quite a lot even in design sprints, to just keep going and iterate, iterate, iterate. Quite often you will find that the most surprising and brilliant ideas don\u2019t come from UX.<\/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\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/\">Marvel<\/a> plays a large part in our design process especially when it comes to quick iterations - it\u2019s fantastic for that and the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvel7077.wpengine.com\/marvel-for-apple-tv-v2\/\">TV<\/a> app was no different. I\u2019ve been using it since beta and have introduced it to all parts of the business. It was perfect for designing the flow between our initial sketches. <\/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\">Rob: When we came to think about NOTHS for Apple TV, we realised that we had a strict deadline to do it. We had some very specific ideas of what we wanted to do, both from a function and features point of view. We wanted it to be more than just a pretty app for pictures but also have functionality.<\/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\">We also had a really useful set of UX suggestions which actually came straight from Apple about our main phone app. So we did a UI review at WWDC and they gave us a whole bunch of feedback. We took two or three of those concepts and started building the <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/marvelapp.com\/blog\/designing-for-television\/\">TV app<\/a> around them.<\/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\">Then we started to build and what we really wanted was to make sure that Keith was an integrated part of the team to optimise UX. We built the key contributors and got it to a good state before starting to say, \u201cRight, is this good enough? Is this perfect? Could it be better?\u201d We developed this nice working relationship where an idea would come up between the three of us and we would refine it. I think the best example of that is the product page.<\/p>\n<div id='gallery-2' class='gallery galleryid-3811 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\/10\/product_page_02.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"2136\" height=\"1202\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_02.jpg\" class=\"attachment-full size-full\" alt=\"Apple TV Prototyping Marvel Design\" aria-describedby=\"gallery-2-3825\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_02.jpg 2136w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_02-600x338.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_02-768x432.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_02-1500x844.jpg 1500w\" sizes=\"auto, (max-width: 2136px) 100vw, 2136px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-3825'>\n\t\t\t\tProduct Page Apple TV\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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 the challenges and constraints you experienced whilst building the product page?<\/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\"><span class=\"long-quote\"> \"The biggest challenge was that we had a pre-defined deadline, as we wanted to make sure that it was out when the platform was introduced publicly, at the end of October last year. This time restraint made us move very quickly, we got it out the door in time and it did surprisingly well in terms of exposure. Which is what it was all about.\"<\/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\">Rob: The product page started out as a design constrained by a few things. The first being that all the images would get sent back to us square - and it\u2019s a rectangular platform. We knew that we had a defined area that we could use and a defined area that we could then use for content. The first thing we did was have a masked fade over the text area and the image, which seemed in line with a lot of platform best practice. That was fine, but not optimal because we thought where would the thumbnails go and where\u2019s the division? Things like that.<\/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 next constraint was trying an angled line, like we do in the app. We tried that and whilst it looked fine as well, it wasn\u2019t perfect. So, we suggested a slightly wackier idea where everything was in circles. That was good but a little bit too far away from the mobile app for comfort and not quite fitting for the images.<\/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\">Then we redefined the circles and kept the arc. The interesting thing about the arc is that products which have around 30 thumbnail images, you can see that they follow the curve of the arc and scroll along the curve as well. This came out as a great design and then all we had to question was whether it was technically possible.<\/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\">\"We thought, well actually, technically anything is possible. Let\u2019s just do a really good design.\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\"><span class=\"long-quote\"> \"This was the most fitting design and it kept the constraints from the square image whilst respecting the UI of the mobile app and being distinctive to the TV. This all came out of the input that all three of us had in the process. It was a very iterative and democratic process.\"<\/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\">Keith: Apple really liked it. It was unusual but it also adhered to almost all of their UX guidelines for TV which can be quite constraining and you can feel like everything is templated. If you go to Apple News type apps, they will feel like very similar products apart from stylistically, they\u2019ve got different colour changes and things like that. We wanted to make sure that we were doing something different but still adhered to what they wanted.<\/p>\n<div id='gallery-3' class='gallery galleryid-3811 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\/10\/product_page_03.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"2136\" height=\"1202\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_03.jpg\" class=\"attachment-full size-full\" alt=\"Apple TV Prototyping Marvel Design\" aria-describedby=\"gallery-3-3826\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_03.jpg 2136w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_03-600x338.jpg 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_03-768x432.jpg 768w, https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/product_page_03-1500x844.jpg 1500w\" sizes=\"auto, (max-width: 2136px) 100vw, 2136px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-3826'>\n\t\t\t\tProduct Page\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\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 did you enjoy most about working with TV?<\/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\">Rob: It gave us room to explore. Once we\u2019d done this, a UX guy from Apple came in and took a look. We went through the app on various screens and when they landed on the product page they loved it. Which led to them requesting an image they could use on their website. We also took some constructive feedback from that meeting, unearthing other opportunities we could explore.<\/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\">Changing anything on our business website is huge because the risk is massive. Changing anything in the app is a much lower risk and the great thing about working with changing things in TV is a much lower risk, so we didn\u2019t feel the need to particularly ask for permission to change anything we wanted to in the app. <\/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\">For example, the \u2018wishlist\u2019 section on that page was originally called \u2018favourites\u2019, similar to the mobile app. They had some questions like the use of the word favourites and how appropriate that was. We said, \u201cRight, okay, we\u2019re going to go with their suggestion, we're going to go with \u2018Wishlist\u2019, which seems a much more reasonable thing. We pulled all the app icons into the designs as well, which are all hand drawn.<\/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;\">Were there any particular aspect of the UX journey you had to tailor for this specific platform?<\/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\">Rob: The TV app was designed as a pairing for the phone app. If you are going to use the app on TV and you hit the buy button, it\u2019s a complicated process for a few reasons. Largely when buying from us a user generally has to personalise the gift, which is not the experience that you want to give the user on the television. Similarly, users don\u2019t want to enter personal data like credit card information on a massive screen.<\/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\">\"This was an example of what we wanted it to be, not just a functional app but also a second generation TV 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\">If you hit that button, what you get is a browser and that says to you, \u201cIf you\u2019ve got the Gift Finder app on your iPhone or iPad, open it.\u201d When you open it, your phone will appear and when you click on it, it will send the product to your phone. Then you do your personalisation in an environment that you feel is a bit more appropriate. With the addition of Apple Pay that becomes almost two taps. If it\u2019s a non-customisable product you hit buy, you send it to the phone in the Apple Pay and you\u2019re pretty much done.<\/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>At NOTHS, the team have a unique challenge because not only are they talking to customers but also their partners and tailoring an experience suitable for both of them. There have to be mindset changes from left to right to link up these experiences and the tech that runs beneath them. The Apple TV was a recognition of opportunity rather than doing it in the knowledge that it would be a great revenue driver. They tackled their challenges through an iterative approach and democratic environment, optimised for building an app on brand but unique to TV.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In discussions we\u2019ve had with designers in retail, a lot of their focus has been around optimising the mobile app, simply because mobile activity increases by the thousands every year. More recently, we spoke to notonthehighstreet.com who have spent time this year focusing on an alternative and more traditional channel &#8211; Apple TV. \u201cPeople have been using the TV as&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":12,"featured_media":3823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3811","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=\"Marvel speaks to notonthehighstreet.com&#039;s UX and iOS delivery team about their design process and experiences building their app for Apple TV.\" \/>\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\/notonthehighstreet-designing-for-apple-tv\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Not on the High Street: Designing for Apple TV | Marvel Blog\" \/>\n<meta property=\"og:description\" content=\"Marvel speaks to notonthehighstreet.com&#039;s UX and iOS delivery team about their design process and experiences building their app for Apple TV.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/\" \/>\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-10-13T14:28:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-14T11:18:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/DSC_0574.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"5571\" \/>\n\t<meta property=\"og:image:height\" content=\"3718\" \/>\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=\"7 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\/notonthehighstreet-designing-for-apple-tv\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2016\/10\/DSC_0574.jpg\",\"width\":5571,\"height\":3718,\"caption\":\"Apple TV Prototyping Marvel Design\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/\",\"name\":\"Not on the High Street: Designing for Apple TV | Marvel Blog\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#primaryimage\"},\"datePublished\":\"2016-10-13T14:28:17+00:00\",\"dateModified\":\"2020-12-14T11:18:24+00:00\",\"description\":\"Marvel speaks to notonthehighstreet.com's UX and iOS delivery team about their design process and experiences building their app for Apple TV.\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/758d288ebafc1477497b98b60f9e49ff\"},\"headline\":\"Not on the High Street: Designing for Apple TV\",\"datePublished\":\"2016-10-13T14:28:17+00:00\",\"dateModified\":\"2020-12-14T11:18:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#primaryimage\"},\"articleSection\":\"In the Spotlight\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/notonthehighstreet-designing-for-apple-tv\/#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\/3811","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=3811"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/3811\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/3823"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=3811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=3811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=3811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}