-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathportfolio.html
225 lines (224 loc) · 20.6 KB
/
portfolio.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
---
layout: main
title: Jackson Riso's Portfolio
description: "Jackson Riso is a marketer, designer, and developer with experience in startups and social entrepreneurship."
---
<div class="static_header_image portfolio_header_image"></div>
<h1 class="static_header_title portfolio_header_title">My Portfolio</h1>
<h2 class="static_header_subtitle portfolio_header_subtitle">Learn more about my experience and see some examples of my work.</h2>
<div class="portfolio_menu">
<div class="container_small">
<span class="portfolio_menu_item special_portfolio_menu_item" data-menu="all">All</span>
<span class="portfolio_menu_item" data-menu="design">Design</span>
<span class="portfolio_menu_item" data-menu="marketing">Marketing</span>
<span class="portfolio_menu_item" data-menu="development">Development</span>
</div>
</div>
<div class="portfolio">
<div class="container_small">
<div class="portfolio_items">
<div class="portfolio_item all design development" data-select="home-page-trust-signals">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/home-page-trust-small.jpg')"></div>
</div>
<div class="portfolio_item_copy">Home Page - Trust Signals</div>
</div>
<div class="portfolio_item all design development marketing" data-select="sign-up-a">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/sign-up-a-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Sign Up - Landing Page #1</div>
</div>
<div class="portfolio_item all design development marketing" data-select="sign-up-b">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/sign-up-b-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Sign Up - Landing Page #2</div>
</div>
<div class="portfolio_item all design development" data-select="changecourse-demo">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/changecourse-demo-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">ChangeCourse - Demo</div>
</div>
<div class="portfolio_item all design development marketing" data-select="referral-system">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/referral-system-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Referral System</div>
</div>
<div class="portfolio_item all development marketing" data-select="modal-window">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/modal-window-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Modal Window</div>
</div>
<div class="portfolio_item all design development marketing" data-select="cheap-concert-tickets">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/cheap-concert-tickets-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Category Landing Page #1</div>
</div>
<div class="portfolio_item all design development marketing" data-select="cheap-sports-tickets">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/cheap-sports-tickets-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Category Landing Page #2</div>
</div>
<div class="portfolio_item all design" data-select="tailgate-menu">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/tailgate-menu-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Tailgate Menu</div>
</div>
<div class="portfolio_item all design development" data-select="app-page">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/app-page-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">App Page - Send a Text</div>
</div>
<div class="portfolio_item all development marketing" data-select="nfl-giveaway-page">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/nfl-giveaway-page-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">NFL Ticket Giveaway - Landing Page</div>
</div>
<div class="portfolio_item all marketing" data-select="nfl-giveaway-ad">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/nfl-giveaway-ad-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">NFL Ticket Giveaway - Ads</div>
</div>
<div class="portfolio_item all design marketing" data-select="kid-rock-ticket-prices">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/kid-rock-ticket-prices-small.jpg"></div>
</div>
<div class="portfolio_item_copy">Kid Rock Ticket Prices</div>
</div>
<div class="portfolio_item all design marketing" data-select="tickpick-blog">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/tickpick-blog-small.jpg"></div>
</div>
<div class="portfolio_item_copy">TickPick Blog</div>
</div>
<div class="portfolio_item all design marketing" data-select="grateful-dead">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/grateful-dead-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">PR - Grateful Dead</div>
</div>
<div class="portfolio_item all design marketing" data-select="ios-ad">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/ios-ad-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Download the App - Ad #1</div>
</div>
<div class="portfolio_item all design marketing" data-select="app">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/app-small.jpg"></div>
</div>
<div class="portfolio_item_copy">Download the App - Ad #2</div>
</div>
<div class="portfolio_item all design marketing" data-select="email-promo">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/email-promo-small.jpg"></div>
</div>
<div class="portfolio_item_copy">Sign Up - Ad</div>
</div>
<div class="portfolio_item all design development" data-select="contact-us">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/contact-us-small.jpg');"></div>
</div>
<div class="portfolio_item_copy">Contact Us</div>
</div>
<div class="portfolio_item all design marketing" data-select="super-bowl-ticket-prices">
<div class="portfolio_item_img_parent">
<div class="portfolio_item_img" style="background-image: url('images/portfolio/super-bowl-ticket-prices-small.jpg"></div>
</div>
<div class="portfolio_item_copy">Super Bowl Ticket Prices</div>
</div>
</div>
<div class="portfolio_showcases">
<div class="portfolio_showcase" data-select="super-bowl-ticket-prices">
<div class="showcase_image" data-image="super-bowl-ticket-prices.jpg"></div>
<div class="showcase_text">Leading up to the Super Bowl, TickPick sends out a dedicated daily email with information on Super Bowl ticket prices, and our recommendations for whether you should buy now or wait for prices to go lower. To give TickPick's premium customers the experience they deserve, I designed a module for use in our emails to them. Take a look <a href="images/portfolio/super-bowl-ticket-prices.jpg" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="contact-us">
<div class="showcase_image" data-image="contact-us.jpg"></div>
<div class="showcase_text">TickPick's 'Contact Us' page. Easy, simple, with all the information you need to get in touch. <a href="images/portfolio/contact-us.jpg" target="_blank">See a screenshot</a> or check it out the website <a href="http://www.tickpick.com/ContactUs.aspx" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="email-promo">
<div class="showcase_image" data-image="email-promo.jpg"></div>
<div class="showcase_text">A further promotion for our sign up landing pages that mirrors the page itself. Check it out <a href="images/portfolio/email-promo.jpg" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="app">
<div class="showcase_image" data-image="app.jpg"></div>
<div class="showcase_text">To promote our newly released app, I designed several ads to be used on Facebook's mobile advertising platform. See this one <a href="images/portfolio/app.jpg" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="ios-ad">
<div class="showcase_image" data-image="ios-ad.jpg"></div>
<div class="showcase_text">To promote our newly released app, I designed several ads to be used on Facebook's mobile advertising platform. See this one <a href="images/portfolio/ios-ad.jpg" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="grateful-dead">
<div class="showcase_image" data-image="grateful-dead.jpg"></div>
<div class="showcase_text">My analysis of the grateful dead shows at Soldier Field got picked up by local news site <a href="http://www.dnainfo.com/chicago/20150311/south-loop/will-grateful-dead-tickets-get-cheaper-or-pricier-as-show-nears" target="_blank">DNA Info</a> and <a href="http://www.washingtonpost.com/blogs/style-blog/wp/2015/06/08/suspicious-deadheads-threaten-to-sue-as-grateful-dead-promoter-tries-to-fit-more-fans-into-farewell-concerts/" target="_blank">The Washington Post</a>. You can check out <a href="http://blog.tickpick.com/grateful-dead-soldier-field-ticket-prices-info/" target="_blank">the full pitch</a> on the blog. I designed all the charts and graphics in Photoshop.</div>
</div>
<div class="portfolio_showcase" data-select="tickpick-blog">
<div class="showcase_image" data-image="tickpick-blog.jpg"></div>
<div class="showcase_text">At TickPick, I'm respnsible for one of our most important marketing assets, our blog. I work with colleagues and oversee freelancers to create compelling SEO content, drive sign ups and purchases, and increase social engagement. You can check out a mockup for a to-be-released design <a href="/images/portfolio/tickpick-blog.jpg">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="sign-up-b">
<div class="showcase_image" data-image="sign-up-b.jpg"></div>
<div class="showcase_text">In our work with various marketing partners at TickPick, it became apparent that havinga dedicated landing page where users could sign up to receive $10 or $20 off would go a long way to getting potential future customers to familiarize themselves with our brand. It fell to design and develop the two versions of the landing page that we would A/B test. This variation converted visitors into registered users at a rate of ~30%. The success of the media outlet logos as a trust signal was particulary interesting, as we expected customer reviews or more tradtional signals, such as the logo of the BBB, Norton Antivirus, etc. to be more effective. You can see a screenshot <a href="/images/portfolio//sign-up-b.jpg" target="_blank">here</a>, or view the live version <a href="http://www.tickpick.com/welcome-promo/?pid=VAR1" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="sign-up-a">
<div class="showcase_image" data-image="sign-up-a.jpg"></div>
<div class="showcase_text">In our work with various marketing partners at TickPick, it became apparent that havinga dedicated landing page where users could sign up to receive $10 or $20 off would go a long way to getting potential future customers to familiarize themselves with our brand. It fell to design and develop the two versions of the landing page that we would A/B test. This variation converted visitors into registered users at a rate of ~25%. You can see a screenshot <a href="/images/portfolio//sign-up-a.jpg" target="_blank">here</a>, or view the live version <a href="http://www.tickpick.com/welcome-promo/?pid=VAR1" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="changecourse-demo">
<div class="showcase_image" data-image="changecourse-demo.jpg"></div>
<div class="showcase_text">To aid in the development of my front-end skills, I created a demo of a to-be-fully-developed educational site of social change. You can view a screenshot <a href="/images/portfolio/changecourse-demo.jpg" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="kid-rock-ticket-prices">
<div class="showcase_image" data-image="kid-rock-ticket-prices.jpg"></div>
<div class="showcase_text">Whenever possible, I look for opportunities for TickPick to pitch stories to media outlets in order to earn links, increase brand awareness, and drive traffic. In years prior, Kid Rock had made headlines for his attempts at keeping scalpers from selling his tickets at high markups. In 2015, he was set to do it again with his upcoming 'First Kiss' Tour, and I thought the media would be interested in an analysis of how successful his attempts at beating the scalpers were. I researched the data, wrote the pitch, and designed the graphics used. You can check out <a href="http://blog.tickpick.com/kid-rock-ticket-prices-info/" target="_blank">the full pitch</a> on the blog, and see <a href="http://www.metrotimes.com/Blogs/archives/2015/03/31/is-kid-rock-beating-the-scalpers-tickpick-thinks-so" target="_blank">the article</a> on a local Detroit news site.</div>
</div>
<div class="portfolio_showcase" data-select="home-page-trust-signals">
<div class="showcase_image" data-image="home-page-trust.jpg"></div>
<div class="showcase_text">My first job at TickPick was to add a section to the home page where we could show off what our customers and various media outlets had said about us. In essence, we needed to add some trust signals. I drew on the media outlets our audience would most connect with, and searched twitter, facebook, Yelp, and Google for the reviews that answered our customers' most common questions. You can check out a screenshot of the final result <a href="/images/portfolio/home-page-trust.jpg" target="_blank">here</a> or the live version <a href="http://www.tickpick.com/" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="referral-system">
<div class="showcase_image" data-image="referral-system.jpg"></div>
<div class="showcase_text">After we released our referral system, we found that engagement was disappointing low. To counteract this, one of the co-founders asked me to redesign the section where users can share, tweet, or email a special link that will track sign ups and purchases. An accordion type landing page with large icons and large calls to action is what I came up with. Check out a screenshot <a href="/images/portfolio/referral-system.jpg" target="_blank">here</a> and the live version <a href="https://www.tickpick.com/invite.aspx" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="modal-window">
<div class="showcase_image" data-image="modal-window.jpg"></div>
<div class="showcase_text">To drive more sign ups through the previously mentioned landing pages, I added a cookied modal window that floats up from the bottom of the screen and seamlessly makes the rest of the page appear darker. Sign ups doubled. See the <a href="images/portfolio/modal-window.jpg" target="_blank">screenshot</a> or check out the <a href="http://blog.tickpick.com/" target="_blank">live version</a> (delete cookies or open in a private browswer if previously visited).</div>
</div>
<div class="portfolio_showcase" data-select="cheap-concert-tickets">
<div class="showcase_image" data-image="cheap-concert-tickets-medium.jpg"></div>
<div class="showcase_text">Our page for concert tickets ranked high in the search results, but was converting poorly. The solution: Keep everything that Gooogle loved about it (the content, the links, etc.), but create a better landing page experience for new visitors and optimize for conversions. The latest version allows you to filter touring artists by category and a section for finding upcoming concerts in your area. Increased engagement means that the pages now rank even better. See a <a href="images/portfolio/cheap-concert-tickets.jpg" target="_blank">screenshot</a> or view the <a href="http://www.tickpick.com/cheap-concert-tickets/" target="_blank">live version</a>.</div>
</div>
<div class="portfolio_showcase" data-select="nfl-giveaway-ad">
<div class="showcase_image" data-image="nfl-giveaway-ad.jpg"></div>
<div class="showcase_text">To promote our 2015 NFL Ticket Giveaway, I systemically A/B tested multiple audiences and ad copy to find the most effective combination. To do this, I used key psychological principles, while working within the constraints we'd been given. With in a few iterations, these ads across the board had low CPMs, high engagement, and drove nearly 10,000 signups at less than $0.55 each.</div>
</div>
<div class="portfolio_showcase" data-select="cheap-sports-tickets">
<div class="showcase_image" data-image="cheap-sports-tickets.jpg"></div>
<div class="showcase_text">Doing SEO research led to the conclusion that we should have a landing page targeting "cheap sports tickets" and related terms, but where to put it? Adding it to the site meant a greater design and technical change than we were ready for at the time (you can only add so many items to a navbar before it looks weird). Instead, we added it to the blog, where the page could gain PA from being given a prominent link in the header. Ergo, the design and copy had to fit both users who were landing there organically, and users who had clicked through to it from a blog post. The resultant design combined both landing page elements and 'category-level blog page elements' to fit the needs of these two demographics. You can see a screenshot <a href="images/portfolio/cheap-sports-tickets.jpg" target="_blank">here</a>, or take a look at the version <a href="http://www.tickpick.com/cheap-concert-tickets/" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="tailgate-menu">
<div class="showcase_image" data-image="tailgate-menu-medium.jpg"></div>
<div class="showcase_text">For one of the tailgates we hosted at Metlife Stadium, I photoshopped together a menu oultining for our customers the food and drink that would be on hand. Take a look <a href="/images/portfolio/tailgate-menu.jpg">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="app-page">
<div class="showcase_image" data-image="app-page.jpg"></div>
<div class="showcase_text">On the page that promotes our mobile app, we wanted the ability for a user on desktop to submit their phone number and receive a text with a link to download the app. I worked with the <a href="https://www.plivo.com/docs/api/" target="_blank">Plivo API</a> to handle the sending of SMS messages. You can see a screenshot of the page <a href="images/portfolio/app-page.jpg" target="_blank">here</a>, or test out the live version <a href="http://www.tickpick.com/app/" target="_blank">here</a>.</div>
</div>
<div class="portfolio_showcase" data-select="nfl-giveaway-page">
<div class="showcase_image" data-image="nfl-giveaway-page.jpg"></div>
<div class="showcase_text">The goal: Use facebook ads to acquire email addresses at low cost, and with enough information about each person that we could later market to them. After several tests, we found that promoting a ticket giveaway allowed us to drive sign ups at extremely low rates and told us what that user might interesed in going forward. The landing page was based off the landing page on the app, but I had to make use of the <a href="http://www.activecampaign.com/api/" target="_blank">ActiveCampaign API</a> on the backend to store emails. The giveaway has ended, so check out a screenshot <a href="images/portfolio/nfl-giveaway-page.jpg" target="_blank">here</a>.</div>
</div>
</div>
</div>
</div>