-
Notifications
You must be signed in to change notification settings - Fork 1
/
wearably.html
181 lines (151 loc) · 13.7 KB
/
wearably.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" type="image/ico" href="assets/img/favicon.png"/>
<title>Stephanie Nguyen | UX UI Designer</title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/css/style.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Stephanie Nguyen</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Work</a></li>
<li><a href="https://medium.com/@nguyenist">Blog</a></li>
<li><a href="about.html">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>[email protected]</a></li>
</ul>
</div>
<div id="workwrap">
<div class="container">
<div class="row">
<h1>Wearably</h1>
<p><strong>Project:</strong> Platform for media companies to distribute content through wearable devices like smartwatches and Google Glass.</p>
<p><strong>My role:</strong> Visual design, User interaction design, User experience design, Device testing</p>
<p><strong>Where and when:</strong> Silica Labs Software Corp | June 2013 - September 2013</p>
</div><! --/row -->
</div> <!-- /container -->
</div><! --/workwrap -->
<hr>
<section id="works"></section>
<div class="container">
<div class="row centered">
<div class="col-lg-8 col-lg-offset-2 mt text-left">
<h4>Product</h4>
<p>Wearably is a media platform that allows publications to transform their RSS feeds into simple news-reading experiences for smartwatches (Sony Smartwatch and the Samsung Galaxy Gear) and heads-up displays like Google Glass. We worked on integrating news with partnerships from National Geographic, The Atlantic Media Company, Hacker News, and the New America Foundation. The products created and featured below include:</p>
<p>
<ol>
<li>A web-based dashboard for publishers to create news and users to curate their news.
<li>The smartwatch and Google Glass interface that displays the users' news.</li>
</ol>
</p>
</br>
<h4>Problem</h4>
<p>For the last century, newspapers were the dominant way people could get their news about politics, culture and the community around the world. The last 15 years have been a sea change. People go to web pages on their desktops. Now people lean back with a tablet in hand or read it on the go with their phones. Every step of the way, people read news. Those who produce the stories of our lives will need a way to communicate. We also noticed a growing smartwatch trend: the Apple Watch, Pebble, Samsung Galaxy Gear, the Moto360. With such limited screen real estate for these wearable devices, the challenge would be curating, targeting and letting readers know where and when they are on all of their devices. We realized that may be a complex challenge for companies that specialize in gathering news and that is where the idea for Wearably was born. We wanted to make it possible to have news on any wearable device.</p>
<img class="img-responsive" src="assets/img/portfolio/2_wearably.png">
</br>
<h4>Interviews and Market Segmentation</h4>
<p>We created a list of hundreds of the top news media providers and cold called and emailed them. Here were some of the biggest takeaways that gave us valuable insight moving forward with product development and design:
<ul>
<li>"We're trying to get up to speed with wearables. It's hard to figure out where to invest and what to do internally and externally. We want to expand content to be broader. We were one of the first web-adopters. People are expecting us to be in the discussion and we really want to be early on wearable devices too to benefit.
</br>- Entrepreneur Magazine</li>
<li>"We're looking for opportunities in the online and digital devices space where we try to spot customers on the future for content. The more platforms the better. We follow customers. When they moved online, we started delivering online and delivering more pictures. Then online mobile we began video content. When they migrate to new platforms, we want to be there." </br>- Reuters News Agency</li>
<li>We want to expand content in general and stand out among other media competitors. </br>-Business Insider</li>
<li>We want to position ourselves to give instant access to stories that don't get told by other people. We want to know information on where the user is to provide them with relevant information. </br>- Sports Illustrated</li>
<li>We want to communicate what makes us better and different than the rest of the market and from a development standpoint, what would make us unique to advertisers. The market on wearables is important. It's something to think about for sure.</br>-Time, Fortune, Money, CNN</li>
<li>Media spans across a whole range of devices. We think people will be flipping through stories on headlines and you save for later. We’d love to be super early adopters. The challenge is that these platforms are nacent and the user base is small. How do we prove this as a full on initiative?</br>- USA Today</li>
</ul>
</p>
</br>
<h4>Wireframing for our Web Interface</h4>
Along with designs for the app's interface on wearable devices, we learned we needed a web-based interface for the dashboard. This would mainly be for publishers to be able to get online and curate their news and headlines that would be delivered to their users. The wireframes below examines one of the versions of the website that we built. This version shows the landing page designed through Keynote.</br></br>
<embed src="assets/img/work_wearably_13.pdf" width="100%" height="600px">
</br>
</br>
<p>Here, I tested a different wireframing service called Balsamiq. This platform was helpful since it included pre-designed, drag-and-drop elements such as search bars, navigation bars and social icons.</p>
<embed src="assets/img/work_wearably_12.pdf" width="100%" height="600px">
<h4>Wireframing for Wearable Devices</h4>
<p>Designing for smartwatches, devices with the screen size of a small post-it note was a unique challenge. Based on our interviews with companies like Fortune, Bloomberg, The New Yorker and Wired, we gathered some important points to keep in mind when designing the user experience:</br>
<ol>
<li>Competitive Edge. Media companies want first to market on new platforms to stay ahead of the technology curve and keep their brand fresh.</li>
<li>Core features. A simple news headline, a feature image and a save later button resonated with respondents as the most important features for small screen devices.</li>
<li>Form-factor. News and media on wearable devices would be completely different than desktop, tablet and mobile devices. It is not pleasant to read pages of an article on a tiny screen with tiny text. Based on a few usability studies, users were more inclined to skim pieces they are interested in and read the long-form version of the piece later.</li>
<li>Discovery. Media companies value discovery because of the opportunity to introduce users to new brands and keep them engaged on the platform. Users value discovery to find new sources of information.</li>
</ol>
</p>
<img class="img-responsive" src="assets/img/work_wearably_11.jpg">
</br>
<img src="assets/img/work_wearably_9.jpg" style="width: 49%;">
<img src="assets/img/work_wearably_10.jpg" style="width: 49%;">
</br>
<h4 class="mt">Product Design</h4>
<p>With Wearably, we can use publishers’ existing RSS feeds to automatically create and make apps available on Glass, the Sony SmartWatch 2, and (soon) the Samsung Gear that are formatted beautifully for the experience on each device.. A rough analogy might be WordPress or another content-management system: WordPress turns content automatically into interactive blogs and webpages for web and mobile, and we turn content automatically into the interactive cards that comprise apps on various wearable devices.. We can also send the information based on location--when you leave your house to walk to work, you receive your latest news updates from your favorite publishers.
<p>The product was originally called SimpleWing when launched just for Glass; it was covered in TechCocktail as a product to “democratize” making apps for Glass and in Pando Daily for making Glass apps “as easy an RSS tap.” National Geographic released a statement saying we make “the publishing process extremely easy.” Our integration with the Sony SmartWatch 2 was featured by Sony in its booth in Berlin IFA, the equivalent of CES for Europe.</p>
<img src="assets/img/work_wearably_5.png" style="width: 32%;">
<img src="assets/img/work_wearably_7.png" style="width: 32%;">
<img src="assets/img/work_wearably_6.png" style="width: 32%;">
</br>
<img class="img-responsive mt" src="assets/img/work_wearably_15.jpg">
</br>
<img src="assets/img/work_wearably_4.png" style="width:100%;">
</br>
<div class="text-center mt">
<img src="assets/img/work_wearably_16.png" style="width: 49%;">
<img src="assets/img/work_wearably_17.png" style="width: 49%;">
<img src="assets/img/work_wearably_18.png" style="width: 49%;">
<img src="assets/img/work_wearably_8.jpg" style="width: 49%;">
<img src="assets/img/work_wearably_19.png" style="width: 49%;">
<img src="assets/img/work_wearably_20.png" style="width: 49%;">
</div>
</br>
<h4 class="mt">Challenges</h4>
<ul>
<li>Users expected smartwatches to work like mobile phones. The devices that were deployed at the time in Fall 2014 (Samsung Galaxy Gear, Pebble, Sony Smartwatch and Google Glass) all had different user experiences and varying degrees of reliance on a paired mobile device. Smartwatches at the time could not be used independently from your smartphone. Often times, users would be confused and frustrated that they would have to curate news on one device and receive news on the other. It was easier to just stick with consuming news on their smartphones, a device that they already have with them most of the time.</li>
<li>Novelty. Being a startup that is first to market and conveying the wearable device experience. We had to explain how the devices work --at the same time as explaining how our technology makes the process of developing for them far more manageable.</li>
<li>Price. Potential enterprise clients, including large media companies, want to seem innovative, but protest that they can’t justify an ROI until millions have the devices. That reduces the prices we can charge (but enables us to move in the market without too many competitors who have higher cost-structures).</li>
<li>Client Sales Cycles. Media companies have complex structures and hierarchies, making the process for sales lengthy.</li>
<li>Sustainability and scale. Continuing to master many devices in a continual rollout of wearable devices from major technology companies.</li>
</ul>
</p>
</br>
<h4 class="mt">Press and Publications</h4>
<p>Wearably was featured in publications such as <a href="http://www.fastcompany.com/3013270/fast-feed/national-geographic-now-on-google-glass">Fast Company</a>, <a href="http://mashable.com/2013/12/09/wearably/">Mashable</a>, <a href="http://venturebeat.com/2013/06/29/designing-for-google-glass-its-not-what-it-appears/">Venture Beat</a>, <a href="http://tech.co/silica-labs-google-glass-2013-06">Tech Cocktail</a>, <a href="http://adage.com/article/digital/branded-google-glass-apps-emerge-tiny-user-base/243754/">AdAge</a> and <a href="http://pandodaily.com/2013/08/02/google-glass-for-publishers-silica-labs-makes-it-as-easy-as-an-rss-tap/">Pandodaily</a>. This app was a <a href="http://mobilefuture.org/newsroom/mobile-future-kicks-off-peoples-choice-award-for-the-mobileys-competition/">finalist</a> in the Mobileys Mobile Future competition in 2013. Below is the video we submitted.</p>
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Bk-glONTVcs" frameborder="0" allowfullscreen></iframe>
</div><! --/row -->
</div><! --/container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>