-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsiden.html
More file actions
136 lines (136 loc) · 13.1 KB
/
Copy pathsiden.html
File metadata and controls
136 lines (136 loc) · 13.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html><!-- This site was created in Webflow. https://www.webflow.com -->
<!-- Last Published: Wed Oct 11 2023 01:15:51 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="613d8427ee7de454eaa6f5c8" data-wf-site="5ff10bd8c5d07118ca7bc2da">
<head>
<meta charset="utf-8">
<title>Mark Thorp - Siden</title>
<meta content="As Principal Designer, I designed a TV-OS that aggregated all streaming services into one interface with supporting Android and iOS apps." name="description">
<meta content="Mark Thorp - Siden" property="og:title">
<meta content="As Principal Designer, I designed a TV-OS that aggregated all streaming services into one interface with supporting Android and iOS apps." property="og:description">
<meta content="Mark Thorp - Siden" property="twitter:title">
<meta content="As Principal Designer, I designed a TV-OS that aggregated all streaming services into one interface with supporting Android and iOS apps." property="twitter:description">
<meta property="og:type" content="website">
<meta content="summary_large_image" name="twitter:card">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/markthorp.webflow.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Red Hat Display:regular","Red Hat Text:regular,600"] }});</script>
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="section nav">
<a data-w-id="d6279d83-e621-47d7-eb5a-cccb4e30c7d3" href="index.html" class="navlogo w-inline-block">
<div>Mark Thorp</div>
</a>
<div class="navcontacts">
<a href="https://www.linkedin.com/in/mark-thorp-1b99a254/" target="_blank" class="navcontact w-inline-block">
<div></div>
</a>
</div>
</div>
<div data-w-id="8b9615ed-e55b-083e-a964-2868f3ae8259" class="headerclient siden"><img src="images/header-siden2x.png" loading="lazy" width="920" sizes="(max-width: 479px) 200px, (max-width: 767px) 342px, (max-width: 991px) 480px, 720px" alt="Siden signal" srcset="images/header-siden2x-p-500.png 500w, images/header-siden2x-p-800.png 800w, images/header-siden2x.png 1440w" class="header-image siden">
<div class="container containerclient"><img src="images/logo-siden-white.svg" loading="lazy" alt="Siden" class="projectlogo"></div>
</div>
<div class="section">
<div class="container containerdescription">
<p class="paragraph1 textcenter">As Principal Designer, I aggregated multiple streaming services into one TV-OS with supporting Android and iOS apps.</p>
</div>
</div>
<div class="section">
<div class="container columns w-row">
<div class="column1 w-col w-col-5 w-col-stack">
<h2>Our goal</h2>
<p class="paragraph2">We set out to create a device and OS which provided home internet and streaming services, while saving on data usage in emerging markets.<br><br>We achieved this by enabling users to discover content through an immersive unifying UI experience on Siden's AndroidTV-based Hub, which was available for them to consume using Siden's proprietary technology without overwhelming the wireless networks. <br><br>Users could discover "data-free" content, which encompassed some of the most popular content from our marquee content partners, and were able to consume it on an unlimited basis (ie. data free), all without the need for access to fibre broadband.<br><br>Wireless operator partners benefited because this specific content distribution made special use of their wireless networks to overcome their limited capacity, enabling wireless operators to essentially offer "fibre-like" home broadband using their wireless networks.<br></p>
</div>
<div class="column2 w-col w-col-7 w-col-stack">
<div data-w-id="7154d5bf-29ee-8164-c1e6-0a432c29be12" class="image-container"><img src="images/siden-thumb12x.jpg" loading="lazy" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 90vw, 51vw" srcset="images/siden-thumb12x-p-1080.jpeg 1080w, images/siden-thumb12x.jpg 1584w" alt="Siden app on Android TV, Android mobile and iPhone"></div>
</div>
</div>
</div>
<div class="section">
<div class="container columns switchcolumns w-row">
<div class="column1 reversepadding w-col w-col-5 w-col-stack">
<h2>Siden TV OS</h2>
<p class="paragraph2">We designed an interface that aggregated all streaming services into one easy to use TV OS. Customers could discover content from a number of providers without the need to open their apps. Each provider had their own branded space within our OS and their theme colours continued through into each of their titles.<br><br>The special content distribution technology, enabled users to discover "data-free" content from all of the participating content partners in one place and get the benefit of fiber-like broadband using a wireless service. If a user discovered content that wasn't yet "data-free", they could add it to Watch Later and Siden would enable it to become "data-free" within a matter of a day or two. All this while our AI-driven recommendation system was already enabling content to become "data-free" based on its relevancy and popularity for a given user.</p>
</div>
<div class="column2 reversepadding w-col w-col-7 w-col-stack">
<div class="image-container">
<div class="devicetv"><img src="images/siden-thumb22x.png" loading="lazy" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 90vw, 51vw" srcset="images/siden-thumb22x-p-500.png 500w, images/siden-thumb22x-p-800.png 800w, images/siden-thumb22x.png 1584w" alt="">
<div data-poster-url="videos/siden-tv-poster-00001.jpg" data-video-urls="videos/siden-tv-transcode.mp4,videos/siden-tv-transcode.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="videosidentv w-background-video w-background-video-atom"><video id="c10aa1a7-c694-f844-814f-7da133fa64ef-video" autoplay="" loop="" style="background-image:url("videos/siden-tv-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="videos/siden-tv-transcode.mp4" data-wf-ignore="true">
<source src="videos/siden-tv-transcode.webm" data-wf-ignore="true">
</video></div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container columns w-row">
<div class="column1 w-col w-col-5 w-col-stack">
<h2>Android app</h2>
<p class="paragraph2">Speed was of the essence with our Android app, being our most crucial mobile app for emerging markets. Adhering to patterns and components from Google's Material Design Guidelines helped us to design and develop this app with haste.<br><br>I wanted to create impact and celebrate entertainment, while keeping within the limits of what creative assets were available from our partners. Our title pages, for example, made use of full screen posters to theme each title and create impact without needing to create custom assets.</p>
</div>
<div class="column2 w-col w-col-7 w-col-stack">
<div class="image-container imagecenter">
<div class="deviceandroid"><img src="images/siden-thumb32x.png" loading="lazy" height="" sizes="100vw" alt="" srcset="images/siden-thumb32x-p-500.png 500w, images/siden-thumb32x-p-800.png 800w, images/siden-thumb32x.png 1581w">
<div data-poster-url="videos/siden-android-prototype-poster-00001.jpg" data-video-urls="videos/siden-android-prototype-transcode.mp4,videos/siden-android-prototype-transcode.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="videosidenandroid w-background-video w-background-video-atom"><video id="72c95894-51db-d82b-1de3-3690f6880377-video" autoplay="" loop="" style="background-image:url("videos/siden-android-prototype-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="videos/siden-android-prototype-transcode.mp4" data-wf-ignore="true">
<source src="videos/siden-android-prototype-transcode.webm" data-wf-ignore="true">
</video></div>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="container columns switchcolumns extrapaddingbottom w-row">
<div class="column1 reversepadding w-col w-col-5 w-col-stack">
<h2>iOS app</h2>
<p class="paragraph2">Indonesia was our test bed for all of our apps, but our next priority was to create an iOS app that would impress in both emerging and American markets.<br><br>Drawing from years of experience in designing streaming services, I combined my favourite ideas into the iOS app. I wanted to create an interface that was easy to navigate with as little need to adjust hand position as possible and a focus on trailers to improve content discovery.<br><br>I also wanted to create an interface that felt like they were never leaving the home page and could always discover more content at every point of their journey. Opening a title page was like zooming in on the row and customers could still swipe left and right between titles to explore more titles in that row. Customers could also activate the trailer at the top and swipe between titles to surf trailers.</p>
</div>
<div class="column2 reversepadding w-col w-col-7 w-col-stack">
<div class="image-container"><img src="images/siden-thumb42x.png" loading="lazy" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 88vw, 51vw" width="792.5" alt="" srcset="images/siden-thumb42x-p-500.png 500w, images/siden-thumb42x.png 1585w">
<div data-poster-url="videos/siden-iPhone-poster-00001.jpg" data-video-urls="videos/siden-iPhone-transcode.mp4,videos/siden-iPhone-transcode.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="videosideniphone w-background-video w-background-video-atom"><video id="945eee43-ff7b-1fe1-fb41-4518ca5e7b12-video" autoplay="" loop="" style="background-image:url("videos/siden-iPhone-poster-00001.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="videos/siden-iPhone-transcode.mp4" data-wf-ignore="true">
<source src="videos/siden-iPhone-transcode.webm" data-wf-ignore="true">
</video></div>
</div>
</div>
</div>
</div>
<div data-w-id="b4263451-9cfe-c5ba-45c6-c3b52448dcde" class="section sidencenterfold">
<div data-w-id="f705a113-cb49-86b8-ffe8-f4bef2c60b60" class="container"><img src="images/siden-centerpiece2x.png" loading="lazy" sizes="100vw" srcset="images/siden-centerpiece2x-p-500.png 500w, images/siden-centerpiece2x-p-800.png 800w, images/siden-centerpiece2x.png 2510w" alt="Siden iPhone App"></div>
</div>
<div class="section">
<div class="container columns siden-dashboard w-row">
<div class="column1 w-col w-col-5 w-col-stack">
<h2>Content dashboard</h2>
<p class="paragraph2">We designed a content dashboard, so our employees and partners could keep track of CDN data.<br><br>This example is what our employees would see, but our clients would see their own dashboard complete with their logo and brand colours.</p>
</div>
<div class="column2 clearpadding w-col w-col-7 w-col-stack">
<div class="image-container"><img src="images/siden-thumb52x.jpg" loading="lazy" sizes="(max-width: 479px) 90vw, (max-width: 767px) 92vw, (max-width: 991px) 90vw, 54vw" srcset="images/siden-thumb52x-p-800.jpeg 800w, images/siden-thumb52x-p-1080.jpeg 1080w, images/siden-thumb52x.jpg 1584w" alt="Siden Dashboard" class="img-siden-dashboard"></div>
</div>
</div>
</div>
<div class="section footer">
<div class="container containerfooter">
<div class="contacts">
<a href="https://www.linkedin.com/in/mark-thorp-1b99a254/" target="_blank" class="contact w-inline-block">
<div class="footericon"></div>
</a>
</div>
<p class="footerparagraph">© Copyright 2021, Mark Thorp.</p>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5ff10bd8c5d07118ca7bc2da" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
</body>
</html>