-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvoices.html
executable file
·150 lines (141 loc) · 8.84 KB
/
voices.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jen Byyny, Yahoo Voices</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="icon" type="img/png" href="images/favicon.ico" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,800' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Jen Byyny Portfolio" content="Jen Byyny">
<meta name="description" content="Jen Byyny is a multi-platform, end-to-end Product/UX/Visual Design Lead with over twelve years of experience. My background includes degrees in business marketing and media design, roles in art direction in advertising and interactive experiences for web and mobile. I am a system thinker and love to ask, What if? I get excited about leading teams on projects, brainstorming new features and creating strategic solutions with designers, engineers and product partners.>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-74650149-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-74650149-1');
</script>
</head>
<body>
<div class="uh">
<div class="uhstuff">
<a href="index.html"><div class="name">Jen Byyny</div></a>
<div class="role">Senior Director, Product Experience Design
</div>
<div id="content">
<div id="hamburger">
<img src="images/hamburger.png" width="20px" />
</div>
<div id="nav">
<!-- large screen only menu and dropdown -->
<ul>
<li><a class="activeState dropbtn">Projects</a></li>
<li><a href="experience.html">Experience</a></li>
<li><a href="more.html">More Designs</a></li>
</ul>
<div id="myDropdown" class="projects-content">
<a href="looker.html">Looker Data Sciences</a>
<a href="finance.html">Yahoo Finance</a>
<a href="braver.html">Braver</a>
<a href="recommends.html">Yahoo Recommends</a>
<a href="picknroll.html">Yahoo Editorial Analytics</a>
<a href="jumpbunch.html">JumpBunch</a>
<a href="voices.html">Yahoo Voices</a>
<a href="guise.html">Guise</a>
</div>
</div>
<!-- second menu for mobile only
activated on the right media queries -->
<div id="nav-mobile">
<ul>
<li><a class="activeState dropbtn">Projects</a>
<!-- embedded dropdown for mobile only -->
<li><a href="looker.html">Looker Data Sciences</a>
</li>
<li><a href="finance.html">Yahoo Finance</a></li>
<li><a href="braver.html">Braver</a></li>
<li><a href="recommends.html">Yahoo Recommends</a></li>
<li><a href="picknroll.html">Yahoo Editorial Analytics</a></li>
<li><a href="jumpbunch.html">JumpBunch</a></li>
<li><a href="voices.html">Yahoo Voices</a></li>
<li><a href="guise.html">Guise</a></li>
</li>
<li><a href="experience.html">Experience</a></li>
<li><a href="more.html">More Designs</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="project body">
<p class="project-info">Yahoo Voices is a responsive site that was created for creators. Built for both internal global editors and consumer authors, Voices provided easy content creation with integrated Flickr search.</p>
</br >
<div class="splash"><img src="images/voices-home.png" width="1000"/></div>
<p class="list-header">Project Info/Goals
<ul>
<li>Publishing platform redesign for paid by assignment and unpaid contributors</li>
<li>Team of 9 engineers, 2 front-end developers and 2 product designers</li>
<li>Increase original content to publish on destination site, ad revenue, brand exposure</li>
<li>Improve content creation and collection experience of current Voices product</li>
<li>Increase original content inventory for consideration to publish on yahoo.com, Yahoo Sports and Yahoo News</li>
</ul>
</p>
</br >
<p class="list-header">In addition to posting content, users can create collections of content. Highly viewed and collected content has the potential to be featured on the main page.</p>
<div class="splash"><img src="images/voices-main-copy.png" width="1000"/></div>
<p class="list-header">Project Results
<ul>
<li>Innovative user content creation and consumption experience leveraging another Yahoo product, Flickr</li>
<li>Concept to production level prototype built in 5 months</li>
<li>Complete product ownership and alignment by all engineers and designers</li>
<li>Start-up size team without Product team representation</li>
<li>Project never green-lit by executives due to timing of acquisition of Tumblr publishing platform</li>
</ul>
</p>
</br >
<p class="list-header">Easy drag and drop editing with Flickr image search</p>
<div class="splash"><img src="images/voices-main-copy1.png" width="1000"/></div>
<div class="splash"><img src="images/voices-main-copy2.png" width="1000"/></div>
<div class="splash"><img src="images/voices-main-copy3.png" width="1000"/></div>
<p class="list-header">Create, save and share collections of content</p>
<div class="splash"><img src="images/voices-main-copy4.png" width="1000"/></div>
<p class="list-header">Your profile with an activity feed</p>
<div class="splash"><img src="images/voices-main-copy5.png" width="1000"/></div>
<p class="list-header">Defining Attributes</p>
<div class="splash"><img src="images/voices-1.png" width="1000"/></div>
<p class="list-header">Defining Features</p>
<div class="splash"><img src="images/voices-1a.png" width="1000"/></div>
<div class="splash"><img src="images/voices-2.png" width="1000"/></div>
<div class="splash"><img src="images/voices-3.png" width="1000"/></div>
<div class="splash"><img src="images/voices-3a.png" width="1000"/></div>
<p class="list-header">Defining User Types/Audience</p>
<div class="splash"><img src="images/voices-4.png" width="1000"/></div>
<div class="splash"><img src="images/voices-5.png" width="1000"/></div>
<p class="list-header">Flows for MVP</p>
<div class="splash"><img src="images/voices-6.png" width="1000"/></div>
<div class="splash"><img src="images/voices-7.png" width="1000"/></div>
<div class="splash"><img src="images/voices-8.png" width="1000"/></div>
<div class="splash"><img src="images/voices-9.png" width="1000"/></div>
<p class="list-header">Responsive grid sketches</p>
<div class="splash"><img src="images/voices-10.png" width="1000"/></div>
<div class="splash"><img src="images/voices-opps.png" width="1000"/></div>
<p class="list-header">Wireframes and flows</p>
<div class="splash"><img src="images/voices-createarticle-flow.png" width="1000"/></div>
<div class="splash"><img src="images/voices-article-wire.png" width="1000"/></div>
<div class="splash"><img src="images/voices-enhance-content.png" width="1000"/></div>
<div class="splash"><img src="images/voices-create1.png" width="1000"/></div>
<div class="splash"><img src="images/voices-createUI.png" width="1000"/></div>
<div class="splash"><img src="images/voices-create-slideshow.png" width="1000"/></div>
</br >
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>
</html>