-
Notifications
You must be signed in to change notification settings - Fork 0
/
work.html
executable file
·290 lines (237 loc) · 16.6 KB
/
work.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ilya Yakubovich's user interface design portfolio</title>
<meta name="viewport" content="width=device-width">
<meta name="description" content="Hello! I'm Ilya Yakubovich, a user interface designer from Toronto and this is my portfolio.">
<meta name="keywords" content="ilya yakubovich, portfolio, ui, user interface, designer, toronto, ux, user experience, web design, yammer">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body id="work" class="preload">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="header">
<div class="wrapper">
<a href="index.html"><img id="me" src="img/stamp.png" alt="Ilya Hebrew Seal"></a>
<h1>
Ilya Yakubovich<br>
<span class="title">experience designer</span>
</h1>
<ul>
<li><a href="index.html">About</a></li>
<li><a href="#" class="selected">Work</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</div>
</div>
<div id="carousel" class="bg-commonsku" name="main-carousel">
<div class="callout"></div>
<div class="wrapper">
<ul class="work-nav">
<li><a href="#commonsku" class="selected"><img src="img/logo-white-commonsku.png" height=56 width=192></a></li>
<li><a href="#rs"><img src="img/logo-white-rs.png" height=56 width=128></a></li>
<li><a href="#afti"><img src="img/logo-white-afti.png" height=56 width=128></a></li>
<li><a href="#yammer"><img src="img/logo-white-yammer.png" width=270></a></li>
<li><a href="#geni"><img src="img/logo-white-geni.png" height=56 width=216></a></li>
</ul>
</div>
</div>
<div class="about" id="carousel-yammer" style="display:none;">
<div class="wrapper">
<div class="about-project">
<h2>About Yammer</h2>
<p>Yammer is a private social network that helps employees collaborate across departments, locations, and business apps.</p>
<p>Yammer has been acquired by Microsoft in 2012, and is currently used at over 200,000 companies worldwide, including 85% of the Fortune 500. It has over 8 million users.</p>
</div>
<div class="about-role">
<h2>My Role</h2>
<p>As a member of the Yammer founding team (4th hire), I worked closely with the CEO to define the vision for the product, interface, and user experience. I communicated requirements to the engineering team through high fidelity mockups, interaction diagrams, user flow diagrams, and detailed specs.</p>
<p>Throughout my career at Yammer the product went through several major design and functionality changes. I evaluated designs through A/B tests, user tests, and feedback from customers.</p>
</div>
<div style="clear:both;"></div>
<h2>"My Feed"</h2>
<p>Yammer is where teamwork happens. It’s a central place for teams to share updates, ask questions, get feedback, and collaborate on files.</p>
<img src="img/screenshot-yammer-main.png">
<h2>Search (Flow)</h2>
<p>Yammer users can find everything they need, including information in other business applications, without leaving Yammer. </p>
<img src="img/screenshot-yammer-search.png" style="width: 50%;">
<h2>Poll (Flow)</h2>
<p>The Yammer publisher allows users to create a variety of content, like polls, questions, ideas, and events. This is an example of the kind of diagram that would be attached to a spec when the company became larger and specs had to become more precise.</p>
<img src="img/screenshot-yammer-poll.png">
<h2>Notifications, Networks, and User Dropdowns (Flow)</h2>
<p>Part of a spec for a set of improvements to the page header.</p>
<img src="img/screenshot-yammer-dropdown.png">
<h2>Publisher (A/B Test Specification)</h2>
<p>A specification for a 3x2 A/B test with 6 variations. As the product became more mature and gained more users, we conducted extensive A/B tests to ensure that proposed changes resulted in measurable improvements. </p>
<img src="img/screenshot-yammer-ab.png">
<h2>Desktop App (Flex Application)</h2>
<p>An early design for the Yammer desktop application.</p>
<img src="img/screenshot-yammer-desktop.png" style="width: 70%;">
<a class="button next">Next Project</a>
</div>
</div>
<div class="about" id="carousel-afti" style="display:none;">
<div class="wrapper">
<div class="about-project">
<h2>About Afti</h2>
<p>Afti is a web application that uses notch therapy to reduce the intensity of <a href="https://en.wikipedia.org/wiki/Tinnitus" target="_blank">tinnitus</a>, currently under development. The first version of the application is going to be web based, and an iPhone app is planned for the future.</p>
</div>
<div class="about-role">
<h2>My Role</h2>
<p>I started this project with several friends, and am the sole developer and designer. I've created wireframes, high-fidelity mockups, and implemented a prototype in Ruby on Rails.</p>
</div>
<div style="clear:both;"></div>
<img src="img/screenshot-afti-1.png">
<h2>Signup Flow Step</h2>
<p>The user starts by entering the frequency of their tinnitus (tested by a doctor).</p>
<img src="img/screenshot-afti-2.png">
<h2>Playlist</h2>
<p>Users can upload their own tracks, which we then process by <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC2824261/" target="_blank">notching</a>. They can then regularly listen to the notched files using the Afti interface to reduce the intensity of their tinnitus.</p>
<img src="img/screenshot-afti-3.png">
<a class="button next">Next Project</a>
</div>
</div>
<div class="about" id="carousel-geni" style="display:none;">
<div class="wrapper">
<div class="about-project">
<h2>About Geni</h2>
<p>Everyone's related, but we don't always know how. <a href="http://www.geni.com" target="_blank">Geni</a> helps people rediscover those lost connections, and share family stories through collaborative family trees, photos, timelines, maps, etc.</p>
<p>The ultimate goal is to connect the world's family trees, allowing users to see their relationship to any other user, relative, or historical figure. As of 2015, the connected portion of the tree spanned 90 million profiles. Geni was acquired by MyHeritage in 2012.</p>
</div>
<div class="about-role">
<h2>My Role</h2>
<p>I joined the Geni team as a product manager in 2007 and helped in the conception, design, and implementation of new features like Timelines, Places, Tree Printing, and Tree Merging.</p>
</div>
<div style="clear:both;"></div>
<h2>Profile Timeline</h2>
<p>A person's life's events arranged chronologically. Events can be associated with photos, and multiple people, causing them to appear on each person's timeline.</p>
<img src="img/screenshot-geni-profile.png">
<h2>Places</h2>
<p>A map showing all the places related to the user's family. Clicking on a place shows relatives who lived there, photos from the location, and events that took place there.</p>
<img src="img/screenshot-geni-map.png">
</div>
</div>
<div class="about" id="carousel-commonsku">
<div class="wrapper">
<div class="about-project">
<h2>About Commonsku</h2>
<p><a href="http://www.commonsku.com" target="_blank">Commonsku</a> is a web-based CRM, order management, and social collaboration tool for the promotional products industry. It allows promotional products distributors to eliminate inefficient paper or spreadsheet-based systems and streamlines their order management process. </p>
<p>It also functions as a community for collaboration and networking between promotional products distributors and suppliers.</p>
</div>
<div class="about-role">
<h2>My Role</h2>
<p>I joined commonsku in 2011, pre-launch, and am solely responsible for UI and UX design and front-end development (PHP, Javascript, jQuery, Backbone.js, and CSS).</p>
<p>I established the brand guidelines, and implemented the public-facing marketing site, HTML emails, and landing pages for various marketing campaigns.</p>
<p>I communicated my designs through sketches, wireframes, comps, interactive mockups, interactive HTML prototypes, and style tiles. I then continuously evaluated and revised the designs based on user feedback, user tests, journey maps, and red route analysis.
</div>
<div style="clear:both;"></div>
<h2>Home Page & Public Facing Site</h2>
<p>The first page of the commonsku public site features the desk of a promotional product distributor who has switched to commonsku (sans paperwork). Rather than using stock photography, I photographed the desk myself. This allowed us to include objects that are recognizable to the promotional products industry (like the pantone color chart), commonsku brand colors (blue and magenta), and the mannequins that are also used in our video.</p>
<a href="img/screenshot-commonsku-main2.png" target="_blank"><img src="img/screenshot-commonsku-main3.png"></a>
<h2>Signup Flow</h2>
<p>The signup flow orients the user with a sequence map at the top of the page, and our robot mascot guides the user through the steps.</p>
<img src="img/screenshot-commonsku-signup.png">
<h2>Newsfeed</h2>
<p>The community newsfeed, available to both free and paid users, is a private space where the promotional product industry can exchange ideas, source products, and make connections.</p>
<p>It's used to share best practices, find great products, build closer relationships, and learn from industry experts and peers.</p>
<img src="img/screenshot-commonsku-newsfeed.png">
<h2>People Directory</h2>
<p>This page shows a map and a grid of user profile pictures. When the user zooms and scrolls the map, the grid of faces changes to reflect the newly selected area. When the user searches for a person or company, the grid shows the results, and the map resizes to the appropriate area.</p>
<p>The directory shows how large the community is and where most users are located. The search functionality makes it especially useful for finding familiar companies, or companies nearby.</p>
<img src="img/screenshot-commonsku-people.png">
<h2>Dashboard</h2>
<p>The order management dashboard consists of a collection of tiles that the user can rearrange and collapse. The dashboard shows how the business is doing at a glance, so it's particularly useful for managers.</p>
<p>When the user clicks on items within the tiles, the details for the selected item slide into view within the tile. This way, many operations can be done without ever leaving the dashboard.</p>
<img src="img/screenshot-commonsku-dashboard.png">
<h2>Client Page</h2>
<p>Distributor can create pages for their clients. The client page is used to track orders, contacts, notes, addresses, and other information about the client. Other companies like suppliers and distributors get similar pages.</p>
<img src="img/screenshot-commonsku-client.png">
<h2>Sales Order</h2>
<p>Product presentations, estimates, sales orders, purchase orders, and invoices flow seamlessly from one to the other, eliminating the need to double-enter information.</p>
<img src="img/screenshot-commonsku-order.png">
<h2>Product Search</h2>
<p>Commonsku integrates with several product databases, so that distributors can find the best products for their clients. They can also create their own collections, bookmark products, and access products form previous orders.</p>
<img src="img/screenshot-commonsku-products.png">
<h2>User Journey (Experience) Map</h2>
<p>Identifying some problems with the signup flow and new user experience using a journey map.</p>
<img src="img/journey_map.png">
<a class="button next">Next Project</a>
</div>
</div>
<div class="about" id="carousel-rs" style="display:none;">
<div class="wrapper">
<div class="about-project">
<h2>About the RIGHTSLEEVE</h2>
<p><a href="http://www.rightsleeve.com" target="_blank">RIGHTSLEEVE</a> is an award winning promotional products agency with a focus on design and branded merchandise collections. The company has been around for over 15 years.</p>
</div>
<div class="about-role">
<h2>My Role</h2>
<p>I designed the RIGHTSLEEVE website and implemented it using Foundation and PHP. My goal was to create a clean and modern look with emphasis on photography, company culture, and the logo while staying true to the company's well established brand guidelines. All pages on the site are responsive, fully functional on mobile devices while making use of all available screen space on larger devices.</p>
</div>
<div style="clear:both;"></div>
<h2>RIGHTSLEEVE.COM Homepage</h2>
<p>The primary call to action is starting a project. Scrolling farther down (not pictured) shows some more photos with links to other sections of the site (also available through the top nav), and posts from the blog (pulled in via RSS).</p>
<img src="img/screenshot-rightsleeve-new.png">
<h2>Company Page</h2>
<p>Demonstrating RIGHTSLEEVE's culture through photography and text. The company portraits are clickable, revealing a short bio following an animated transition.</p>
<img src="img/screenshot-rightsleeve-company.png">
<a class="button next">Next Project</a>
</div>
</div>
<div id="footer">
<div class="wrapper">
<div class="footer-module">
<h2>Contact Me</h2>
<ul>
<li><a target="_blank" href="mailto:[email protected]">[email protected]</a></li>
<li><a target="_blank" href="http://www.twitter.com/yakubovich">twitter.com/yakubovich</a></li>
<li><a target="_blank" href="http://www.github.com/yakubovich">github.com/yakubovich</a></li>
<li><a target="_blank" href="http://www.facebook.com/yakubovich">facebook.com/yakubovich</a></li>
<li><a target="_blank" href="http://plus.google.com/112492933628695918241?rel=author">gplus.to/yakubovich</a></li>
<li><a target="_blank" href="http://www.linkedin.com/in/ilyakub">linkedin.com/in/ilyakub</a></li>
</ul>
</div>
<div class="footer-module">
<h2>Hobbies & Projects</h2>
<ul>
<li><a target="_blank" href="http://500px.com/yakubovich">My Photography</a></li>
</ul>
</div>
<div class="footer-module">
<h2>Sites I Read</h2>
<ul>
<li><a target="_blank" href="http://www.worrydream.com/">Worrydream (Bret Victor)</a></li>
<li><a target="_blank" href="http://www.meltingasphalt.com/">Melting Asphalt (Kevin Simler)</a></li>
<li><a target="_blank" href="http://www.ribbonfarm.com/">Ribbonfarm (VGR et al)</a></li>
</ul>
</div>
<div class="footer-module" style="display: none;">
<h2>Awesome People</h2>
<ul>
<li><a target="_blank" href="http://julieannhorvath.com/">Julie Horvath</a><span>designer at github</span></li>
<li><a target="_blank" href="http://www.peterdu.com/">Peter Du</a><span>illustrator</span></li>
<li><a target="_blank" href="http://elderlab.yorku.ca/~alex/">Alex Yakubovich</a><span>my brother</span></li>
</ul>
</div>
<div style="clear:both;">
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>